たったこれダケで HTML:CSS 編


 このスライドはW3Cが提供している 「HTML Slidy」 を使用しています。
※ 「→」キーまたは「マウスの左ボタン」をクリックすると次画面に進みます。  (「←」キーをクリックすると前画面に戻ります。)

HTML Slidy
W3Cが公開しているweb上のスライドシステムで、提供されたスタイルシートとJavascriptを、 利用者が用意した原稿HTMLファイルに適用することで、 スライドを作成
教材スライドをHTML Slidyで作る http://lepo.info/kyoshizaki/blog/?p=795
W3C(ダブリュースリーシー)
World Wide Web Consortium(ワールド・ワイド・ウェブ・コンソーシアム)は、 World Wide Webで使用される各種技術の標準化を推進する為に設立された標準化団体、非営利団体。 略称はW3C(ダブリュースリーシー)。
ウィキペデァ フリー百科事典 http://ja.wikipedia.org/wiki/World_Wide_Web_Consortium
Another HTML-lint gateway
HTML文書の文法をチェックし、採点します http://openlab.ring.gr.jp/k16/htmllint/htmllinte.html

HTML は 構造 (骨組み)を定義し,



CSS は 修飾 (見た目)を定義する!

      CSS:Cascading Style Sheets
つまり
HTML は 肉体 で, CSS は 洋服 です。

バック(背景)に色をつけよう

 メモ帳を開いて([スタート]-[すべてのプログラム]-[アクセサリ]-[メモ帳]) 第5回で保存した「ex3.htm」をドラッグしてください。  ※ ex3.txt

 「ex3.htm」の内容が表示されたら取り敢えず,

    <title>練習3</title>



    <title>CSS1:背景</title>


と変更し,[ファイル(F)]-[名前を付けて保存(A)] で「css1.htm」として保存し てください。

<title>CSS1:背景</title> 行と </head> 行の間に


<style type="text/css">
<!--
body { background-color : black;
     color : white;
   }
-->
</style>

を挿入してください。

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <html lang="ja">
    <head>
    <meta http-equiv="Content-type" content="text/html;charset=Shift_JIS">
    <title>CSS1:背景</title>
    <style type="text/css">
    <!--
    body { background-color : black;
        color : white;
       }
    -->
    </style>
    </head>

    <body>
    <h1>みなと塾ホームページのこと</h1>

ブラウザを開いて,保存した「css1.htm」をドラッグしてみてください。

ex3
css1

 背景が「黒」(black) になり,文字が「白」(white) になりました。

見栄え(CSS)を定義している場所


    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <html lang="ja">
    <head>
    <meta http-equiv="Content-type" content="text/html;charset=Shift_JIS">
    <title>CSS1:背景</title>
    <style type="text/css">        ←─ (1) ────↓
    <!--                     ←─ (2) ────↓
    body { background-color : black;   ←─ (3)
        color : white;            ←─ (4)
       }                     ←─ (5)
    -->                     ←─ (6) ────↑
    </style>                  ←─ (7) ────↑
    </head>

    <body> ←─ (8)
    <h1>みなと塾ホームページのこと</h1>

 (1) と (2) から (6) と (7) までが「見栄え」を定義している記述です。
 (1) と (2) ,そして (6) と (7) は「対」と思っておいてください。

body { …… }


    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <html lang="ja">
    <head>
    <meta http-equiv="Content-type" content="text/html;charset=Shift_JIS">
    <title>CSS1:背景</title>
    <style type="text/css">        ←─ (1) ────↓
    <!--                     ←─ (2) ────↓
    body { background-color : black;   ←─ (3)
        color : white;            ←─ (4)
       }                     ←─ (5)
    -->                     ←─ (6) ────↑
    </style>                  ←─ (7) ────↑
    </head>

    <body> ←─ (8)
    <h1>みなと塾ホームページのこと</h1>

 (3) の行頭の「body」は,(8) の body 部の見栄えを定義していることを示しています。
 (3) の「body」の次にある「{」から (5) の「}」までが,その定義の範囲を示しています

background-color:xxxx;


    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <html lang="ja">
    <head>
    <meta http-equiv="Content-type" content="text/html;charset=Shift_JIS">
    <title>CSS1:背景</title>
    <style type="text/css">        ←─ (1) ────↓
    <!--                     ←─ (2) ────↓
    body { background-color : black;   ←─ (3)
        color : white;            ←─ (4)
       }                     ←─ (5)
    -->                     ←─ (6) ────↑
    </style>                  ←─ (7) ────↑
    </head>

    <body> ←─ (8)
    <h1>みなと塾ホームページのこと</h1>

 (3) の「background-color : black ;」は,「背景」の色を「黒」にすることを定義しています。
 「background-color」の次の「:」と,行末の「;」を忘れないでください。

color:xxxx;


    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <html lang="ja">
    <head>
    <meta http-equiv="Content-type" content="text/html;charset=Shift_JIS">
    <title>CSS1:背景</title>
    <style type="text/css">        ←─ (1) ────↓
    <!--                     ←─ (2) ────↓
    body { background-color : black;   ←─ (3)
        color : white;            ←─ (4)
       }                     ←─ (5)
    -->                     ←─ (6) ────↑
    </style>                  ←─ (7) ────↑
    </head>

    <body> ←─ (8)
    <h1>みなと塾ホームページのこと</h1>

 (4) の「color : white ;」は,「文字」の色を「白」にすることを定義しています。
 「:」と,行末の「;」は同じですね。

「見出し」の見栄え

 もう一度メモ帳を開いて,先程保存した「css1.htm」をドラッグしてください。

 「css1.htm」の内容が表示されたら取り敢えず,

    <title>CSS1:背景</title>



    <title>CSS2:見出し</title>


と変更し,[ファイル(F)]-[名前を付けて保存(A)] で「css2.htm」として保存し てください。

「(1) の「}」行と,(2) の「-->」行の間に


    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <html lang="ja">
    <head>
    <meta http-equiv="Content-type" content="text/html;charset=Shift_JIS">
    <title>CSS2:見出し</title>
    <style type="text/css">
    <!--
    body { background-color : black;
        color : white;
       }      ←─ (1)
    -->      ←─ (2)

    </style>
    </head>

    <body>
    <h1>みなと塾ホームページのこと</h1>

h1 { color:maroon;
    font-size:250%;
    font-weight: bold;
  }

を挿入してください。
 取り敢えずここで「上書き保存」をしておきましょう。

ブラウザを開いて,保存した「css2.htm」をドラッグしてみてください。

css1
css2

 1行目の見出しが「黄色」(yellow) になり,文字がちょっと大きくなりました。

font-size:xxx%;  font-weight: xxx;


      (略)
    <title>CSS2:見出し</title>
    <style type="text/css">
    <!--
    body { background-color : black;
        color : white;
       }
    h1 { color:yellow;              ←─ (1)
        font-size:250%;             ←─ (2)
        font-weight: bold;           ←─ (3)
       }                       ←─ (4)
    -->
    </style>
    </head>

    <body>
    <h1>みなと塾ホームページのこと</h1>  ←─ (5)

 (1) の行頭の「h1」は,(5) の h1 の見栄えを定義していることを示しています。
 その後の「color : yellow ;」は,先程と同様に「文字」の色を「黄色」にする定義ですね。
 (2) の「 font-size : 250% ;」は,「文字の大きさ」を通常より「2.5倍」とすることを定義しています。
 (3) の「 font-weight : bold ;」は,「文字の太さ」を「太字」とすることを定義しています。

「見出し」の見栄え2

 もう一度メモ帳を開いて,先程保存した「css2.htm」をドラッグしてください。

 「css2.htm」の内容が表示されたら取り敢えず,

    <title>CSS2:見出し</title>



    <title>CSS3:見出し2</title>


と変更し,[ファイル(F)]-[名前を付けて保存(A)] で「css3.htm」として保存し てください。

次に「(1) の「}」行と,(2) の「-->」行の間に


      (略)
    <title>CSS3:見出し2</title>
    <style type="text/css">
    <!--
    body { background-color : black;
        color : white;
       }
    h1 { color:yellow;
        font-size:250%;
        font-weight: bold;
       }      ←─ (1)
    -->      ←─ (2)

    </style>
    </head>       (略)

h3 { color: maroon;      /* 文字の色    */
    font-size: 110%;     /* 文字の大きさ  */
    font-weight: bold;    /* 文字の太さ   */
    text-align: right;    /* 文章の位置   */
    border-style: solid none; /* 枠の形状(上下 左右なし) */
    border-color: silver;   /* 枠の色     */
    background-color: #00cc99; /* 背景の色   */
  }

を挿入してください。
 取り敢えずここで「上書き保存」をしておきましょう。

ブラウザを開いて,保存した「css3.htm」をドラッグしてみてください。

css2
css3

 「h3」に該当する見出しが変わりました。

今回追加し部分については


      (略)
    <title>CSS3:見出し2</title>
    <style type="text/css">
    <!--
    body { background-color : black;
         color : white;
       }
    h1 { color:yellow;
        font-size:250%;
        font-weight: bold;
      }
    h3 { color: maroon;      /* 文字の色    */
        font-size: 110%;     /* 文字の大きさ  */
        font-weight: bold;    /* 文字の太さ   */
        text-align: right;    /* 文章の位置   */
        border-style: solid none; /* 枠の形状(上下 左右なし) */
        border-color: silver;   /* 枠の色     */
        background-color: #00cc99; /* 背景の色   */
      }

    -->
    </style>
    </head>       (略)

 赤色の部分が今回追加した部分ですが,これらの意味については自分で
    CSS リファレンス
    http://www.tagindex.com/stylesheet/index.html
にアクセスし,「ボックス」の箇所を調べましょう。
 なお,追加した行の末尾の「/*」から「*/」までの部分は「コメント(註釈)」です。

色について

 「body」や「h1」に掛かる見栄えの定義では,「color : white;」や「background-color : black;」というように,色の英文名を指定していました。
 が,「h3」では「background-color: #00cc99;」と書いています。
 実は「CSS」で使える「色」は200色以上あるのですが,「色名」を指定できるものは限られています。 それらは「#xxxxxx」というように16進数(0-9,a-f)で表すコードを使います。

 また,どんなブラウザでも間違いなく表示できる「色」として「基準色(16色)」や「セーフカラー(216色)」が定められています。
 どんな色があるのかは,
    カラーネーム・カラーコード
    http://rc0120.web.fc2.com/webcolor/webcolor.html
などを参照してください。(検索するとこれ以外にもいろいろな色についての Webページがあります。)

今度は「p」に対して

 メモ帳を開いて,先程保存した「css3.htm」をドラッグしてください。

 「css3.htm」の内容が表示されたら取り敢えず,

    <title>CSS3:見出し2</title>



    <title>CSS4:段落</title>
< br>
と変更し,[ファイル(F)]-[名前を付けて保存(A)] で「css4.htm」として保存し てください。

これまでと同様に「(1) の「}」行と,(2) の「-->」行の間に


      (略)
        border-color: silver;   /* 枠の色     */
        background-color: #00cc99; /* 背景の色   */
      }
       }      ←─ (1)
    -->      ←─ (2)

    </style>
    </head>

    p.silver { background-color : silver;
           color : maroon;
           line-height : 150%;
         }

を挿入してください。
 取り敢えずここで「上書き保存」をしておきましょう。

更に今回は
部にも修正を加えます


      (略)
    <h2>みなと塾ホームページには何があるんだろ!</h2>
    <p>     ←─ ここを修正

     もともとは「湊地区歴史まっぷ」という印刷物を作るという
      (略)

 「<h2>みなと塾ホームページには何があるんだろ!</h2>」の次の行の「<p>」を
    <p class="silver">

に修正してください。
 ここで「上書き保存」をしておきましょう。

ブラウザを開いて,保存した「css4.htm」をドラッグしてみてください。

css2
css3

 見出し「みなと塾ホームページには何があるんだろ!」の下の段落が変わりました。

line-height : xxx%;


      (略)
    <title>CSS4:段落</title>
    <style type="text/css">
    <!--
    body { background-color : black;
         color : white;
       }
      (略)
    h3 { color: maroon;      /* 文字の色    */
        font-size: 110%;     /* 文字の大きさ  */
      (略)
        background-color: #00cc99; /* 背景の色   */
      }

    p.silver { background-color : silver;      ←─ (1)
           color : maroon;           ←─ (2)
           line-height : 150%;         ←─ (3)
         }

    -->
    </style>
    </head>
      (略)
    <h2>みなと塾ホームページには何があるんだろ!</h2>

    <p class="silver">             ←─ (4)

     もともとは「湊地区歴史まっぷ」という印刷物を作るという

 (1) の「background-color : black ;」と (2) の「color : maroon;」は,「body」のときと同じで,背景色と文字色ですね。
 (3) の「line-height : 150% ;」は行間を指定し,「150%」というのは,1行を文字の大きさに対して1.5倍にしなさいということです。 言い換えると,文字の大きさに対して「文字の高さの半分」を開けなさい,という意味ですね。  

「p.silver」と「<p class=”silver”>」


      (略)
    <title>CSS4:段落</title>
    <style type="text/css">
    <!--
    body { background-color : black;
         color : white;
       }
      (略)
    h3 { color: maroon;      /* 文字の色    */
        font-size: 110%;     /* 文字の大きさ  */
      (略)
        background-color: #00cc99; /* 背景の色   */
      }

    p.silver { background-color : silver;      ←─ (1)

           color : maroon;           ←─ (2)
           line-height : 150%;         ←─ (3)
         }
    -->
    </style>
    </head>
      (略)
    <h2>みなと塾ホームページには何があるんだろ!</h2>

    <p class="silver">             ←─ (4)

     もともとは「湊地区歴史まっぷ」という印刷物を作るという

 (1) の行頭は「p.silver」となっています。  これは何か所が出てくる「<p>」のなかで特定の「<p>」について見栄えを変えたいときに「p」の後ろに「.silver」という名前をつけています。(「.」で「p」と名前(任意)である「silver」を連結しています。)
 この名前は (4) の「<p class="silver">」に対応しています。(「class=」の後ろに「"」で囲った名前「silver」を指定しています。)

CSSを外にだしちゃお!!

 メモ帳を開いて,保存してある「css4.htm」をドラッグしてください。

 「css4.htm」の内容が表示されたら取り敢えず,

    <title>CSS4:段落</title>



    <title>CSS5:外部読み込み</title>


と変更し,[ファイル(F)]-[名前を付けて保存(A)] で「css5.htm」として保存してください。

まず 削除


   <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
   <html lang="ja">
   <head>
   <meta http-equiv="Content-type" content="text/html;charset=Shift_JIS">
   <title>CSS5:外部読み込み</title>
   <style type="text/css">       ←─ (1) 削除
   <!--                  ←─ (2) 削除
   body	{	background-color : black;   ←─ (3) ここから
   			color : white;
   		}
   h1		{	color:yellow;
   			font-size:250%;
   			font-weight: bold;
   		}
   h3		{	color: maroon;				/* 文字の色			*/
   			font-size: 110%;			/* 文字の大きさ		*/
   			font-weight: bold;			/* 文字の太さ		*/
   			text-align: right;			/* 文章の位置		*/
   			border-style: solid none;	/* 枠の形状(上下 左右なし)	*/
   			border-color: silver;		/* 枠の色			*/
   			background-color: #00cc99;	/* 背景の色			*/
   		}
   p.silver	{	background-color : silver;
   				color : maroon;
   				line-height : 150%;
   			}                ←─ (4) ここまで
   -->                   ←─ (5) 削除
   </style>               ←─ (6) 削除
   </head>
   
   <body>

 まず,(1),(2),(4),(5) の各行を削除してください。
 とりあえずここで,「上書き保存」をしておきましょう。

CSS定義部分のカット&ペースト

 現在メモ帳で開いてある「css5.htm」はそのままにして,別にメモ帳を開いてください。  (何にも書かれていない白いメモ帳となります。)


   <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
   <html lang="ja">
   <head>
   <meta http-equiv="Content-type" content="text/html;charset=Shift_JIS">
   <title>CSS5:外部読み込み</title>
   body	{	background-color : black;   ←─ (3) ここから
   			color : white;
   		}
   h1		{	color:yellow;
   			font-size:250%;
   			font-weight: bold;
   		}
   h3		{	color: maroon;				/* 文字の色			*/
   			font-size: 110%;			/* 文字の大きさ		*/
   			font-weight: bold;			/* 文字の太さ		*/
   			text-align: right;			/* 文章の位置		*/
   			border-style: solid none;	/* 枠の形状(上下 左右なし)	*/
   			border-color: silver;		/* 枠の色			*/
   			background-color: #00cc99;	/* 背景の色			*/
   		}
   p.silver	{	background-color : silver;
   				color : maroon;
   				line-height : 150%;
   			}                ←─ (4) ここまで
   </head>
   
   <body>

 ここで,(3) から (4) までをカット(切り取り)し,後で開いたメモ帳にペースト(張り付け)してください。
※ マウスで (3) の行頭から左ボタンを押したまま (4) の行末までドラッグ(白黒反転表示となったら左ボタンを離す)し,[Ctrl] キーを押しながら [X] キーを押すとカットされます。
※ 跡で開いたメモ帳のなかでマウスの左ボタンをクリックしたあと,[Ctrl] キーを押しながら [V] キーを押すとペーストされます。

CSSファイルの保存

 CSS定義部分のペーストが終わったら,[ファイル(F)]-[名前を付けて保存(A)] で「css5.css」として保存してください。
※ 拡張子の部分が「htm」ではなく「css」であることに注意してください。

 保存したらこのメモ帳は閉じても構いません。

CSS5.htmへCSSファイルの指定


   <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
   <html lang="ja">
   <head>
   <meta http-equiv="Content-type" content="text/html;charset=Shift_JIS">
   <title>CSS5:外部読み込み</title>
                    ←─ ここへ挿入
   </head>
   
   <body>

 「<title>CSS5:外部読み込み</title>」行と「</head>」行の間に

   <link rel="stylesheet" type="text/css" href="sample.css">

を挿入し,「上書き保存」(css5.htm)をしてください。

何故 CSSを外にだすんだろ?

 ブラウザを開いて,保存した「css5.htm」をドラッグしてみてください。

 「css4.htm」と同じ表示となりましたか?
 「CSS」で見栄えを設定する方法が2種類あることを説明してきました。

 それでは,何故CSSを外に出す必要があるのでしょうか?

※「CSS」がまだなかった頃は,「HTML」のなかで設定していました。

HTMLとCSSについては

次のステップとなるかもしれないもの

 検索するとインターネット上にはいっぱい入門のための Web ページを見つけることができます。
※ 無責任そのものですが,内容について検証したものではありません m(_ _)m

HTMLとCSSについては2

必要な都度参照するといいもの

 いわば辞書として使うことが多いです。

そしてもっとも大事で勉強になると思われるもの

 作った HTML ファイルを「Another HTML-lint」でチェックし,エラーとなった部分を調べることでかなりの学習効果があると思います。

最後に「HTML」の歴史と…

 「HTML」は「HTML 0」から「HTML 4.01」までバージョンアップがされてきました。
 そして「HTML 4.01」で『HTML の最後ではないかとも言われています。現在のところ、HTML の新たな草案は何も掲げられておらず、XHTML に移行するのではないかとも想像されています。』と言われてきました。
    ■ Tips HTMLの歴史(最新更新日 2004年3月13日) http://www.scollabo.com/banban/term/history.html

 ところが

 1998年,『HTMLの発展型としてXMLという規格がW3Cから勧告され』,更に 2000年『段階を経てXMLへ移行させよう』ということから『HTML4.0を基にしたXHTML1.0が勧告されました。』
     HTMLの誕生からHTML5までをザッと要点紹介 http://matome.naver.jp/odai/2136874479784697001

「HTML5」の登場

 ところが,ところが

 2006年,『世界をXMLへとスイッチさせる試みはうまく機能しなかった。』となり,『2007年からは、W3CとWHATWGが協力して、HTML5の標準化を進めます。』
     HTMLの誕生からHTML5までをザッと要点紹介 http://matome.naver.jp/odai/2136874479784697001

 そして…

 2008年,ようやく『従来のHTMLとの違いは、その拡張性と互換性。元々、ブラウザベンダーやそれに賛同した人たち主体で進行していたプロジェクトだったため、現場の声がよく反映されている。文書構造という概念はもちろんありますが、次世代というか、現代的な香りのする仕様になってい』るHTML5草案を発表しました。
     HTMLの誕生からHTML5までをザッと要点紹介 http://matome.naver.jp/odai/2136874479784697001

「HTML5」って!?

 それでは「HTML 5」ってなんなの?ってことになるのですが,ひょっともするとこれから主流になる「HTML」かもしれません。(批判もまだまだあるようです…)
 当面は「HTML 4.01」でいいとは思うのですが,できれば少しずつでも学習していけるといいですね。
「HTML 5」ってのは
     HTMLの誕生からHTML5までをザッと要点紹介 http://matome.naver.jp/odai/2136874479784697001
によると…
現在普及しているウェブサイトで取り組みやすい設計になっている。
グローバルメニュー、サイドバー、ヘッダー、フッターはほとんどのサイトに存在するものです。従来は<div>タグにIDやCLASSを指定してのですが、これに基づいたタグがあらかじめ用意されているので直感的。<header</header>などのように、あまり考えることなくレイアウトの枠組みは組めるはずです。
プラグインを使わなくても動的な機能が扱える。
<video>や<audio>タグが登場。これにより、<img>タグと同じ感覚で映像や音声データが簡単に取り扱えます。
ブラウザごとの互換性を気にしなくていいようになる?
今まで制作者サイドを困らせてきたブラウザごとの互換性。HTML5はその点に配慮し、細かい処理規則を定義しています。これからどこまでブラウザ間の互換性の差異が解消出来るかは分かりませんが、大いに期待したい面ですね。
     HTMLの誕生からHTML5までをザッと要点紹介 http://matome.naver.jp/odai/2136874479784697001





    おしまい