[CSS] displayプロパティでボックスの表示型を指定しよう!

1.displayとは?

displayプロパティは要素がどのような表示型かを指定する際に使用します。

表示型は外縁、内縁の2つの特性から決定されます。

値の指定方法は以下の通りです。

{ display: 値; }

値の指定方法

外側

内側

リストアイテム

内部

ボックス

従来のもの

2.displayの使い方

それではdisplayの使い方をみていきましょう。

以下のようにすることでリスト要素の内容がインラインボックスのように扱えるブロックボックスとして表示されます。

ul li {
 height: 500px;
 width: 250px;
 border: 1px solid black;
 display: inline-block;
}

他にも値を設定できるのでいろいろと試してみることをオススメします!