【楽しいHTMLとCSS】初めてのホームページ作製

今日は1日目、2日目にやったHTMLとCSSを利用して自分のホームページを作製しました。

1日目に学んだこと、2日目に学んだ事がどんどん現れ、最近のワンピースみたいに伏線回収されてく感じありました。ガチで。

もちろん新しい知識も得ました。

例えば、marginとpaddingについて、marginやpaddingで指定する余白によって、そのコンテンツをいい感じに上下または左右中央に持ってきたい場合は「auto」が使える事です。

○{
width:100%
margin: 0px auto 0px auto;
}

とすれば、○のコンテンツをページ幅の中央に持ってくる事ができるんですね。すごい。

また、文字に影をつける方法も学びました。

○{
text-shadow: 10px 10px 0px blue;
}

と入力すれば、

というようになります。text-shadowに入力する数字は左から順に、（下）（右）（ぼかし半径）（色）です。こんな手軽に自由自在の影つけれちゃう。

あとは、コンテンツの丸め（画像とかテキストボックスの角をとる）は

border-radius: 10% ; (50%にすると丸になる)
border-radius: 10px(左上) 10px(右上) 0px(右下) 0px(左下) ;

などでできます。

さらに、別々のコンテンツ（画像とかテキストボックス）の幅を揃えたい時とかに、width、margin、paddingのそれぞれの意味を理解している必要があるなあと感じました。例えば、同じwidthを指定してmarginで左右をauto指定して揃えたものと、margin左右をauto指定して揃えたものにさらにpaddingを当てた場合は、paddingの左右幅分大きくなってしまいます。

 

これはなぜ起こるのかというと、widthはあくまでコンテンツサイズ（テキストボックスとか画像とかのサイズ）を指定しているだけで、marginやpaddingは境界線の外側、内側の余白を決めているからです。

 

つまり、

こんな状態だと思います。緑の矢印がpaddingで指定した左右の幅に対応しています。
これを解決するために、widthの値からpaddingで指定した左右幅を引いてあげるときれいに揃いますね。

また、marginとpadding は 1つだけ値を入れると、上下左右の全てにその値が適用されることになります。

○{
margin: 10px;
}

とすると、上下左右に10 pxの余白ができるということです。

さらに、marginとpaddingはマイナスの値も取れる（めり込ませられる）ことや、値が上下と左右同じにするなら、

○{
margin:10px auto ;
}

というようにすれば、上下は10 px間隔を開けて、左右はautoで中央にセッティングする事ができます。