シリーズ第4回になります。今回は前3回の総仕上げです。
ブラウザ(私の場合IE6.0)上で目に映る部分についての「手直し」作業です。

1)字の大きさー全般的に文字をひと回り大きくします。      変更する。
2)背景色(または背景画像ー今回は背景色でいきます。)全体のバランスから適当な色を探す。
3)矢張り、スクロールバーの色も揃いたいので今回設定します。  追加する。
4)「自作のライン」を <div> タグに入れ「スタイルを設定」 追加する。
5)最強調タグ <strong> 5箇所にカラー設定 (赤色)       追加する。
6)シリーズ名に <h6> タグを使用。「スタイルを設定」      追加する。

以上5件を行いました。追加タグ <div>、<strong>、<h6> の3つと <body> にスクロールバーを増やし、バーの色設定の解説を付けました。
また、旧 <font> タグの記述を減らすため、適宜 <span> タグを使用しております。
今回のポイントは「ライン」にも「太字」にも「スタイル」が設定できるということです。
このhtmlソースの「head」部もご覧下さい。
以下からが本格的なページになります。 (ラインは、「〜」を「スタイル」した、オリジナル作品です。)

〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜
〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜
スタイル設定シリーズ 第4回

HTMLとスタイルシートの解説集と設定 4

このページはこの道の「先達、大家または著名なホームページ作成サイト」に案内して「HTML」の 解説を試みるものです。
勉強中の私が説明する場合ですと、あちこちのサイトや参考書からの 知識で行うわけですが、その際次の弊害が生じます。1.全文まる写しを避ける為、変に歪曲して しまい勝ちになります。2.重複部分が生じます。3.肝心のところが脱落してしまいます。

との反省もあって、このページを企画しました。なを、案内に当たっては下記3項目を列記しご 案内いたします。(これで、著作件の侵害も無くなり、また、私が変に考えることもなく、組み 立てだけの作業になりますので、比較的に早いペースで纏めることができそうです。)

の3項目を出来うる限り明記して「リンク」させていただきます。 先ず導入編として「 W3C勧告文書HTML 4.01 specification" 」を和訳したサイト「HTML 4仕様書邦訳計画補完委員 会訳(委員長 内田明外大橋正典、岡橋一輝、角谷徳仁、水無月ばけら、矢野啓介共訳)「 HTML 4仕様書邦訳計画」から入ります。 

アーカイブ欄ー「邦訳」をクリック
「HTML 4.01 仕様書邦訳概説」をお読みの上、その「 タイトル」をクリックすると
目的とする「W3CHTML 4.01仕様書ー1999年12月24日付W3C勧告」が開きます。
もうこの「正確を期して邦訳したページ」を、仔細にまた、折に触れ熟読すれば、もう何も言うことなく 「htmlとスタイルシート入門」は十二分に果たされたことになります。

ただ、その中にあって、愚鈍な私でも「分かり易いな・やさしいな!」と思われるサイトが有ったら、 上記6氏や他著者のサイトなど横道をも楽しみたいと思います。しかし、基本は勿論このサイトです。 念のため。

第一章 HTMLについて予備知識

htmlとは?

神崎正英氏
トップページ
プロローグ:htmlって何だ  30分間html入門
正しいhtmlのための若干の知識 (実体参照、署名、コメント、文書型宣言の意義説明) 取り上げた「要素タイプの一覧」と要素の親子関係」(表の右側に親と子の要素が記載、下段に親子関係の説明有り。)
(他にも良いサイトが沢山有りますが、私の独断と偏見でこれにしました。以下この調子で行きます。)
30分間html入門の下段にあります。各ソース例をブラウザで見てみましょう。

実際に試してみよう

The Web Class
トップページ
タグの解説と入力練習 どのタグを選んでも下段に、「◆そのタグの使用例のソース表示」「 ◆入力練習だけのページ 」があります。

上の練習が終わったら「神崎氏の」「30分間html入門の下段にあります。各ソース例もやって、ブラウザで見てみましょう。」

タグとは?

上記 「W3CHTML 4.01仕様書」簡略目次3
3.SGMLとHTMLの関係」の1/3あたりに緑色斜体で「タグ」と「要素」の違い有り。DTD解説有り。

要素について

上記 W3CHTML 4.01仕様書
要素索引
要素名をクリックして下さい。既に和訳された文章でこと細かに解説してあります。 DTDも有ります。
著者:WDG(Web Design Group)
翻訳権者:加藤泰孝氏サイト
HTML4.0要素の機能別一覧 タブ「Hide non- strict elements」でHTML4.01strict仕様要素に、同じく「ShowでHTML4.01transitional」仕様要素への変換ができて便利です。
ブロっク要素              同上
インライン要素             同上
著者:K16氏
Another HTML-lint ここで,html文法のチエックもできます。
「タグ一覧」から必要とするhtmlタイプを選択。例えば「 xhtml1.1」の場合です。
行頭のタグをクリックで即座に目的のタグへ飛び、用法も一覧できます。(上級用でしょうか。)

HTMLの記述に入ります。

Noriaki Akifusa氏  (非常に簡潔でわかり易い。私がお手本にしています。またページのhtmlソースに感動し ています。)
HEAD、META、LINKの記述
正しいHTML1 (論理構造理解の為サンプ ル比較で説明) 「正しいHTML2」もどうぞ。

要素「p」のparagraphと段落論

HTMLで使用する主な用語

要素の親子関係と継承

  1. 著者:WEB for biginner 作成支援 
  2. 要素の親子関係(図説)
  3. (私はここ発行のメルマガの受信者です。私のページのスタイルシートに多用します。著作権の問題上引用・説明等に触れることが出来ません。

便利ツール紹介

  1. Excite エキサイト辞書:研究社新英和・和英中辞典(英和コンピュータ用語辞典有)
  2. 上記 The Web Class著:タグの解説と入力練習  入力htmlソースをその場でWeb表示
  3. 上記 大藤幹著:カラーチャート HTMLテンプレート

第ニ章 スタイルシート入門編

何処へ、どのような形態で設定するのか?

  1. 著者:上記 神崎正英氏
  2. スタイルシート1 - スタイル設定の方法
  3. スタイルシート2 - CSSのプロパティ

以上の文章は前回のとうりですが、後半の「リスト部分」は「箇条書きあり」に替えいろいろの箇条書きを施しました。

〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜
〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜

第三章 「シリーズ 第4回」上のとおり完成です。

(最初におことわりします。私の一人よがりの実習で、誤作動について責任は持てません。)

「実践編」第1回は大見出し <h1> タグにスタイルを設定しました。2回目は中見出し <h2> に のみスタイル設定しまました。

今回は <p> タグだけに設定する予定でしたが、<p> については1回2回の <h> タグ」の設定法 と全く同様ですので。<p> の設定と同時に「リスト書き」の <dl> <ul> <ol> にも「スタイル」 を設定しました。
<dl> 箇条書きの定義のみで記号、番号はありません。<dt> で説明 <dd> で内容になります。

<ul> 箇条書きー通し番号なし
<ol> 箇条書きー通し番号あり

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

inserted by FC2 system