HTML CSS入門 インライン要素とブロック要素

こんにちは。ドルフィンです
HTMLCSSのインライン要素、そしてブロック要素について紹介していきたいと思います。

HTML CSS入門 要素について

インライン要素とブロック要素について説明する前に
そもそも要素についての説明をさせていただきます。
要素とはタグの始まりから終わりまでの事を指します
例えば、こんなタグがあったとします。

<p>太陽</p>
<span>月</span>

ここで言うならば、2つの要素があることになります。
<p>太陽</p>が1つの要素で、<span>月</span>がもう1つの要素です。
文章の中身だけでなくタグの始まりから終わりまでと覚えてもらえればと思います

HTML CSS入門 インライン要素とは ブロック要素とは

インライン要素とは、幅が内容の部分のみの要素です。
自動的に改行されません

インライン要素の代表タグ:
spanタグ strongタグ emタグなど

ブロック要素は、幅が横いっぱいまである要素です。
インライン要素とは反対に、自動的に改行されます。

ブロック要素の代表タグ:
divタグ pタグ aタグ hタグ liタグなど

HTMLのほとんどがブロック要素

HTMLタグはインライン要素よりもブロック要素のことが多いです。
インライン要素の特徴としては、文章の一部だけに適用するものが多いです
こんなのとかこんなのとかですね。
逆にそれ以外の、文字を最初から最後まで囲んでいる物はブロック要素と思って頂ければ問題ないかと思います。

実践編 インライン要素とブロック要素 実際の使われ方と考え方

インライン要素とブロック要素があるのは分かったけれど、どのような場面で使われているかを紹介します。
僕のブログだと、2つのブロック要素が使われています。

分かりやすいように赤色で囲んでみました。

この2つのブロック要素の中に、見出しや文章のブロック要素を盛り込んでいます。

大枠のブロックを最初に設けておいて、その中にいろいろ追加していくのが実際の使われ方です。

最初に説明をしましたが、ブロック要素は端から端まで幅が横いっぱいまである要素です。

しかし画像のように大枠のブロックで囲んでいることで、その枠の幅いっぱいまでしかブロック要素は伸びません。

このようにしてレイアウト調整をおこなっているのです。

ブロック要素の幅設定の方法 widthについて

CSSにはwidthという横幅を指定できるものが存在しています
たとえば、2つのブロックのうち右側のブロックは356pxです

書き方はこんな感じです

.class{
 width:356px;
}

これで横幅を設定ができます。

このブロック要素の概念と横幅の概念を覚えておけば、ひとまずブログのような形のサイトを作る事ができます!実際の手順はまた別途記事で紹介します!

コメント

タイトルとURLをコピーしました