HTML基礎講座第7回、HTML基礎講座中級編(2)です。

HTML基礎講座中級編は、スタイルシートの練習です。
HTMLで作成した文書にCSS（スタイルシート）を追加します。

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

教材DownLoad ここに、教材を置いてありますから、必要ならダウンロードして下さい。

HTML基礎講座第7回、中級編第2回です

前回の続きなんですが、説明ファイルの都合で、一部ファイル名が変わってます。

8行目、スタイルシート名が、「style2.css」になってます、同じ場所に3回分が同時に存在する為の続き番号です、お気になさらずに。
この名前と、スタイルシート名を合わせればよいのです。

では、始めましょう。

alphaEDIT marginは、余白、文字枠の外側の余白を意味します。

この、文字枠の外が、後で意味を持ちますので、よく覚えて置いてください。

見難いんですが、右の図では、本文の左側が、詰まっているので、左側が埋まった時に、窮屈になります。

この、マージンレフトは、文字枠の左側に余白を取ります。

h2,h3,h4は、同じ設定なので、21行のようにまとめ書きが出来ます。

dtも纏める事は可能ですが、種類が違うので別にしました。

ddは、元々のマージンを無視して、新たに設定するわけですね。

今度は、文字枠の中の余白関係です。

29行目は、文字枠の背景色の設定
30行目は、文字枠の内側の余白設定
先ほどの、マージンが文字枠の外側、今度のパディングが、文字枠の内側です。

紛らわしいですが、やってみれば解りますよね。

31行目のwidthが、文字枠の横幅です。
heightの設定も可能ですが、文字数で勝手に決まった方が結果が綺麗なので設定していません。

alphaEDIT

34行目は、文字枠の外形部の表示を実線表示、他に点線･二重線も有ります。

37行目、幅が550px、31行目より40px狭い、これは、マージンの違い40px分です。

結果は、右図のようになりました。

あちこちの数値と色設定を変えて、御自分のページに合わせて下さい。

alphaEDIT

今回の最後は、address部分、addressが正規表現らしいが、斜体がわざとらしいし、いささか、文字も大きめ、少しおとなしめの設定に変えてみました。

これで、基本的な、修飾は総て終わり、この組み合わせ、勿論他のタグにも応用可能ですが、今回使用しているタグはここまでです。

次回は、少しタグを追加、同じタグで設定を切り替える方法などの予定。

HTML基礎講座第7回終了です。

前のページページトップ次のページ