CSS #14 配置

 

こんにちは！
UPSTARTSのSベンです！

 

今回は「配置」についての内容になります。

 

 

 

ブロック要素とインライン要素

まずは「ブロック要素」と「インライン要素」について説明します。

 

ブロック要素は、縦に重なって並びます。

htmlのタグで言うと、h1やpなどがブロック要素になります。

 

 

インライン要素はブロック要素とは違い、横に並びます。

 

 

下記のソースですと、h1とpは縦に並び、spanとaは横に並びます。

ではこちらのhtmlにスタイルをあてて、配置を調整していきましょう。

 

 

 

display

配置を調整する際に使用するプロパティは、「display」になります。

このdisplayでいろいろと調整することができますので、ひとつずつ見ていきましょう。

 

 

inline

 

ブロック要素をインライン要素にするには「inline」を指定すればOKです。

 

今回は縦並びになっているブロック要素のh1とpを、インライン要素にしてみます。

 

このように指定すると、縦に並んでいたh1とpを横並びにする事ができます。

 

 

さらにh1とpに横幅を指定してみたいと思います。

 

横幅を150pxと指定していますが、このままでは横幅の指定が効かず表示が変わりません。

こういう場合はどうしたらいいかは、次の「inline-block」で説明します。

 

 

 

inline-block

 

上記のソースでは横幅を150pxと指定したのに、反映されませんでした。

こういう場合に使うのが、「inline-block」になります。

 

 

inlineとしていた部分を、inline-blockにすることで
指定した横幅が反映されるようになります。

 

ブロック要素をインラインにしてかつ、横幅を指定したい場合は、
inline-blockを使えばOKと覚えておいてください！

 

 

 

block

 

先ほどとは逆に、インライン要素をブロック要素にしたい場合は、
「block」と指定すればOKです。

 

インライン要素のspanとaをブロック要素にしてみます。

 

このようにすると、横並びになっていたspanとaがブロック要素になり、縦並びにすることができます。

 

 

 

none

要素の表示を消したい時は、「none」を使います。

 

こう指定すると、spanとaが表示されなくなります。

 

 

 

 

 

 

 

 

 

今回は「配置」についてやっていきました。

次回は「位置」についてになります。

 

ではまた次回！