CSSファイルサンプル(超初級)

授業で使っているcssファイルとHTMLファイルのサンプルをできる限り簡略化しました。
説明はそれぞれのファイルの中にコメントとして書いてあります。

CSSファイルを利用したホームページの作成（超初級）

新しいフォルダを作っておいて、以下の１３個のファイルを保存してください。
以下の１から１３のリストを右クリックして「対象をファイルに保存」としてください。
「このファイルをダウンロードできません。」というメッセージが出た場合は、 「cssファイルとHTMLファイルのダウンロード別の方法」を見てください。

  1. css11.htm
  2. css12.htm
  3. css13.htm
  4. css21.htm
  5. css22.htm
  6. css23.htm
  7. css31.htm
  8. css32.htm
  9. css33.htm
  10. css41.htm
  11. css42.htm
  12. css43.htm
  13. cssファイルbase.cssという名前で保存したら、
  14. 新しく作成したフォルダの中にcss11.htmからcss43.htmまでの１２個のファイルと、base.cssというファイルがあれば、終了です。
    css11.htmをIEインターネット　エクスプローラで開いてみてください。

cssファイルとHTMLファイルのダウンロード別の方法

  • １〜12までのcssファイルHTMLファイルは普通に左クリックし、左上のメニュー、「表示」→「ソース」とするとメモ帳などで開かれますから、そのソースを保存してください。
  • 13のcssファイルの内容は下の方に書いてありますので、メモ帳などにコピペして、base.css
    • という名前で保存してください。

変更の仕方

  1. ホームページビルダーなどで開くと、表示が乱れる事があります。
    css11.htmなどをメモ帳などのテキストエディタで、開いてください。
  2. 日本語で書かれている所を変更してください。
  3. 分からない事がありましたら、M君の掲示板に書き込んでください。可能な限り、お答えします。

補足

このサンプルには「index.htm」ないし「index.html」がありません。（三郷北高校の「情報A」用のため）
「css11.htm」を上記の名前に変えるといいと思います。

base.cssというcssファイルの内容

/* 全体構造-------------------------*/
@charset "Shift_JIS";
* { margin:0; padding:0;}/*マージン、パッティングは原則0*/
body {width:100%; background:RGB(160,150,70);}/* ★背景色の指定★ */
/* ヘッダ＝header1＋header2-------------------------*/
#header {width:800px; background:RGB(180,170,90);}/* ★背景色の指定★ */
#header {border-top:2px solid RGB(255,150,150); border-bottom:2px solid RGB(255,150,150);}/*ヘッダの部分の上下の水平線*/
#header1 {float:left; width:235px;}/* 左に寄せて幅２３５ */
#header1 {color:RGB(0,0,100);}/* ●文字色の指定● */
#header2{margin-left:235px;}/* 左余白を２３５とる */
#header2 {color:RGB(200,0,0);}/* ●文字色の指定● */
#header2 li {display:inline;}/*リストの改行を抑止して、水平に並べるため*/
/* ページボディ＝pagebody1＋pagebody2-------------------------*/
#pagebody {width:800px; background:RGB(200,190,110);}/* ★背景色の指定★ */
#pagebody1 {float:left; width:235px;}/* 左に寄せて幅２３５ */
#pagebody1 {background:RGB(0,0,0); color:RGB(200,200,200);}/* ★背景色の指定★●文字色の指定● */
#pagebody2 {margin-left:235px;}/* 左余白を２３５とる */
#pagebody2 {color:RGB(110,70,30);}/* ●文字色の指定● */
/* フッタ（最後尾の部分）-------------------------*/
#footer {width:800px; background:RGB(0,10,55);}/* ★背景色の指定★ */
#footer {border-top:2px solid RGB(255,100,100); border-bottom:2px solid RGB(255,100,100);}/*フッタの部分の上下の水平線*/
#footer {color:RGB(255,200,200);}/* ●文字色の指定● */
/* スクロールバーの色-------------------------*/
html{
scrollbar-base-color : RGB(101,130,30);
scrollbar-face-color : RGB(101,130,30);/*スクロールバーの色*/
scrollbar-arrow-color : RGB(200,120,70);/*スクロールバーの上下の矢の色*/
scrollbar-track-color : RGB(190,220,100);/*スクロールバーがない所の色*/
scrollbar-3dlight-color : RGB(100,100,40);/*外枠の左上。ただし、細いから目立たない*/
scrollbar-highlight-color : RGB(180,80,40);/*内枠の左上*/
scrollbar-shadow-color : RGB(160,60,20);/*内枠の右下*/
}
/* リンクの色-------------------------*/
a:link {color:RGB(0,0,120); background:transparent;}/*未訪問のリンクの色*/
a:visited {color:RGB(180,00,80); background:transparent;}/*訪問済みのリンクの色*/
a:hover {color:RGB(255,255,255); background:RGB(255,140,50);}/*マウスを重ねた時の色*/
a:active{color:RGB(255,255,255); background:RGB(255,00,00);}/*クリックした時の色*/

最後まで読んでいただいて、ありがとうございました。