display「block」「inline」「inline-block」を習得するCSSのdisplayプロパティでHTMLの要素が形成するボックスを調整することができます。CSSでレイアウトを組むとき。いうよりCSSを使うときには必ず初心者の頃の、しかも初めの段階で習得しておきたいことです。私は「独学」でCSSを覚えてきたのでCSSのdisplayで指定できるプロパティの値「block」「inline」「inline-block」の習得をすっ飛ばして先に進んでいました。なんとなく使っていたので、一度まともにCSSのdisplayで指定するボックスの基本的なことを習得しておこうと思います。「block」「inline」「inline-block」の違いCSSのdisplayはボックスを指定できるCSSのdisplayを使用するとHTML要素の一つひとつのボックスをコントロールしたり、要素が形成するボックスのデザインを変更することができます。レイアウトする一つ一つのボックス表示をどんな形式にするか決めるために使うCSSのdisplayプロパティの値は大きく分けて「ブロックボックス」と「インラインボックス」の2つの種類に分けられます。ブロックボックスインラインボックスそしてHTMLにはdiv要素、p要素、span要素などの多くのタグがありますが、ほとんどの要素は「block」「inline」の値が初期値として割り当てられています。この初期値(デフォルト)で指定されているボックスの形や並び方をCSSのdisplayを指定して、それぞれのブログやサイトのレイアウトに合わせたボックスにできます。Advertisementdisplayプロパティの値にする基本の種類CSSでボックスを指定するdisplayの種類はいくつかありますが、その中でも特に基本として覚えておきたい種類が以下の3種類です。display:blockdisplay:inlinedisplay:inline-blockdisplayプロパティの値を変更することでボックスの種類を変えることができます。CSSで「display:block」を指定したHTML要素にはブロック形式のボックス「display:inline」を指定したHTML要素にはインラインボックス「display:inline-block」を指定したHTML要素にはインラインでブロック形式になったボックスを指定できます。CSSで「block」「inline」「inline-block」を一つずつどんな表示になるか確認しながら使い方を習得したいと思います。ブロックボックス作成を習得するブロックボックスは上から下へ縦方向にボックスが配置されます。これはブロックボックスの前後には改行が入るからです。ブロックボックス作成を習得するときは以下のことを理解しておくようにします。幅(width)や高さ(height)を指定できる。幅を指定しなければ親要素の幅全体に広がる上下左右のmargin、paddingを指定できるAdvertisementdisplay:blockを使ってみる実際にCSSでdisplay:blockを使ってみるとブロックボックスがどんなものか習得しやすくなります。#22c4b7;でボーダーを作り、color:#414241;で文字色を変更してmarginとpaddingで見やすくブロックボックスを構成しました。(aタグにherf属性なしにしてます)このdisplay:blockの指定の場合は、display:blockを指定した要素に幅を決めていないので画面いっぱいに広がるブロックボックスを形成します。画面いっぱいに広がらないようにするにはwidth:で値を記述し、幅を決められます。display:blockは幅(width)と高さ(height)を指定できます。先に説明したHTMLのa要素に対してのCSS、display:blockの指定の構成だと以下の画像のように親要素の幅いっぱいにブロックボックスが表示されます。次にwidth:100pxを追加して以下のようなcssにします。5px;}widthの追加により、画面いっぱいに広がって表示していたブロックボックスは横幅100pxのブロックボックスにできます。インラインボックス作成を習得するインラインボックスは左から右へ横方向にボックスが配置されます。インラインボックスはブロックボックスとは違い前後に改行は入りません。インラインボックス作成を習得する場合は以下のことを理解しておくようにします。基本的には幅(width)と高さ(height)を指定できない上下のmarginを指定できない実際にインラインボックスをCSSで指定するときは、インランボックスにする要素にdisplay:inlaineを使います。display:inlineを使ってみるdisplay:inlineも実際に書いて使ってみると、インラインボックスがどんなものか習得しやすくなります。20px;}サンプルとしてHTMLの<p></p>のブロックの中の<a>タグ(herf属性なし)にdisplay:inlineを指定してボーダーと背景色、paddingは20pxをつけたボックスにしておきます。このinline指定したa要素はインラインボックスを形成します。<a>タグは、もともとがインラインなのでdisplay:inlineで指定しなくてもインラインボックスを形成できます。サンプルのように<p></p>要素のブロックの中にインラインボックスはできますが、インラインボックスの中にブロックボックスは小さい箱に大きな箱を詰め込むようなものなので表示が崩れてしまいます。inlineの表示CSSでdisplay:inlineでインラインボックスにした表示を2パターンほど見てみたいと思います。2.5rem;}上記のHTMLとCSSがdivのボックスを作った中にh2で見出し、文章をpでマークアップした要素にそれぞれ違う背景色をつけたコードです。h2とpをまとめてCSSでdisplay:inlineにした表示の画像です。10px;}Advertisementもう一つのインラインパターンは<a>要素を3つ作ってインラインにした表示です。改行が入らないので3つのa要素はインラインで横並びになります。ブログやホームページでよく見るメニューのようになりました。2つの表示をまとめると以下のような感じになります。inlineの表示を2パターン見てみましたが、インラインボックスに共通してるのはボックスの高さと幅が基本的には効きません。サンプルのa要素3つインラインボックスのCSSにwidthとheightをそれぞれ10pxで指定したとしても変化なしです。インラインボックスに幅と高さ調整も指定したい場合にはインラインブロックを使います。インラインブロックボックス作成を習得するインラインブロックボックスはインラインボックスと同じように横方向に改行されずに配置されます。ブロックボックスのように幅と高さ、上下のmarginも指定できます。そのためインラインボックスはインラインとブロックを組み合わせた合体ボックスのようなものです、<img>で挿入した画像などはインラインブロックボックスを構成します。display:inline-blockを使ってみるインラインボックスのときと同じHTMLとCSSをサンプルとして使用します。サンプルコードは以下のHTMLとCSSです。100px;}インラインからインラインブロックになり変更したCSSはdisplayプロパティの値をinline-blockでインラインブロックに指定。追加したCSSはwidthで幅、heightで高さです。するとインラインと同じように前後のボックスと一行に繋がって表示されますが、インラインではできなかった幅と高さがインラインなのに指定ができるようになります。これはインラインとインラインブロックの違いになりますね。インラインブロックはどんな表示になるかも見てみたいと思います。inline-blockの表示CSSのinline-blockの指定とwidthとheightをつけたインラインブロックは以下の画像のように表示されます。widthを200pxにしてheightは100pxにしてみたインラインブロックボックスの表示です。上の画像を表示したCSSコードです。200px;}「block」「inline」「inline-block」の違いでは最後のまとめ的にCSSのdispalyプロパティの値「block」「inline」「inline-block」3つの違いを習得するための材料にしてください。要素の前後に改行が入らず、一行に並ぶ。幅と高さを指定できない。display「inline-block」インラインの進化版とも言える。要素の前後が改行されずにインラインを保ち、幅と高さを指定できるブロックにすることができる。投稿一覧WordPressとWeb関係のことを趣味的に学んでます。独学なので記事で間違ってることがあればご指摘ください。記事が少しでも誰かの参考になればと思います。2019.12.11CSSのfixedを使用してメニューや画像を固定するには、どのようにすればできるのか試しました。2019.10.22CSSでwidthとheightプロパティを利用するとボックスの横幅と高さを指定することができます。2020.01.21ときどき、検索して開いたサイト先で記事を読んでるとテキストの途中で分からない単語があります。WordPress.。