HTML活用講座第5回、HTML活用講座(5)です。

HTML活用講座は、HTMLとCSSの連携講座です。
基礎講座で築いた知識に加えて、知識の幅を広げていきましょう。

今回、CSSの編集にはTeraPadを使用します。まだインストールがお済みでない場合、タブ設定が出来る他のエディターでも使用可能です。

教材をご希望の方は、圧縮ファイルを用意しました。
教材DownLoad ここに、教材を置いてありますから、ダウンロードして下さい。

HTML活用講座．第５回

今回は、本文の入力＆修飾ですが、本文は入力してあります、

サンプル10a

ここまでに、入力してある、CSSを適用すると、このようになります。

サンプル10

右図は、ここまでのCSSシートですが、仮入力部分しかありません。

では、修飾を開始します。

サンプル11

まず、ｈ１から、ｈ１の元の設定を無視して、都合の良い大きさと色に変えてます。

ｈ２＆ｈ３も同様に、元のサイズは無視して、ｈ１〜ｈ６まで、見出しの種類があると考えての修飾です。

ｈ３は更に、特殊加工しています。
26行は、下線、27行は、先頭部分のみ6pxの線を書いてます。
更に、28行で、行の高さ、widthで枠の幅、paddingで左に隙間を空けて、結果は御覧の通りです。

pタグもmain１とmain２に分けてあるので、margin-leftの値を変化させてます。

これで、修飾は終了です。

拘ると切がないくらいに、遊べますよ、色々お試し下さい。

次は、テンプレートの作成、スタイルシートのテンプレートです。

サンプル12

CSSのテンプレート、これで完成です。

11行目を１００％以外の数値、1000pxに変えてみると、なかなか面白いお試し下さい。

このファイルもダウンロードできるようにしておきます。

出来た物、このページにそっくりですね、実は教材を一部変更して、使ってます。

どこを、変えてあるのか、（文章の事ではないですよ）、お分かりになりますか？
ソース画面に切り替えて、探して見てください。

CSSを切られても最低限の表示が出来る様に変更したんです。

次回の予定は、CGIとCSSの融合、まずは、フォームから始めます。

では、また。

HTML活用講座第５回、終了です。