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. ホームページの作成が主題です。
  • 費用:無料
  • 場所:三郷北高校 パソコン教室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(○,○,○)という表現と#○○□□△△の2通りがある。★
★RGBはRed、Green、Blueの略。
○は0〜255。RGB(0,0,0)は黒。RGB(255,255,255)は白。★
★#○○□□△△。○○はRed、□□はGreen、△△はBlueの指定。★
★○○は16進表記で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は余白という意味ですが、続く4つの数字は上 右 下 左の余白を指定しています。★
#logo {float:left; font-size:x-small;}/*写真の下の文字の大きさ*/
★logo の部分を左に寄せて、文字のサイズを指定しています。★
★文字のサイズはxx-small、x-small、small、medium、large、x-large、xx-largeの7種類あります。★
#hright{float:left;}★hrightをlogoの次に左に寄せます。★

#header li {display: inline; padding:0px 0px 0px 1em;}/*リストの改行を抑止して、水平に並べるため*/
★header内のliについての定義。★
★普通は縦に表示されるリスト構造をdisplay: inline;で横に表示するようにしています。★
★簡単に言うとpaddingは内側の余白、marginは外側の余白です。★
★emは文字の大きさを元にする単位で、2emは文字の大きさの2倍という意味です。★
#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-bace-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

最後まで読んでいただいて、ありがとうございました。
↑base.css(CSSファイル)の解説の一番上へ↑