スポンサー


    ウェブデザイン基礎講座

    フォトショップ講座

    HTML&CSS講座

    グラフィック講座

    Flash講座

    3D講座

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

    サイトメンテナンス講座

    サイト紹介

    スペシャルリンク

サイト内検索

 メールマガジン

テクニック

HomeHTML&CSS講座 > CSS基本講座

CSS基本講座

投稿日:2007年2月6日   レベル:初心者    ソフトウェア:DreamWeaver




Step 1:CSSの基本講座
cssの基本講座ページのスタイルは、CSSを使って指定することができます。CSSを使ってスタイルを指定しておくと、1つのファイルを変えるだけで全ページのスタイルを一気に変更することができますし、HTMLコードが<font>タグだらけになることもありません。また、ボックス(<div>タグや<span>タグで囲まれた部分)の表示位置を指定することもできます。

スタイルシートを使ってページのスタイルを指定する方法は3通りあります。以下、一つずつ説明していきましょう。

外部スタイルシート――最も適用範囲の広い方法で、すべてのページにスタイルシートを適用することができます。別途用意したスタイルシートに各ページからリンクを張ることで、そのページのスタイルを指定します。

まず、外部スタイルシートを用意します。スタイルを記述したテキスト文書を作り、stylesheet.cssなどの名前で保存してください。次に、そのスタイルを適用したいページからリンクを張ります。ページ(たとえば、index.html)を開き、次のコードをヘッダー部分(<head>タグと</head>タグで囲まれた部分)に追加してください。

<link rel=stylesheet href=stylesheet.css type=text/css>


CSSでは、セレクターに対しプロパティーの値を指定するという形でスタイルを定義します。ここで、セレクターというのはHTMLの要素、たとえば、<a>、<p>、<div>、<span>、<input>、<h2>などです。プロパティーはスタイルの要素で、その値を指定することで、そのセレクターの表示の仕方を指示します。構文は次の通りです。

セレクター {プロパティー: 値;}


ご覧のように、セレクターに指定するプロパティーは全体を中括弧で囲み、プロパティーと値のペアは終わりをセミコロン(;)で区切ります。空白と改行は無視されます。外部スタイルシートや次に説明する埋め込みスタイルシートの場合、この性質を利用し、空白や改行を適宜挿入してわかりやすく記述するようにしてください。たとえば、セレクターに複数のプロパティーを設定する場合は、次のように記述します。

セレクター {
プロパティー: 値;
プロパティー: 値;
}


各プロパティーの設定をセミコロンで区切るのを忘れないようにしてください。すべてのプロパティーについての(解説がウェブ・ページ)にありますので参考にしてください。

埋め込みスタイルシート――特定のページだけスタイルを変えたい場合や、1ページしかないサイトの場合に便利な方法です。スタイルを記述する構文は外部スタイルシートの場合と同じですが、スタイルシート自体の指定の仕方が異なります。リンクではなく、適用するページのヘッダー部分にスタイルシートをで挟んで埋め込むのです。ページに埋め込んだスタイルシートはそのページに対してのみ有効です。このため、適用範囲は外部スタイルシートより狭くなります。

<html>
<head><title>ページの表題</title>
<style>
セレクター {
プロパティー: 値;
}
selector {
プロパティー: 値;
}
</style>
</head>
<body>
コンテンツ
</body>
</html>


インライン・スタイル――特定の行の特定のテキストだけを大きくしたい場合、筆者はこの方法を用います。もちろん、HTMLでもできますが、どちらを使うかは好みの問題でしょう。CSSの方が簡単ですし、設定に使うキーワードが覚えやすいので、筆者はCSSを使っています。

<HTMLの要素 style="プロパティー: 値; プロパティー: 値;">


前掲のウェブ・ページには、すべてのプロパティーに関するわかりやすい解説があります。また、このサイトには、CSS全般に関する情報が豊富にありますのでご利用ください。

引用:Web Design Library 著者:Alex 翻訳:小林 修



スポンサードリンク

コメント

ランダム記事5件

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