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