スポンサー


    ウェブデザイン基礎講座

    フォトショップ講座

    HTML&CSS講座

    グラフィック講座

    Flash講座

    3D講座

    ウェブプログラミング講座

    サイトメンテナンス講座

    サイト紹介

    スペシャルリンク

サイト内検索

 メールマガジン

テクニック

HomeHTML&CSS講座 > スタイルシート基礎講座

スタイルシート基礎講座

投稿日:2006年11月7日   レベル:初心者    ソフトウェア:DreamWeaverGoLiveFrontPage



カスケーディング・スタイル・シート(CSS)については、近頃頻繁に耳にすると思います。もしなくても、あなたが訪れているサイトのほとんどはこのCSSを使って作成されています。ここでは、CSSについて最初の一歩を踏み出しましょう。


Step1 − はじめに

CSSの基礎知識
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; }

このルールでは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



スポンサードリンク

コメント

ランダム記事5件

2016年5月の人気記事ランキング