(作成日 H14.07.11　　 改訂　H15.10.15)

カスケーディングスタイルシートの文字盤です。

人が呼びかけている図です。

ー

◇１．スタイルシートへの序章１

◇ まえがき

より豊かな表現力を目指してhtmlは進化しています。また、詳しいことは分かりませんが、「ＩＥ」と 「ＮＮ」の２大ブラウザの熾烈な競争は､各々独自のタグを先行させ、その後を「Ｗ３Ｃ」が追随する ことなどあって、HTMLタグのみでの表現力には無理が生じました。

その解消策として開発されたのが「スタイルシート」です。HTMLは本来の論理構造のみとし、 見映え・装飾部分については「スタイルシート」で行うことが推奨されております。
使用する属性は130種位有りますが、使用していると自然に覚えられるものです。全部を覚えられずとも辞書を傍らに置いて補えばすむことで、結果として表現力も豊富になり、また、活字の大幅な減少につながり非常に軽いフアイルが出来上がります。

下記「HTML チェックの結果」にでも「bgcolor」や「align」の使用は余り薦められず、何かにつけて 「スタイルシート」の使用を促しているところであります。
「スタイルシート」や 「JavaScript」の学習には、やはり幼児の如く真似々に越したことはありませ ん。そうしているうちに、「おぼろげながら」大体のイメージが掴めます。そうした上で参考書等を読むと 非常に分かり易くなる筈です。

◇ 1-1. HTMLとは何でしょう（再度）

1965年にTed Nelson という人が提唱した概念ですが、文書を読んでいる途中で、ある部分について関連 する資料を見たいと思ったとき、文字で構成された「タグ」と呼ばれる「コマンド」を使って、そこの 「テキスト」部分を「マークアップ（下記参照）」し、欲しい資料をダイレクトに呼び出し参照できる 機能を持たせました。
この機能のことを「ハイパーリンク」または単に「リンク」と言いこの機能を持つ文書のことを「ハイ パーテキスト」と呼んでいます。

マークアップ（Markup）とは、普通の文書に目印を付けることで、その部分が文書中でどんな働きをし ているかをはっきりさせようという考えです。ランゲージ（Language）コンピュータ用語としての言語です。

「ホームページ」は、そのHTML言語で書かれていて、拡張子は「.htm」かまたは「.html」のどちらかで 表示する決まりになっています。この「ファイルのhtml文（全文テキスト）」を読み込んでいろいろな 表現を実行するソフトがブラウザと呼ばれる専用ソフトです。主なソフトに、IE6.0やNN6.0等あり２大 ブラウザと呼ばれています。

これはブラウザに表示される「テキスト」部分の、 「表示位置」や「文字属性」、また挿入する「イメージ ファイル」のレイアウト をするためだけでなく「ハイパーリンク」機能 から「他のフアイル」、「他人のURL」までも即座に関連付け参照できるように指定する「 タグという一種のコマンド」から成り立っていて、 全体としてはテキストファイルです。したがって、タグの知識があればWindowsの メモ帳で、作成できることになります。またhtmlはインターネットの事実上の標準ですから「文書を環境 に依存せずに共有できること」と、そこを正しく理解すると、実はHTMLは「簡単で強力な情報発信ツール」 になるのです。

　　　　

◇ 1-2. HTMLの表示の仕組み

誰かが、或るホームページを見ようとしてURLを指定すると、そのファイルがあるサーバが命令を受け 取ってファイルの内容をを出力します。このテキスト情報(ソースという)をブラウザが受け取り、タグ の指定を解釈(ブラウズ)してブラウザに表示するようになっています。通常、HTMLで書かれているファ イルは、ファイル名の拡張子をhtmlまたはhtmとしてサーバやブラウザが「このファイルはHTMLで書か れているな」とはっきり分かるようにします。

◇ 1-3. タグについて

タグとは、HTMLにおける、一種のコマンド(命令)です。タグによって、 ブラウザは単なる文字情報だけでなく、文字の色、大きさ、表示位置、イメージの貼り付け、リンクの 指定などをブラウザ上に表示することができます。

◇ 1-4. HTMLの正しい記述の仕方

◇ 1-4-1.「HTML」の文法のチェック

天下のW3Cではhtml文章の検証ツールをWEB上に提供しております。
W3C HTML Validation ServiceでHTMLとCSSの２つの検証が できます。当然英語版です。
そこで日本語版は無いものかと探したところN.A.氏のホームページから Another HTML-lint gateway というサイトを知り（既に移転）その後「Ring Server」で探し当てました。N.A.氏によれば「現実一番厳 しいチエック機能を有し、ここでチエックしたうえ,W3Cで検証したところ「NoErrors!」 のお墨付けを頂戴したそうです。（お墨付きは、検証が「No Errors!」の人にのみアイコンが現れ、 リンクが許されるのだそうです。）

Valid-HTML・ Valid-CSS
そこで私もRing Serverに「表のフアイル」を送り判定してもらったところ、同ページに下記の診断が表示 されました。なお、指摘された事項につては
Another HTML-lint gateway を開いてチエックオプションlineNo.ｘｘの解説をご覧ください。また、「エラーについて」全文および 「タグ一覧」等をお読みいただければ「HTML」の全容が分かり、何百とある丁寧な解説書に匹敵しており ます。

◇ 1-4-2.本ページ「HTML文法」のチェックの結果

チェックの結果は以下のとおりです。
http://www.ne.jp/asahi/minnade-hp/toyoshima/css_josho1.html を 
HTML4.01 Transitional としてチェックしました。
9個のエラーがありました。このHTMLは 97点です。タグが 19種類 70組
使われています。文字コードは Shift JIS のようです。


先頭の数字はエラーのおおまかな重要度を 0〜9 で示しています(減点数
ではありません)。
少ない数字は軽く、9 になるほど致命的です。0 は減点対象外のごく軽度
のエラーで (グレイのかっこつき) でメッセージされています。

0: line 62: (<HEAD>〜</HEAD> 内に <LINK REV="MADE" HREF="mailto:〜">
 が含まれていません。) → 解説 122
0: line 62: (<HEAD>〜</HEAD> 内に <LINK REL="NEXT" HREF="〜"> など
のナヴィゲーション用のリンクが含まれていません。) → 解説 123
0: line 69: (<IMG> の属性 `BORDER` はあまり薦められない属性です。
スタイルシートを使いましょう。) → 解説 82
0: line 72: (<IMG> の属性 `BORDER` はあまり薦められない属性です。
スタイルシートを使いましょう。) → 解説 82
0: line 72: (<IMG> の属性 `ALIGN` はあまり薦められない属性です。
スタイルシートを使いましょう。) → 解説 82
1: line 102: 半角カタカナが含まれています。 → 解説 132
1: line 132: 半角カタカナが含まれています。 → 解説 132
1: line 190: <A> の属性 `TARGET` はあまり薦められない属性です。
 → 解説 81
1: line 191: <A> の属性 `TARGET` はあまり薦められない属性です。
 → 解説 81


------------------------------------------------------------
チェックしたHTMLは以下のとおりです。
http://www.ne.jp/asahi/minnade-hp/toyoshima/css_josho1.html

<!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"> 
<META http-equiv="Content-Style-Type" content="text/css"> 
<TITLE>スタイルシート序章</TITLE> 
<STYLE type="text/css"> 
<!-- 
   a:link { color: #00f; text-decoration: underline; } 
   a:visited { color: #f0f; text-decoration: none; } 
   a:active { COLOR: #f00; text-decoration: none; } 
   a:hover { background-color: #fff5ee; 
                      text-decoration: underline; } 
　 
BODY { 
      scrollbar-face-color: #fffee6; 
      scrollbar-highlight-color: #fc6; 
      scrollbar-arrow-color: red; 
      scrollbar-3dlight-color: red; 
      scrollbar-shadow-color: green; 
      scrollbar-darkshadow-color: blue; 
      scrollbar-bace-color: white; 
      background-color: #fffee6; 
      font-size: 12pt; 
　    margin-bottom:20pt; 
     }　 
  h2     { height:61px; 
           padding-top: 16px; 
           padding-left: 15px; 
           padding-right: 15px; 
           margin-left: 30px; 
           margin-right: 30px; 
           background-color: #f90; 
           color: #ff0; 
           FONT-FAMILY: ＭＳ 明朝; 
           } 
　 h3    { height:40; 
           padding-top: 10px; 
           padding-left: 30px; 
           padding-right: 15px; 
           margin-left: 30px; 
           margin-right: 30px; 
           background-color: #f90; 
           color: #390; 
           FONT-FAMILY: ＭＳ 明朝; 
           } 

  div.migi  { text-align: right;} 
  p.chu     { text-align: center; font-size: 10pt; } 
  p,div,ul  { color: #309; 
              font-size:12pt; 
              FONT-FAMILY: ＭＳ 明朝; 
              margin-left: 50px; 
              margin-right: 50px; 
              line-height: 150%; 
             } 
span.aka   { color: #ff0000; } 
span.sho  { font-size: 10pt; } 
span.bo {font-size: 12pt; color: #fffee6; } 
--> 
</style> 
</HEAD> 
<BODY> 
<p style="font-size: 10pt; text-align: right; margin-right: 30px;">
(作成日 H14.07.11　　 改訂版　H15.10.15) 
</p> 

<p style="text-align: center;"> 
<IMG height="58" src="cssimage.jpg" width="541" border="0" 
alt="カスケーディングスタイルシートの文字盤です。"> 
</p> 

<p style="margin-left:100px;"><IMG src="v_n1.jpg" width="223" 
height="37" border="0" align="left" alt="人が呼びかけている図です。"> 
</p> 

<div class="migi"> 1.　スタイルシート序章</div> 
<div class="migi"> 
◇まえがき<span class="bo">ー</span> 
</div> 
<div class="migi"><a href="css_josho1.htm#ichi"> 
1-1 HTMLとは何でしょう</a> 
</div> 
<div class="migi"><a href="css_josho1.htm#ni"> 
1-2 HTMLの表示の仕組み</a> 
</div> 
<div class="migi"><a href="css_josho1.htm#san"> 
1-3 タグについて</a>　　<span class="bo">ー</span> 
</div> 
<div class="migi"><a href="css_josho1.htm#si"> 
1-4 HTMLの正しい記述</a>   
</div> 
<div class="migi"><a href="css_josho1.htm#go"> 
1-4-1 html例のチエック</a> 
</div> 
<div class="migi"><a href="css_josho1.htm#roku"> 
1-4-2 この頁のチエック</a> 
</div> 

<H2>◇１．スタイルシートへの序章</H2> 
<H3>◇ まえがき</H3> 
<p> 
より豊かな表現力を目指してhtmlは進化しています。また、詳しいことは
分かりませんが、「ＩＥ」と 
「ＮＮ」の２大ブラウザの熾烈な競争は､各々独自のタグを先行させ、その
後を「Ｗ３Ｃ」が追随する 
ことなどあって、HTMLタグのみでの表現力には無理が生じました。 
</p> 
<p> 
その解消策として開発されたのが「スタイルシート」です。HTMLは本来の
論理構造のみとし、 
見映え・装飾部分については「スタイルシート」で行うことが推奨されて
おります。<br> 
使用する属性は130種位有りますが、使用していると自然に覚えられるも
のです。全部を覚えられずとも辞書を傍らに置いて補えばすむことで、結
果として表現力も豊富になり、また、活字の大幅な減少につながり非常に
軽いフアイルが出来上がります。 
</p> 
<p> 
下記「HTML チェックの結果」にでも「bgcolor」や「align」の使用は余
り薦められず、何かにつけて 「スタイルシート」の使用を促していると
ころであります。<BR> 
「スタイルシート」や 「JavaScript」の学習には、やはり幼児の如く真
似々に越したことはありませ ん。そうしているうちに、「おぼろげなが
ら」大体のイメージが掴めます。そうした上で参考書等を読むと 非常に
分かり易くなる筈です。 
</p> 

<H3>テ
キスト</strong></span>」部分の、 「<strong>表示位置</strong>」や
「<strong>文字属性</strong>」、また挿入する「<strong>イメージ 
ファイル</strong>」のレイアウト をするためだけでなく
「<span style="color:#099;"> 

<H3><a name="#san">◇ 1-3. タグについて</a></H3> 
<p> 
タグとは、HTMLにおける、一種のコマンド(命令)です。タグによって、 
ブラウザは単なる文字情報だけでなく、文字の色、大きさ、表示位置、
イメージの貼り付け、リンクの 指定などをブラウザ上に表示すること
ができます。 
</p> 
<H3><a name="#si">◇ 1-4. HTMLの正しい記述の仕方</a></H3> 

<p class="chu"> 
<A href="index.html" target="top">トップへ戻る</A> 　　　　 
<A href="mokuji.html" target="_top">目次へ戻る</A>　　　　 
<A href="v1style.html">真似々CSS JavaScriptへ</A> 
</p> 
</BODY> 
</HTML> 
[about] [sitemap] [gateway] [lite] [dyn] 　追記）ここまでです。

トップへ戻る     スタイルシート目次へ戻る    序章２へ

inserted by FC2 system