CSSをつかってみましょー
HTMLを使い、ホームページを作成してきましたが
デザインするにはCSSを使います。
なぜなら..
HTMLは文書(テキスト)をマークアップする言語であり、
ホームページをデザインするものではありません。
ってことでデザインはCSSでやりましょーってことです。
ホームページ = 文書構造(HTML) + デザイン(←CSSね)
CSS(Cascading Style Sheets)とは
Cascading Style Sheets（CSS、カスケーディング・スタイル・シート、カスケード・スタイル・シート）
とは、HTML や XML の要素をどのように修飾（表示）するかを指示する、W3Cによる仕様の一つ。
文書の構造と体裁を分離させるという理念を実現する為に提唱されたスタイルシートの、具体的な仕様の一つ。
0. ホームページのデザインについて考えてみる。
いきなりCSSを書きましょー....
っといってもどんなホームページをつくるかを
決めないと書く事ができません。
まずホームページについて
概要をまとめてみましょー
ホームページのほとんどは
およそ以下の項目に分かれています。
・Header ... 頭部(タイトル、メイン画像
・Navigation ... 各リンク先への移動(トップページ・地図・連絡先 等)
⇒例)Googleのトップページ一番↑の部分
・Section ... ページの内容
・Article ... ページの内容の各記事（項目毎)
・Aside ... 余談(関連記事・広告・ニュース等)
・Footer ... 足部(copyright ..とか)
※HTML5ではこれらのタブが用意されています。
あと全体にデザインを設定するために
・contener
・contents
を用意します。
これをベースにホームページを検討しましょー
(添付のindex.htmlを参照してください)
1. 構造を理解しましょー
CSSの構造として
セレクタ -、プロパティ-、値
の３つで構成されています。
例)
aaa {
bbb : ccc;
}
aaa=セレクタ、bbb=プロパティ、ccc=値
2. CSSを作成します
2-0 フォルダ構成を準備します。
今回は以下のフォルダ構成を使用します。
sample
L index.html
L img ... 使用する画像を格納します。
L css ... 使用するCSS(style.css)を格納します。
2-1 style.css作成しとindex.htmlとリンクします。
./css/style.cssを作成し
以下をページヘッダ<head>～</head>に記述すればOK
<!-- CSS -->
<link rel="stylesheet" type="text/css" href="css/style.css">
2-2 CSSの文字コードを記述します。
./css/style.cssを開き先頭にHTML(index.html)の文字コードを指定します。
ちなみにコメントは /* ～ */にて記述できます。
/* ホームページで使用する文字コード */
@charset "shift-jis";
2-3 各種設定
基本は全体(共通)設定し、詳細(異なる点)設定していきます。
●"*"(全体設定)
全体のフォントデフォルトを決定します。
/* "*" 全体に適用 */
* {
/* 各種フォントのデフォルト */
font-family: "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", Osaka, sans-serif;
font-size: 12px;
color: #666666;
margin: 0px;
padding: 0;
/* 各種領域確認用
border: dotted 1px #FF0000; */
}
●h1,h2,h3,ul,table等のデフォルト値を決定します。
/* 見出し1 */
h1 {
/* フォント */
font-size: 20px;
color: #666666;
margin: 0;
padding: 10px 20px 10px 20px;
/* 背景画像 */
background-image: none;
}
/* 見出し2 */
h2 {
/* フォント */
font-size: 12px;
color: #FFFFFF;
margin: 5px 0px 20px 0px;
padding: 10px 10px 10px 10px;
/* 背景画像 */
background-image: url("../img/h2_back.jpg");
}
/* 各種文章 */
p {
/* フォント */
font-size: 10px;
color: #666666;
margin: 10px;
padding: 0;
/* 背景画像 */
background-image: none;
/* 行間 */
line-height: 2em;
}
/* リスト */
ul {
/* 種類 */
list-style: none;
/* 背景画像 */
margin: 10px 5px 20px 5px;
/* 行間 */
line-height: 2em;
}
/* テーブル */
table, td, td {
/* レイアウト */
table-layout: auto;
/* テキスト */
text-align: center;
/* 罫線 */
border: solid 1px #666666;
border-collapse: collapse;
/* 種類 */
list-style: none;
/* 背景画像 */
margin: 10px 5px 20px 5px;
/* 行間 */
line-height: 2em;
}
●背景を決定します。
/* body */
body {
/* テキストをセンター表示 */
text-align: center;
/* 背景画像 */
background-image: url("../img/back.jpg");
}
●各種領域(<div id="***">部分)を設定していきます。
/* ==========================================================
* contener
* ========================================================== */
#contener {
/* 領域幅 */
width: 704px;
/* 領域 中央寄せ */
margin-left: auto;
margin-right: auto;
/* 背景画像 */
background-image: url("../img/contener_back.jpg");
}
/* ==========================================================
* contens
* ========================================================== */
#contens {
width: 700px;
text-align: left;
margin: 0 auto;
}
/* ==========================================================
* header
* ========================================================== */
#header {
}
/* ==========================================================
* navi
* ========================================================== */
#navi {
height: 25;
margin: 0;
padding: 0;
background-color: #000000;
}
#navi ul{
margin: 0;
padding: 0;
}
#navi li{
float: left;
width: 100;
list-style-type: none;
text-align: center;
display: block;
background-color: #000000;
}
#navi a{
color: #FFFFFF;
}
/* ==========================================================
* section
* ========================================================== */
#section {
width: 500px;
float: right;
margin: 10px 10px 10px 10px;
}
/* ==========================================================
* article1
* ========================================================== */
#article1 {
}
/* ==========================================================
* article2
* ========================================================== */
#article2 {
}
/* ==========================================================
* aside
* ========================================================== */
#aside {
width: 160px;
float: left;
margin: 10px 0px 10px 10px;
}
/* ==========================================================
* footer
* ========================================================== */
#footer {
clear: both;
background-color: #999999;
padding: 2px;
text-align: center;
}
#footer p{
color: #FFFFFF;
font-size: 12px;
margin: 0px;
}
[参考]
