「inline」や「block」はボックスモデルの種類。「displayプロパティ」というもので区別される【CSS学びたて】

ボックスモデルには種類がある

こんにちは、いどはるです。

CSSにて、ボックスモデルを学びました。ボックスモデルは、文章やロゴなどの周りにできる領域のことですね。

たとえばGoogleのロゴ。 ↓ 画像の右下のオレンジ色のついた四角い箱です。

googleロゴのボックスモデル

(Chromeブラウザ、右クリック→「検証」でどんなふうに作られているかを見ることができます)

Chromeブラウザで右クリック

ボックスモデルには種類があって、代表的なのが「block」と「inline」。それぞれの特徴を記事にしています。

結論として、

  • 「block」は「」。縦に1行ずつ並べられる
  • 「inline」は「文中に配置」。左に詰められる

そして、要素(タグのかたまり)ごとに初期値が決まっています。

要素(タグのかたまり)というのは、「<>〜</>まで」。

<p>段落の内容が書いてあります。</p>

↑ のpタグなら、要素(タグのかたまり)は「<p>〜</p>まで」ですね(閉じタグ</>の無い要素もあります)。

h1、p、div、sectionなどは、「block」が初期値。

a、img、strong、br、spanなどは、「inline」が初期値。

記事内でも書きますが、だいたいの要素は、「block」か「inline」に分類される。

また、「displayプロパティ」の値によって、要素(タグのかたまり)を表示するボックスモデルを変えることができます。

宣言の左側をプロパティ、右側を値という

プロパティは、{  } の中の左側です。「display: block;」や「display: inline;」と変えることで設定を変更します。

以下で説明していきます。

なお、本記事はドットインストールCSS基礎文法入門#21を学習した内容です。また、テキストエディタはAtomを使用しています。

AtomというエディターとGoogle Chromeを使うことで、HTMLやCSSの文書を作成することができます(参考:【入門】プログラミング(HTML)の学習環境を作る。無料Google chromeなどでカンタンHTML/CSSの学習環境を整えよう [Windows編]HTML/CSSの学習環境を整えよう [macOS編])。

ボックスモデルの「block」と「inline」

ボックスモデルで、まず押さえておきたいのは「block」と「inline」。

  • 「block」は「」。縦に1行ずつ並べられる
  • 「inline」は「文中に配置」。左に詰められる

という特徴があります。Atomエディターで作った内容を、右クリック「検証」で見てみましょう。

p要素を作って、Chromeに表示させました。P要素なので、CSSには何も書き込んでいないけど、「display: block;」と表示されています。初期値が決まっているんですね。

Chromeに表示させたコンテンツは、「行」で構成されて、縦に並んでいる。

初期値はdisplay-block

今度は、displayプロパティの値を変えてみましょう(プロパティは左のやつ。値は右のやつですね)。

宣言の左側をプロパティ、右側を値という

CSSにinlineを表示。右クリック「検証」とすると、

p {
display: inline;
}

と表示され、display: inline;はdisplay: inline;となり、消される。テキストの表示も行ボックスの中で、左づめで並ぶことになります。

displayをinlineにして表示

このようにdisplay: block;が初期値のものを、display: inline;に変更することができます。

要素(タグのかたまり)ごとに決まっているdisplayプロパティの初期値

冒頭にも書きましたが、要素(タグのかたまり)ごとに初期値が決まっています。

h1、p、div、sectionなどは、「block」が初期値。

a、img、strong、br、spanなどは、「inline」が初期値。

となっています。だいたいの要素は、「block」か「inline」に分類される。

blockには、widthとheightが設定できるが、inlineには設定できない

widthやheightはblockには設定できます。しかし、inlineには設定できません。

inlineが初期値の要素は、widthやheightを設定したい場合どうしたらいいでしょう。

その場合は、「display: inline-block;」を使います。

p {
display: inline-block;
width: 100px;
}

こうすると、widthは反映されます。

なお、非表示にすることもできて「none」を使うと、画面上からp要素のコンテンツが見えなくなります。

p {
display: none;
width: 100px;
}

このようにdisplayプロパティはいろいろな変更方法があります。

結論として、CSSを学びたてであれば「inline」や「block」はボックスモデルの種類と知っておくと分かりやすいです。

そして、「displayプロパティ」というもので変更できるということです。

ドットインストールCSS基礎文法入門#21も確認してみてください。以上となります。参考にしていただければ幸いです。では!