YukisRoom 「ホームページ作成講座」 HTML活用講座

HTML基礎講座

HTML活用講座

CGI基礎講座

CGI活用講座

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

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

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

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

HTML活用講座.第5回

alphaEDIT

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

サンプル10a

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

サンプル10

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

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



alphaEDIT

サンプル11

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

h2&h3も同様に、元のサイズは無視して、h1〜h6まで、見出しの種類があると考えての修飾です。

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

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

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

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

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



alphaEDIT

サンプル12

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

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

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

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

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

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

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

では、また。



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

前のページ ページトップ 次のページ
お問い合わせはこちらに、 小生宛のMail
Copyright© 2010 YukisRoom 葵Yuki. All Rights Reserved