• Skip to primary navigation
  • Skip to content
  • Skip to primary sidebar

Code School

プログラミング初心者向け応援メディア

  • Home
  • Python3
  • Django
  • Ruby
  • Ruby on Rails
  • CSS
  • JavaScript
  • Swift
  • Git
  • Linux
  • How to Study
You are here: Home / Web制作 / CSS / [HTML]インライン要素とブロックレベル要素の違いあれこれ

[HTML]インライン要素とブロックレベル要素の違いあれこれ

2018年4月18日 By Code School編集部

Webサイト制作を行なっていると高確率で聞かれる単語「インライン要素」「ブロックレベル要素」

どちらもWebサイト制作には欠かせない知識の一つですが、うろ覚えの人もいるかもしれません。

今回は、基本的な事柄のインライン要素とブロック要素の違いについて紹介していきます。

インライン要素とは

htmlではタグを使いWebサイトを構成しますが、このタグは大きく分けてインライン要素とブロックレベル要素に分けられます。

その中でもインライン要素とは、以下のようなタグを指します。(たくさんありますが、よく使うものだけピックアップします) その他のタグはこちらで確認できます。

https://developer.mozilla.org/ja/docs/Web/HTML/Inline_elements

  • <a>
  • <b>
  • <br>
  • <img>
  • <span>
  • <strong>

インライン要素は続けて記述しても、横並びになるという特徴を持っています。

例えば画像を挿入するimgタグはそのまま記述すれば、画像は横並びで表示されます。

 

ブロックレベル要素とは

次にブロックレベル要素を見ていきましょう。

ブロックレベル要素は以下のようなタグが挙げられます。(たくさんありますが、よく使うものだけピックアップします) その他のタグはこちらで確認できます。

https://developer.mozilla.org/ja/docs/Web/HTML/Block-level_elements

  • <div>
  • <header>
  • <footer>
  • <h1,2,3..>
  • <hr>
  • <ul>
  • <li>
  • <nav>
  • <p>

ブロックレベル要素の特徴としては横並びにならない、つまり続けて記述しても上から下に配置されるという特徴を持っています。

例えば、見出しで使われるhタグは続けて書いても横並びになりませんよね。

 

配置が思い通りにいかないのは要素の認識違い

インライン要素が横並び、ブロックレベル要素が縦に並ぶという基本的な認識さえ抑えておけば大丈夫のような気もするが、実際はそうはいかない。

インライン要素とブロックレベル要素ではmarginやheightなどの「効き」が異なるからです。

 

インライン要素

  • margin:左右は効かない。上下は効く
  • padding:効く
  • width:効かない
  • height:効かない

 

ブロックレベル要素

  • margin:効く
  • padding:効く
  • width:効く
  • height:効く

 

ブロックレベル要素はmarginなどで余白を指定したり、widthで幅などを指定できますが、インライン要素は効かないものもあるのでこの点だけ注意しましょう。

 

インライン要素をブロックレベル化するdisplayプロパティ

インライン要素は使いづらいような気もしますが、インライン要素をブロックレベル要素のように扱うことのできるプロパティも存在します。

displayというもので、以下の4つの値を設定することができます。

  • display: inline
  • display: block
  • display: inlin-block
  • display: none

例えばインライン要素に対して、display:blockを使えばその要素はブロックレベルのように扱うことができます。

Filed Under: CSS, HTML, Web制作

Primary Sidebar

Categories

  • Git (6)
    • Github (2)
  • iOSアプリ開発 (48)
    • Swift (30)
    • Xcode (13)
  • JavaScript (7)
  • Linux (8)
  • nginx (3)
  • Python3 (74)
    • Django (26)
    • Pycharm (5)
  • Ruby (17)
    • Ruby on Rails (6)
  • Scratch (1)
  • SQL (5)
    • MySQL/MariaDB (4)
    • SQLite3 (1)
  • Unity (2)
  • Web制作 (49)
    • bootstrap4 (1)
    • Brackets (5)
    • CSS (35)
    • HTML (4)
  • プログミラングコラム (12)
  • プログラミングスクール (93)
    • 子供向けプログラミングスクール (58)
    • 社会人向けプログラミングスクール (41)
  • プログラミング学習方法 (8)
  • 開発ツール (20)
    • Atom (1)
    • Mac (1)
    • Sketch (16)
[Django]mysqlでmigrateした時にエラーが発生した場合の対処方法

[Django]mysqlでmigrateした時にエラーが発生した場合の対処方法

私的命名規則メモ

私的命名規則メモ

[JavaScript]replaceで文字列の置換をする

[JavaScript]replaceで文字列の置換をする

[JavaScript]addEventListenerを使う

[JavaScript]addEventListenerを使う

[JavaScript]focusとは?使い方を紹介

[JavaScript]focusとは?使い方を紹介

[JavaScript]classListを使って楽にクラスを操作する

[JavaScript]classListを使って楽にクラスを操作する

[JavaScript]querySelectorで要素を取得する、書き換える

[JavaScript]querySelectorで要素を取得する、書き換える

[JavaScript]少ないコードのif文は三項演算子ですっきり書く

[JavaScript]少ないコードのif文は三項演算子ですっきり書く

[JavaScript]==と===の違い

[JavaScript]==と===の違い

[bootstrap]カラムの順番をPC版・スマホ版で入れ替える

[bootstrap]カラムの順番をPC版・スマホ版で入れ替える

[CSS]fontawsomeが◽︎でうまく表示されない時の確認事項

[CSS]fontawsomeが◽︎でうまく表示されない時の確認事項

[MySQL]ローカルサーバーが停止してしまった場合の復活方法

[MySQL]ローカルサーバーが停止してしまった場合の復活方法

[Django]templatesで掛け算の処理をしたい→ないのでフィルタを作って対応

[Django]templatesで掛け算の処理をしたい→ないのでフィルタを作って対応

[Python]super()で親クラスのメソッドを呼び出す

[Python]super()で親クラスのメソッドを呼び出す

[Django]IntegerFieldで最小値、最大値を決める

[Django]IntegerFieldで最小値、最大値を決める