MENU
オンライン講座開催中
html&css講座開催中

ブロック、インライン、インラインブロックの違い変更方法

ブロック、インライン、インラインブロックの違い変更方法
目次

ブロック、インライン、インラインブロックの違いと特徴

ブロック、インライン、インラインブロックで表示形式と適用できるスタイル(CSS)が違います。

ブロック(block)とは

  1. 【特定のhtml言語】h1、h2、h3…、p、ul、ol、div……
  2. 【他の要素をブロックにする方法】CSSに「display: block; 」を書いて指定する。

特徴

  • 横幅はいっぱいに広がり、前後で改行される
  • margin、padding指定可能。
  • width、heightの指定可能。

インライン(inline)とは

  1. 【特定のhtml言語】a、img、span、br、strong、em、input、lavel、textarea……
  2. CSSに「display: inline; 」を書いて指定する。

特徴

  • 改行されず、次に来る要素は横に並ぶ。
  • width、heightは、指定できない。(指定しても変化なし)
  • margin、paddingは、左右は指定可能、上下はできない。(上下は指定しても変化なし)
  • img、input、textareaなどの一部のタグは横幅・高さや余白の設定が可能。
にゃんこ1

パディングの上下は前後の要素に余白がめり込みむにゃ。

インラインブロック(inline-block)とは

  1. 【特定のhtml言語】なし
  2. 【他の要素をブロックにする方法】CSSに「display: inline-block; 」を書いて指定する。

特徴

  • 改行はされず、次に来る要素は横に並ぶ
  • width、heightを指定可能
  • margin、paddingは、上下左右に指定可能。

CSSでスタイルの変換方法

CSSで下記のいち文を加えるだけで、スタイル変更が可能。

  • display: block; … 表示形式をブロックにする
  • display: inline; … 表示形式をインラインにする
  • display: inline-block; … 表示形式をインラインブロックにする
  • display: none; … 非表示にする

HTML5での要素分類の廃止

HTML5ではブロックレベル要素とインライン要素の分類は無くなりました。

にゃんこ2

以前は、ブロックレベル要素とインライン要素と言われてたにゃ。

HTML5では、「コンテンツ・モデル」になり、というコンテンツの種類が定義されています。

コンテンツモデル

  • メタデータ
  • フロー
  • セクション
  • ヘッディング
  • フレージング
  • エンベッディッド
  • インタラクティブ
にゃんこ1

「コンテンツ・モデル」の詳しい説明は、後日するにゃ。

まとめ

CSSの指定をする上で注意する点

blockinlineinline-block
改行改行される改行されない改行されない
width、height編集可能編集できない編集可能
margin、padding編集可能左右は編集可能
上下はできない
編集可能
htmlh1、h2…、p、ul、ol、div…a、img、span、br、em、input…なし

詳しくは講座に来てね

ブロック、インライン、インラインブロックの違い変更方法

この記事が気に入ったら
フォローしてね!

  • URLをコピーしました!
目次
閉じる