外部スタイルシート

全体の流れ

1. 準備
2. HTMLコードNo1
3. 基本編
4. 応用編
5. 情報編
6. レベルアップ
7. スタイルシート
8. 外部スタイルシート
9. 公開
10. url登録 宣伝

Pickup

• 無料アフィリエイト
• 無料ブログ 比較 宣伝

最後の仕上げ

外部スタイルシートで、最後の仕上げをしましょう。HTMLNo4のソースを表示してください。

最後の仕上げを行いましょう。ブラウザで表示されている画面を覚えておいてください。

◇ 完成図と同じように作成してみてください。

1. テキストエディタを新規に作成し、「 style.css 」に名前を変更。
2. 上と同じ部分の01. 02. 13. 14.をソースから削除。
3. 03.〜12.まで切り取り、style.cssの画面に貼り付け。
4. フォルダを新規に作成し、名前を「 css 」としてください。
5. cssフォルダにstyle.cssを入れ、cssをHomeフォルダの中に入れます。

〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜

          ┏━━━━━━━━┓      ┏━━━━━━━━┓
　完成図　┃ index.html No4 ┣━┳━┫ index.html No3 ┃
　　　　　┗━━━━━━━━┛  ┃  ┗━━━━━━━━┛
                  Home          ┃          web
                                ┃
                                ┃  ┏━━━━━━━━┓
                                ┗━┫   style.css    ┃
                                    ┗━━━━━━━━┛
                                            css

〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜

完成後、index.html（No4）のブラウザ更新ボタンを押してください。

先ほどと同じように表示されましたか？

成功するとまったく同じように表示されます。「何か違う」と思われた方は、もう1度HTMLコードNo4をコピーしてやり直してみましょう。

最後に

最後に、style.cssは外部スタイルシートと呼ばれています。

スタイルシートは外部に置く方法、テキストの上に記載する方法、直接記載する方法の3種類があります。3種類とも表示のされかたは一緒です。

読み込む順番は決まっています。外部、テキスト上、直接の順番です。

3種類を一緒に使う事もできますが、外部に置く方法が推薦されています。外部に置けば、1枚のスタイルシートで全てのページに使用できます。

今回「style.css」としましたが、拡張子.cssなら好きな単語で平気です。

ホームページ作成に必要なことは以上で終了です。

後はコンテンツを充実させ、素敵なホームページを作成してください。作成に関する質問・疑問などありましたら回答コーナーを活用してください。