【STEP3】線で記事を囲む、余白の調整をする

今回の学習内容

前回は背景の色を、ヘッダー、記事、フッターと色分けする方法を学んだ。

今回は、それらの要素を色のついた線で囲む方法を学ぶ。きちんと線で囲むことによって、サイト全体の印象がきりっとしまったものになるとも思うし、はてなブログのカスタマイズでも使えそうなテクニックのように感じた。

使用テキストは変わらず、以下のもののチャプター2を学んでいる。

HTML5&CSS3レッスンブック

HTML5&CSS3レッスンブック

 

線で記事を囲む方法

スタイルシートに書き込みを行う。記事のスタイルを決めている行に、border:と記して線の種類(ここではsolid)を指定し、線の太さ、色の値を打つ。

太字にしたところが、今回足したところである。

 /*記事*/
article {background-color: 記事背景の色の値;
width: 幅の広さ;
margin-left: auto;
margin-right: auto;
border: solid 線の太さの数値px 色の値}

今回は線の要素を「border: solid 線の太さの数値px 色の値」と全て横並びにしているが、以下のように個別に設定することもできる。

border-style: 線の種類

boder-width: 数値px

border-color: 色の値

こちらの方がぱっと見たとき、混乱しないが、少し手間のかかる記述の仕方ではある。

線の種類

線の種類は、スタンダードなものでは以下のように変えられるらしい。 

none(非表示)

hidden(非表示)

dotted(点線)

dashed(破線)

solid(実線/今回選んだ最もスタンダードな線)

double(二重線)

線の太さは、ピクセルで数値化することもできるし、

thin(細い線)

medium(中太の線)

thick(太い線)

と指定することもできるらしい。覚えておきたい。

線のデザインを上下左右個別に指定する

線のデザインを上下左右個別に指定することもできる。それぞれ

  • border-top(上の線)
  • border-right(右の線)
  • border-left(左の線)
  • boder-bottom(下の線)

となる。この知識があるだけで、はてなブログの見出しカスタマイズも、自由にできるようになるだろう。

例えば、このような見出し(スマホ閲覧限定)

上の見出しは、はてなでは以下のような記述になっている。

 <style type="text/css">
.entry-content h5{
color: #444444;
padding: 10px 15px;
border-left: 10px solid #666666 ;
border-bottom: 1px solid #666666 ;
}
</style>

この見出しは、左側の線と下側の線を利用して、小見出し(h5)を囲むという構造になっているとわかった。

下のようなブログでいくらでもサンプルがあるので、わざわざデザインする必要もないかもしれないが、原理を知っておくと、もっとスムーズに調整ができるようになるなと感じた。

www.yukihy.com

ちなみにこの上下右左の指定は、余白(margin)でも同じである。

余白の調整

記事を実線で囲んだ後、余白の調整について学ぶ項目に入った。

枠線の内側の余白の入れ方

線で記事を囲む。このとき線の外側の余白は「margin」なのに対し、線の内側の余白は「padding」という記述になる。頻繁に使うことになりそうなので、この二つの余白の使い方をきちんと覚えておきたい。ちなみに内側の余白(padding)も、線や余白と同様に、上下左右を指定することができる。

思い通りの幅にする調整方法

実線や余白などを色々指定した結果、最初に自分が指定した幅(width)に余白が足されて、記事の面積がどんどんと大きくなってしまう。

これを避けるために「box-sizing: border-box」と打つ。余白(margin、padding)や線の太さを入れたうえで、自分の指定した幅(width)の記事になるように調整してくれるそうだ。

ただし一部のブラウザでは対応していないということもある、新しい記述のようだ。そのため、「-webkit-」「-moz-」といった追加記述をした方がいいらしい。

/*記事*/
article {background-color: 記事背景の色の値;
width: 900px;
margin-left: auto;
margin-right: auto;
border:solid 1px 線の色の値;

-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;}

こうすることで、余白(margin)込みで、指定した幅(width)900pxという計算になる。

補足:デフォルトの余白を消すという発想

<h1>や<p>で指定した要素には、デフォルトスタイルシートの余白が上下に組み込まれている。

ここにさらに自分で余白を足したいときは、一旦

h1 {margin-top: 0px;

      margin-bottom:0px}

といれて全部デフォルトの設定を消し、自分の好みの余白をいれるという発想もあるらしい。必要なことがあるかもしれないので、覚えておく。

補足:上下の余白(margin)は重ね合わさってる

CSSのルールで、上下になっている余白(margin)は重ね合わさっていると考えるらしい。つまり10の余白がある真下に、20の余白があった場合、上下が重なって、大きい方の20の余白があると考える。覚えておく。

今日のまとめ

線で記事を囲む方法は「border: 線の種類  太さ  線の色の値」と覚えておく。線の上下左右を指定することもできるし、線の種類も変えられる。

枠線を境に外側の余白は「margin」だが、内側の余白は「padding」となる。ちなみにpaddingというのは「詰め物」という意味らしい。

余白の存在を考慮したうえで、幅の大きさにも留意する。「box-sizing: border-box」を使うことで、余白込みで指定した通りの幅(width)になる。

<h1>や<p>にはブラウザのデフォルト余白が挿入されている。一旦それらを0にしないと思い通りのデザインにならないこともある。なお、重なってる余白(margin)は、小さいほうの余白が大きい値の余白に重なって、なかったことになっていると考えればいい。

サイトデザインでは、余白をきれいにバランスよくとることが非常に重要なので、ただ余白(margin)を指定するだけでなく、細かい調整の仕方をきちんと覚えておく。

次回も引き続き、以下のテキストを進めていく。

HTML5&CSS3レッスンブック

HTML5&CSS3レッスンブック