スタイルシート側をつくりますよぉ
ちょこっとつくるCSS
たのしいたのしいCSS講座
HTMLファイルはできましたか？
あなたが、前のページで作ったホームページは、まだ、見た目が悪いですよね。それは、ホームページをデザインする部分が、欠けているからです。
HTMLだけでも、綺麗なホームページを作ることはできます。
しかし、そうすると、一つ一つのファイルが重くなってしまうんです。 何度も繰り返しますが、スタイルシートを使うことが、コンパクトで自由度の高いホームページを構築することができるんです。
では、つづきを始めます。このページでは、CSSファイルを作っていただきますからね。
めんどうなことは何もないので、最後まで付き合ってください。
- ファイルを準備
- BODYです
- 外側のテーブル
- 重要な空間TD
参照
ＣＳＳファイルの作り方は、スタイルシートの呼び出し方を
ＣＳＳ属性の設定のやりかたはＣＳＳの設定を参照して下さい。
ここから、スタイルシートに取り掛かかります。
早速、始めよう・・・といいたのですが、一つだけ準備をしてください。
間違いが起こらないように、入れ物だけを最初に作っておきましょう。
方法は、HTMLファイルと同じです。
復習を兼ねて、作ってみますね。
最初は、ファイルの置き場を作ります。
ファイルマネージャ（エクスプローラー）を開いて、好きなところに、フォルダーを用意します。
下の手順に従ってください（Win−xpの場合です）
１．あなたが作ったHTMLファイルが入っているフォルダーを開く
２．一番上の「ファイル」を左クリック
３．新規作成 ＞ フォルダー の順で選択
４．「新しいフォルダ」が作られる
５．フォルダーの名前をCSSに書き換える
フォルダーができましたね？
次は、ファイル作成です。
あなたのホームページに名前をつけます。
テキストエディターを開いてください。
エクスプローラーなら、下の順でメモ帳(NotePad)を立ち上げることができます。
画面左下にある「スタート」から・・
＞ すべてのプログラム
＞ アクセサリー
＞ メモ帳
「メモ帳」が、立ち上がりましたね。
よろしいですか？
では、「名前をつけて保存」を選んで、閉じてください。
ファイル名は「 style.css 」 、保存先は、先ほどあなたが作った cssフォルダーです。
これがあなたの、CSS(スタイルシート)ファイルとなります。
それでは、ここから本番です。 はじめに、BODYの属性を決めましょう。
なにをきめるのか？ 背景の色や、文字の大きさ、それに配置などです。
ホームページ全体に使う属性を、一番の大本であるBODYに設定しておく。こうしておけば、この後の、ほかのスタイルシートでの設定はローカルな内容を書くだけですむんです。
共通する要素は、親の側へ記述しておく。
これ基本ね （えっへん）。
能書きは、このへんにして、先に進みます。
あなたのCSSファイルを開いて、下のとおりに、打ち込んでください。
打ち込んだら、上書き保存を忘れずに。
/* スタイルシート */
/* body */
body{
width : 740px;
background-color:#0066FF;
text-align : center;
font-size : 12px;
line-height : 1.5;
font-family : "ＭＳ Ｐゴシック" "Osaka";
}
それぞれの意味を言いますね。
widthは、幅を表します。ここでは７４０PXです。
background-colorは、背景色。
以下、
横の配置。文字のサイズ。行間。文字のフォント・・・となっています。
各属性の説明は、スタイルシートのページで確認してください。
ここで、一つ、疑問が湧きませんか。前のページでは、TABLEとTDだけにクラスを指定していますよね。BODYはクラス指定をしていません。
それでも、しっかりCSSの恩恵を受けています。CSSは、こういうこともできるんですね。タグに対して直接に、属性を指定することもできるんです。
では、出来上がりを確認しましょう。前のページで作ったファイルを開いてください。ファイル名はindex.htmlでしたね。
どうでしょうか？ 背景は、薄いブルーになっていますか。
思うように表示されていなければ、スタイルシートを見直してください。
よくあるミスは、以下のとおりです。
■ 位置を整える空白が、全角文字になっている（半角にする）。
■ コロン”:”と、セミコロン＋”；”を間違える。または忘れる。
■ 大文字と小文字を取り違える。
一口メモ
スタイルシートでのコメントは、HTMLとは違っています。
/* コメント */
属性が増えてくると、作って本人も混乱してきます。
後々のことを考え、説明を書いておくと管理が楽になります。
背景と、基本の文字サイズが決まったところで、枠の設定に移ります。
スタイルシートで、TABLEのサイズを決めるのです。
TABLEのサイズを決めるのですが、せっかくなので、枠が見えるようにしましょう。その方がサイズを実感できますしね。下の属性を打ち込んでください。
前述の、BODY属性の下に加えてくださいね。
/* table タグ */
table.dodai{
width : 95%;
border : 1px solid black;
}
table.doutai{
width : 100%;
border : 1px solid black;
}
dodaiとdoutaiを、まとめてみました。
widthは横のサイズで、borderは枠線です。
よこのサイズが９５％というのは、BODYで指定しているサイズに対する割合です。
”７００PX”というように、直のサイズで指定してもかまいません。
ちなみに、BODYのサイズも”％”で指定すると、ウィンドウの幅に合わせてTEBLEサイズが変化します。これです。
次に、枠線について説明します。
黒い実践を、サイズ１PXで書いてあるんですが、これは練習用です。
線が引いてあることで、TEBLEの位置関係がよくわかりますね。TABLEの関係が理解できたら、消去してもかまいませんし、もっと、カラフルな線としてデザインし直すのもいいでしょう。
一口メモ
”％”は、親要素にたいしてのサイズです。文字サイズにも応用ができますので、どんどん使ってみてください。
TABLEの配下に属するタグに、TDというものがあります。
この、TDタグとは、どういうものでしょうか。
このタグは、コンテンツ（内容）が入る入れ物なんです。
つまり、TDタグを制御することができれば、レイアウトは思いのまま。
では、次の属性を打ち込んでください。
打ち込むファイルは、style.cssです。tableの属性に続けてくださいね。
/* td */
/* dodai部 */
td.atama{
width : 100%;
height : 80px;
color : black;
background-color : white;
border : 1px solid orange;
}
td.osiri{
width : 100%;
height : 100px;
color : black;
background-color : white;
border : 5px solid black;
}
/* doutai部 */
td.m_left{
width : 70%;
height : 400px;
color : black;
background-color : white;
}
td.m_right{
width : 30%;
color : green;
background-color : #ffff99;
border : 1px solid orange;
}
打ち込みが終わったら、上書き保存（セーブ）をお忘れなく。
では、HTMLファイルを開いて見てください。どうですか。
少しだけ、ホームページらしくなったのではないでしょうか？
この章で覚えたことは、TABLEタグの階層化の認識です。
TABLEの中に、TABLEを入れることで、自由自在に枠の設計ができるようになりました。
実は、一つのTABLEでもTDとTRを工夫し、縦や横を結合するタグを使うことで自由な枠を作ることは可能です。でも、作った後の融通がきかないの難点。
そういうことから、TABLEは、縦やよこをくっつけるよりも、階層化させるほうがカンタンなんです。
さて。
このレイアウトは、左側をメインコンテンツにするようにしてあります。
よって、width（幅）は、左が７０％右を３０％のバランスとしています。また、height（高さ）は、とりあえず４００PX、背景色はTDごとに変化をつけた。
ここまでの知識だけで、いま、あなたが見ているページと同じレイアウトが作ることができます。若干の応用は必要ですが、あなた自身の好みで、自由に変更してください。
サイズ、色などをいじること。それはあなたのノウハウになっていくはずです。
ここまでの説明は、理解できましたか？
作っていただくことを主題にしていますので、ずいぶん言葉を省いています。このサイトのCSSのページと合わせて、理解を深めてください。
もし、分からない場合は、メールを下さい。私でよければ、お答えいたします。
ホームページができらたら、次はネット収入です。
少しでも「見入り」があれば、ホームページはもっと楽しくなりますよ。
クリック＞収入サイトに挑戦！！！
|
