[CSS]displayを使ってブロック要素とインライン要素を変更する

HTMLの要素には色々なものがありますが、それぞれブロック要素とインライン要素の特性を持っています。例えば、pタグはブロック要素、aタグはインライン要素になります。ブロック要素は前後に改行が入りますが、インライン要素には改行が入りません。

ブロック要素をインライン要素に変更したり、インライン要素をブロック要素に変更したい場面もあるかと思います。そんな時は、CSSのdisplayプロパティを使って変更することができます。

displayプロパティを指定してみる

例えば、インライン要素であるaタグをブロック要素に変更する場合、以下のように記述します。

a{
display:block;
}

a要素がブロック要素に変更され、前後に改行が入ります。

また、逆にブロック要素であるliをインラインにして横に並べたい場合、以下のように記述します。

li{
display:inline;
}

このように記述することで、縦に並んでいたリストが、横並びになります。
さらに、displayプロパティの値にはnoneも指定することができます。noneを指定するとセレクタが非表示になります。

div{
display:none;
}

displayにnoneを指定すると、div要素がまるごと消えます。noneは、一時的に非表示にしておいて、何らかのアクションを起こした時に表示させたい場合等に使えます。

実は、displayプロパティには、この他にも指定できる値がありますが、あまり使わないので最初はblock/inline/noneを覚えておけばOKだと思います。慣れてきて興味がある方は調べてみてください。