１０年來私はホームページをメモ帳だけで作っている。メモ帳にＨＴＭＬのタグとテキストを書き並べていく。ＨＰＢのような作成ソフトは使わなかった。一度作ると、後は殆どコピー＆ペーストで書けるので、そうやりにくいことはなかった。

  最小限の体裁（レイアウト）は、センタリング と改行で済ませた。 レイアウトに表組み（テーブル）を使うことを知っていたが、構造が複雑になるため、本来の表に使う以外は使ってこなかった。
  それで作ったのが殆ど画像で占めている、 花と緑と景観のページです。

３年前から、これにＣＳＳ/スタイルシートの記述が加わった。これにより、HTML&CSSによるホームページ（Ｗｅｂページ）作成となりました。自由度のある多彩なＣＳＳの機能を加えることで、見栄えの良いホームページを作ることができるようになった。
<  最初からHTML&CSSだけで作ったのが、パソコンサポートのページ、 パソ救ふじさわです。

  ホームページ（Ｗｅｂページ）作成の勉強を始めると、HTMLという言葉がすぐ出てくる。
  パソコンというもの、出力（画面の表示やプリンター印刷）段階の素朴な表現方法は、英文タイプライターの打ち方を真似している。基本は左詰め。左から右へ文字を並べ、改行で次行先頭に移る。

  HTMLは素朴な原語であって、何もしないと左詰めになり、それを＜center＞ タグで行全体をセンタリングしてページ内の体裁を整える。また改行で１行ずらして見やすくする。スペースで１字分右にずらせるが、見かけ上いくらスペースをあけても、実行時には１字分になってしまう。
ＨＴＭＬのレイアウトの基本はこれだけ。

  文字はテキストといい、テキストだけのファイルはテキスト形式といい、容量的に一番軽い形式。HTMLファイルの拡張子はhtmまたはhtmlであるが、テキスト形式である。
所詮、左詰めのテキスト文だけでは淋しく、実際のホームページは画像等が入ったり、キレイにレイアウトされたりで楽しい。これは、画像を別の場所（フォルダ等）に格納しておき、リンクのタグをテキストで書くことで可能にしている。

  HTMLはセンタリング、改行、１文字スペースだけでは、たいしたレイアウトは出来ないので、＜table＞テーブル（表組み）によって、殆どのホームページは構築されている。
表の枠の中に画像等を置き、表の枠を線幅ゼロにし見せないことで、レイアウトに使っている。（枠線の初期値はゼロ）しかし、レイアウトのためのテーブル利用は、記述が複雑で長文になり、自由度がなく、あまり良い方法ではない。
そこで、ＣＳＳ/スタイルシートが登場し、HTMLはページ構造の部分を担当し、ＣＳＳはデザインの役割を担当するHTML&CSSの考え方が一般的なＷｅｂページの作り方に定着してきた。

  ＨＴＭＬでは、テキストや画像は左寄せになり、レイアウトに関するタグは、基本的にはセンタリングと改行と一字スペースだけであり、実際には線幅のないテーブル（表組み）を多用して、ページの中にどうにかレイアウトしていく。

  テーブル以外には、＜hr＞タグで横線を引いたり、＜li＞ リスト（箇条書き）タグで頭揃えすることが出来る。
  あまり、紹介されていないが、花と緑と景観のページでは＜dd＞タグを使い行の頭を右に寄せ、タブのような働きをさせている。1個で全角３字、２個で全角６字ほど右寄せすることが出来る。

  ホームページのデザインとなると、テキストや画像のレイアウトの他に、文字の色やサイズが要素になり、これらは＜font＞ タグで指定することが出来る。また、背景の色や背景画像により、彩りがよくなるが、これは、＜body＞タグや＜table＞タグのなかの記述で指定することが出来る。

  テーブルについて、もう少し詳しく見てみると、表の枠線の幅は、border といい、ボーダーは当初ゼロになっている。それを利用して、テーブルのセルの中に画像などを置き、そのセルの左右に横幅を持った空のセルを置くことで、レイアウトしていく。
  セルは、＜tr＞ ＜td＞ ＜/td＞   ＜td＞ ＜/td＞   ＜td＞ ＜/td＞ ＜/tr＞ の形のタグからなる。

  画像（拡張子 jpg ）、描画（拡張子 gif 等）はセンタリングのほか、align="right" （CSSではｆｌｏａｔプロパティのｒｉｇｈｔ）で右寄せが出来るが、それ以外の場所にレイアウトしようとすると、テーブルの世話になる。
  テーブルは＜td＞ ＜/td＞ の間に画像などを入れる。＜td ＞タグの中に＜td width="222"＞のように横幅の値を書く。画像をレイアウトするには、上記のように最小限３個のセルを使う。作成ソフトを使うと、これらは自動的に書かれるので苦労は無い反面、全部縦に並ぶので、冗長な長文になってしまう。
  本来セルの高さや幅は、一番大きい値のセルに、自動的に合わされるので、必要なセルだけに書き、後は省略できるのに、作成ソフトでは、全部のセルに値が書かれ、ソースが長くなってしまう。
  さらにフォントや色等を変えたい場合は大変で、全部のセルに同じことを書かねばならない。そこで、最小限の記述でデザインが出来るＣＳＳの登場となる。

  HTMLの 拡張子 ｈｔｍ（ｈｔｍｌ）のファイルをクリックすると、ブラウザの Internet Explorer （Ｉ・Ｅ）が起動し、ホームページが開く。普通は、ホームページをこんな開き方で見ないのは、ブラウザを起動したとき、ＹａｈｏｏＪａｐａｎなどのトップページが開くよう設定されているから。検索で開いた後はリンク、リンクで進めるので、htmのファイルを知らなくても済む。HTMLファイルを自分で開かなくても、好みのホームページに入った時、そのページを右クリックしてメニューを出しメニューから”ソースの表示”をクリックすることでHTMLファイルを見ることは出来る。ソースとは源であるが、プログラムリストの意味がある。

  自分のホームページなら、どのページでも”ソースを開く”で開ける。
  HTMLファイルはＩ・Ｅ７までは、パソコンにある「メモ帳」の上に開いたが、Ｉ・Ｅ８からは、Ｉ・Ｅ８のフォームに表示される。そのフォームで印刷も出来るが、メモ帳のように入力・編集はできない。

  Ｉ・Ｅ８から表示が何色かのカラー表示に改良されたのには驚いた。色分けであるが、調べてみて分かったのは、紫はタグ、赤はタグの属性など、青はタグ内のデータである。文字（テキスト）は黒になっていて、タグ内の文字も黒である。ソースはタグといわれるプログラムの部分と青色と黒色で表示されるテキストが混在したもの。  検索エンジンが、すべてのホームページをサーチして、キーワード毎の順位付けをしてくれるが、エンジンが読むのはテキストだけと聞いている。この色分けで、我々もロボット並みの読みができるようになったと言える。

  ホームページのソースを開き、詳しく見てみると、HTMLだけで書いたもの、ＨＰ作成ソフト（HTML型）で書いたもの、作成ソフト、HTML&CSS型で書いたもののそれぞれの特長が良く分かる。
HTMLソースにおいても、世の中と同じシンプル・ザ・ベストである。そしてページ内に、黒字・青字の量が多いほうが良いソースといえるのではないか。

  「ホームページはソースを見てみよう 」 で、ソースは、タグというコマンドとテキストデータが混在したプログラムリストであり、Internet Explorer ８からは色分けされて表示される。そこで黒字･青字のテキスト部分が多いほど情報量が多いので、良いプログラムではないかと言っている。
ところがイメージのリンクなどがあると、一概に言えない。一行のイメージリンクの文で呼出されるイメージ(画像)情報は、はるかに大きい情報なので、文字情報と比較することは出来ない。ロボットはイメージの内容を読むことはできないので、価値がないことになるが、人間はそうではない。
  要は、同じ素材とテキスト情報があって、それを処理し表現する方法が何通りもあったとき、ソースができるだけシンプルであるほうが良いプログラムであるという評価である。
とにかく、シンプルなソースはプログラム作成も容易で、メンテナンスも楽だし、処理速度もその分早くなる。

  画像、描画、動画を表示するイメージのオプションに、オルト （ａｌｔ：代替テキスト）というをテキストの部分があるが、表示には無関係なので、書かないことが多いうが、検索ロボットはこれを読むので、めんどうでも書いた方が良い。
  ”ソースの表示”で出るリストをダウンロードして、メモ帳で開くことができる。
    （１）メニューのファイル − 同名保存 − （デスクトップに）名前をつけ保存
    （２）Windowsキー＋M で 一括最小化デスクトップにある、名前．txtを開く
  ソースはメモ帳で見るほうが見易い。

  ＨＴＭＬ＆ＣＳＳは融通性のあるプログラム言語。
 ＨＴＭＬのタグとスタイルシート/ＣＳＳのタグが混在しても通用する。
ＨＴＭＬ＆ＣＳＳは間違ったタグを使っても間違ったスペルでも、通してしまう器量の大きさがある。エラーメッセージは一切でない。その部分だけ無視されてしまう。無視されるが最低テキストは表示する場合とテキストも飛ばしてしまう場合がある。
  スタイルシートはデザイン面でＨＴＭＬの不完全さを補うものであるが、実は、HTMLにある表現のための機能を全部置き換える力を持っていて、ＣＳＳのプロパティだけで構造とデザインすべて表現できる。ただし、HTMLのタグはCSSの表現を生かすいれものとしてそのまま使えることになっている。しかもＨＴＭＬタグでの機能とCSSの機能を混ぜて使っても十分通用してしまうのでこれまでHTMLを使い込んできた人にも安心・安全である。
   例えば、HTMLのセンタリングの＜center＞だが、ＣＳＳでは他の方法でセンタリングすることができるが、手っ取り早く＜center＞を使っても問題は起こらない。

  タグは開始タグと終了タグで一対なのだが、ＨＴＭＬだけのときは、終了タグを省略してもよいものもあったが、＜br＞（改行）の他は一切終了タグは省略できないことになっているものの、HTMLだけで書いたものをCSSのなかに取り込んでも、通ってしまう。これはHTML&CSSがネット上多種多様のサーバーを経由する使用するオープンシステムに使われるので、ひとまず通してしまい、問題点を後で自己責任で解決させようとする配慮と思われる。したがって、ひとまずどんどん書いていくことである。作成ソフトの場合はエラーメッセージがでるが手書きの場合それがない。エラーチェックはないといっても、結局自分の方に災いがまわってくるので、気楽ではあるが気が抜けない。
HTMLで書かれたホームページにスタイルシートを適用すると、見栄えの良いページ、見やすく分かりやすいページになる。またソースが短くなり編集に楽になるなど利点は色々ある。企業・商用のホームページの半数は、ＣＳＳ・スタイルシートになっているが、個人・団体のホームページのＣＳＳ化は遅れているのが現状。
  これは、ホームページがHTMLタグの理解の上、手書きで積み上げるのではなく、ＨＰＢのようなホームページ作成ソフトで簡単に作ってしまうからと思われる。作成ソフトは今や一般常識化しているので、この傾向は変えらられないと思うが、少し背伸びすれば誰でも恩恵を受けられるので、作成ソフトを利用する場合でもHTML&CSSの個々の機能を勉強して、ソースというものを手の内にして、スタイルシートを現状のソースの中に加えていくことで、見栄えの良いホームページに改良されていくと思われる。

  ＨＰＢなど作成ソフトはバージョンを追うごとにＣＳＳ化が進むと思われるが、基本的な問題があり、限界があると思われる。またプロが使うようなＣＳＳを取り入れた作成ソフトはかなり高価になっていて使えないと思われる。

  そういうことでホームページを作成ソフトでやられた方、HTMLを有る程度理解されてる方を対象に、こういうことをしたい、ああいうことが出来るかに答える形でブログ調で書いていくことにする。

  もう一つのねらいは、ＷＥＢアプリケーションのためのHTMLである。近年はＰＨＰという開発ソフトを使ってブラウザだけで動くアプリケーションソフトをつくることがトレンドになりつつあります。インターネットを利用する為についているブラウザで動くので、パソコンによる機械化・業務効率化の垣根が年々低くなってきたといえる。
  ただそのプログラムはＨＴＭＬソースの上に書かなければならないので、最小限HTMLの基礎を理解しなければならないし、同じ内容を表現するにも、スタイルシートを使って、読みやすく見栄えのする画面のためのHTML&CSSにした方がいいというわけです。

ＨＴＭＬ＆ＣＳＳを理解するためには、自分のホームページ、人のホームページをよくみることから始る。
ここにＨＴＭＬだけで書いて、テーブルを使わないセンタリングだけでレイアウトしたページがある。
    花と緑と景観のページ
新林公園   これを開いたら、ソースを出してみよう。（出し方：右クリックして、ソースの表示をクリック）
  ページはつぎのような構造になっている。
ブログとソースの同時は見難いので、ソースを印刷しても良い。
注１：タグの＜＞は半角なら、ブラザに影響して良くないので、ブログ上は全角に替えている。
注２：ソースに行番号が振られるのは、Internet Explorer８から
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
＜HTML＞
＜HEAD＞
＜TITLE＞新林公園＜/TITLE＞
＜/HEAD＞
＜BODY＞
    里山の春、新林公園‥‥説明３行
    ――――――――――――
    １段目の画像２枚のイメージリンク文＜img src＞
    その説明
    ２段目の画像２枚のイメージリンク文＜img src＞
    その説明
    ３段目の画像２枚のイメージリンク文＜img src＞
    その説明
    ４段目の画像２枚のイメージリンク文＜img src＞
    その説明
    ５段目の画像１枚のイメージリンク文＜img src＞
    その説明


＜/BODY＞
＜/HTML＞
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝

・１０行目： センタリング ＜center ＞
・４２行目： センタリング終わり ＜/center＞
・０９行目： 水平線 ＜hr＞
・各行の画像、説明で、改行 ＜br＞
・４３行： トップページへのリンク ＜a href=" "＞‥‥＜/a＞

  手書きHTMLで、テーブルを使わないと、空行をいれても全部で４５行で済んでいる。

  ＨＰＢなどで自作ののホームページのある方は、是非ソースを開いてみて研究してください。自作してない方は、適当な個人のホームページを開いてみてください。

  殆どのホームページのソースをよく見ると、＜html＞タグより前に一行、
＜!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"＞
と書いてある。これはDOCTYPE宣言というもの。そのHTMLがどのバージョンの文法規則にしたがって記述したものであるかを示すもので、そのままコピーして記述しておけば問題ないとのこと。文の中にある、transitional というのは、仕様がゆるやかで、非推奨のHTMLのタグと推奨のスタイルシートのタグを混在させたりすることができ、融通が利くものといえる。

  他に＜head＞＜/head＞の間で、文字コードを宣言する記述、検索ロボットにページの紹介文やキーワードを伝える記述やスタイルシート使用に関する記述がある。

  とにかく、ＨＰＢなどソフトのソースは、いろいろ、ながながと書いてあり、ページの中のHTML全体を把握しにくいが、それでも、よく見ると、段々分かってくる。
テーブルの‥‥のタグが縦に並んで、繰り返しているのが目立つが、レイアウトをテーブルで行う限りやむをえない。

  見本のページように、必要なことだけ書いて、センタリングするだけでも、一応ページとして見られることを知って欲しい。そしてこれがスタイルシートの基本になることを抑えておいて欲しい。

  先に、ネット上の他人のホームページに入り、そのソースを開いて詳しく見ることをやってみたが、次にメモ帳を起動し、HTMLでタグを使って文を書いてみて、拡張子 ．htmで保存、次にそのファイルを開いてみよう。

（１）メモ帳の起動の仕方
  普通は、スタート − 全てのプログラム − アクセサリ − メモ帳 で起動しますが簡単に起動するには、デスクトップ上にアイコンを置くこと。そのためには、上記の操作の最後のところで右クリックし、”スタートメニューにアイコンを追加”をクリックする。次にスタートにある、メモ帳のアイコン上で右クリックし、送る − デスクトップ（ショートカットを作成）でクリックすると、デスクトップにアイコンが作成され、起動がしやすくなる。

メモ帳のアイコンをクリックして起動

（２）メモ帳に練習用の文を書く （タグはすべて半角で書く）

＜html＞
＜body＞
＜br＞＜br＞＜br＞
第２７回湘南江の島春まつり＜br＞
＜/body＞
＜/html＞
注：１行目では見難いので３回改行し４行目に表示する。

（３）保存する
名前をつけて保存− matsuri.htmと入力 − 保存

注：保存先はデスクトップとする。
注：ファイル名は、パソコン内部で使う場合は、全角でも良いが、いずれインターネットに使うので、その場合は半角でなければならない。
注：メモ帳の保存で拡張子を入力しなければ ．ｔｘｔ になるので、意識して．ｈｔｍと入力すること。

（４）そのｈｔｍファイルをメモ帳で開く
デスクトップにある matsuri.htm で右クリック − 送る- メモ帳でクリック

  ※ ｓｅｎｄｔｏに「メモ帳」の設定のしかた

    スタートで右クリック、エクスプローラを表示させる − ｓｅｎｄｔｏフォルダを開く − メモ帳のアイコンを そのフォルダにドラグ＆ドロップ


なお、＜html＞ ＜body＞のタグは無くても同じように表示される。ブラウザが開くのは、あくまで拡張子が .htm となっていることだけで通じる。

以上をマスターすれば、ＨＴＭＬの書き方の基本は会得したことになる。これで自由に「メモ帳」で手書きのｗｅｂページを書くことができる。

  HTMLのソースは、大文字も小文字もあったが、スタイルシートは小文字で書くことを推奨している。

  HTMLの場合、よくタグは大文字、その他の定義は小文字にしていたが、スタイルシートでは、タグも小文字で書く。これは、HTML&CSS時代はまだ大文字も認められるが、後継のXhtmlでは要素名（タグ）は小文字で書くという決まりになっているので、いきおい今からコマンド全部を小文字で書くようになっている。
  もっとも今は、HTMLの文法もスタイルシートの文法も混ざった場合も通るので、現実の問題はないが、将来に問題を残さないためにもソースは小文字にしておくほうが良いようである。

  一方、日本語は、大文字小文字以外に、めんどうな全角・半角区分がある。パソコン入力をスムーズにするため、通常私は、言語バーは全角モード中心にしている。そして、半角入力が必要なときも、あ状態で入力した後、F１０を押して済ませている。なんといっても利点は、全角で読みをいれて、熟語や記号を出せることにあり、これにより入力を最小限にしようとしている。ｈｔｍｌと入力してHTML&CSSと出したり、ｆｏｎｔといれて一気に" font-size:95%;"を出したりしている。

HTMLではここまでしかできないが、ＣＳＳ(正確にはHTML&CSS)ではここまでできるという比較。ＣＳＳでよく使うものを挙げてみる。

（１）フォントサイズ
  HTMLは１から７まであるが自由度がない。WEBページではよく２が使われるが２は小さすぎ、３は大きすぎる。  ＣＳＳでは標準に対するパーセント指定ができ、無段階でサイズを変えられる。３の標準にして、９５％くらいを指定すると程よいサイズになる。

（２）行間
   HTMLでは行間はゼロで読みにくいが、ＣＳＳでは行の高さをパーセント指定で無段階に変えられる。１５０％で１行の５０％の行間が取られる。

（３）行頭
  HTMLでは左端にぴったりで詰まった感じだが、CSSでは段落を囲む見えない枠の外側の余白（マージン）を適宜とることで自由に空けられ自然な感じになる。行末、上端、下端も同じ考えで空けられる。

（４）枠線
  HTMLでは、水平線は引けるが縦の線が引けない。CSSでは、段落を囲む枠（ボーダー）の３辺を線幅ゼロにし、必要な１辺を線の種類・線幅・線の色で指定することで縦の線が引ける。横線も水平線を使わずこの考えで引ける。

（５）テーブルの枠線
HTMLでは、テーブルの最小の線幅でも太くやぼったい。CSSでは境目の線を重ね合わせてで細い線にすることで、すっきりと見栄えがよくなる。

（６）テーブルのセル内余白
HTMLでは、セル内のテキストは上下左右の線にぴったりついて窮屈そう。CSSでは余白（パディング）が指定できるので、ゆったりで見栄えがする。

（７）テーブルのセルの定義
HTMLでは、セルの背景色やセル内テキストの色・サイズ等をを変えるとき、対象の全部のセルに同じ記述をしなければならないのでソースが長くなる。CSSでは、全体の要素にスタイルを定義するだけで、各セルに定義が及ぶような仕組みになっているので、ソースがずっと簡潔になる。さらには、列毎のスタイルを変えられたり、ヘッダー（項目名）のスタイルを変えること、さらには、ある特定のセルだけ強調することも可能である。

（８）段組み
  行の幅（width）をパーセント（又はピクセル）で指定して、それをフロートタグで左右にレイアウトすることで、２段組み、３段組みがテーブルを使わず段落のみで組むことができる。

  ＣＳＳスタイルシートの適用は、
（１）外部ＣＳＳファイルに、スタイルを定義するもの。拡張子は、.css であり、複数のページに適用することができる。
（２）ページの＜head＞ ＜/head＞の間にスタイルを定義し、ページ内に適用するもの。
（３）タグの属性で定義しタグ内だけに適用させるもの。

  （１）と（２）の書き方（文法）は同じであり、セレクタというものにスタイルを定義し、本文のタグの中でセレクタをクラス名でリンクしてスタイルを適用させる。
  （３）はセレクタを飛ばして、その場でスタイルを定義するので、一番分かりやすくミスが出ない方式だが、同じ文を何度も書くことになり、その分ソースが長くなるし、そもそもスタイルシートの特長を生かしていないので、どうしても（１）と（２）で書くようになる。
  ただし（１)より（２）、（２）より（３）の方がスタイル適用の優先度が高いので、（３）で個別のスタイルを定義する場合に適切な方法。

  スタイルの定義の書式は、何（セレクタ）に対し、どんなスタイル（プロパティ）をどのようにする（値）という順序・形になる。プロパティ：値は大括弧ではさむ。
  セレクタは、＜p＞や＜table＞などのタグが、そのまま要素セレクタとして働き、定義する ｛プロパティ：値｝ がそのタグ全部に及ぶことになる。全部に及ぶと困ることになるので、定義毎に名前をつけ、それをクラス名という。

  ●外部ＣＳＳファイル又はページのヘッド部分での定義のしかた

    ＜セレクタ＞.クラス名 ｛プロパティ：値； ｝
     （値； は何個でも続けることが出来る）
     例：div．text1{ color：red； font-size：:95%； }

  ●本文の中での書き方

    ＜要素 class="クラス名"＞
    例：＜div class="text1"＞ 内容 ＜/div＞

  このように、本文の中のテキストの量は最小限となりソースがスッキリする。

  ●タグの中で個別の定義の書き方

   style=""の形をタグ（要素）の中に”プロパティ：値”書き加える。大括弧で括らない。     ＜div class="text1" style="font-family："ＭＳ Ｐ明朝 ；"＞‥‥ ＜/div＞
  これで、前項の定義の他に、字体がＭＳ Ｐ明朝になる。

  スタイルシートの適用は３方法ということだが、そのためには次のような仕掛けが必要。外部ファイルの（１）の場合とページ内の（２）と（３）の場合では仕掛けが異なる。

  ●外部スタイルシートを使う場合は、Ｈｅａｄ要素内に次の文を記載する。
    ＜link rel="stylesheet" type=text/css href="ｃｓｓ_kouza.css"＞
  ●ページ内及びタグ内にスタイルシートを適用させるには、Ｈｅａｄ要素内に次の文を記載する。
    ＜style type="text/css"＞ スタイル定義 ＜/style＞

  ＣＳＳファイルは、テキスト形式であって、これもメモ帳で作成することが出来る。
  スタイル適用は３方法あり、適用の優先度は（３）（２）（１）の順になるのだが、実はもう一つ第四番目がある。
  それはスパンタグにスタイル属性を足したもので、それはタグ内のテキストの中で部分的に使え、これが最優先となる。
  ＜span style="color:blue"＞内容＜/span＞


  HTMLではフォントサイズは段階が１から７まであるが、実際に並べてみると分かるが、大きすぎたり小さすぎたりで、あまりいい段階でない。１は虫眼鏡が要るくらい小さいし、４から７は大きすぎ見出し以外には使えるものではない。結局２と３を使うしかないが、３の標準サイズは慣れてくると少し大きすぎるので、やむを得ず２になり、シニアには厳しいがネットでは一番使われている。２と３の間にもう１〜２段階欲しいところだか、HTMLである限りこの基準は変わらない。

  そこでスタイルシートになるのだが、こちらは標準に対するパーセントで無段階で指定できる他、ピクセル単位、インチ単位、ポイント単位等９種類もある。いろいろあるが、パーセント指定だけで十分。 無段階といっても余り細かい指定は意味が無い。
”パソ救ふじさわ”では９０％と９５％を多く使っている。

  スタイルシートでも１から７の段階が残っているが、数字ではなく、medium（標準）の上下にsmallとlargeをxや xxと組み合わせで表す。

HTMLの中心であるフォントについて、フォント（font）はHTMLではタグであったが、スタイルシートではプロパティになった。
HTMLではタグというが、スタイルシートでは、要素ということが多い。

  HTMLの場合、＜ｆont color=" " ＞ 、 ＜font size=" "＞のように書いたが、スタイルシートの場合、要素やセレクタの次に｛font-size:90%; ｝{font-weight: bold; ｝のように、"プロパティ：値" の形式で書く。 スタイルシートでは、フォントカラーは単にcolorである。またfont-weight:bold はHTMLの＜b＞のことなので、時には＜b＞ ＜/b＞ で囲んだ方が手っ取り早い。

  HTMLだけで作ったものは行間は詰まっているが、スタイルシートでは、行間が空けられる。
  Ｅメール、メールマガジン、メモ帳など、我々はパソコンの表示で、行間がないのに慣らされているところがある。行が詰まっているのを改善するため段落で１行空けることはよく使われている。
  しかし、行間があるほうが自然なことはいうまでもない。スタイルシートでは、行の高さを、１．４（１４０％）など、行の１．何倍かを指定するだけで簡単に行を空けられる。
   スタイルの書き方は、｛line-height：140%｝ となる。
  HTMLで始まったホームページ制作は、CSS/スタイルシートが普及してもまだまだ行間なしが殆どである。
  わが国ではＨＰＢで作られたものが圧倒的な数にのぼり、制作者から渡されて更新はするものの、費用をかけてリニューアルされることは少ないので、まだまだ行間なしが目に付くことになる。
  企業のＷｅｂページであっても、トップページはスタイルシートになって見易くなっていても、中のページは従来通りなのがよく見られる。さすがに、パソコン関係のＱ＆Ａのページは全部スタイルシートに改善されており読み易くなっている。   ｇｏｏブログを始め、各社のブログサービスは全部スタイルシートが使われており、フォントサイズ、行間が考えられ読みやすくなっていて有り難い。

  HTMLは、＜＞で書くタグというものを使うアプリケーション言語。、開始タグ＜p＞と終了タグ＜/p＞の間ににテキストを入れたタグ文をつくり、タグ文を次々と続けて書いていく。スタイルシートは見栄えの良い多彩なページをつくるために考案されたが、スタイルシート用に新たなタグは追加されていない。

これまでのタグの中で、スタイル文を書くことになる。先にスタイルの適用は３通りある。（１）は外部ＣＳＳファイルを作って、そこに定義する。（２）各ページの の間に定義する。（３）タグ の中で直接スタイル定義をする。と書いたが、（３）の方法は即効薬のように効くが多発すると、ソースが複雑になり一般的ではない。

  そこで、スタイルシートというと、外部ファイル及びヘッドに書く方法になり、その文法・書き方を覚えることになる。
まず、これまでのタグは「要素」といい、要素に続けて、「プロパティ」という用途・機能を書き、コロンを置き、それに続けて「値」という詳細・選択肢をかく。そして要素に続く文全体を大括弧でくくる。これがスタイルシート書き方の基本。

    注：＜＞は半角で書くが、半角ではブラウザに作用させることになるので、当講座資料では全角で書いている。 また、コロン、セミコロンやドットは見難いのでこれも全角で書いている。

    ＜要素 ｛ プロパティ ：値 ｝＞
    例： ＜p ｛ font- size：90% ；｝＞

  （最後のセミコロンは、プロパティを何個も続けて書くためにある。続けなければ無くても通じる。 ）

一方これでは、＜p＞と書いた全部に、プロパティが適用されてしまうので、セレクタという考えが必要になり、「要素セレクタ」の他に、「要素」の中で「クラスセレクタ」という考えを取り入れている。これの書き方は、「要素」の次にドットを置き、続いて「クラス名」を書きセレクタとする。

＜要素．クラス名 ｛プロパティ ： ｝＞
例： ＜p ．text01｛ font- size：90% ；｝＞

  そして、本文では、要素 −プロパティの場合は、なにも書かなくても良いが、クラス名 −プロパティの場合はクラス名を挙げてスタイルの働きをさせる。

    ＜要素 class =" クラス名 "＞
    例： ＜p class="text01"＞

  なお、段落のタグとしては、＜p＞の他に＜div＞がある。同じ機能であるが、＜p＞は次の段落の間に自動的に１行空行ができるので、それを避けて、＜div＞の方がよく使われている。

これで、設定したいプロパティがいくらあっても、ソースの中には最小限の記述で済むので簡潔な文が書けることになる。そしてスタイルシートは従来のHTMLタグのなかで、生き生きと働くということになる。
  HTMLでは＜table＞や＜font＞がよく使われるが、スタイルシートでは、＜div＞が主役。HTMLでの＜div＞は、段落の＜p＞の代わりをするがHTMLソース上であまりお目にかからない。主役といっても、このタグ（要素）の意味は特になく、無色・無形のいれもののようなもので、中に入る {プロパティ：値｝によってスタイルが決まる。
  そのほうが良いともいえる。＜p＞で書くと段落と段落の間に１行空く。スタイルシートでは行間はラインハイト()で適当に空けられるほか、後に出てくるマージン（余白）で、好きなように空けられるので、１行というのはちょっと空きすぎ。いきおい何も働かない＜div＞要素が、一番使われることになる。見出し用の＜h1＞〜＜h6＞も前後に１行空いて冗長になるので、＜div＞で代用することが多くなる。＜hr＞タグの水平線も１行空いてしまう。

次に、スタイル定義したものは、クラス名で使うことになるので、ソースを見ると ＜div class="text01 "＞ のような文がよく出てくる。
なお、ソースを見ると、＜div id ="text01 "＞という文もときどき見るが、これはスタイルシートを呼出す意味では同じだが、class=" " は、一般的なのに対し、id=" " は固有定義といわれる。その使い分けは実際にはよくわからなく、他の方法でも個別的なことができるので、簡単にするためこの講座では、＜div＞だけで済ませるものとする。

HTMLでの＜center＞タグはセンタリングとして唯一のレイアウト機能を持つ重要なタグであったが、スタイルシートでは＜center＞は使わないことになっている。ただ、テキストについては、｛プロパティ：値｝の方で、｛text-align：center｝と書いてセンタリングされるものの、HTMLの＜center＞のように、テキストでも画像でもテーブルでも一度にセンタリングしてしまうものは無い。

スタイルシートは＜center＞タグは使わない テキストのセンタリングは、これで行えるが、画像などはどうであろうか。次のような考え方で行うことになり、少々面倒。
イメージタグの＜img ＞で、ポジショニングで直前タグからの相対位置指定をし、左からのサイズを指定する。サイズはセンチやポイントと色々選べるが、パーセント指定でやるほうが、分かりやすく、画面のサイズ変更にもフレキシブルに対応するので便利。
なお、イメージタグはインライン要素なので、ブロック要素の＜div＞をから要素として置かなければならない。このようなことが、HTMLでは＜center＞ ＜/center＞一つで済んでしまう。
このあたりは、スタイルシートの考え方が、一長一短と思う。他にも太字を表す場合、HTMLでは、その部分を＜b＞ ＜/b＞で囲めば済むのに、スタイルシートでは｛font-weight:bold｝と書かなければならない。 今一般に使われているHTML&CSSでは、スタイルシートで推奨されないタグが混在しても認められるので、かたぐるしく考えない方がいいのかもしれない。

HTMLで書いた文は行頭が左端に詰まって見栄えがしない。たとえ先頭にスペースを入れても２行目がまた詰まってしまう。行末も同じで詰まってしまう。もっとも行末の場合は、熟語や長い句が区切れないように行の途中で改行してしまうことが多い。

そこでスタイルシートでは、行の両端を適当なスペースをあけて揃えることができる。また同時に段落の上下もスペースを空けることができる。 この仕組みは、＜div＞タグのような、ブロックレベル要素の場合、テキスト行の四周に枠があり、その枠と端との間に、マージンという余白を指定することで空けられる。書き方は、｛プロパティ：値｝で｛margin-left：１em｝のように書く。後で述べるパディング(padding) が内余白に対し、マージン(margin は外余白と言える。

マージンのプロパティは、上、右、下、左の四つになり、それぞれ指定できる他、｛margin：0px 0px 0.5em 0.5em; ｝のように一度に指定することができる。順は時計回りであり、この場合、トップと右辺は端に付き、ボトムと左辺は境より0.5em分空く。
単位のemは文字で、０．５文字分くらい空けるとページの見栄えが良くなる。

スタイルシートはHTMLでは書けなかった枠やたての線が描ける。勿論横線も引ける。その考え方は、段落の外周をボーダーとし、種類・幅・色で変化させられることと、トップ、ライト、ボトム、レフトの４辺を別々に扱えることから多彩な枠・線を引くことが出来る。
・左右どちらかのボーダーの線種・線幅・線の色を指定すればたての線になる。
・上下どちらかのボーダーの線種・線幅・線の色を指定すれば横の線になる。
・ボーダー四辺の線種・線幅・線の色を指定すれば枠になる。

  線種・線幅・線の色は、四辺同時、上下・左右同時、上・左右同時・下、上・右・下・左別に四通りの指定ができる。
  線種はHTMLでは一本線だけだが、スタイルシートでは、点線、破線、二本線など８種類で引ける。
  線の幅は、通常ピクセル単位で数値を指定する。
このように、スタイルシートでは、線種・線幅・線の色に加え、必要な辺だけを見せることにより、HTMLではできなかったデザイン性の高い枠線を自由に引くことができる。

  スタイルシートで枠・線を表すのはボーダーだが、これは、どこに引かれるのか。
それはテキスト（文字）の周囲。文字の周囲といっても行の周囲。途中改行されても行の最後まで引かれる。

  ボーダーはもともとへりとか境界・国境の意味で、枠線の意味はない。境目に引かれるのであり、そのためテキストは、行か段落の上下と、行の左・右端がボーダーに接していて、つまった感じになる。そこで、パディングという中側の余白を設けて見栄えをよくすることが出来る。
パディングは、マージン（外側余白）と同じように四辺を別々に指定できるようになっている。枠の中に余白を作っても、文字が小さくなることはなく、余白分だけ外側に広がることになる。
したがって、行の長さは、マージン＋ボーダー＋パディング＋テキスト＋パディング＋ボーダー＋マージンのそれぞれの長さ(幅)の計となる。

  もっとも枠を引かなければ、マージン（外側）指定だけでよく、枠を引けば、パディング（内側）で余白を取ることになる。
  書き方は、{プロパティ：値}を {padding-left：0.5em；} のように行う。単位は色々あるが、ｅｍ（文字）が一番使いやすい。なお、辺毎にしないで、一度に {padding：0em 0em 0em 0.5em；} と指定することもできる。
  段落の上下も同じような関係がある。

  HTMLでは、水平線は引けるが縦の線が引けない。スタイルシートでは、段落を囲む枠（ボーダー）の３辺を線幅ゼロにし、必要な１辺を線種・線幅・線の色で指定することで縦の線が引ける。ということは、文字・行がなければ、線もないということで、途中で線が切れてしまうことになる。その場合改行マークを並べて補うことになる。
  縦の線は行の両端にしか引けないのならそれほど使い道はないと思われるが、後述の２段組み３段組みに使うとその効果が分かる。

縦線は文字・行が無ければ引かれないが、横線は文字が無くても行の幅一杯に引かれる。行の幅は、ウィズ（width）プロパティで決まる。

  ＜div＞、＜/p＞などすべての要素はボックスと呼ばれる領域を生成する。
ボックスとは、内容領域（テキスト・画像など）を中心に、パディング（内側余白）が包み、ボーダー(枠線)があって、一番外側をマージン（外側余白）が囲むという多層構造の領域であるという考え方。それぞれに幅を持たせ、さらに線種と色を変えられることで、段落だけでデザイン性のある表現ができようになっている。 また表現はテキストが中心で、線枠はそれについてくるという考え方は、融通のきく自由なページの編集を可能にしていてすばらしい。

  widthプロパティの値にパーセントを使うことができるが、これにより、ブラウザの画面がドラグにより変化しても、テキストにあわせて枠線が伸縮するので相対的なデザインは崩れない。また、余白の幅を常識以上に広く取ることにより、端から離れた場所にレイアウトすることが出来るので、htmlがテーブル（表組み）の記述でしかレイアウトできなかった頃からすると、簡潔な段落だけの記述で多彩な表現が可能になったと言える。

  白抜きとは、見出しやボタンなどで濃い色のバックに薄い色でテキストを書くことであるが、スタイルシートでは、＜div＞要素のプロパティをうまく組み合わせることで簡単に作成することができる。

  先にボックスのところで、テキストを中心に、内側余白、枠、外側余白の領域があり、それぞれの線幅や線の色を四辺を別々に指定することで、デザイン性のある表現ができると書いているが、さらに、フォントの色と背景の色を使い分けることで、よりデザイン性のある表現ができることになった。その用途の一つが、見出しやボタンである。


HTMLでは、テーブル機能で、見出しを表現することができたが、記述が複雑になる。スタイルシートでは widthプロバティで幅を指定した上で、上記のことを行ってボタンのようなものを簡単に作ることができる。
  また、HTMLでは、センタリングや左詰めしか出来なかったが、スタイルシートでは、センタリングの他に、パディング（余白）により任意の位置からテキストを書くことが出来るようになった。

  スタイルシートでは、次のサイズのプロパティにパーセントが使える。
まず、行の幅で、ウィヅ（width）プロパティに使える。％を使うことで、ウインドーが普通サイズから最大化した場合も、普通サイズの中で伸び縮みさせても、画面は柔軟に対応することができる。
  よく見られる横幅を固定した画面は、拡大に対し、横スクロールが頻繁にでてきて、いきおい右端は置いてきぼりになりがちである。また今はやりの小画面のネットPCでは常にそれが起こることになり  不満の種になっているであろう。サイズプロパティに％を使うことで、小さい画面のノートPCでも大きい画面のデスクトップでも同じ内容のページが提供できるようになった。

  次に、フォントサイズプロパティにパーセントを使う効能は、当然ながら、どんなフォントサイズにでも段階的に自分で作れることにある。７段階（見出しでない文の中で使う大きさとしては２〜３種類しかない）という制約から離れられるスタイルシートの恩恵は大きい。なぜ、HTML時代から何故こうならなかったのかを推理すると、他段階で印刷のフォントサイズか可能になったパソコンのＤＯＳ−Ｖが生まれる前に、HTMLがスタートしたからではないか。

  余白を意味するマージンやパディングでもパーセントを指定できるが、これらは、％より０．５ｅｍのように文字の何倍かで指定するほうがベターと思われる。

  HTMLの書体は何も指定しない、いわゆる初期値（標準）はなんでしょう。それは、”ＭＳ Ｐゴシック” です。   それ以外の書体に指定変更する場合、”ＭＳ Ｐ明朝”や”ＭＳ ゴシック”と書く訳だが、この書き方が難しい。ＭＳとかＰのアルファベット部分は全角で書く。ＭＳとＰの間のスペースは半角のスペースである。
  書き方が少しでも間違うと、初期値の”ＭＳ Ｐゴシック”で表示されてしまう。
アルファベットは全部全角かと思うとそうでなく、”HGSゴシック”のように、半角で良いフォントもあって、よくわからない。
  ワードの書体欄には正しい書き方で載っているので、それをコピーして利用しても良い。
それでもなお、はねられることが多い。うまく通ったものは、その書き方を大事にとっておこう。

この辺りは、ＨＰＢなど作成ソフトを使っていれば、メニューからの選択だけで済み何の苦労もないであろう。
尚、”ＭＳ Ｐゴシック”のＰはプロポーショナルフォントの意味で、等幅フォントに対することば。

  スタイルシートでは、＜div＞等のセレクタで｛ プロパティ：値 ｝を次々と定義していく訳だが、入れ子構造にして、セレクタの出現回数を減らすことが出来る。
  本文で、見だし 内容、見だし、内容、と続くことがある。見だしは当然、＜div＞で始まり、＜/div＞で閉じるが、同じスタイルで繰り返す本文の場合、最初の内容の定義は行うが、二回目以降の内容の定義のセレクタタグは書かなくてもよい。
具体的には、最初の繰り返しの際、最後の終了タグを省略し。プロパティが以降に及ぶようにしておく。次の内容からは、＜div＞＜/div＞の両方が要らない。最後の段落では、＜/div＞を忘れてはいけない。
  外側に大枠を囲う場合も同じこと。枠の中に、＜div＞‥‥＜/div＞が書ける。何気なく使っているこのことが入れ子という。

このことから、スタイルシートでは、どんな要素にも終了タグは決して忘れてはならない。

  スタイルシートで枠・線が引けることは前に述べたが、特に縦の線が引ける理屈を見てみよう。   HTMLが、＜hr＞タグで横線が引けたように、スタイルシートで縦の線が引ける、新たな定義は生まれたのか。それは、ノーである。
  枠線のプロパティはボーダー（border）であるが、ボーダーは縁（へり）や境の意味はあっても、枠・線の意味は無い。スタイルシートでは段落の縁・境に線種、線の幅、線の色を与えることで枠・線となる。
  線種は実線がソリッド（solid）で、他に点線、破線、二重線などがある。

  段落（テキスト・画像等からなる）のボックスの左辺・右辺に付くボーダーが、行間を含めて行が増えるにしたがって、下へ下へと延びていくのが縦線である。したがって行が無くなれば線はそこで終る。２段組み３段組で縦線を引く場合は、一番行が多い段組みにボーダーを設定することになる。
  テーブルのように、最初に枠線を引いてしまうのではなく、スタイルシートの縦線は、後からではないにしても、段落の入力作業と同時進行で引けるもの。なお画像・描画はその高さが１行扱いとなって下へ下へと延びていく。

  ボックスの長さを指定するプロパティはウィヅ（width）とハイト（hight）である。幅のウィヅはよく使われるが、高さのハイトは、殆んど使われない。それは、高さを指定すると行の増減に対応しきれない。行より少ない数値を指定しても、それを超えて延びて行き無意味になる。高さの指定がなければ、自由にボーダーが増減して分かり易いところにあると思う。

  HTMLのタグは、スタイルシートでは要素となり、要素はセレクタにもなる。セレクタは、クラス名をつけてスタイルを定義し、適用するもの。

    ＜＜ スタイルシートの適用方法（２）の場合＞＞

  ＜スタイルの定義＞   ＜head＞   ＜/head＞の間に
  ＜style type=text/css＞

  ＜/style＞

  ＜style＞   ＜/style＞の間に、次の文を書く

   セレクタ ． クラス名  ｛ プロパティ ： 値 ；｝
     ｄｉｖ． ｌｅｆｔｃｏｌ１    ｛ｆｌｏｒｔ： left ； ｗｉｄｔｈ ：２４０ｐｘ；｝

  ＜スタイルの適用＞
  ＜ｄｉｖ ｃｌａｓｓ＝”ｌｅｆｔｃｏｌ１ ” ＞   ＜/div＞
  ※ これで、横幅２４０ピクセルの左サイドの段組み（固定幅）ができる。
  ※ ２０％のように定義すると、非固定になる。

  ＨＴＭＬタグはスタイルシートで要素となる。その要素は、ふたつに大別される。一つは、ブロックレベル要素で、他方はインライン要素である。   ブロックレベル要素とは、１行全部を占める要素で、ブロックレベル同士を同一行に並べることはできない要素。タイトルのｈ１〜ｈ６ 、表組みのｔａｂｌｅ 、汎用要素のｄｉｖ 、段落のP などがこれに当たる。
  インライン要素とは、行全体を占めないので、テキストや画像等を横に並べられる要素で、リンクの ａ 、画像・描画表示のｉｍｇ 、行内適用のｓｐａｎ などである。

  ブロックレベル、インラインを問わず、全要素でボックスを形成する。ボックスとは、内容、内余白、ボーダーと外余白を持ち、これにより、スタイル（見栄え）のよいページをつくることができる。ところが、ブロックレベルの＜div＞や＜table＞、インラインの＜imd＞以外の要素では、その要素（タグ）の機能のかねあいから、ボックスの効用を活かすことは余りない。

  さらに両者の大きな違いは、ブロックレベル要素は、終了タグの前に、次の開始・終了タグが入れられる。  「入れ子」が出来ることで、このことで、大枠で囲ったり、記述の少ない定義ができたりする。

• ＜div＞
  • ＜div＞内容＜div＞
  • 内容
  • ＜div＞内容＜div＞
  • 内容
• ＜/div＞

  このような時、外側の要素を親要素、中側の要素を子要素という。子要素の中にまた子要素を持つことができる。そして、親要素から子要素にプロパティの”値の継承”という全プロパティ一律でない機能があるので、やりながら覚えるしかないようだ。

  当ブログのタイトルは、「アラ古希のメモ帳」だが、このメモ帳には、この歳で覚えたことを備忘録に書き込むという意味と、この歳でWindowsパソコンのメモ帳をフル活動させているという意味を重ねている。

  １０年来ホームページを手書きのHTMLで開設しているが、エディターも使わず、メモ帳だけで通している。エディターとかHP作成ソフトは、それ自体の使い方を覚えなければならないのに、メモ帳はすぐに書けて自由なことと、とにかく起動にかかる時間が早くストレスがゼロということで愛用している。

  ブログを始めて１１０日、”アラ古希のメモ帳”のサブタイトルの後半を、”メモ帳だけで早くて速いホームページを作ろう。”に変更した。
  ホームページ（Ｗｅｂページ）の見栄えを良くする主張をこれからも続けるつもりだが、メモ帳の便利性も同時に主張していく。

  見栄えの方で、文字の大きさ−フォントサイズの問題だが、世の中のホームページ、無料ブログの殆んどがベースフォント”２”という小さい文字になっているのは良くないと思う。ただ、フォントがHTML標準の”３”だと少し大きすぎるので、(花と緑と景観のページ参照）HTMLだけではしかたがないところが、そこでHTML&CSSで、％を使い、９５％か９０％位にして、２と３の間のサイズをもっともっと使うよう主張していくのが務めと思っている。

  マイブログ”アラ古希のメモ帳”の、もとのｇｏｏブログがベースフォント２になっているようなので、ジャンルの日記は１１２％、ジャンルのスタイルシートは１０７％に、逆に％を上げる方法でカスタマイズしていますが読みやすさはいかがでしょうか。

  個人のホームページ、フォントサイズだけでなく、行間も空けて欲しいと思うが、ＨＰＢで作られたホームページが圧倒的にHTML型なので、ソースに手書きでスタイルシートを部分的に適用し、出来るところから改善していただけないかなと思う。

  テーブル＜table＞は、表組みであるが、本来の表の他にレイアウトによく使われる。枠線の初期値がゼロであることを利用し、特にHTMLだけのページでは、ページの殆んどの部分に見られるタグである。

  テーブルは、＜table＞というアパート・マンションのような建物と考える。そして、＜tr＞という階があって各階には＜td＞という部屋がいくつかある。部屋の構造は階が違っても同じであるが、階の部屋番号の構造は多少違ってくる。
  テーブルでの階は、何階建て完成というのではなく、どんどん上へ建て増しできる自由な建物である。

  テーブルの枠線（ボーダー）についていうならば、HTMLでは色は付けられないし、線の種類は１種類であったが、スタイルシートでは、段落での枠線と同じように、線のデザイン、線の幅、線の色が変えられる。ただし、段落のときのように、四辺別々に指定ではなく、上記３種目で四辺同一指定というところが違っている。

  さらに、枠線の枠の幅について、スタイルシートは、HTMLではできなかった細い線にすることができて見栄えがよくなった。これは、border-collapse という２部屋の壁を重ね合わせるというプロパティで可能になっている。

  スタイルシートのテーブルの考え方は、＜table＞という建物の＜td＞という各部屋の、内装にあたる文字色や背景色は、HTMLの場合は１部屋（セル）ごとに、繰り返し書かなければならない。スタイルシートの場合は、＜tr＞要素でスタイルシートの３方法で指定・適用することで十分できる。

その他に、表をヘッダー、ボディ、フッターにわけ、スタイルを一括指定する方法もとれるようになった。さらに部屋番号別にあたる列ごとに色分け等の一括指定することも可能になったが、少し複雑になるので、ここでは詳しくは書かない。

  テーブルをレイアウトに使わず本来の表に使う場合、ソースの簡単な書き方としては、１行は横一列に、定義を並べると良い。高さや幅は最初から指定しなくて良い。一番幅のあるセルに、高さは一番フォントの大きいセルに自動的に合わされるため、widthやheightの定義も減らせるので、＜td＞テキスト＜/td＞＜td＞テキスト＜/td＞‥‥だけ書いていき、それらを＜tr＞と＜/tr＞ではさめば１階が完成する。あと２階３階と内容を追加していけば良い。
  さらにそれらを＜table＞ ＜/table＞タグではさめば良い。

＜table＞
＜tr＞ ＜td＞まず＜/td＞＜td＞１階を＜/td＞＜td＞つくりましょう＜/td＞＜td＞。＜/td＞＜/tr＞ ＜/table＞

まず

１階を

つくりましょう

。

つぎに	２階を	足しました	。
まず	１階を	つくりましょう	。

  何行×何列の表をつくって、幅を決めてから、テキストを書かなくて良いので、内容の案が出来次第、表現を上記のように書いて行き、表にまとめて行くことが出来る。表の内容が全部終れば。スタイルシートの出番でセルのパディング（内余白）をとったり、センタリングか左寄せを決めたり、ボーダーを修飾し、表全体を見やすくして完成に至る。

  なお、＜td＞の属性に、２部屋をつぶして１部屋に広げるcolspan="n"や、上下の階をつなげて、１部屋にするrowspan="n"がある。

  HTMLでテーブルに次いでレイアウトに使われるものに、リスト（箇条書き）＜ul＞ ＜li＞があるが、スタイルシートでは、次のような仕様に変わっている。勿論HTMLの仕様も使えばそのまま使える。
リストの良いところは、頭が揃うことと改行が要らないこと。

• HTMLでは”通し番号”は、＜ul＞ではな＜ol＞であったが、＜ul＞の記号の一つ、デシマル（decimal）で書ける。
• HTMLでは、＜ul＞の属性 type=" "で黒丸など３タイプの記号しかなかったが、スタイルシートでは、プロパティのlist-style-typeで３タイプの他、５タイプが増える。
• リストは全体に一段字下げになる。リストは入れ子が出来るが、入れ子はさらに一段字下げになる。この字下げをプロパティの余白（例： margin-left：1em） で狭めることができる。
• リストのマーカーの初期値は、”小さな黒丸”で、２行目もマーカーより前に出ることはない
• リストマーカーにイメージ（list-style-image）が使える。

  ◇スタイルシートの例
   div.text1{ font-size:12pt;text-align:center;
   color:seagreen; font-weight:bold;
   width=100%; margin: 0.5em 0 ; padding :0.6em 0 ;
   border-style:solid; border-width:1px 2px 2px 1px ; border-color:blue; }

   これは、＜div＞要素をセレクタとし、text1 のクラス名でスタイルを指定した外部ｃｓｓファイルの一部である。
   プロパティの内容は、
  ・１２ポイントの文字をseagreenの色と太字にし、センタリングしている。
  ・それを囲むボーダーは、右辺と底辺は２ピクセル、左辺と上辺は１ピクセルの青い実線にしている。
  ・外余白は上辺と下辺を０．５文字分空け、また内余白として、０．５文字分空けている。
  ・この枠の横幅は、行一杯であり、高さはフォントの高さである。

   このように、｛プロパティ：値｝を加えていくと、見栄えの良いＷｅｂページになっていく。
  一方、本文のなかでクラス名で適用する場合、class="ｔｅｘ１"を一つ適用するだけで良い。 しかしこれは、汎用性ゼロのクラスセレクタと言える。

  汎用性をつけるため、部品に分けることが考えられる。例えばwaku１で幅を、f-size1でフォントサイズ１２ポイントとセンタリングを指定、color1でシーグリーンのテキストの色を指定、yohaku1で余白を指定、border1で枠線の色と幅を指定すれば良い。本文で適用の仕方は、＜div class="waku1 f-size1 color1 yohaku1 border1"＞
とやってもよい。この際の文法は、スペースを空け、クラス名を続けて書くこと。カンマなどで区切ってはいけない。
  部品は、どこにでも使えて便利な反面、ソースが複雑で長くなる。

  パソ救ふじさわやこのHTML&CSS講座では、ふたつのクラス名を並べるのを最高にしていて、クラス名は増えていく一方。汎用性はなくても、対象ごとに定義していく方が分かり易すく確実性がある。

  ＨＴＭＬのタグは、短縮した英語で、＜body＞や＜form＞はそのままだが、＜p＞（段落）、＜div＞（汎用）、＜br＞（改行）などはもとの言葉を推測するのが難しい。
  ＜ul＞はリストといい箇条書きであるが、リストといえば一覧表の意味があるものの箇条書きの意味はない。＜br＞も分からない。所詮、殆んどのタグが２字〜４字に短縮されていて、英語と関係ない記号であり意味はないと考えるほうが良いようだ。

  それに引きかえ、スタイルシートは、自然な英語。「プロパティ」や「値」に使われる font-size, font-family,line-height, background-color など英語そのままであり意味があり分かり易い。

  テーブル（表）を左へ寄せた時、続く段落を空いたところに入り込むいわゆる回り込みはできるのか。それはＹｅｓであり、他に、別のテーブルを横に並べることができるのかもＹｅｓ である。

  もともと、テーブル＜table＞は文法的に、ブロックレベル要素といわれ、行一杯に書かれるものなので、横に並べることができないのだが、横幅が決まり、属性のalign="left"かalign="right"が定義されると、回り込みによって横に並べることが出来る。
  横に回りこむものは、段落であったり、他のテーブルであったりする。
align="right"はHTMLの定義文で、スタイルシートではフロート｛float：right｝を使う。フロートを使うと終わりにクリアプロパティが必要。

  ページを左側・右側にわける２段組み、ページを左側・右側・中央にわける３段組みでページを編集し、メニューと本文を配置する。スタイルシートでは、これを文書の段落を書く要領でつくることが出来る。HTMLのフレーム（２〜３ページをトップページの区切られた区域に投入）を使わないので、作りやすく自由度が高く、軽く動くのが特長。

  段組みは、ブロックつまりｄｉｖ要素を横に寄せるだけでできる。２つ、３つのｄｉｖ要素を隣りに並べるために必要なスタイルシートは、フロートプロパティ｛float： ｝と幅指定のウィヅプロパティ｛width： ｝だけ。

  まず、左側に寄せたいｄｉｖブロックに対し、ウィヅで３０％を指定する。次にフロートプロパティでレフト｛float：left｝を指定する。これでその段が左に寄り、後に続くｄｉｖブロックが右側に回り込んで表示されるようになる。このように、右側に寄せたい段には何もスタイルを記述していない。

３０％を指定する方法をリキッドレイアウトデザインといい、パソコンの環境に左右されないデザインが可能になる。３０％の替わりに１６０ピクセルのように固定幅で指定することもできる。

  ３段組みの場合は、左寄せと右寄せを指定し、残りが中央に配置されることになり、意外に簡単に２段組み３段組みが書ける。

  先に、スタイルシートは、２段組み３段組みが段落だけで簡単に書くことが出来ると書いたが、センターの段組み（ｄｉｖブロック）が左側の段組み（ｄｉｖブロック）より大きい（高さが高い）と、本文の末尾が左側にあふれる現象が起る。それを防ぐには、センターのｄｉｖブロックに、マージンレフトを広くとること。その要領は、左ブロックのウィヅプロパティと同じ数値のマージンを取ることで解決する。余白だのに、そこへブロックが乗るのは、理解しにくところだが、これで問題はなくなる。

  段組みは最後に、ｃｌｅａｒプロパティに値ｂｏｔｈを指定し、段組みを解除する。 ｂｏｔｈは、フロートレフト、フロートライトの両方にクリアがかけられるので、片方指定の場合でもｂｏｔｈを指定すると良い。

  ※ ３段組みの例 ・パソ救ふじさわ   ・ＨＴＭＬ＆ＣＳＳ講座

  ２段組み３段組みの場合、左側、中央、右側の段落の順番は自由である。
通常は、左側、中央、右側と段落を書いていくが、左側、右側、中央と順に書いても構わない。さらに、右側、左側、中央の順に書いて構わない。

左側、右側、中央のそれぞれのスタイルの書き方の要領は、

（１） 左側１番目のｄｉｖ要素の{プロパティ：値}に、｛ float：left；width：幅； ｝と書く。
（２） 右側１番目のｄｉｖ要素の{プロパティ：値}に、｛ float：right；width：幅； ｝と書く。
（３） 中央１番目のｄｉｖ要素の{{プロパティ：値}に、｛ margin-left：幅 ｝と書く。

• ウィヅの値に％を指定すると、リキッドレイアウトになり、ピクセルで指定すると固定レイアウトになる。
• 中央は、幅の指定はしないで、残りの余地に回り込ませる方が良い。

（４） 中央の最後のｄｉｖ要素の{プロパティ：値}に、｛ clear：both ｝と書く。

  左、中、右の順番に書かない主な理由は、ＳＥＯ、ＳＥＭ対策であり、検索エンジン向きにページを工夫して、キーワード検索されやすくする。
  普通検索ロボットは、各ページの前の方の内容からキーワードを集めるといわれる。本文よりタイトルや項目の多い左右のサイドバーの方が、キーワードが固定的になるので、前に持ってくる意味がある。