コーディングで「ブロック？インライン？」という方に向けて簡単に解説

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

原則としてdivやpなどの各要素に対して自動的に装飾（css）が施されるため、それを活用したりリセットをかけたりしてHTMLコードを書いていきます。

「ブロック」「インライン」はそれぞれ下記のcssが設定されています。

ブロック：display:block;

インライン：display:inline;

それぞれで使う場面が変わってきますので解説していきます。

ブロック：display:block;

「ブロック要素」は使用するだけで横幅いっぱい（行全体）の領域を使用するため、下記画像の背景色が横に広がりそれぞれで次の段に表示されていることがわかります。

※上記画像はわかりやすいように背景色を足しています

インライン：display:inline;

ブロック要素とは違い、インライン要素は個々の表示領域しか横幅を取りません。

そのため、下記画像のようにインライン要素同士を並べると全て横に並んでしまいます。

※上記は「a」「button」「img」「select」「span」をそれぞれ表示しています

基本的にブロック要素でグループ化且つデザイン的な整形を施し、インライン要素で対象を表示させたり一部を改変するといった使い方がデフォルトと考えていれば概ね間違いはありません。

さらにSEOが絡んでくると使い方もまた変わってきますので、使い方を理解した後はタグの意味も覚えると良いかと思います。