ウェブデザイン基礎講座

    フォトショップ講座

    HTML&CSS講座

    グラフィック講座

    Flash講座

    3D講座

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

    サイトメンテナンス講座

    サイト紹介

    スペシャルリンク

サイト内検索

 メールマガジン

テンプレートモンスター
ホームページテンプレート

Free Templates Online JP
無料ホームページテンプレート
Free Templates Online JP

株式会社ネットオン
採用Webマーケティング
indeed広告代理店

海外 SEO対策 トラッキングツール
海外 SEO対策
ランキングチェックツール

Rank Tracker

テクニック

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月の人気記事ランキング