前回の記事まで、ブロックレベル要素とフォーム用のタグについて解説してきました。
今回の記事では、インライン要素について解説します。
インライン要素は、ブロックレベル要素の中にある行内の一部として扱います。
「ブロックレベル要素の中に含まれるインライン要素」ということをしっかりと意識してマークアップしましょう。
ブロックレベル要素と同様に、インライン要素も数多く用意されています。
今回も、全てを解説するのではなく、覚えておくべきタグに絞って説明していきます。
インライン要素
a要素
<p>お問い合わせは、「<a href="contact.html">お問い合わせページ</a>」からお願い致します。</p>
a要素は、アンカー（anchor）を意味します。
アンカーとは、いわゆるリンクのこと<です。
自分のサイト内にリンクする場合や、外部サイトにリンクする場合に使用します。
a要素で囲んだテキストをリンク用のテキストとして定義し、そのテキストをクリックすると指定したページに移動します。
リンク先の指定
href属性でリンクするページのURLを指定します。
URLは、絶対パスか相対パスで指定します。
それぞれの指定方法は、次の記事で詳しく解説します。
別タブで開くように指定する
「target=”_blank”」を属性として記載すると、そのリンクを別タブで開きます。
外部サイトに移動する際に、リンクテキストをクリックしたら別タブで開かれた経験があるかと思います。
その時には、「target=”_blank”」が記載されていたということです。
ページ内の指定した場所に移動する方法
a要素では、移動先のページを指定することはもちろん、ページ内のどの部分に移動するかを指定することもできます。
例えば、contact.htmlというページの「contact_boxというid属性が付いたdiv要素」に移動したいとします。
そういった場合は、href属性に「contact.html#contact_box」と入力します。
パスの直後に、「#」を入力し、id名を入力すればそのidが付いた要素の部分へと移動させることができます。
img要素
<h1> <img src="images/logo.jpg" alt="ホームページ作成の指南書" width="300px" height="50px" /> </h1>
img要素は、画像を埋め込む際に利用します。
この要素は「空要素」というもので、空要素とは開始タグと閉じタグが一緒になっているタグのことです。
空要素の最後には、「閉じる」という意味の「/（スラッシュ）」を記入します。
画像の場所の指定
画像の場所は、src属性で指定します。
URLは、絶対パスか相対パスで指定します。
a要素のhref属性と間違えないようにしましょう。
画像の代替テキストの指定
画像が正常に表示できなかったり、音声読み上げが有効になっている場合は、代替テキストが使われます。
代替テキストは、alt属性で指定します。
このalt属性は、src属性と同じく必須の属性です。
忘れずに指定しましょう。
alt属性は、英数字の他に2バイト文字（日本語など）も指定できますので、分かりやすい名称を付けましょう。
「ロゴ」や「写真」といった代替テキストでは、どのような内容か分からないので、内容に沿った名称を付けることが大事です。
画像のサイズの指定
画像の横幅と縦幅を指定することが可能です。
横幅はwidth属性、縦幅はheight属性で指定します。
指定する値によって、拡大や縮小表示させることができます。
何も指定しない場合は、基本的には実寸値で表示されますが、ブラウザの種類やバージョンによって表示ブレが起きる可能性があります。
実寸値で表示する場合も、なるべく値を指定するようにしましょう。
br要素
<p>前回の記事ではフォームについて解説しました。<br /> 今回の記事からは、インライン要素の解説をしていきます。</p>
br要素は、テキストを改行する際に使用します。
img要素と同じく、こちらも「空要素」です。
p要素で文章を記載した時などに、br要素で文章を改行します。
基本的に、文章などは親のブロックレベル要素のサイズ内で折り返して表示されますが、br要素を使用することで任意の場所で改行することができます。
ソースでの改行は実際の見た目では改行されないので、ブラウザの表示上で改行したい場合は、しっかりとbr要素を挿入してください。
br要素を連続して挿入することで、上下にスペースを作るという手法はHTMLの標準の規格では推奨されていません。
なるべくbr要素ではスペースを作らず、改行という目的のみで使うよう心がけましょう。
スペースを作りたい場合は、ブロックレベル要素で区分けをしたり、CSSで見た目を変更する方法がオススメです。
em要素
<p>以下の文章は、なるべく覚えておくべき<em>大事な内容</em>です。</p>
em要素は、テキストに「強調」の意味を持たせる要素です。
「強調」の意味を持つ要素は、他にstrong要素がありますが、em要素はstrong要素よりもやや弱めの強調として扱われます。
デフォルトのスタイルでも斜体で強調されますが、CSSで変更も可能です。
strong要素
<p>以下の文章は、必ず覚えなければいけない<strong>非常に重要な内容</strong>です。</p>
strong要素は、em要素と同じく、テキストに「強調」の意味を持たせる要素です。
em要素よりも、より強い強調の表現をする場合にstrong要素を使用します。
デフォルトのスタイルでは、太字で表示されます。
em要素と同様に、CSSでデザイン変更も可能です。
削除と追加
<p>段落を意味する要素は、<del>ピー</del><ins>p</ins>要素です。</p>
del要素
del要素は、テキストに「削除」の意味を持たせる要素です。
この要素で囲まれたテキストには、打ち消し線が引かれます。
例えば、文章の内容を修正した際に、修正内容を分かりやすくするために、以前の文章をdel要素で「削除」として残しておいたりできます。
ins要素
ins要素は、テキストに「追加」の意味を持たせる要素です。
この要素で囲まれたテキストには、下線が引かれます。
例えば、del要素で削除した後にテキストを追加した場合に、ins要素で追加することができます。
span要素
<p>span要素とは、特定の意味を<span class="notice">持たない</span>要素です。</p>
span要素は、汎用的に使用する目的で用意された要素です。
この要素自体に特定の意味はありません。
この要素は、例えば「テキストの一部の色を変えたい」といった場合などに使うことができます。
span要素でテキストの一部を囲み、そのspan要素にCSSを適用したりできます。
このようにすれば、em要素やstrong要素の「強調」といった意味を持たせずに装飾することができます。
「強調」など、何かしらの意味を持たせたい場合は、別の要素を使いましょう。
HTMLの基本は終了です
お疲れ様でした！
これで大まかなインライン要素は終わりです。
ここまででHTMLの基本は全て終了です。
次回からは、HTMLについての補足を簡単に解説します。
自由自在なサイト制作を目指して
自由自在にサイトを作るには、構造部分のHTMLだけではなく、デザイン部分のCSS（カスケーディングスタイルシート）も覚えなければいけません。
しかし、HTMLを使えれば間違いなくCSSも習得可能です。
ここまで解説を読んでHTMLの構造について理解できた方は、CSSに取り掛かる前の土台が非常にしっかりしていると言えます。
これからCSSを覚える上で、デザインを乗せていく土台が綺麗な骨組みであれば、それだけ覚えるのも早く正確になるでしょう。
