◆━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━◆
　　CSSに挑戦！
　◆───────────────────────────────◆
　
　　さて
　
　　ＣＳＳって？？？
　
　　現在、ホームページの制作において　「ＣＳＳ」　は
　　はずせない技術と言えるでしょう。
　
　　しかし
　
　　ハードルが高いのも確かです。
　
　　このメルマガでは技術的要素も取り上げていこうと思っているのですが
　　そこは「もちは餅屋」、専門誌に任せるとして
　
　　・このメルマガで興味をもってもらおう！
　　・一段階段を上がる「スロープ」のような役割になろう！
　
　　というスタンスで行きたいと思います。
　
　　ご興味が沸いた方はこのあと専門誌、解説サイトなどで
　　学んでみることをオススメします。
　
　——————————————————————
　■ ＣＳＳ ＝ カスケーディング・スタイル・シート
　——————————————————————
　
　　まずは用語解説から
　
　　▼ CSSとは
　　▼ Cascading Style Sheets
　※ 上記ページは本当に参考になります。
　
　要するにホームページデザインをより細かく
　設定するための技術です。
　
　また、このＣＳＳによって同じＨＴＭＬがまったく違ったデザインに
　変更することが出来ます。
　
　それはＨＴＭＬタグに効果を重ね合わせる（カスケード）ことができる
　ためです。
　
　プロっぽいホームページデザインには欠かすことの出来ない
　要素のひとつです。
　
　
　
　——————————————————————
　■ あ！　そういうことか！　と　思える解説
　——————————————————————
　
　たとえば
　<BODY> というタグがありますよね。
　
　ホームページを作成する上でこれがないと内容が書けません。
　
　
　<BODY> と </BODY> の間がブラウザ上に表現される内容になります。
　
　この<BODY>タグに背景色とかテキストの色とかリンクの色とか
　要素をつけたりしますよね。
　
　<body bgcolor=”背景の色” background=”背景画像ファイル名”
　　 text=”文字の色” link=”リンク色” vlink=”訪れたリンク色”
　　 alink=”リンクをクリックしたときの色”>
　
　といった感じになります。
　
　これをＣＳＳで書くと
　
<STYLE type=”text/css”>
BODY {
background-color:背景の色;
background-image:url(背景画像のファイル名);
color:文字の色;
}
a { color:リンク色; }
a:visited { color:訪れたリンク色; }
a:active { color:リンクをクリックしたときの色; }
</STYLE>
　
　となります。
　この<STYLE ～> から </STYLE> のタグは
　<HEAD>と</HEAD>の間に記述してください。
　
　ん～やっぱり難しいじゃん！
　
　と思いましたか？
　
　確かに<BODY>だけで説明するから悪いんです。（笑）
　
　これをテーブルタグで説明すると便利だな感が沸きます。（多分・・・）
　
　同じページ内に同様のテーブルタグを何度か書かなければならない
　ことってありませんか？
　
　○ 商品の一覧ページ
　○ スタッフ紹介のページ
　○ トップページ
　
　このような場面ではテーブルタグを使って一つ一つの記事を
　囲むことが多くありませんか？
　
　こんなとき絶対便利です。（と思っています・・・）
　
　たとえばー
　
<TABLE width=”横幅” height=”高さ” bgcolor=”背景色”
align=”位置”
cellspacing=”枠の太さ” cellpadding=”文字と枠の間”
border=”枠線の太さ” bordercolor=”枠線の色”>
<TR>
<TD>
適当な記事～～いろいろ～～<BR>
改行後～～いろいろなことがありました。
</TD>
</TR>
</TABLE>
　
　というテーブルタグをいくつか書く場合
　すべてに<TABLE ～>と長々タグを書くのなら
　
　<HEAD>と</HEAD>の間に
　
<STYLE type=”text/css”>
.tbl {
width:横幅;
height:高さ;
background-color:背景色;
color:文字の色;
border-style:solid; （実線 そのたの線も種類あり）
border-width:枠線の太さ;
border-color:枠線の色;
}
</STYLE>
　
　と記述しておき
　
　それぞれの<TABLE>タグを
　
<TABLE class=”tbl”>
<TR>
<TD>
適当な記事～～いろいろ～～<BR>
改行後～～いろいろなことがありました。
</TD>
</TR>
</TABLE>
　
　とすればよくなります。
　
　<TABLE ～> の中身がすっきりしましたね。
　
　この　class=”tbl”　というのが
　
　<STYLE ～>から</STYLE>の中で 定義 した
　「.tbl」の スタイル ということになります。
　
　class=”tbl” という具合に指定する際には
　先頭の「.（ドット）」は要りません。
　
　これで同じスタイルのテーブルが何個あっても
　ＨＴＭＬがすっきりします。
　
　
　——————————————————————
　■ もっと　教えろ！！！
　——————————————————————
　
　ん？これだけ？？
　
　と思った皆さん！
　
　
　チャンスです！！！！！
　
　その好奇心のまま、学んでみてください！！
　
　この後は専門誌を見ても大丈夫だと思いますよ。
　
　そこで今回参考にしたサイトをまとめてみました。
　
　上から順番に難しくなっていると思います。
　マスターすればとても便利ですし綺麗なサイトが作れますので
　がんばってください！！！
　
　▼ コピペで使える速攻系簡単小技 真・てすたーの倉庫
　▼ Styleの「倉庫」
　
　▼ とほほのＷＷＷ入門
　▼ スタイルシート入門 [基礎知識]
　
　▼ 初心者のためのホームページ作り
　▼ スタイルシート/CSSリファレンス
　
　
　
　——————————————————————
　■ CSSのメリット
　——————————————————————
　
　CSSを使用するメリットはたくさんあります！
　
　・CSSファイルを外部ファイルとして
　　すべてのページで使用することもできます。
　
　・・・ということはいちいち記述する必要がないんです。
　
　・JavaScriptと組み合わせて お客様の環境にあったCSSに切り替える
　　ことができます。
　
　・・・Ｍａｃで見るかもしれないＷｉｎで見るかも知れない
　　　　そんなサイトではCSSを切り替えていることが多いです。
　
　・なにしろ綺麗に仕上がります！
　
　・・・とくにテーブルなどの表現が豊かになります！
　　　　ＨＴＭＬソースを見ても綺麗です。
　
　
　・自由なレイアウトが可能！
　
　・・・ホームページビルダーでお馴染み（？）の
　　　　「どこでも配置」はＣＳＳによるものです。
　
　
　
　ちょっとした小技でも覚えると一段と見栄えします！
　がんばってみましょう！！！
　

この記事が気に入ったら
いいね ! しよう

シェアする
ツイートする
Twitter で