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

HTML基礎講座

HTML活用講座

CGI基礎講座

CGI活用講座

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

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

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

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

HTML活用講座.第2回

前回の段組を生かして、新たなPageを作ってみます。

alphaEDIT

先ずは、headの部分、文字のままですが、暫らくはここままで、

何度もでてくるであろうタグには、最初からclassを設定しています。

上段がhead部分、その下にメニューです。

それぞれを、headとmenuの名前で管理します。

この様に、判り易い名前と連番がお勧めです。


alphaEDIT

Pageの横幅はwidth990px、左側に10px明けてあります。
head部分は、高さを50px、上側にも10pxの明を取り、黒枠で囲んでます。

内部の余裕は上側に15px、左側に40px、明けてあります。

head1は「パソコン講座」の文字、フォントサイズ20px、
横幅30%に設定、左配置の回り込みを設定。

head2は「Yukiの休息所・・・」の文字、フォントサイズ24px、
横幅45%に設定、左配置の回り込みを設定。

head3は「HTML活用講座」の文字、フォントサイズ20px、
横幅25%に設定、左配置の回り込みを設定。

%の場合、30+45+25=100%の設定でOKです。
横幅を変えても、%なら変更の必要が無いし、ブラウザにも上手く対応できます。

menu部分は、今は、回りこみの解除のみ設定してます。


サンプル4 ブラウザ表示でお試し下さい。


alphaEDIT

スレイプニルに表示した物です。

alphaEDIT

次は、メニュー部分です。

mune部分の回りこみ解除から、

メニュー部分のサイズは、横幅990px、黒枠付です。
マージンは、上に10px、左に10px、
内部の余白paddingは、上に10px、左に10px

a、アンカーの設定、
a.a1、Homeの部分、幅130px、左余白100px
左回り込み設定。

a.a2、Menuの部分、幅130px、左余白0px
左回り込み設定。



サンプル5 ブラウザ表示でお試し下さい。

alphaEDIT

こんな具合に、表示できます。

alphaEDIT

次は、本文、枠だけですが、

右図は、コードです、短いですね、まだ本文が入力してないですから。

31行目以降は、Footerです。



alphaEDIT

こちらはCSS、本体(cont)は、幅990px、上部マージン10px、左マージン10px

内部余白、上部padding10px、左padding10px、です。

本体は、左(left)と右(Main)に分かれます。

左、(left)は、横幅190px、内部、外部共に余白なし、既に外側に計20pxありますから。

仮の黒枠があります、高さはやはり仮ですが、390pxにして有ります。

回り込み設定有り。

left1、leftに文字部分、勿論仮入力ですが、

ここにも回り込み設定、右側に隙間は無いのですが、決まり文句です。

こちらが、Main部分、本文ですね、

幅770px、左右に余白があります。

スレイプニルと、Firefoxでは隙間計算が異なりますので中間にして有ります。

そして、仮入力の本文、「display:block;」のプロパティは、インライン要素のブロック要素化です。

最後は、Footerです。



alphaEDIT

ここも、回り込み解除から、

横幅990px、高さ50px、マージンは上と左に10px、

内部のpadding、上と左に10px、黒枠付です。

何度も試したんですが、この方法が一番良いようです。

もう少し進んでみないとイケマセンガ、この方法を使って、講座を作り直す予定。

では、第三回でお会いしましょう。


alphaEDIT

サンプル6 ブラウザ表示でお試し下さい。


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

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