はげちゃんの世界

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

初級講座3

スタイルシートの作成

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

1 ファイルの作成

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

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

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

トップへ戻る

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

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

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

エディタのメニューバーで「ファイル」から「名前を付けて保存」を選びます。保存場所はマイドキュメントの「homepage」を指定し、ファイル名を「style.css」にして「保存」をクリックします。ブラウザ画面の表示内容

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

トップへ戻る

 1-2 形式を入力

最初に入力するのは「記入形式は文字だけです」という意味の言葉です。では、次の太文字を選択してメニューバーの「編集」から「コピー」をクリックします。

<style type="text/css">

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

<style type="text/css">

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

<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: 0px;
padding: 0px;
max-width: 1000px;
}

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

}

body {
margin: 0px;
padding: 0px;
max-width: 1000px;
}

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

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

トップへ戻る

3. タイトルのレイアウト

 3-1 位置と面積を決める

タイトル文字「島崎藤村の魅力」を表示する位置と面積を決めます。位置と面積を決めるためのプログラムは次のように書きます。これは何度もやり直して確認した結果です。

div.title {
float: left;
width: 400px;
height: 100px;
background-color: #006633;
}

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

}

div.title {
float: left;
width: 400px;
height: 100px;
background-color: #006633;
}

「div.title {」から「}」までは「title」の領域で、全体を左寄せ「float: left;」にし、横幅は「400px」で縦幅は「100px」にして、背景色を濃い緑色「#006633;」にしました。

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

トップへ戻る

 3-2 タイトルの文字指定

タイトル文字「島崎藤村の魅力」についての指定です。これも何度かやり直して確認した結果です。

div.title h1 {
margin: 0px;
padding-top: 30px;
font-size: 300%;
font-family: sane-serif,monospace;
color: white;
text-align: center;
}

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

}

div.title h1 {
margin: 0px;
padding-top: 30px;
font-size: 300%;
font-family: sane-serif,monospace;
color: white;
text-align: center;
}

「div.title h1 {」から「}」までは、「title h1」の文字に関する領域です。外側の余白は0「margin: 0px;」で内側の上部余白は30px「padding-top: 30px;」とします。 文字のサイズは「h1」の基準より大きく300%「font-size: 300%;」、形式は明朝体の等幅フォント「font-family: sane-serif,monospace;」にします。文字の色は白「color: white;」で、タイトル領域の中央「text-align: center;」に文字を配置します。

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

トップへ戻る

4 自由な領域のレイアウト

 4-1 空いている部分

Web頁作成講座2で自由な領域の名前を和製英語で「logomark」としました。ウエブページを訪れた人が興味を引くような簡単な説明を入れたり、イラストや写真やロゴマークなどを入れる領域です。

入力領域の初期値解消で、レイアウトの最大表示幅を「max-width: 1000px;」としました。タイトルのレイアウトで、タイトルの位置は左側「float: left;」へ配置し、横幅を「width: 400px;」、縦幅を「height: 100px;」としました。この状態ではタイトルのレイアウトの右側に、横幅が「width: 600px;」で縦幅が「height: 100px;」の空きができます。空きはできていますが、目で確認できずなぜか若干の誤差があり「about」です。

トップへ戻る

 4-2 写真の表示位置

Web頁作成講座2の最終部分で小さな「はすの花」の写真を入れました。「はすの花」の写真を表示する位置を決めます。

div.logomark img {
float: right;
padding-top: 30px;
padding-right: 30px;
}

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

}

div.logomark img {
float: right;
padding-top: 30px;
padding-right: 30px;
}

「logomark」と名付けた領域に表示する写真のイメージ「div.logomark img {」は、領域の右側に配置「float: right;」します。イメージの上に30px「padding-top: 30px;」、右側に30px「padding-right: 30px;」の余白をつくりました。

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

トップへ戻る

5 ナビのレイアウト

 5-1 ナビゲーションの位置

タイトルを表示する範囲は横幅400pxで、はすの花の写真を表示する範囲は「about」で横幅600pxですから、合計の横幅は約1000pxになりました。タイトルと写真の下に、「初戀」と「千曲川旅情の歌」のページへ移動するボタンと、「ホームページ」へ戻るボタンを表示させるため、横幅が1000pxの「ナビゲーション」バーをつくります。

div.navigation {
clear: both;
background-color: #009933;
color: yellow;
padding: 3px;
font-family: sane-serif,monospace;
}

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

}

div.navigation {
clear: both;
background-color: #009933;
color: yellow;
padding: 3px;
font-family: sane-serif,monospace;
}

「div.navigation {」のレイアウトを壊す原因を取り除くため、まず、タイトルと自由な領域への回り込みを禁止「clear: both;」します。ナビゲーション・バーの背景色は緑色「background-color: #009933;」とし、ボタンとボタンの仕切り線を表す「|」は黄色「color: yellow;」、文字とボタン仕切り線との余白は3px「padding: 3px;」、ボタンの仕切り線を表す「|」はゴシック体の等幅フォントを使用します。

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

トップへ戻る

 5-2 表示する文字

ナビゲーション・バーに表示する文字のレイアウトです。

div.navigation a {
color: white;
text-decoration: none;
}

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


}

div.navigation a {
color: white;
text-decoration: none;
}

ナビゲーション・バーに表示するリンクの文字「div.navigation a {」は白色にします「color: white;」。文字に装飾はしません「text-decoration: none;」。

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

トップへ戻る

6 メニューのレイアウト

ブラウザの表示幅1000pxを「はげちゃんの世界」と同じように、メニューとメインの二領域に分けます。

div.menu {
float: left;
width: 25%;
padding: 0.5em;
}

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

}

div.menu {
float: left;
width: 25%;
padding: 0.5em;
}

メニュー「div.menu {」は画面の右側「float: left;」に表示して、ブラウザの表示幅1000pxの25%「width: 25%;」を使います。リストの周囲には0.5文字分の余白「padding: 0.5em;」を取ります。

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

トップへ戻る

7 メインのレイアウト

 7-1 メインの表示位置

メニューはブラウザの左側に配置したので、メインは空いている右側に配置します。この場合は「右側に配置」の指定をしなくても、回り込みという現象で自動的に右側に配置されます。

div.main {
margin-left: 25.5%;
padding: 0.5em 1em;
}

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

}

div.main {
margin-left: 25.5%;
padding: 0.5em 1em;
}

メインの領域「div.main {」の文字などがメニューの目次とリンクの下へ回り込まないように、メニューの領域にあたるメインの左側に、メニューの領域よりちょっと広い余白25.5%;「margin-left: 25.5%;」をつくります。メインの文字などが表示される領域の上下に0.5文字分の余白、左右に1文字分の余白「padding: 0.5em 1em;」を取りました。

メニューの領域は25%ですが、メニューの領域よりちょっと広い余白を25.5%にしたのは「自由な領域のレイアウト、1) 空いている部分でなぜか若干の誤差があり「about」です。」と説明しました。「about」な分を「0.5%」としましたが、この数字も「about」です。

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

トップへ戻る

 7-2 本文のレイアウト

メインの本文に関するレイアウトです。

div.main p {
line-height: 1.4;
text-indent: 1em;
font-family: sane-serif,monospace;
}

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

}

div.main p {
line-height: 1.4;
text-indent: 1em;
font-family: sane-serif,monospace;
}

メインの本文に使用する文字「div.main p {」が複数行になる場合は、行と行との間隔を1.4文字分空け「line-height:1.4;」、段落の最初の文字は(この段落と同様に)1文字分字下げ「text-indent: 1em;」します。文字はゴシック体の等幅フォント「font-family: sane-serif,monospace;」を使用します。

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

トップへ戻る

 7-3 詩のレイアウト

本文は1文字分下げるというインデントを設定しましたが、詩の1行目にインデントがあると妙な感じを受けます。そこで、詩で使用する文字にはインデントを適用しないようにします。

div.main p.nasi {
line-height: 1.4;
text-indent: 0em;
padding-left: 1em;
font-family: sane-serif,monospace;
}

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

}

div.main p.nasi {
line-height: 1.4;
text-indent: 0em;
padding-left: 1em;
font-family: sane-serif,monospace;
}

本文で使用する文字「div.main p {」と区別するため、詩で使用する文字は「div.main p.nasi {」としました。行と行の間隔は、本文と同様に1.4文字分空けて「line-height: 1.4;」、段落の最初の文字は1文字分字下げしません「text-indent: 0em;」。但し、詩文は改行してもインデントと同様に全体を1文字「padding-left: 1em;」下げます。文字は本文と同様に、ゴシック体の等幅フォント「font-family: sane-serif,monospace;」を使用します。

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

トップへ戻る

8 イメージのレイアウト

 8-1 左側に配置

本文の説明を助ける写真やイラストなどは、本文領域の左側か右側に配置します。本文の中央に配置すると、文章が左と右に分かれてしまうので避けましょう。

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

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

}

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

イメージのleft「img.left {」は、右側の余白を0.8文字分「margin-right: 0.8em;」、上側の余白を0.5文字分「margin-top: 0.5em;」として、イメージは左側に表示「float: left;」します。

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

トップへ戻る

 8-2 右側に配置

写真やイメージを右側に表示する指定です。「1) 左側に配置」と比較して違いを覚えてください。

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

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

}

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

イメージのright「img.right {」は、左側余白を1文字分「margin-left: 1em;」、右側余白も1文字分「margin-right: 1em;」、上側の余白を0.3文字分「margin-top: 0.3em;」とし、イメージは右側に表示「float: right;」します。

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

トップへ戻る

9 フッタのレイアウト

 9-1 フッタの位置など

ウエブページの最下段にある「フッタ」の位置と、著作権表示のレイアウトです。

div.footer {
clear: both;
background-color: #009933;
padding: 3px;
}

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

}

div.footer {
clear: both;
background-color: #009933;
padding: 3px;
}

フッタ領域「div.footer {」は、メニュー領域やメイン領域への回り込みを禁止「clear: both;」して、背景色を緑色「background-color: #009933;」にし、表示する文字の周囲に余白を3px「padding: 3px;」とります。

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

トップへ戻る

 9-2 文字のレイアウト

ここでは著作権表示をする文字に関するレイアウトを決めます。

div.footer p {
text-align: right;
color: white;
margin: 5px 20px 0.5em 0px;
}

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

}

div.footer p {
text-align: right;
color: white;
margin: 5px 20px 0.5em 0px;
}

フッタに入力する文字「footer p {」は、文字の位置を右側「text-align: right;」に表示し、文字の色は白「color: white;」として、上の余白は5px、右の余白は20px、下の余白は0.5文字分、左の余白はなし「margin: 5px 20px 0.5em 0px;」とします。

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

トップへ戻る

10 締め括り

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

</style>

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

}

</style>

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

スタイルシートが完成したので、いよいよ「ホームページ」と「初恋」「千曲川旅情の歌」のページを作成します。

トップへ戻る

11 照合と確認

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

<style type="text/css">

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

body {
margin: 0px;
padding: 0px;
max-width: 1000px;
}

div.title {
float: left;
width: 400px;
height: 100px;
background-color: #006633;}

div.title h1 {
margin: 0px;
padding-top: 30px;
font-size: 300%;
font-family: serif,monospace;
color: white;
text-align: center;
}

div.logomark img {
float: right;
padding-top: 30px;
padding-right: 30px;
}

div.navigation {
clear: both;
background-color: #009933;
color: yellow;
padding: 3px;font-family: sane-serif,monospace;
}

div.navigation a {
color: white;
text-decoration: none;
}

div.menu {
float: left;
width: 25%;
padding: 0.5em;
}

div.main {
margin-left: 25.5%;
padding: 0.5em 1em;
}

div.main p {
line-height: 1.4;
text-indent: 1em;
font-family: sane-serif,monospace;
}

div.main p.nasi {
line-height: 1.4;
text-indent: 0em;
font-family: sane-serif,monospace;
}

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

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

div.footer {
clear: both;
background-color: #009933;
padding: 3px;
}

div.footer p {
text-align: right;
color: white;
margin: 5px 20px 0.5em 0px;
}

</style>

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

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

トップへ戻る

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