スポンサー
ウェブデザイン基礎講座
- ウェブデザインの大原則 ( 48 )
- ウェブユーザビリティ ( 6 )
- カラーセオリー ( 6 )
フォトショップ講座
- フォトショップの基本 ( 230 )
- エフェクト ( 169 )
- テキスト ( 81 )
- テクスチャ&パターン ( 60 )
- ウェブレイアウト ( 38 )
- ドロー ( 73 )
- カラーマネージメント ( 29 )
- 画像加工&合成&修正 ( 127 )
HTML&CSS講座
- HTML&CSS ( 41 )
グラフィック講座
- AdobeIllustrator ( 37 )
- Fireworks ( 1 )
Flash講座
- Flash ( 31 )
3D講座
- 3D ( 1 )
ウェブプログラミング講座
サイトメンテナンス講座
- サイトメンテナンス ( 39 )
サイト紹介
- サイト紹介 ( 8 )
スペシャルリンク
サイト内検索
メールマガジン
デザイナー向けのメルマガ
毎週金曜日に発行しています
毎週金曜日に発行しています
テクニック
Home ＞
HTML&CSS講座
＞ スタイルシート基礎講座
スタイルシート基礎講座
カスケーディング･スタイル･シート(CSS)については、近頃頻繁に耳にすると思います。もしなくても、あなたが訪れているサイトのほとんどはこのCSSを使って作成されています。ここでは、CSSについて最初の一歩を踏み出しましょう。
CSSはウェブデザイナーに数多くの特徴を利用できるようにします。CSSで、フォントの大きさや、フォントの属性(イタリック、アンダーライン･･)、ページのマージン、色、スペース、位置、などなど。
CSSを使うことで、全てのタグに異なった属性を適用できます。この属性は"ルール"と現します。"ルール"は選択子(タグに適用される)と宣言(属性に適用される)で構成されます。例えば、<P>タグを、12ポイント、Ms Sans Serifを黄色の背景と設定すると次のような"ルール"を作ることになります。
基本的なHTMLファイルから始めましょう。
ここに、スタイルを加えます！属性を変えた<H1>タグをヘッダーに、<P>をページのコンテンツに、次のコードを<HEAD>内に挿入します。
このように、タグに特定の属性を適用することで非常に有用なものになります。しかし、何の意味もわかっていなければ、<H1>や<P>タグがなにか全くわからないでしょう。ページを"header"、"contents"、"navi bar"と、分けることで、CSSを特定のエリアに割り当てていくことが簡単になると思います。
スポンサードリンク
スタイルシート基礎講座 
投稿日：2006年11月7日 レベル：初心者 ソフトウェア：
カスケーディング･スタイル･シート(CSS)については、近頃頻繁に耳にすると思います。もしなくても、あなたが訪れているサイトのほとんどはこのCSSを使って作成されています。ここでは、CSSについて最初の一歩を踏み出しましょう。
- Step1 ： はじめに
- Step2 ： 異なった属性を適用
- Step3 ： 基本的なHTMLファイル
- Step4 ： スタイルを追加
- Step5 ： まとめ
Step1 − はじめに
CSSはウェブデザイナーに数多くの特徴を利用できるようにします。CSSで、フォントの大きさや、フォントの属性(イタリック、アンダーライン･･)、ページのマージン、色、スペース、位置、などなど。
ノート: このチュートリアルで紹介している例を実際に利用するにはCSSをサポートしているブラウザ、Navigator 4.xやInternetExplore 4.xが必要です。
Step2 − タグに異なった属性を適用
CSSを使うことで、全てのタグに異なった属性を適用できます。この属性は"ルール"と現します。"ルール"は選択子(タグに適用される)と宣言(属性に適用される)で構成されます。例えば、<P>タグを、12ポイント、Ms Sans Serifを黄色の背景と設定すると次のような"ルール"を作ることになります。
P { font-family: "ms sans serif"
font-size: 12pt; background-color: yellow; }
font-size: 12pt; background-color: yellow; }
このルールではPは選択子-HTMLタグに適用されるスタイル属性、となります。{}括弧は、選択子へ適用されるスタイルの宣言の開始と終了を示します。また、セミコロンはそれぞれの宣言を分けるのに重要です。
Step3 − 基本的なHTMLファイル
基本的なHTMLファイルから始めましょう。
<html>
<head>
<title>Welcome to my Web Page</title>
</head>
<body>
<h1>Welcome to my Web Page</h1>
<p>Today I'm going to learn CSS</p>
</body>
</html>
Step4 − スタイルを追加
ここに、スタイルを加えます！属性を変えた<H1>タグをヘッダーに、<P>をページのコンテンツに、次のコードを<HEAD>内に挿入します。
<STYLE TYPE="text/css&">
<!--
P { font-family: "ms sans serif";
font-size: 12pt;
background-color: yellow; }
H1 { font-family: "impact, arial";
font-size: 35pt;
color: blue; }
-->
</STYLE>
Step5 − まとめ
このように、タグに特定の属性を適用することで非常に有用なものになります。しかし、何の意味もわかっていなければ、<H1>や<P>タグがなにか全くわからないでしょう。ページを"header"、"contents"、"navi bar"と、分けることで、CSSを特定のエリアに割り当てていくことが簡単になると思います。
引用:Web Design Library 著者:bengaliboy00翻訳:atuk
スポンサードリンク
