CSSとXHTMLで実現する便利機能とは

まず、こちらから完成版のテンプレートをダウンロードしてください。解説はいつものように要所になりますので、全体はダウンロードしたCSSとXHTMLを参照してください。

尚、テンプレートの著作権は「ノテータ式−ホームページ作成講座」にあり、テンプレートの二次配布は硬くお断り申し上げます。大幅に手を加えられたCSSを含む場合には、この限りではありません。

完成版のテンプレートをダウンロード

【STEP8】ソースリストBOX

CSSやXHTMLのソースの解説をする際に、見やすくソースを表示するBOXが欲しいですね。このホームページでも、再三ソースの説明に使っている物です。

【STEP8】CSSファイル関連部分

.xhtml_1 { /* BOX内にソースリストを表示させる */ background-color: #F0F8FF; /*バックグラウンドカラー*/ border: 2px solid #99CCFF; /*ライン*/ padding: 5px; /*余白*/ line-height: 20px; /*行高さ*/ letter-spacing: 0.5px; /*文字間隔*/ white-space : pre; /*スペース・タブ・改行を、そのまま表示*/ margin: 14px 20px 10px 20px; /*マージン*/ font-size:82%; /* 13px相当 */ font-weight: normal; /*文字太さ普通*/ }

リスト内のコメントのとおりですので、あまり説明するところが無いですね。背景色とラインの色や太さを指定して、marginで上に14Px,右に20px,下に10px,左に20pxのマージンを取った位置にBOXが描画されます。このBOXがソースリストBOXそのものですので判りやすいですね。

字下げはwhite-space : pre;指定しています。

【STEP8】XHTMLファイル関連部分

<div class="xhtml_1"> CSSやXHTMLのソースをきれいに表示します。 字下げもできます。 但し、<と>を表示させるのは注意してくださいね。 <と>はHTMLで意味を持ちますので＆ｌｔ；と＆ｇｔ；（但し、半角文字）に置き換えます。 </div>

CSSの .AAA{　}の記述は、<div class="AAA">〜</div>でブロック要素としてXHTMLに適用されます。この辺がDivが万能タグと言われる所以ですね。

【STEP9】<p>〜</p>で文字色を変える

「ホームページは見出しと段落で書く」それは判っていますが、すると困ることがあるんですよね。通常文字色を変えるのは、<font color="#ff0000">文字</font>のように書くのですが、<p>〜</p>では色が変わらないんですよね。そこで、XHTMLの行内テキストをグループ化するspan要素を使って、<p>〜</p>でも色を変えられるようにしました。

【STEP9】CSSファイル関連部分

.red_normal { font-size:100%; /* 文字サイズ維持 */ color:#dd0000; /* 少し濃い赤 */ font-weight: normal; /* 文字太さ普通*/ }

CSSは至ってシンプル。文字の色指定と太さの指定ですね。font-size:100%;は、<p>〜</p>の文字サイズを維持するものです。100%未満にすると掛け算で小さくなるので、それを考えて予め、入れてある文です。

【STEP9】XHTML関連部分

<p>ところが、あれま・・・<span class="red_normal">変わった！</span></p>

CSSの.AAA {　}の記述はXHTMLの<span class="AAA">でインライン要素として適用され、例え<p>〜</p>であっても機能します。

【STEP10】画像の横に文章を書く

画像の横に文章を書くのにtableを使っていませんか？tableは情報を判りやすく表にまとめるツールで、レイアウト用ではありませんよ。こんなことがtable無しでできます。

ホームページ作成無料講座（CSSとXHTMLで便利機能を実現する）ノーマル

普通はこうなりますよね。みなさんこれにはまるんですよ。

けど

ホームページ作成無料講座（CSSとXHTMLで便利機能を実現する）回り込左

できます。

ホームページ作成無料講座（CSSとXHTMLで便利機能を実現する）回り込右

これもできます。

できることばっかりでどうもスンマセン！

【STEP10】CSSファイル関連部分

.float-l { float: left; /*文字を左に回り込ませる*/ margin-right: 1em; /*1文字分*/ } .float-r { float: right; /*文字を右に回り込ませせる*/ margin-right: 1em; /*1文字分*/ } .floatclear { clear: both; /*回り込みを解除*/ }

.float-l{　}は、画像の右から文字が書けるようになり、文章が画像の範囲より下になると左に回り込みます。.float-r{　}は、これと逆の動きになります。.floatclear{　}は、文章が短く、画像の下まで達しないが、以降文章を画像の下に書きたい場合に使用します。

【STEP10】XHTMLファイル関連部分

<img src="image/pasocon.jpg" width="257" height="183" alt="ぱそこん" /> <p>普通はこうなりますよね。みなさんこれにはまるんですよ。</p> <p>けど</p> <div class="float-l"> <img src="image/pasocon.jpg" width="257" height="183" alt="ぱそこん" /> </div> <p>できます。</p> <div class="floatclear"> <div align="right"> <div class="float-r"> <img src="image/pasocon.jpg" width="257" height="183" alt="ぱそこん" /> </div> <p>これもできます。</p> </div> </div> <div class="floatclear"> <p>できることばっかりでどうもスンマセン！</p> </div>

赤の箇所でそれぞれ、回り込み機能を使って画像の右や、左に文字を書いたり、回り込みを解除して、画像の下方向に文字を書いたりしています。

回り込みと文字の位置の概念が勘違いしやすいですが、文字が右から左に回り込むのがfloat-lで、その逆がfloat-rです。

「ウェブデザイン」は以上です

手に入れられたテンプレートを更に磨き、素晴らしいウェブデザインを達成されることをお祈りいたします。テンプレートを利用する知識は十分に持たれたと思いますので、ホームページを作成しながら、CSSを進化させていくのがいいかと存じます。

講座メニュー

テーマを決めよう

ツールを準備しよう

サーバーを準備しよう

ウェブデザイン

HP公開:
2011/07/23
最終更新：2014/07/16