こんにちは!
UPSTARTSのSベンです!
今回は「配置」についての内容になります。
ブロック要素とインライン要素
まずは「ブロック要素」と「インライン要素」について説明します。
ブロック要素は、縦に重なって並びます。
htmlのタグで言うと、h1やpなどがブロック要素になります。
インライン要素はブロック要素とは違い、横に並びます。
下記のソースですと、h1とpは縦に並び、spanとaは横に並びます。
ではこちらのhtmlにスタイルをあてて、配置を調整していきましょう。
1 2 3 4 5 6 |
<body> <h1>三大将</h1> <p>赤犬</p> <span>黄猿</span> <a href="">青雉</a> </body> |
display
配置を調整する際に使用するプロパティは、「display」になります。
このdisplayでいろいろと調整することができますので、ひとつずつ見ていきましょう。
inline
ブロック要素をインライン要素にするには「inline」を指定すればOKです。
今回は縦並びになっているブロック要素のh1とpを、インライン要素にしてみます。
1 2 3 |
h1, p { display: inline; } |
このように指定すると、縦に並んでいたh1とpを横並びにする事ができます。
さらにh1とpに横幅を指定してみたいと思います。
1 2 3 4 |
h1, p { display: inline; width: 150px; } |
横幅を150pxと指定していますが、このままでは横幅の指定が効かず表示が変わりません。
こういう場合はどうしたらいいかは、次の「inline-block」で説明します。
inline-block
上記のソースでは横幅を150pxと指定したのに、反映されませんでした。
こういう場合に使うのが、「inline-block」になります。
1 2 3 4 |
h1, p { display: inline-block; width: 150px; } |
inlineとしていた部分を、inline-blockにすることで
指定した横幅が反映されるようになります。
ブロック要素をインラインにしてかつ、横幅を指定したい場合は、
inline-blockを使えばOKと覚えておいてください!
block
先ほどとは逆に、インライン要素をブロック要素にしたい場合は、
「block」と指定すればOKです。
インライン要素のspanとaをブロック要素にしてみます。
1 2 3 |
span, a { display: block; } |
このようにすると、横並びになっていたspanとaがブロック要素になり、縦並びにすることができます。
none
要素の表示を消したい時は、「none」を使います。
1 2 3 |
span, a { display: none; } |
こう指定すると、spanとaが表示されなくなります。
今回は「配置」についてやっていきました。
次回は「位置」についてになります。
ではまた次回!