0619-01 スタイルをリセットすることブロックをfloatさせること

CSS

検索エンジンは読んで200行

スタイルシートを外部化しなければhead部分に大量の記述があった場合、検索エンジンはbody部分まで読み取ってくれない。そのためスタイルシートは外部化することでbody部分のコンテントをできるだけHTMLの上部に配置しSEO効果を強める必要がある。

スタイルシートの外部化

<link rel=”stylesheet” href=”(あれば階層/)ファイル名”>

rel：relation　これを書いたHTMLとの関係性がstylesheetでそのファイル名

リセットCSS

見るブラウザの環境によって、それぞれレイアウトの初期値に違いがある。そのため、一度初めにその初期値をリセットする事で、こちら側の意図したレイアウトを意図したとおりに表示出来るようにする事を目指す。

CSSは記述した上部から下へと読みとられるので、上部でリセットをかけ、その後各要素に対してレイアウトを指示する。

リセットのデフォルト

html, body, h1, h2, h3, p, ul, li…（全要素）{

margin: 0;

padding: 0;

line-height: 1.0;

}

body{

font-size: 16px;

font-family: “Hiragino Kaku Gothic ProN”, Meiryo, sans-serif;

}

ul{

list-style: none;

}

！font-sizeを指定するのはブラウザによっては初期値が数値で無くM、L等の可変的な値であるため

！ulはリセットで隠れてしまう・をnoneで消す事でpadding等を適用させやすくする

コメントアウト

メモを取ること、また見やすく／分かりやすくするためにコメントを入れること

HTML   <!—ここにコメント -->

CSS       /* ここにコメント */

floatによるレイアウト

コンピュータは上から順に縦にオブジェクトを表示させる事は得意だが、横に表示させる事は難しい。そこでfloatを使ってオブジェクトを浮き上がった状態にさせ、左右に振り分ける事でオブジェクトを横並びに配置させる。

例えば、ボックスAとボックスBを左、右に横並びに配置させる場合、

Aに対して

#main {float: left;}

Bに対して

#nav {float: right;}

そしてそれは不安定な状態なのでさらに包む

(#wrapper = #main + #nav )

#wrapper{

width: 800px;

overflow: hidden;

margin: 0 auto;

}

overflow: hidden;で浮き上がったボックスの裏に下にある要素が潜り込まないようにする。

マージンの相殺

上下に並ぶAとBのボックス要素のAにmargin-bottomの指定、Bにmargin-topの指定があった場合、いずれか大きい方の値が適用され、もう一方の値は打ち消されてしまう。

そのため、極力margin-topは指定せず、どの要素に対してもmargin-bottomで対処すると決めておくとよい。

演習

授業でやった演習を家で再び。margin/paddingが未だに混同していて反省。