CSSの基礎講座・ボックスレイアウトとボーダーを使ったデザイン

 
box-raiout
目次

1.ブロック要素とインライン要素
2.ボックスのサイズ
3.ボーダーとボックスサイズ

CSSでレイアウトするときには、ブロック要素とインライン要素の概念を理解して、適切に使い分けないといけません。

逆に、この組み合わせがうまくできないことにはWEBデザインなんてできませんね。

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

HTMLに定義されている要素のうち、ほとんどがインライン要素とボックス要素に大別される。

文字どおり、ブロック要素は箱のような、インライン要素は行のような働きを定義されていて、文中にはインライン要素を使い、その装飾や外枠にはブロック要素を使用する。

この二つの要素には決定的な違いがある。

インライン要素

p,h1~h6(見出し),ul,ol,dl,table,hr,div,form,blockquoteなど

インライン要素

img,a,strong,br,spanなど

ブロック要素は高さを指定することができ、自動的に要素の終わりには改行される。

インライン要素は、高さを自由に設定できず、自動的に文章内部へ流れ込むのだ。

1.1ボックス要素のマージン・ボーダー・パディング

847085979ceea334cbc1332987bc0c29 500x375 CSSの基礎講座・ボックスレイアウトとボーダーを使ったデザイン

ブロック要素は

  • 内側の余白(パディング)
  • コンテンツ
  • ボーダー
  • 外側の余白(マージン)

でできている。

ブロック要素の高さを指定した場合、通常はボーダーの内側のサイズが基準となる。

ただ、普通に高さを指定すると、ボーダーやマージンのサイズがはみ出てしまうので、レイアウトがしにくいことがあります。

そのときは、box-sizingプロパティを使うと、マージンも含めてサイジングできます。

box-sizing:border-box;

1.2インライン要素の書式

インライン要素は、ブロック要素の文中の一部分にだけ、装飾や意味づけを行う書式であります。

あくまでインライン要素は行の一部として扱われるので、要素の前後には改行が入りません

また、親の要素に対して広がりを持たないため、サイズとマージンを指定することはできません

ただ、img,textarea,input要素だけはマージン、パディング、サイズを指定できます。

デモ

<p style="display: inline; background-color: #3498db;">インライン要素</p>
<p style="display: inline; background-color: #f1c40f;">インライン要素</p>

インライン要素

インライン要素

上のようにインライン要素は改行されず、文字の幅と高さしかありません。

1.3インライン要素のブロック化

ただ、インライン要素であってもブロック要素のように幅や高さを指定したいときは山ほどあります。

そういう時は、インライン要素をブロック化することで、ブロック要素のように扱うことができます。

デモ

<p style="display: block; ;background-color: #3498db; width: 200px; height: 200px;">
インライン要素のブロック化
</p>

インライン要素のブロック化

pタグは通常はインライン要素ですが、display:blockにすることによって、高さや幅を指定することができます。

aタグをブロック化して、リンクのクリッカブルエリアを親要素いっぱいに広げることで、使いやすいUIを実現できたりします。

2.ボックスのサイズ

CSSでのレイアウトでは、ボックスの概念が重要となる。すべての要素はボックスという領域を持っていて、これをうまく配置することできれいなwebデザインが実現する。

基本的なボックスのレイアウトをしっかりと押さえておきましょう。

2.1min-height,height,max-height

ボックスの幅、高さの設定には、通常三種類の方法がある。

min-height,height,max-heightとmin-width,width,max-widthである。

もっともつかわれるのは、heightとwidthで、普通にpxやemなどの単位を用いて大きさを指定します。

max-とmin-は文字通り、幅や高さの最大値や最小値を指定できます。

中に含まれる要素の大きさがmax-で指定されたサイズより大きくても、max-のサイズを超えることはありません。

また、中に含まれる要素の大きさがmin-で指定されたサイズより小さくても、min-のサイズを下回ることはありません。

デモ

<div style="background-color:#3498db;max-height:100px;width:200px">
<p>max-height=100px max-height=100px max-height=100px max-height=100px max-height=100px </p>
</div>

max-height=100px max-height=100px max-height=100px max-height=100px max-height=100px

<div style="background-color:#3498db;min-height:200px;width:200px">
<p>min-height=200px min-height=200px min-height=200px min-height=200px min-height=200px </p>
</div>

min-height=200px min-height=200px min-height=200px min-height=200px min-height=200px

2.2overflowによるはみ出した要素の処理

ブロック要素の中に既述したインライン要素が大きすぎて、親要素からはみ出ることがあります。

その時に、はみ出た分の要素を親要素の中できっちりおさめたり、はみ出た文をカットしたりと処理を決めるのが、overflowです。

overgflowプロパティには三種類あります。

  • visible
  • はみ出した要素が親要素からはみ出して表示されます。初期値はこのvisibleで、ほかの値を指定しない場合これになります。

  • scroll
  • はみ出した要素が親要素の中に納まり、入りきらない内容はスクロールして見れるようになります。

  • hidden
  • はみ出した要素は、親要素のサイズで切り抜かれ、はみ出た分は表示されません。

  • auto
  • ブラウザによって処理が異なります。あまり使われません。

デモ

  • css
.visible {color:#000;background-color:#3498db;width:200px; height:60px; overflow:visible;}
.scroll {color:#000;background-color:#3498db;width:200px; height:60px; overflow:scroll;}
.hidden {color:#000;background-color:#3498db;width:200px; height:60px; overflow:hidden;}
.auto {color:#000;background-color:#3498db;width:200px; height:60px; overflow:auto;}
  • html
<p class="visible">
<strong>visible</strong><br>はみ出した要素が親要素からはみ出して表示されます。初期値はこのvisibleで、ほかの値を指定しない場合これになります。
</p>
<p class="scroll">
<strong>scroll</strong><br>はみ出した要素が親要素の中に納まり、入りきらない内容はスクロールして見れるようになります。
</p>
<p class="hidden">
<strong>hidden</strong><br>はみ出した要素は、親要素のサイズで切り抜かれ、はみ出た分は表示されません。
</p>
<p class="auto">
<strong>auto</strong><br>ブラウザによって処理が異なります。あまり使われません。
</p>
  • 結果


visible
はみ出した要素が親要素からはみ出して表示されます。初期値はこのvisibleで、ほかの値を指定しない場合これになります。


scroll
はみ出した要素が親要素の中に納まり、入りきらない内容はスクロールして見れるようになります。


hidden
はみ出した要素は、親要素のサイズで切り抜かれ、はみ出た分は表示されません。

auto
ブラウザによって処理が異なります。あまり使われません。

3 ボーダーとボックスサイズ

ボックスの装飾に欠かせないボーダーですが、その種類は様々で、種類によってはデザインは良くも悪くもなります。
また、ボックスサイズにも影響を与えます。

3.1 ボーダーの種類と指定方法

border 500x375 CSSの基礎講座・ボックスレイアウトとボーダーを使ったデザイン

ボーダーは、太さ、種類、色の3つの要素で成り立っています。

  • 太さ

    px,em,exなど

  • 種類

    solid(実線),dashed(破線),dotted(点線),double(二重線)

  • #000,white,blue,rgb(25,25,25)など

また、枠線はボックスの上辺、右辺、左辺、下辺それぞれを設定できますし、まとめて設定することもできます。

//上辺
border-top:1px solid #000;
//右辺
border-right:1px solid #000;
//下辺
border-bottom:1px solid #000;
//左辺
border-left:1px solid #000;
//まとめて
border:1px solid #000;

You may also like...