CSSファイルを使ったホームページのコメント3
base.css（CSSファイル）の解説

CSSファイルを使ったホームページの作成を、三郷北では行っています。三郷北高校の「情報A」の授業の内容を公開します。

CSSファイルを使ったホームページの作り方。無料公開講座

  • 費用：無料
  • 場所：埼玉県三郷市三郷北高校
  • 日時：7月26、27、8月2、3の土日、4日間の13時〜16時。
  • 内容：CSSファイルの使い方。検索で上位ヒットする方法。検索エンジンの仕組み。HTMLタグと検索順位の関係

ホームページの作り方に関する無料公開講座

  • 講座名：テキストエディタを使ったホームページの作成
  • 講座内容予定：
    1. 12月27日（土）1時〜4時。NoEditorの使い方。
    2. 12月28日（日）〃。HTMLタグについて。
    3. 1月4日（日）〃。検索で上位表示されるホームページの作成。
    4. ホームページ・ブログの作成経験がある方に最適です。
    5. ホームページの作成が主題です。
  • 費用：無料
  • 場所：三郷北高校　パソコン教室５階

CSSファイルの内容と／＊コメント＊／1

/*　*/の間はコメントです。削除しても動作に変化は起きません。
/*保存したら、このcssFILE1.htmは閉じてください。*/
★CSSファイルでは、/* */の間はコメントなので、削除してもかまいません。★
/* 全体構造------------------------------*/
@charset "Shift_JIS";
★character set（文字セット）のコードをShift_JISにする。★
* { margin : 0 ; padding : 0 ; }/*マージン、パッティングは原則0*/
★*は全てという意味★
body { width : 100% ; background:RGB(180,170,90); color:RGB(00,00,00); font-size:medium;}
★widthは幅。backgroundは背景（の色）。colorは文字の色。★
★色の指定はRGB(○,○,○)という表現と＃○○□□△△の２通りがある。★
★RGBはRed、Green、Blueの略。
○は0〜255。RGB(0,0,0)は黒。RGB(255,255,255)は白。★
★＃○○□□△△。○○はRed、□□はGreen、△△はBlueの指定。★
★○○は１６進表記で00〜FF。＃000000は黒。＃FFFFFFは白。★
menutytle{color:RGB(255,150,00);}/*■メニュー■をオレンジ色にする*/
★.はclassに、＃はidに対応する。★

CSSファイルの内容と／＊コメント＊／2

/* ヘッダ（先頭の部分）------------------------------*/
#header {margin :2 0 0 0;
border-top:2px solid RGB(200,200,200);border-bottom:2px solid
RGB(200,200,200);}/*ヘッダの部分の上下の水平線*/
★HTMLファイルで

と書いておくと★
★border-top:2px solid RGB(200,200,200);でheaderの上の境界（border）に太さ2px
実線（solid）が引かれます。★
★marginは余白という意味ですが、続く４つの数字は上　右　下　左の余白を指定しています。★
#logo {float:left; font-size:x-small;}/*写真の下の文字の大きさ*/
★logo の部分を左に寄せて、文字のサイズを指定しています。★
★文字のサイズはxx-small、x-small、small、medium、large、x-large、xx-largeの７種類あります。★
#hright{float:left;}★hrightをlogoの次に左に寄せます。★
#header li {display: inline;　padding:0px 0px 0px 1em;}/*リストの改行を抑止して、水平に並べるため*/
★header内のliについての定義。★
★普通は縦に表示されるリスト構造をdisplay: inline;で横に表示するようにしています。★
★簡単に言うとpaddingは内側の余白、marginは外側の余白です。★
★emは文字の大きさを元にする単位で、２emは文字の大きさの２倍という意味です。★
#header p{text-align:center; color:RGB(85,85,85);}/*私からのメッセージの部分の設定*/
★header内のpの定義。中央寄せ、文字の色はcolor:RGB(85,85,85)★
/* ページ本体（＝ナビゲーション＋コンテンツ）------------------------------*/
#pagebody {float:left;background:RGB(180,170,90);}
★左寄せ、背景の色の指定★
/* ナビゲーション（左側のサブメニュー）------------------------------*/
#navigation {float:left; width:235px;}
★navigation の幅を235pxにしてあるので、navigationの右にくるcontentは左余白を235pxにする。★
#navigation ul {list-style-type:disc;}
★リストの前につく記号をdisc（円盤）にする。★
#navigation li {margin:5px 0px 5px 0px;}
/* コンテンツ（中央右側の文章を書く部分）------------------------------*/
#content {margin-left: 235px;}
★navigation の幅を235pxにしてあるので、navigationの右にくるcontentは左marginを235pxにする。★
#content h1 {font-style:italic; color: RGB(110,70,30);}/*italicは斜字体*/
★italicは日本語にはなじまないので、この指定はやめた方がいいだろう。★
#content h2 {font-weight:normal; color:RGB(70,70,20);}/*＜h2＞と＜/h2＞で囲まれた部分の設定*/
★font-weight:normal;文字の太さを普通にする。★
/* フッタ（最後尾の部分）------------------------------*/
#footer {clear : both ;★文字の回りこみの解除★background:RGB(0,0,0);★背景の色は黒★
border-top:2px solid RGB(200,200,200); border-bottom:2px solid
RGB(200,200,200);}/*フッタの部分の上下の水平線*/
#footer ul {padding:10px 0px 10px 0px;}
#footer li {padding:0px 0px 0px 20px;}/*sitemapとbbsの回りにに余白を入れるため*/
#footer {color:RGB(255,255,255);}★背景の色を黒にしたので、文字の色は白に指定。★
/* スクロールバーの色------------------------------*/
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(191,223,104);/*スクロールバーがない所の色*/
scrollbar-3dlight-color : RGB(100,100,40);/*外枠の左上。ただし、細いから目立たない*/
scrollbar-darkshadow-color : RGB(80,80,20);/*外枠の右下*/
scrollbar-highlight-color : RGB(180,80,40);/*内枠の左上*/
scrollbar-shadow-color : RGB(160,60,20);}/*内枠の右下*/
★この指定にはファイヤ・ホックスなど対応していないブラウザがあります。★
/* リンクの色------------------------------*/
a:link {color:RGB(00,80,255); background:transparent;}/*未訪問のリンクの色*/
a:visited {color:RGB(180,00,180); 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);}/*クリックした時の色*/
★header内のリンクの色だけ変えたい場合は、#header a:link　{ }とします。★

理解できない事は掲示板に書き込んでください。
http://www2.rocketbbs.com/625/aikoi.html

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