WEB上のコンテンツの多くはHTMLとCSSで記述されています。
最近はWordpressなどのCMSを利用して、HTML/CSSの記述をしなくとも、コンテンツを作成できるようになってきています。
ですが、弊社で実施しているセミナー参加者の方の声でよく
- WordPressの投稿画面記事を作れるけれど、なかなか思い通りの見た目にできない
- ちょっと文字のサイズを変えたいけど、どう設定したら良いかわからない
- WEBを参考に記述をかえてみたけど、表示がおかしくなった。けれど、基本的なHTMLがわからないので修正できない
などHTML/CSSの部分のご質問をいただきます。
そこで今回は、ブログの投稿等でよく利用する範囲のHTMLをご紹介します。
CSSやWordpressの記事はこちら
HTMLって？ざっくりとした基本内容
Google ChromeやMicrosoft EdgeなどのWEBブラウザと言われるソフトを利用してWEBページを閲覧しますが、閲覧できるページはHTML（HyperText Markup Language）という言語でかかれたものを、このWEBブラウザで私たちが見やすい形に変換されています。
下記は弊社サイトのトップページの一部の記述部分です。
このように表示されている中身の部分は、実際はHTMLで記述されています。
上記を簡単に記述すると下記のような構造になっています。
<html><!-- HTML文書の記述ということを表す開始タグ-->
<!--
head〜headの中にはタイトルやページの説明文、使用している文字コードなどの設定を記述します
（ブラウザで表示する際は見えない部分）
-->
<head>
<title>サイトタイトル</title>
<meta name="description" content="このページの説明文。検索した際、タイトルの下に表示されている説明文部分です。">
<meta charset="UTF-8">
</head>
<!--
body〜bodyの中には文章や画像を表示させる内容を記述します
（ブラウザで表示する際に見えている部分）
-->
<body>
Wordpressの投稿や固定ページに記述した内容はこの部分に表示されます。
</body>
</html><!-- HTML文書の記述ということを表す終了タグ-->ブログ投稿でよく使うHTML
上記のサンプルコードのように、WordpressなどのCMSを利用して作成したコンテンツは、<body>〜</body>の中の一部分に読み込まれ表示されます。
基本的には、開始タグと終了タグで囲った文字が、WEBブラウザで表示されます。囲うHTMLタグによって意味が異なり、表示結果が変わってきます。
修正したい時に、おおよそどんな意味がある記述で、どの辺を編集したら良いかのあたりがつけられれば、大きく表示崩れするなどの防止ができるかと思います。
文章関連
- 段落
- <p>〜</p>
文章の一段落ごとを表します。後述するCSSの記述によっては、文字を読みやすくするために段落の後に余白を設定することもあります。 - 範囲指定
- <div>〜</div>
CSSなどで装飾したり、全体の記述の中で一つの塊としておきたい部分などを範囲指定する際に利用します。 - 改行
- <br />
段落を変えずに改行したい場合にこの記述をします。これは終了タグは必要なく単体で動作します。 - 見出し
- <h1>〜</h1>
見出しとなる部分を設定するHTMLタグです。h1からh6まで順に利用します。 - リスト
- 記号のリスト：<ul><li>〜</li></ul>
番号のリスト：<ol><li>〜</li></ol>
ulまたはolでリストを定義し、各リストの要素はliで囲って利用します。 - 太文字
- <b>〜<b>
太文字にしたい文章をこれで囲います。
表関連
- テーブル
-
<table>
<tr>
<td>〜</td>
<td>〜</td>
</tr>
</table>
talbeで表を定義し、trで横の行、tdが行の中の列を表します。複数行設定した場合は、各行の中の列（td）は同じ数にしておく必要があります。 - CSSで表をつくる
- 列の多い表など、スマートフォンで見た際に読みにくくなる場合があります。そのため、tableではなく
リンク関連
- リンクをつける
- <a href=”リンク先URL” target=”_blank”>〜</a>
このHTMLで囲った文字や画像をクリックするとhrefで指定したリンク先に飛ばすことができます。
また、targetで指定した方法によって、同じブラウザページ上（_self）で開く・別窓（_blank）で開くなどの指定ができます。
画像関連
- 画像を表示する
- <img src=”画像のアップロードされているURL” width=”横幅” height=”高さ” alt=”画像が表示されない際に表示される文字”>
width、height、altは省略しても画像の表示が可能です。また、このHTMLタグには終了タグは必要なく単体で動作します。
この他にも、実際のWEBサイトには、たくさんのHTMLコードが使用されています。さらに詳しく知りたい方は、コードの記述例と表示例などを掲載してくれているサイトもありますのでご確認ください。
下記は私もHTMLを学び始めの頃によく閲覧したサイトです。
お問い合わせ
ガリレオ アンド ヴィーナス合同会社では、Wordpressを使用したコーポレートサイトなどの構築の他、カート機能のついたECショップなどのWEBサイト制作を行っております。
また、ご自身でサイト作成をされたい方向けにセミナー等も開催しております。
詳しくはお気軽にお問い合わせください。
