CSS入門 レイアウトを作りこむ その1
スポンサーリンク
前回に引き続きレイアウトです。
大まかなレイアウトは完成しましたが、footer部分など縦幅を大きくとってしまっていたりするので可変に変更したり、idではなくclass指定でメニュー部分などのレイアウトを作成して行こうと思ってます。
まずは、footer部分を可変にして、入力した文字サイズのみに変更し、bodyタグも内容に合わせて可変する様にしたいと思います。でも、メインの部分も今可変にすると、表示に問題も出そうなのでこちらはそのままにしておいてみます。
--------------------------------------
/* === body要素 === */
body {
width : 900px ;
margin-left : auto;
margin-right : auto;
border-top : solid 1px red ;
border-bottom : solid 1px red ;
border-right : solid 1px red ;
border-left : solid 1px red ;
}
/* === footer要素 === */
#footer {
width : 898px ;
border-top : solid 1px green ;
border-bottom : solid 1px green ;
border-right : solid 1px green ;
border-left : solid 1px green ;
}
------------------------------------
HTMLは特に変更がありませんが、footerらしくコピーライトを入れて置いてみます。
------------------------------------
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<title>タイトル</title>
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/3.18.1/build/cssreset/cssreset-min.css">
<link rel="stylesheet" type="text/css" href="stylesheet7.css">
</head>
<body>
<div id="header">
header<br />
</div>
<div id="menu">
menu<br />
</div>
<div id="main">
main<br />
</div>
<div id="footer">
Copyright © 2015 hamuchi. All Rights Reserved.<br />
</div>
</body>
</html>
------------------------------------
前回と違うのは"height"を削除しました。デフォルトが可変での設定の為、それだけで表示が可変に変わります。
HTML内にコピーライトをいれてちゃんと表示されるでしょうか。実際に表示してみます。
サンプル表示
footer部分が細くなってます。個人的にはこちらに入れるのはコピーライト位しか入れる気がないのでこれでOK。
実際に表示すと、文字が左寄りになっています。フォントサイズもデフォルトなので大き目です。今度はfooterに文字の変更とセンター寄せを記述してこれを回避してみます。
------------------------------------
font-size : small ;
font-weight : bold ;
text-align: center ;
------------------------------------
先ほどのfooter記述の一番下に上記3つを追加しました。これで真ん中に表示されます。
実際に表示してみます。
サンプル表示2
文字サイズが小さくなり、フォントが太文字、センター寄せへなりました。
{font : }として、fontのイタリック体・スモールキャピタル・太さ・サイズ・行の高さ・フォントを一括指定する事も可能です。
今回はfooterのみに指定していますが、これをheaderなどほかにも指定すれば書くボックス毎に文字の指定が出来るのでリンクでページを遷移するたびに文字サイズが変わってしまう事もなくなります。
