はげちゃんの世界

人々の役に立とうと夢をいだき、夢を追いかけてきた日々

中級講座3

スタイルシートの作成

ウエブページのレイアウトはスタイルシートで指定します。スタイルシートは英語で記述しますが、説明を読みながらコピー&ペーストすることで意味がわかります。あなたが再利用しやすいように、独立したスタイルシートファイルにしました。

1 ファイルの作成

スタイルシートの記述法は、「ページの中の一部分だけに適用させる場合」「そのページだけに適用させる場合」「別のファイルにしてウエブページ全体に適用させる場合」の三通りがあります。

あなたのパソコンであなたがつくるウエブページ「日本史の謎」も、あなたが再利用しやすいように独立したスタイルシートファイルにまとめて記入する方法を取ります。

エディタの使い方は何度も同じ表現がでてきます。30年以上もパソコンを使い続けるなかで、うっかりして何度も悔しい思いをしたからです。あなたにはそんな悔しい思いをしてほしくないとの願いで説明しています。操作方法を確実に身に付けるには、操作を何度も繰り返して身に付けるしかないのです。

トップへ戻る

 1-1 style.cssファイルの作成

「スタート」ボタンをクリックして開き、下段の「すべてのプログラム(アプリ)」からエディタの「Crescent Eve」をダブルクリックして起動します。

エディタが起動して、何も入力されていない「白紙状態」の画面が表示されました。ブラウザの「中級講座3」を見ながら入力できるように、エディタ画面の位置と大きさを調整してください。
ブラウザ画面の表示内容

エディタのメニューバーで「ファイル」から「名前を付けて保存」を選びます。保存場所をマイドキュメントの「home」を指定し、ファイル名を「style.css」として「保存」をクリックします。

エデイタに入力するのは「単語や数字」などで、「どの部分(セレクタ)のどんなもの(プロパテイ)をどうするか(値)」を順に入力します。たとえば、小学校の学習発表会で「3番・一年生・合唱」などと書かれているプログラムと同じです。

トップへ戻る

 1-2 形式を入力

最初に入力するのは「外部スタイルシートファイルの文字コードはUTF-8です。」という意味の宣言です。では、次の太文字を選択してメニューバーの「編集」から「コピー」をクリックします。

@charset "UTF-8"

エデイタの白紙画面をクリックすると、画面左上にカーソルの位置が表示されます。エディタのメニューバーで「編集」から「貼り付け」を選択します。当然ですが、エディタには次のように表示されます。

@charset "UTF-8"

では、「Enter」キーをポンポンと二度押してスペースを1行入れ、メニューバーの「ファイル」から「上書き保存」を選択します。

トップへ戻る

2 出発点は白紙に

 2-1 初期値を解消

ブラウザは Internet Explorer(IE)だけでなく、Mozilla Firefox、Google、Opera、Chrome、Safari など様々なものがあります。それぞれのブラウザでは初期値が微妙に異なり、Internet Explorer もバージョンによって異なります。あなたが考えたレイアウトをブラウザに表示させるため、最低限の初期値を解消しておきます。

ウエブページのソースで使用する「h1,h2,h3,h4,h5,h6,p,table,th,td,div,ul,ol,li」などのタブは、外側の余白(margin)と内側(padding)の余白を「0」にします。このためのプログラムは次のように書きます。

h1,h2,h3,h4,h5,h6,p,table,th,td,div,ul,ol,li {
margin: 0px;
padding: 0px;
}

「h1」から「}」までを選択してコピーし、エデイタの上部余白で何も表示されていない部分をクリックすると、先ほど入力したスペースの位置でカーソルが点滅しています。エディタのメニューで「編集」から「貼り付け」を選択すると、一行空いた状態で「before」と「after」は次のようになります。

<style type="text/css">

h1,h2,h3,h4,h5,h6,p,table,th,td,div,ul,ol,li {
margin: 0px;
padding: 0px;
}

では、「Enter」キーをポンポンと二度押してスペースを1行入れ、メニューバーの「ファイル」から「上書き保存」を選択します。

トップへ戻る

 2-2 入力領域の初期値解消

本文のデータを入力する「body」から「/body」までの、初期値を解消するためのプログラムは次のように書きます。

body {
margin: 1em;
padding: 0px;
max-width: 1000px;
background: Red;
font-family: Meiryo,"メイリオ","Hiragino Kaku Gothic Pro W3","ヒラギノ角ゴ Pro W3",Osaka,"MS P Gothic","MS ゴシック",sans-serif,monospace;
color: #006;
}

ベースになっている部分と情報を表示させる部分との間隔は「margin: 1em;」で1文字分開けます。これにより上と左右に1文字分のベースの地色が表示されます。情報を表示する部分と情報との間隔は「padding: 0px;」として開けません。

ブラウザをデスクトップ全体に広げても、レイアウトが崩れないようにウエブページを表示する最大幅を1000pxとしたのが「max-width:1000px」です。表示幅を小さめにしてもレイアウトはそれほど崩れません。これをリキッドレイアウトといいます。

ベースになっている部分の色は「background: Red;」赤にしました。Webページで使用する文字を「font-family:Meiryo,"メイリオ","Hiragino Kaku Gothic Pro W3","ヒラギノ角ゴ Pro W3",Osaka,"MS P Gothic","MS ゴシック",sans-serif,monospace;」と、ゴシック体で等幅フォントと指定して該当するフォントを例示しました。

表示する情報の文字色を「color: #006;」濃い藍色としました。「body {」から「}」までを選択してコピーし、エデイタの上部余白で何も表示されていない部分をクリックすると、先ほど入力したスペースの位置でカーソルが点滅しています。エディタのメニューで「編集」から「貼り付け」を選択すると、一行空いた状態で「before」と「after」は次のようになります。

}

body {
margin: 1em;
padding: 0px;
max-width: 1000px;
background: Red;
font-family:Meiryo,"メイリオ","Hiragino Kaku Gothic Pro W3","ヒラギノ角ゴ Pro W3",Osaka,"MS P Gothic","MS ゴシック",sans-serif,monospace;
color: #006;
}

では、「Enter」キーをポンポンと二度押してスペースを1行入れ、メニューバーの「ファイル」から「上書き保存」を選択します。

トップへ戻る

3 ヘッダのレイアウト

 3-1 タイトルのレイアウト

タイトル文字「日本史の謎」を表示する位置と面積を決めて、あらかじめダウンロードして保存した夕焼けの画像をはめ込みます。タイトル文字の領域は、横幅940ピクセル「width: 940px;」、縦幅は200ピクセル「height: 200px;」とし、余白は作らず自動設定「margin: 0 auto;」とします。

タイトルバックに、syasinホルダー内の夕焼けの画像「url(shasin/00_00.jpg) no-repeat;」を組み込みます。「url」は住所で説明「no-repeat」は含まれていません。

header {
width: 940px;
height: 200px;
margin: 0 auto;
background: url(shasin/00_00.jpg) no-repeat;
}

「header」から「}」までを選択してコピーし、エデイタの上部余白で何も表示されていない部分をクリックすると、先ほど入力したスペースの位置でカーソルが点滅しています。エディタのメニューで「編集」から「貼り付け」を選択すると、一行空いた状態で「before」と「after」は次のようになります。

}

header {
width: 940px;
height: 200px;
margin: 0 auto;
background: url(shasin/00_00.jpg) no-repeat;
}

では、「Enter」キーをポンポンと二度押してスペースを1行入れ、メニューバーの「ファイル」から「上書き保存」を選択します。

トップへ戻る

 3-2 タイトルの領域

タイトルとサブタイトルの領域を決めます。「heade」に表示する「heade h1」と「heade h2」は外側の余白をゼロ「margin: 0;」とし、内側の左余白のみ30ピクセル「padding: 0 0 0 30px;」を取ります。

header h1, header h2 {
margin: 0;
padding: 0 0 0 30px;
}

「header h1, header h2 {」から「}」までを選択してコピーし、エデイタの上部余白で何も表示されていない部分をクリックすると、先ほど入力したスペースの位置でカーソルが点滅しています。エディタのメニューで「編集」から「貼り付け」を選択すると、一行空いた状態で「before」と「after」は次のようになります。

}

header h1, header h2 {
margin: 0;
padding: 0 0 0 30px;
}

トップへ戻る

 3-3 h1のタイトル

タイトルの文字を設定します。「heade h1」のフオントサイズは50ピクセル「font-size: 50px;」とし、内側の上余白を20ピクセル「padding-top: 20px;」取ります。

header h1 {
font-size: 50px
padding-top: 20px;
}

「header h1 {」から「}」までを選択してコピーし、エデイタの上部余白で何も表示されていない部分をクリックすると、先ほど入力したスペースの位置でカーソルが点滅しています。エディタのメニューで「編集」から「貼り付け」を選択すると、一行空いた状態で「before」と「after」は次のようになります。

}

header h1 {
font-size: 50px
padding-top: 20px;
}

トップへ戻る

 3-4 h2のタイトル

サブタイトルの文字を設定します。「heade h2」のフオントサイズを14ピクセル「font-size: 14px;」とし、文字の先頭に5文字分の余白「text-indent: 5em;」を作り、内側の上余白は10ピクセルで左余白は30ピクセル「padding: 10px 0 0 30px;」として、文字の色は白色「color: #fff;」にします。

header h2 {
font-size: 14px;
text-indent: 5em;
padding: 10px 0 0 30px;
color: #fff;
}

「header h2 {」から「}」までを選択してコピーし、エデイタの上部余白で何も表示されていない部分をクリックすると、先ほど入力したスペースの位置でカーソルが点滅しています。エディタのメニューで「編集」から「貼り付け」を選択すると、一行空いた状態で「before」と「after」は次のようになります。

}

header h2 {
font-size: 14px;
text-indent: 5em;
padding: 10px 0 0 30px;
color: #fff;
}

では、「Enter」キーをポンポンと二度押してスペースを1行入れ、メニューバーの「ファイル」から「上書き保存」を選択します。

トップへ戻る

4 ナビのレイアウト

 4-1 ナビの領域

タイトルの下に「卑弥呼の謎」と「言霊と怨霊」などのページへ移動するボタンと、「ホームページ」へ戻るボタンを表示させる「ナビゲーション」バーをつくります。

ナビゲーションの横幅は940ピクセル「width: 940px;」です。縦幅は「height: 50px;」で、余白は作らず自動設定「margin: 0 auto;」とし、全体の色をむらさき「background: Purple;」にしました。文字の大きさは17ピクセル「font-size: 17px;」です。

nav {
width: 940px;
height: 50px;
margin: 0 auto;
background: Purple;
font-size: 17px;
}

「nav {」から「}」までを選択してコピーし、エデイタの上部余白で何も表示されていない部分をクリックすると、先ほど入力したスペースの位置でカーソルが点滅しています。エディタのメニューで「編集」から「貼り付け」を選択すると、一行空いた状態で「before」と「after」は次のようになります。

}

nav {
width: 940px;
height: 50px;
margin: 0 auto;
background: Purple;
}

では、「Enter」キーをポンポンと二度押してスペースを1行入れ、メニューバーの「ファイル」から「上書き保存」を選択します。

トップへ戻る

 4-2 リストのレイアウト

ナビゲーションに表示するリンク先の表示は外側の余白「margin: 0;」を取らず、内側の上余白は17ピクセルで左内余白は10ピクセル「padding: 17px 0 0 10px;」としました。リストに番号は「list-style: none;」つけず、行の高さは通常「line-height: normal;」としました。

nav .menu ul {
margin: 0;
padding: 17px 0 0 10px;
list-style: none;
line-height: normal;
}

「nav .menu ul {」から「}」までを選択してコピーし、エデイタの上部余白で何も表示されていない部分をクリックすると、先ほど入力したスペースの位置でカーソルが点滅しています。エディタのメニューで「編集」から「貼り付け」を選択すると、一行空いた状態で「before」と「after」は次のようになります。

}

nav .menu ul {
margin: 0;
padding: 17px 0 0 10px;
list-style: none;
line-height: normal;
}

では、「Enter」キーをポンポンと二度押してスペースを1行入れ、メニューバーの「ファイル」から「上書き保存」を選択します。

トップへ戻る

 4-3 リストの項目設定

リストの項目は左へ向かって配置「float: left;」します。

nav .menu li {
float: left;
}

「nav .menu li {」から「}」までを選択してコピーし、エデイタの上部余白で何も表示されていない部分をクリックすると、先ほど入力したスペースの位置でカーソルが点滅しています。エディタのメニューで「編集」から「貼り付け」を選択すると、一行空いた状態で「before」と「after」は次のようになります。

}

nav .menu li {
float: left;
}

では、「Enter」キーをポンポンと二度押してスペースを1行入れ、メニューバーの「ファイル」から「上書き保存」を選択します。

トップへ戻る

 4-4 リンクの準備

リンク先の表示「menu a {」の右余白は5ピクセル「margin-right: 5px;」とし、内余白の上下はゼロで左右余白は7ピクセル「padding: 0px 7px;」としました。文字への装飾は「text-decoration: none;」せずに、文字の色は白「color: #fff;」としました。

nav .menu a {
margin-right: 5px;
padding: 0px 7px;
text-decoration: none;
color: #fff;
}

「menu a {」から「}」までを選択してコピーし、エデイタの上部余白で何も表示されていない部分をクリックすると、先ほど入力したスペースの位置でカーソルが点滅しています。エディタのメニューで「編集」から「貼り付け」を選択すると、一行空いた状態で「before」と「after」は次のようになります。

}

nav .menu a {
margin-right: 5px;
padding: 0px 7px;
text-decoration: none;
color: #fff;
}

では、「Enter」キーをポンポンと二度押してスペースを1行入れ、メニューバーの「ファイル」から「上書き保存」を選択します。

トップへ戻る

 4-5 リンク文字の表示

リンク先の表示文字にマウスが重なった「nav .menu a:hover {」ときは「text-decoration」表示文字に下線「underline;」が表示されます。

nav .menu a:hover {
text-decoration: underline;
}

「nav .menu a:hover {」から「}」までを選択してコピーし、エデイタの上部余白で何も表示されていない部分をクリックすると、先ほど入力したスペースの位置でカーソルが点滅しています。エディタのメニューで「編集」から「貼り付け」を選択すると、一行空いた状態で「before」と「after」は次のようになります。

}

nav .menu a:hover {
text-decoration: underline;
}

では、「Enter」キーをポンポンと二度押してスペースを1行入れ、メニューバーの「ファイル」から「上書き保存」を選択します。

トップへ戻る

5 情報のレイアウト

 5-1 メインの表示位置

スタイルシートでは「#」を付けてタグの代わに「ハッシュタグ」と呼ばれ利用法があり、よりきめ細かなスタイル設定ができるようになっています。HTMLで扱う汎用属性で、特定のキーワードにスタイルを設定する場合idとする値の前に「#」を付け、lass名として利用する場合は値の前に「.」(ピリオド)を付けます。

「#main {」の領域は画面に表示するすべての情報です。表示領域の幅は940px「width: 940px;」で外側の余白は取らずに自動調整とし「margin: 0 auto;」、内側の上部に30ピクセルの余白「padding-top: 30px;」を取ります。文章などの表示領域の地色は白「background: #fff;」とし、指定サイズをはみ出した場合は「overflow: visible」はみ出して表示させます。

#main {
width: 940px;
margin: 0 auto;
padding-top: 30px;
background: #fff;
overflow: visible
}

「#main {」から「}」までを選択してコピーし、エデイタの上部余白で何も表示されていない部分をクリックすると、先ほど入力したスペースの位置でカーソルが点滅しています。エディタのメニューで「編集」から「貼り付け」を選択すると、一行空いた状態で「before」と「after」は次のようになります。

}

#main {
width: 940px;
margin: 0 auto;
padding-top: 30px;
background: #fff;
overflow: visible
}

では、「Enter」キーをポンポンと二度押してスペースを1行入れ、メニューバーの「ファイル」から「上書き保存」を選択します。

トップへ戻る

 5-2 アーティクルの設定

文章の節に当たる「article」の表示は、自動的に改行されて「display: block;」上から下へと表示させます。

article {
display: block;
}

「article」から「}」までを選択してコピーし、エデイタの上部余白で何も表示されていない部分をクリックすると、先ほど入力したスペースの位置でカーソルが点滅しています。エディタのメニューで「編集」から「貼り付け」を選択すると、一行空いた状態で「before」と「after」は次のようになります。

}

article {
display: block;
}

では、「Enter」キーをポンポンと二度押してスペースを1行入れ、メニューバーの「ファイル」から「上書き保存」を選択します。

トップへ戻る

 5-3 セクションの設定

文章のまとまりである「section」の表示は、自動的に改行されて「display: block;」上から下へと表示させます。

section {
display: block;
}

「section」から「}」までを選択してコピーし、エデイタの上部余白で何も表示されていない部分をクリックすると、先ほど入力したスペースの位置でカーソルが点滅しています。エディタのメニューで「編集」から「貼り付け」を選択すると、一行空いた状態で「before」と「after」は次のようになります。

}

section {
display: block;
}

では、「Enter」キーをポンポンと二度押してスペースを1行入れ、メニューバーの「ファイル」から「上書き保存」を選択します。

トップへ戻る

 5-4 コンテントの設定

文章のまとまりである「#content」の表示は、画像がある場合は右回り「float: right;」で表示し、表示領域は640ピクセル「width: 640px;」、右余白は30ピクセル「margin-right: 30px;」とします。

#content {
float: right;
width: 640px;
margin-right: 30px;
}

「#content」から「}」までを選択してコピーし、エデイタの上部余白で何も表示されていない部分をクリックすると、先ほど入力したスペースの位置でカーソルが点滅しています。エディタのメニューで「編集」から「貼り付け」を選択すると、一行空いた状態で「before」と「after」は次のようになります。

}

#content {
float: right;
width: 640px;
margin-right: 30px;
}

では、「Enter」キーをポンポンと二度押してスペースを1行入れ、メニューバーの「ファイル」から「上書き保存」を選択します。

トップへ戻る

  5-4-1 コンテントの詳細1

文章のまとまりである「#content」で使用する「p, ul, ol, hr {」の表示は、外側の下部余白を24ピクセル「margin-bottom: 24px;」とします。

#content p, ul, ol, hr {
margin-bottom: 24px;
}

「#content p, ul, ol, hr {」から「}」までを選択してコピーし、エデイタの上部余白で何も表示されていない部分をクリックすると、先ほど入力したスペースの位置でカーソルが点滅しています。エディタのメニューで「編集」から「貼り付け」を選択すると、一行空いた状態で「before」と「after」は次のようになります。

}

content p, ul, ol, hr {
margin-bottom: 24px;
}

では、「Enter」キーをポンポンと二度押してスペースを1行入れ、メニューバーの「ファイル」から「上書き保存」を選択します。

トップへ戻る

  5-4-2 コンテントの詳細2

文章のまとまりである「#content」で使用する「h1, h2, h3, h4, h5, h6 {」の表示は、外側の下部余白は24ピクセル「margin-bottom: 24px;」とします。

#content h1, h2, h3, h4, h5, h6 {
color: #333;
margin: 0 0 20px 0;
line-height: 1.5em;
}

「#content p, ul, ol, hr {t」から「}」までを選択してコピーし、エデイタの上部余白で何も表示されていない部分をクリックすると、先ほど入力したスペースの位置でカーソルが点滅しています。エディタのメニューで「編集」から「貼り付け」を選択すると、一行空いた状態で「before」と「after」は次のようになります。

}

#content h1, h2, h3, h4, h5, h6 {
color: #333;
margin: 0 0 20px 0;
line-height: 1.5em;
}

では、「Enter」キーをポンポンと二度押してスペースを1行入れ、メニューバーの「ファイル」から「上書き保存」を選択します。

トップへ戻る

  5-4-3 コンテントの詳細3

文章のまとまりである「#content」で使用する「ul ul, ol ol, ul ol, ol ul {」の表示は、外側の下部余白は24ピクセル「margin-bottom: 0;」とします。

#content ul ul, ol ol, ul ol, ol ul {
margin-bottom: 0;
}

「#content p, ul, ol, hr {」から「}」までを選択してコピーし、エデイタの上部余白で何も表示されていない部分をクリックすると、先ほど入力したスペースの位置でカーソルが点滅しています。エディタのメニューで「編集」から「貼り付け」を選択すると、一行空いた状態で「before」と「after」は次のようになります。

}

#content ul ul, ol ol, ul ol, ol ul {
margin-bottom: 0;
}

では、「Enter」キーをポンポンと二度押してスペースを1行入れ、メニューバーの「ファイル」から「上書き保存」を選択します。

トップへ戻る

  5-4-4 実験用の見出し

見出しを標準大きさのよりも大きく表示したい場合の実験用として用意しました。

h1.midasi {
padding-left: 10%;
font-size: 250%;
}

「h1.midasi {」から「}」までを選択してコピーし、エデイタの上部余白で何も表示されていない部分をクリックすると、先ほど入力したスペースの位置でカーソルが点滅しています。エディタのメニューで「編集」から「貼り付け」を選択すると、一行空いた状態で「before」と「after」は次のようになります。

}

h1.midasi {
padding-left: 10%;
font-size: 250%;
}

では、「Enter」キーをポンポンと二度押してスペースを1行入れ、メニューバーの「ファイル」から「上書き保存」を選択します。

トップへ戻る

 5-5 本文のレイアウト

情報を記述するの文字の大きさとレイアウトを設定します。下余白は19ピクセル「margin-bottom: 18px;」とし、文章の最初は一文字空け「text-indent: 1em;」、行間は1.6文字「line-height: 1.6em;」とし、フオントサイズは「font-size: 16px;」とします。

p {
margin-bottom: 18px;
text-indent: 1em;
line-height: 1.6em;
font-size: 16px;
}

「p」から「}」までを選択してコピーし、エデイタの上部余白で何も表示されていない部分をクリックすると、先ほど入力したスペースの位置でカーソルが点滅しています。エディタのメニューで「編集」から「貼り付け」を選択すると、一行空いた状態で「before」と「after」は次のようになります。

}

p {
margin-bottom: 18px;
text-indent: 1em;
line-height: 1.6em;
font-size: 16px;
}

では、「Enter」キーをポンポンと二度押してスペースを1行入れ、メニューバーの「ファイル」から「上書き保存」を選択します。

トップへ戻る

6 写真のレイアウト

 6-1 写真の枠

画面に表示させる写真は、直線の枠「border: none;」を付けません。

article img {
border: none;
}

「article img {」から「}」までを選択してコピーし、エデイタの上部余白で何も表示されていない部分をクリックすると、先ほど入力したスペースの位置でカーソルが点滅しています。エディタのメニューで「編集」から「貼り付け」を選択すると、一行空いた状態で「before」と「after」は次のようになります。

}

article img {
border: none;
}

では、「Enter」キーをポンポンと二度押してスペースを1行入れ、メニューバーの「ファイル」から「上書き保存」を選択します。

トップへ戻る

 6-2 写真の左配置

写真類を画面の左側に表示させる場合の、写真と文章との余白を指定し、文章は左側へ回り込ませます。

img.left
margin-right: 0.8em;
margin-top: 0.5em;
float: left;
}

「img.left {」から「}」までを選択してコピーし、エデイタの上部余白で何も表示されていない部分をクリックすると、先ほど入力したスペースの位置でカーソルが点滅しています。エディタのメニューで「編集」から「貼り付け」を選択すると、一行空いた状態で「before」と「after」は次のようになります。

}

img.left
margin-right: 0.8em;
margin-top: 0.5em;
float: left;
}

トップへ戻る

 6-3 写真の右配置

写真類を画面の右側に表示させる場合の、写真と文章との余白を指定し、文章は右側へ回り込ませます。

img.right {
margin-left: 1em;
margin-right: 1em;
margin-top: 0.3em;
float: right;
}

「img.left {」から「}」までを選択してコピーし、エデイタの上部余白で何も表示されていない部分をクリックすると、先ほど入力したスペースの位置でカーソルが点滅しています。エディタのメニューで「編集」から「貼り付け」を選択すると、一行空いた状態で「before」と「after」は次のようになります。

}

img.right {
margin-left: 1em;
margin-right: 1em;
margin-top: 0.3em;
float: right;
}

トップへ戻る

7 サイドのレイアウト

 7-1 サイドバーの領域

付加情報のまとまりである「#sidebar」の表示は、画像がある場合は左回り「float: left;」で表示し、表示領域の内側に40ピクセル「width: 40px;」の余白を取り、表示幅は200ピクセル「width: 200px;」、行間は18ピクセル「line-height: 18px;」とします。

#sidebar {
float: left;
padding-left: 40px;
width: 200px;
line-height: 18px;
}

「#sidebar {」から「}」までを選択してコピーし、エデイタの上部余白で何も表示されていない部分をクリックすると、先ほど入力したスペースの位置でカーソルが点滅しています。エディタのメニューで「編集」から「貼り付け」を選択すると、一行空いた状態で「before」と「after」は次のようになります。

}#sidebar {
float: left;
padding-left: 40px;
width: 200px;
line-height: 18px;
}

では、「Enter」キーをポンポンと二度押してスペースを1行入れ、メニューバーの「ファイル」から「上書き保存」を選択します。

トップへ戻る

 7-2 サイドバーの見出し

サイドバーの見出しは、文字の大きさを16ピクセル「font-size: 16px;」とします。

aside h3 {
font-size: 16px;
}

「aside h3 {」から「}」までを選択してコピーし、エデイタの上部余白で何も表示されていない部分をクリックすると、先ほど入力したスペースの位置でカーソルが点滅しています。エディタのメニューで「編集」から「貼り付け」を選択すると、一行空いた状態で「before」と「after」は次のようになります。

}

aside h3 {
font-size: 16px;
}

では、「Enter」キーをポンポンと二度押してスペースを1行入れ、メニューバーの「ファイル」から「上書き保存」を選択します。

トップへ戻る

 7-3 サイドバーの項目

サイドバーの項目は、ラインの装飾「list-style: none;」をつけず、外側の下余白は20ピクセル「margin-bottom: 20px;」、外側の上余白はー15ピクセル「margin-top: -15px;」、外側の左余白はー15ピクセル「margin-left: -15px;」として、文字の大きさは15ピクセル「font-size: 15px;」とします。

aside ul {
list-style: none;
margin-bottom: 20px;
margin-top: -15px;
margin-left: -15px;
font-size: 15px;
}

「aside ul {」から「}」までを選択してコピーし、エデイタの上部余白で何も表示されていない部分をクリックすると、先ほど入力したスペースの位置でカーソルが点滅しています。エディタのメニューで「編集」から「貼り付け」を選択すると、一行空いた状態で「before」と「after」は次のようになります。

}

aside ul {
list-style: none;
margin-bottom: 20px;
margin-top: -15px;
margin-left: -15px;
font-size: 15px;
}

では、「Enter」キーをポンポンと二度押してスペースを1行入れ、メニューバーの「ファイル」から「上書き保存」を選択します。

トップへ戻る

 7-4 サイドバーのリンク

サイドバーのリンクは、自動的に改行されて「display: block;」上から下へと表示させます。文字に装飾「text-decoration: none;」は付けず、文字は太文字「font-weight: bold;」とします。

aside li a {
display: block;
text-decoration: none;
font-weight: bold;
}

「aside li a {」から「}」までを選択してコピーし、エデイタの上部余白で何も表示されていない部分をクリックすると、先ほど入力したスペースの位置でカーソルが点滅しています。エディタのメニューで「編集」から「貼り付け」を選択すると、一行空いた状態で「before」と「after」は次のようになります。

}

aside li a {
display: block;
text-decoration: none;
font-weight: bold;
}

では、「Enter」キーをポンポンと二度押してスペースを1行入れ、メニューバーの「ファイル」から「上書き保存」を選択します。

トップへ戻る

 7-5 サイドバーの見出し

リンク文字にマウス「aside li a :hover {」が載ったら、文字の下に下線「text-decoration: underline;」を表示します。

aside li a:hover {
text-decoration: underline;
}

「aside li a :hover {」から「}」までを選択してコピーし、エデイタの上部余白で何も表示されていない部分をクリックすると、先ほど入力したスペースの位置でカーソルが点滅しています。エディタのメニューで「編集」から「貼り付け」を選択すると、一行空いた状態で「before」と「after」は次のようになります。

}

aside li a:hover {
text-decoration: underline;
}

リンク先の表示文字にマウスが重なったときは「text-decoration」表示文字に下線「underline;」が表示されます。では、「Enter」キーをポンポンと二度押してスペースを1行入れ、メニューバーの「ファイル」から「上書き保存」を選択します。

トップへ戻る

8 フッタのレイアウト

 8-1 フッタの領域

最下段の「footer」は、タイトル領域と同様の横長にします。このため二段組みを解消して回り込み「clear: both;」を防止します。鉾幅は940ピクセル「width: 940px;」として、外余白は取らずに自動調整「margin: 0 auto;」とし、内側の上下余白は18ピクセル「padding: 18px 0;」とします。

地色はナビゲーションと同様にむらさき色「background: Purple;」とし、文字の色は白「color: #fff;」にしました。

footer {
clear: both;
width: 940px;
margin: 0 auto;
padding: 18px 0;
background: Purple;
color: #fff;
}

「footer {」から「}」までを選択してコピーし、エデイタの上部余白で何も表示されていない部分をクリックすると、先ほど入力したスペースの位置でカーソルが点滅しています。エディタのメニューで「編集」から「貼り付け」を選択すると、一行空いた状態で「before」と「after」は次のようになります。

}

footer {
clear: both;
width: 940px;
margin: 0 auto;
padding: 18px 0;
background: Purple;
color: #fff;
}

では、「Enter」キーをポンポンと二度押してスペースを1行入れ、メニューバーの「ファイル」から「上書き保存」を選択します。

トップへ戻る

 8-2 フッタの文字

フッタに表示する文字は「p」と区別するために「p.foot」という名前にしました。外側の上部余白は15ピクセル「margin-top: 15px;」で左余白は40ピクセル「margin-left: 40px;」、文字の大きさは16ピクセル「font-size: 16px;」とし、文字表示位置は右側「text-align: right;」で、文字の右側に3文字分の余白「padding-right: 3em;」を開けます。

p.foot {
margin-top: 15px;
margin-left: 40px;
font-size: 16px;
text-align: right;
padding-right: 3em;
}

「p.foot {」から「}」までを選択してコピーし、エデイタの上部余白で何も表示されていない部分をクリックすると、先ほど入力したスペースの位置でカーソルが点滅しています。エディタのメニューで「編集」から「貼り付け」を選択すると、一行空いた状態で「before」と「after」は次のようになります。

}

p.foot {
margin-top: 15px;
margin-left: 40px;
font-size: 16px;
text-align: right;
padding-right: 3em;
}

では、「Enter」キーをポンポンと二度押してスペースを1行入れ、メニューバーの「ファイル」から「上書き保存」を選択します。

トップへ戻る

9 締め括り

最後に入力するのは、スタイルシートのプログラムをこれで終了しますという意味の『</style>』です。

</style>

「<」から「>」までを選択してコピーし、エデイタの上部余白で何も表示されていない部分をクリックすると、先ほど入力したスペースの位置でカーソルが点滅しています。エディタのメニューで「編集」から「貼り付け」を選択すると、一行空いた状態で「before」と「after」は次のようになります。

}

</style>

では、「Enter」キーをポンポンと二度押してスペースを1行入れ、メニューバーの「ファイル」から「上書き保存」を選択します。

トップへ戻る

10 照合と確認

スタイルシートのプログラムが完成しました。次に表示したCSSとあなたが作成したプログラムに相違がないか、最初の1文字が抜けていないか、最後の「;」が抜け落ちていないか慎重に照合してください。エディタの画面と見比べて同一であれば大成功です。

@charset "UTF-8"

h1,h2,h3,h4,h5,h6,p,table,th,td,div,ul,ol,li {
margin: 0px;
padding: 0px;
}

body {
margin: 1em;
padding: 0px;
max-width: 1000px;
background: Red;
font-family: Meiryo,"メイリオ","Hiragino Kaku Gothic Pro W3","ヒラギノ角ゴ Pro W3",Osaka,"MS P Gothic","MS ゴシック",sans-serif,monospace;
color: #006;
}

header {
width: 940px;
height: 200px;
margin: 0 auto;
background: url(shasin/00_00.jpg) no-repeat;
}

header h1, header h2 {
margin: 0;
padding: 0 0 0 30px;
}

header h1 {
font-size: 50px
padding-top: 20px;
}

header h2 {
font-size: 14px;
text-indent: 5em;
padding: 10px 0 0 30px;
color: #fff;
}

nav {
width: 940px;
height: 50px;
margin: 0 auto;
background: Purple;
font-size: 17px;
}

nav .menu ul {
margin: 0;
padding: 17px 0 0 10px;
list-style: none;
line-height: normal;
}

nav .menu li {
float: left;
}

nav .menu a {
margin-right: 5px;
padding: 0px 7px;
text-decoration: none;
color: #fff;
}

nav .menu a:hover {
text-decoration: underline;
}

#main {
width: 940px;
margin: 0 auto;
padding-top: 30px;
background: #fff;
overflow: visible
}
v article {
display: block;
}

section {
display: block;
}

#content {
float: right;
width: 640px;
margin-right: 30px;
}

#content p, ul, ol, hr {
margin-bottom: 24px;
}

#content h1, h2, h3, h4, h5, h6 {
color: #333;
margin: 0 0 20px 0;
line-height: 1.5em;
}

#content ul ul, ol ol, ul ol, ol ul {
margin-bottom: 0;
}

h1.midasi {
padding-left: 10%;
font-size: 250%;
}

p {
margin-bottom: 18px;
text-indent: 1em;
line-height: 1.6em;
font-size: 16px;
}

article img {
border: none;
}

#sidebar {
float: left;
padding-left: 40px;
width: 200px;
line-height: 18px;
}

aside h3 {
font-size: 16px;
}

aside ul {
list-style: none;
margin-bottom: 20px;
margin-top: -15px;
margin-left: -15px;
font-size: 15px;
}

aside li a {
display: block;
text-decoration: none;
font-weight: bold;
}

aside li a:hover {
text-decoration: underline;
}

footer {
clear: both;
width: 940px;
margin: 0 auto;
padding: 18px 0;
background: Purple;
color: #fff;
}

p.foot {
margin-top: 15px;
margin-left: 40px;
font-size: 16px;
text-align: right;
padding-right: 3em;
}
</style>

何度も確認して修正し、どこまで修正したのかわからなくなった場合は、エディタの文字を消去して白紙にしてください。「@charset "UTF-8">」から「</style>」までを選択してコピーし、エディタに貼り付けましょう。

コピーしてエディタに貼り付けた場合は、メニューバーの「ファイル」をクリックして「上書き保存」を選択します。これを忘れると、入力内容は消えてしまいます。「上書き保存」をしたらエディタの上部右余白の「×」で終了します。

トップへ戻る

     「 中級講座2 」 ←  中級講座3 → 「 中級講座4