インライン要素

現在のページは約2分で読めます。


インライン要素とは

インライン要素とは文章の一部を構成する要素です。

ブロックレベル要素では1つのまとまりを構成でしたが、インライン要素ではさらにそのブロックレベル要素の中での一部の箇所を構成します。

インライン要素の注意点

インライン要素の中にブロックレベル要素を配置するのは誤りです。また、body内にブロック要素レベルを配置せずにインライン要素だけを記述するのもNGとなります。

<p>インライン要素とは<strong>文章の一部</strong>を構成します。</p>
<em><p>インライン要素の中にブロックレベル要素の配置は誤りです。</p></em>

主なインライン要素

  • strongタグ

文章の一部を強調します。特に意味合いが強いので使い過ぎはNGです。目安として1ページ内に1~3個以内がベストかと思います。

  • emタグ

文章の一部を強調します。これも1ページ内に1~3個以内が基本かと思います。

  • bタグ

文章の一部を太くみせます。強調の意味合いはあまりないかと思います。ただフォントを太く見せたいのであればCSSで指定できますので、現在はこのタグはほとんど使われてないかと思います。

  • spanタグ

任意の範囲をインライン要素化できます。強調はせずにもただ単にフォントを太く見せたい場合などは、strongタグなどの強調要素は使わずに、spanでキーワードを囲みcssで太く指定すれば良いでしょう。

  • codeタグ

プログラムソースコードを表示するさいに使用します。HTML、CSS、PHPなどのソースコードを表示するさいに多用されています。

  • aタグ

リンクです。

  • imgタグ

画像を表示させます。

  • iframeタグ

指定したURLをインラインフレームで表示できます。Youtubeなどの動画サイトの動画を共有して埋め込みをする場合は大体これが使われています。

  • scriptタグ

主にJavaScriptを実行するさいに記述します。

まとめ

インライン要素とブロックレベル要素は似通っているのでややこしいですが、名前の意味をきちんと理解すれば混乱しにくくなります。

情報提供、雑談等