2017
12.29

displayプロパティ( display: block; display: inline-block; )の使い方

CSS

Webデザイナーになって実際コードを書いていく様になると、ぶつかるのがdisplay:block;です。

CSSで要素にスタイルを指定しようとすると、効いてくれないことが多々あります。

そんな時に使うのが このdisplay: block; です。

このdisplay:block;どういう意味なのか、跳ばしますが
用途は何なのかと言えば、要素の配置方法の指定をする為のものです。
または、要素の表示形式を指定する為のものとも言われています。

初期値として、ブラウザによって決められていることもあるので初心者にとっては、かなり敷居が高い・・
と言えるかもしれませんが、まずは知っておかなければ、先へは進めません。

まず、displayを指定する際によく使うものとして、あげられるのが
blockとinline-blockです。

この言葉はこれまでもそしてこれからもよく出て来ますので、今のうちにきっちり理解しておきましょう。

ブロック(要素)・・・塊
インライン(要素)・・・文章の一部

ブロックレベル要素・・・見出し・段落・表など、文書を構成する基本となる要素
インラインレベル要素・・・主にブロックレベル要素の内容として用いられる要素で、文章の一部

では、ここまで理解できたら、実際に書いていきます。

 

つまり・・・、以上の記述で何をしたのか?というと
日本語(言語 : Language)HTML+CSS言語に書き換える。作業をしてあげたとも言えます♫

そうです。日本語では、ブロック要素もインライン要素も区別できないので、HTMLとCSS言語でわざわざルールを作って、display:block; & display:inline; と指定してスタイル設定をする必要があるんですね。

そういう意味ではCSSって、ルールが多すぎますよね!・・・

参考サイト:
http://www.htmq.com/htmlkihon/005.shtml

サンプルデモ

参考サイト:https://dotinstall.com/lessons/basic_css_v3/31718

 

その他のプロパティと意味

参考サイト:
http://www.htmq.com/htmlkihon/005.shtmlより

list-item:li要素のようにリスト内容が収められるブロックボックスと、リストマーカーのためのマーカーボックスを生成する
run-in:文脈に応じてブロックまたはインラインボックスのいずれかを作成する
inline-block:インラインレベルのブロックコンテナを生成する。要素全体としてはインライン要素のような表示形式だが、内部はブロックボックスで高さ・横幅などを指定できる。
table:table要素のような表示となる
inline-table:インラインレベルのテーブルとなる
table-row-group:tbody要素のような表示となる
table-header-group:thead要素のような表示となる
table-footer-group:tfoot要素のような表示となる
table-row:tr要素のような表示となる
table-column-group:colgroup要素のような表示となる
table-column:col要素のような表示となる
table-cell:td要素のような表示となる
table-caption:caption要素のような表示となる
none:要素が表示されず、レイアウトに影響を与えない
inherit:親要素の値を継承する

 

最後までお読みいただきありがとうございました。

 


コメント

  1. この記事へのコメントはありません。

  1. この記事へのトラックバックはありません。