[4] css スタイルシート

You are here

Home »css道場
Mon, 06/27/2011 - 20:45 — acordo

cssとは，Cascading Style Sheetの略です．文字の色や大きさなど，表示法の情報を指定するものです．どの様なものかを分かっていただくために，cssの例を示します．これを，style.cssというファイル名で，ホルダーHPに保存してください．

sample(スタイルシート): style.css

@charset "UTF-8";
body {
margin:20px;
padding: 0px;
width:600px;
}

div.section {
margin:0px;
padding:10px;
background-color:#526584;
}

div.section div.section {
margin: 10px;
padding:20px;
background-color:#B0C4DE;
}

div.section div.section p {
padding:20px;
border: 1px solid #ccc;
background-color:#fff;
}

この状態で，index1.htmlのブラウザ上の表示は変わるでしょうか？

chromeを使って試してみてください．

 

 

index1.htmlはstyle.cssの存在を知りません．従って，style.cssを作成しても，表示は変わりません．両者の関係性が定義されていないのです．それでは，どのようにすれば良いでしょうか？

htmlファイルのheaderの部分に，以下のように1行追加してください．

<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS" />
<link rel="stylesheet" href="style.css" type="text/css" />
<title>株式会社ACORDOからのお知らせ</title>
</head>　

 

chromeを使って，表示が変わるかどうか試してみてください．

 

 

表示は，» こちら のようになっているはずです．確認してみて下さい．
<link rel="stylesheet" href="style.css" type="text/css" /> が，style.cssの場所を指定しています．ブラウザは，index1.htmlからこの情報を受け取り，表示の際にstyle.cssの内容を反映させます．

style.cssの好きな部分を変更てみましょう．

chromeを更新してみてください．表示は変わるでしょうか？
変わったならば，スタイルシートの記述が出来たということになります．

 

 

いろいろ試してみたら，ANNEXにある参考サイトでcssの定義体系を見てください．そこで，使ってみたいものがあれば，style.cssに反映して，表示上の変化を確かめてください．興味と試行錯誤が習熟への近道です．