cssのdisplayについてまとめた

css

広告

　cssでのレイアウトを行う機会が増えてきて、displayの使い方がよくわかっておらず、思ったとおりのレイアウトを作ることができずにいました。自分の思った配置やデザインをしたいと思い少しでも、スムーズにできるようにと言うことで、今回displayについて調べてみました。

displayとは

CSSプロパティの1つであるdisplayは,CSSでのレイアウトを作る上で最も重要なプロパティです。block,contents,flex,inline,inlineboxと様々な値が存在していました。使い方や使い分けを理解する必要がありそうです。

displayの主要な値

  • block
    <p>,<div>,<ul>,<h1~h6>などのタグを使った時のデフォルトの値はblockになる。
  • inline
    <a>,<span>などのタグを使った時のデフォルトの値はinlineになる。
  • inline-block
  • none

displayプロパティのblock

  • 要素が横いっぱいに広がり配置される。また、前後に改行が入る
  • widthやheightを使うことにより、配置される領域を設定することができる。
  • 余白の指定に関しては、上下左右marginとpaddingを指定することができる。
  • tex-alignは指定ができない
  • vertical-alignは指定することができない

displayプロパティのinline

  • 要素が横並びで配置される。
  • widthやheightによって幅と高さの指定が不可能（文字の長さや大きさで決定される）
  • 左右に関してpadding,marginの指定が可能
  • text-alignとvertical-alignの指定が可能

inline-block

  • 横に並ぶ
  • 要素のheight,widthを使うことにより配置される領域を設定することができる。
  • 上下左右のmargin,paddingを自由にカスタマイズすることができる。
  • text-alignとvertical-alignの指定が可能

text-alignとは

text-alignという用語が出てきたので、調べてみた。
text-alignはブロックコンテナ内の行の揃え位置・均等割付を指定することができる。

値

start :インラインレベルのコンテンツおいて、ラインボックスの始端に揃えられる。
end：インラインレベルのコンテンツにおいて、ラインボックスの終端に揃えられる。

inlineとblockの変更

<div>タグの場合初期値は、blockに<a>タグの場合、初期値はinlineになることがわかった。cssでプロパティと値を指定することによって強制的に値を変更することができる。この事によって、<div>タグを使い、inlineに設定することができる。

displayプロパティのnoneについて

この値を指定された要素は、ブラウザ上で非表示になる。

まとめ

ここまで、cssのプロパティで最も重要な働きをする、displayプロパティについて調べてきました。cssを使っていてmarginが効かないことや適切な配置をすることができないなど、様々な問題が生じていました。今後、displayのそれぞれの値についてわかったので、今まで起こった問題の原因と解消がスムーズに行くようになれば良いなと思っております。これからも、cssのプロパティを使っていてよくわからないことがあった時には、積極的に調べて理解できるようになっていきたいです。

広告

css