HTML の ブロック を インラインブロック に 変更 する

目的

• HTMLファイルの要素を変更する方法をまとめる。

押さえるポイント

• HTMLの要素は3種類存在する。
  1. ブロック要素
     width,heightの設定→〇
     margin,paddingの設定→〇
     配置→縦並び
     
  2. インライン要素
     width,heightの設定→×
     margin,paddingの設定→左右のみ〇
     配置→横並び
     
  3. インラインブロック要素
     width,heightの設定→〇
     margin,paddingの設定→〇
     配置→横並び
• インライン要素にwidth.heightを設定したいときは要素を変更する。
• 要素の変更にはdisplayプロパティを使用する。　

書き方の例

• 下記にCSSファイルの内容を記載する。

要素の名前かクラス名 {
  display: 変更したい要素;
}

より具体的な例(blockからinline-block)

• h1要素をinline-blockに設定する。
• 下記にHTMLファイルの内容を記載する。

<h1>おはようございます。</h1>

• 下記にCSSファイルの内容を記載する。

h1 {
  display: inline-brock;
}

より具体的な例(inlineからblock)

• p要素をblockに設定する。
• 下記にHTMLファイルの内容を記載する。

<p>おはようございます。</p>

• 下記にCSSファイルの内容を記載する。

h1 {
  display: brock;
}