designWeb全般webmasterデザインメモTOPコーディングCSS【CSS】displayプロパティの基本的な使い方displayとは、Webページを構築していく際に各要素をどのような形式で表示させるのかを指定するプロパティです。HTMLには、div要素、p要素、span要素など様々なタグがありますが、ほとんどの要素は「block」または「inline」の値が初期値として割り当てられています。displayが取れる値displayプロパティを指定する際に取ることができる値には以下のようなものがあります。blockinlineinline-blocknoneflextabletable-cellgridこれ以外にもまだ色々とありますが、ここでは省略します。その中でも使用されることが多いであろう「block」「inline」「inline-block」「none」について見ていきます。block、inline、inline-blockの違いdisplayプロパティにあるblock、inline、inline-blockの大まかな違いには表示のされ方と指定できる要素にあります。block要素についてblock要素は縦に並んでいきます。h1~h6の見出しタグやpの段落タグなどがblock要素になります。幅や高さ、余白の指定をすることができます。text-alignを使った左右、中央の表示位置を指定することはできません。(もちろん、表示させる方法はありますが、ここでは省略します。)inline要素についてinline要素は横に並んでいきます。aタグやimgタグなどがinline要素になります。幅や高さは指定できません。余白は左右は指定できますが、上下は指定できません。text-alignを使った左右、中央の表示位置を指定することができます。inline-block要素についてinline-block要素は横に並んでいきます。幅や高さの指定ができ、余白も上下左右の指定をすることができます。text-alignを使った左右、中央の表示位置を指定することもできます。inline要素とblock要素を混ぜ合わせた感じです。要素に対して「display:none;」を指定すると要素は非表示になります。ページ上で表示になっているだけで、消えているわけではないので、実際にはページを開いたときには「display:none;」とした箇所も読み込まれています。以上が、displayプロパティの基本的な使い方となります。状況に応じて色々と使い分けられると思います。リストを横並びにして画面中央に表示させたいから「inline-block」を使う、レスポンシブWebデザインで端末ごとに表示させたいものと表示させたくないものがあるから「none」を使うなどが考えられます。