HTML/CSS

(HTML/CSS)ブロックレベル要素とインライン要素を理解しよう。

こんにちはNAOです。

 

HTMLで使用する要素は主に、「ブロックレベル要素」と「インライン要素」に分類されます。この要素は理解しているようで出来ていない方が結構いますので解説していきます。

ブロックレベル要素 HTML文書を構成するひとかたまりの要素
インライン要素 文書の一部に何らかの意味づけをする要素

 

ブロックレベル要素とは

「ブロックレベル要素」とは、HTML文書を構成する基本のひとかたまりになる要素で、この要素のあとは自動的に改行されて表示されます。
たとえば見出し(hタグ)、段落(pタグ)、リスト(ulタグ)などはブロックレベル要素です。

 

インライン要素とは

 

「インライン要素」とは、ブロックレベル要素の「内容の一部」として用いられます。ブロックレベル要素内のコンテンツの一部に何らかの定義をしたり、装飾をしたりするときに用いられます。たとえばリンクを設定するタグ(aタグ)、強調するタグ(strongタグ)などがそれにあたります。空要素の改行タグ(brタグ)、画像タグ(imgタグ)もインライン要素です。インライン要素のあとは改行されず、直後のコンテンツはその末尾に続いて表示されます。

 

ブロックレベル要素とインライン要素の使い方の注意

 

ブロックレベル要素内にはブロックレベル要素・インライン要素ともに内包することができます。インライン要素は、文字データや他のインライン要素を含むことはできますが、ブロックレベル要素を内包することはできません。

 

divタグとは

 

divタグは、複数のタグをまとめてグループ化し、CSSを使って装飾を加える際の受け皿として利用するブロックレベル要素のタグです。divタグ自体は固有の意味を持ちません。

 

タグ名 内容
div 複数の要素を内包し、ひとかたまりのグループを作る際などに使用するブロックレベル要素のタグ。それ自体に固有の意味を持ったタグではありません。

 

spanタグとは

 

spanタグは、divタグと同様にCSSでの装飾を目的として、文書内の特定の要素をひとかたまりにグループ化するタグです。インライン要素である点がdivタグとの違いです。

 

タグ名 内容
span 複数の要素を内包し、ひとかたまりのグループを作る際などに使用するインラインレベル要素のタグ。それ自体に固有の意味を持ったタグではありません。

 

divタグとspanタグはどちらも意味を持たない特別なタグとして、主にCSSによる装飾のために利用されます。

 

ボックスとは

 

HTMLタグはどの要素も「ボックス」と呼ばれる四角形の領域を持っています。WEBサイトのデザインでは、このボックス領域に対してCSSでさまざまな装飾を加えていきます。

ボックスモデルとは、HTMLタグが形成するボックス形状の領域のことを指します。ブロックレベル要素は、以下の4つの領域でボックスモデルを構成しています。

●表示領域

実際にテキストや画像が表示される領域のことです。

この実表示領域の幅をwidthプロパティ、高さをheightプロパティで設定できます。

 

●内余白

表示領域を取り囲むのが内余白です。
paddingプロパティとして設定します。

 

●ボーダー

内余白を取り囲む枠線はborderプロパティで設定します。

 

●外余白

borderの外側の余白はmarginプロパティで設定します。

 

 

 

ワンポイント
インライン要素にもボックスモデルは適用できます。
ただし、インライン要素に対しては一部例外はありますが、基本的に幅(width)、高さ(height)、上下のmarginが指定できません。
 

ボックスサイズの算出

widthとheightで指定したサイズは、実際にブラウザーで表示されるサイズとは限りません。下図でわかる通り、ボックス全体の幅や高さは、widthまたはheightの値に、padding+border+marginを加えたものがブラウザー上での表示サイズになります。

 

 

 

では、CSSで以下のように記述した場合、
このボックスのブラウザー上での実際の幅と高さはどのくらいになるでしょうか。

 

幅は 300px+(15×2)px+(1×2)px = 332px
高さは 200px+(15×2)px+(1×2)px+20px = 252px

となります。

図解するとそれほど難しいことはありませんが、
左右の余白(padding・margin)やborderが設定されている場合は、
値を2倍したサイズが加わる点を注意してください。

 

まだ少し難しいかもですが少しでも参考になればと思います。

ありがとうございました。

  • この記事を書いた人
NAO

NAO

NAOです。 DTPデザイナー、ワードプレスを愛するWEBデザイナー// 世の中のお得な情報、DTP、WEB、ブログに関して発信してまいります。 「使用ソフト」Illustrator Photoshop DreamWEAVER「使用プログラミング」HTML/CSS/ワードプレス/Jquery/PHP 「企業実績」販売促進に関係するアイテム作成 実績多数 「個人実績」 ココナラ 名刺作成・ロゴ作成 400件以上 広告 50件以上 販売実績

-HTML/CSS

© 2024 TSUTAERU BLOG