■ GHP3.9 - Creating Good Homepage

■CSSスタイルシートを覚える　−　グッドホームページ講座3.9■

▼GHP講座3.9　−　CSSスタイルシートを覚える


◎ ホームページを作るために覚えなくてはいけないんです。
◎ 頑張って覚えて下さいね＜他人事＞初めは見ながらでいいですからっ♪
◎ 簡単な英語ができるなら、かなり楽に覚えられますよ。

★外部ファイルに記述しよう！


　外部ファイルは、同じスタイルやデザインを全ページ統一して行う時に非常に便利です。
　外部ファイルの書き方はヘッダ記述式とほぼ同様で、style要素内の部分を書き出すだけです。
　但しファイル名は「ファイル名.css」として、ヘッダ部分に
　　<link rel='stylesheet' type='text/css' href='./ファイル名.css' />
　を付け加えるだけです。
　※予め雛形にファイル名「css.css」で挿入しています。
  1. <?xml version="1.0" encoding="Shift_JIS"?>
  2. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
  3. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja">
  4. <head>
  5.   <meta http-equiv="content-type" content="text/html; charset=shift_jis" />
  6.   <meta http-equiv="content-style-type" content="text/css" />
  7.   <meta http-equiv="content-script-type" content="text/javascript" />
  8.   <link rev="made" href="mailto:メールアドレス" />
  9.   <link rel="index" href="ホームページのアドレス" />
  10.   <link rel="stylesheet" type="text/css" href="./css.css" />
  11.   <title>タイトル：サイト名など</title>
  12. </head>
  13. <body>
  14. <div class="frm">
  15. <!-- ================================ -->
  16. 本文：表示される部分
  17. <!-- ================================ -->
  18. </div>
  19. </body>
  20. </html>

★スタイルファイルを作成する


　作成にはホームページと同様にメモ帳でも十分です。
　ただ、保存する時のファイル名を「〜.ccs」にするのを忘れないで下さいね。
　では実際に制作してみましょう。
　説明では800x600の解像度で見られるように制作します。
/* 全体 */
body{margin:0px;padding:0px;background:#fff;}
body,table,div{font-size:12px;color:#333;}
　
/* フレーム、文字配置 */
div.frm{padding:10px 0px 10px 10px;width:750px;border-left:1px solid #888;}
.center{text-align:center;}
.left{text-align:left;padding:0px 10px;}
.right{text-align:right;padding:0px 10px;}
　
/* 細い平行線 */
hr{height:1px;color:#999;background:#999;text-align:left;margin:0px;}
　
/* リンク */
a{color:#00f;text-decoration:none;background:#ccf;}
a:hover{color:#f80;text-decoration:none;background:#fec;}
　
/* スクロールバー */
html,body{
　　scrollbar-arrow-color:#888;
　　scrollbar-base-color:#fff;
　　scrollbar-face-color:#fff;
　　scrollbar-highlight-color:#ccc;
　　scrollbar-shadow-color:#ccc;
　　scrollbar-3dlight-color:#fff;
　　scrollbar-darkshadow-color:#fff;
　　scrollbar-track-color:#fff;
}
↓　マウスを乗せてみて下さい　↓
リンク
　クラスと併用して「タグ要素.クラス属性名:擬似クラス名{(CSS)}」でも使用できます。

★･･･予告･･･


◇◆◇次頁の講座で解説すること◇◆◇

CSSのつかいかた(実際に記述して使ってみる)

←【講座３：７頁】 ↑戻る↑ 【講座３：９頁】→