インライン要素とブロック要素について

ページデザインを行っていく上で、インライン要素とブロック要素を全く意識しないで(知らないまま)、CSSの設定を行っている方がいます。
当然上手くいく訳がありません。

上手くいかないから、いろんなCSS(プロパティ)を入れ、なんとか見た目を整えようとしています。
そうなると、何処に、何を設定したから上手くいったのか、そんな事も解らないまま行き当たりばったりで、取って付けたようなCSS、
無駄も多いし、可読性が落ちます。

こういったソースコードは、どんどん複雑になっていき、必要の無い設定を入れてる為、それがアダとなり、コントロールが効かなくなってきます。
結果として、デザイン調整が難しくなり、メンテナンスができなくなっていきます。

こういったエンジニアは、いずれ自分の仕事を継続する事ができなくなり、業界を辞めたり、その仕事から逃げるようになります。

どんな技術にも言える事ですが、いかに無駄を省くか、必要の無いものは徹底的に排除し、必要なものだけにする。
長年エンジニアを続けてきて思う事は、結局「シンプルイズベスト」です。

さて、話が大きく脱線したので本題ですね。
このインライン要素なのか、ブロック要素なのか、には覚え方のコツのようなものがあります。

HTMLの要素は、インライン要素ブロック要素のどちらかに属します。
もちろん最終的にはすべての要素について「どちらに属するか」は覚える必要もあり、慣れてくると感覚として解っては来るのですが、初心者の間はそれ以外にも覚える事が多く、すべては覚えきれません。
そこで最初の取っ掛かりとして、次のように覚えるといいでしょう。

まず、よく使われる次のようなインライン要素最低限覚えましょう。

a要素
リンク文字、リンク画像を作成する時に使用する
img要素
画像を表示する時に使用する
span要素
文字単位にCSSを適用する時に使用する
input要素
フォーム要素の一部として入力BOX(テキストボックス)を作成する時に使用する
small要素
著作権表記を作成する時に使用する

上記以外の要素が出てきたら、ブロック要素と思ってほぼ間違いないです。
これまでに習った、body、header、footer、h1、p、ul、li、div..などなど、これらすべてブロック要素です。

もちろん例外はありますし、冒頭で述べたように最終的にはすべてちゃんと把握する必要がありますが、不慣れな間はまず、上記5つのインライン要素を覚え、それ以外はブロック要素、と覚える事でミスが軽減できます。

前の記事

ブロックレベル要素

次の記事

センタリングの方法