[PR]
大分 部屋探し
カーソルを乗せるとメニューの内容がここに表示されます→
トップページ
色と背景を変えたい時
テキストの指定をしたい時
フォントをいろいろしたい時
テーブルの指定をしたい時
リストの変更をしたい時
配置や表示を変えたい時
スクロールバーを変えたい時
その他の指定(RGB対応表付)
[相互リンク]
誰でも解る無料ホームページ作成講座
とほほのＷＷＷ入門
ホームページお役立ち小技集
HTML タグであそぼう
ヨッシーのホームページを作ろう！
Webページ作りのお勉強
ホームページビルダー作成報告
みんなのタグ辞書
１時間で作るホームページ
誰でもできる！超簡単ホームページ作成講座
@BG
メモ帳で作る超初心者のホームページ作成講座
７日で作る！タグ打ちホームページ
なかやんの家
APOLLO
ホームページ作成支援 ｈｔｍｌｔｉｍｅ
71Tips
ぷれぷれ
HOMEPAGE BUILDER
poizunCITY
AID+WEB
ホームページ作成初級講座
MS-SP
FLASH道場
un demi verre d'eau
無料ではじめる！ホームページ入門
動画で解る無料ホームページ作成講座
AICHAN WEB
Word2000でホームページ簡単作成1-2-3
初心者でもホームページがガンガン作れる簡単作成講座
siriasu.net
コピペで飾ろうホームページ
AWCSホームページ作成支援
WSJ21〜グッドホームページを創ろう〜
Tagland
ボンドメイク
実践！ホームページ作成への道
Uraneko
ホームページ作成講座
lazulite*
Webデザインレッスン
初心者だってカッコ良いホームページ作るぅ！
MASHのLANDMARK
ホームページを作
とらうませぶん
eWeb
ホームページ作成は活用力
ホームページは難しくない
簡単ホームページ入門
Build in English
KOBACHIN WEB
WWW studio
イージーホームページ
HTML講座&HSP講座
GiantStep
女の子でもホームページ簡単作成
タグの絵本
WEBOLVE
Aqualiss
Donkeyの初歩からのHP作成
Web Painter
SakuraRoom「超初心者の簡単HP作成」
パワフルかーちゃん奮闘記ＨＰ作成講座
ホームページ作りの参考書
hagane.Web
*N+H+R*
ネットマニア
Knave Web講座
How to make homepage
HTMLクイックリファレンス
Academic HTML
1から始めるWeb作成講座
菊池さんの工作室
ホームページ入門＠
PCJのタグ教室
主婦でもわかるHTML
webcre
ZSPC
Web Frontier
HTMLタグ
バリアフリーWebデザインガイド
MOPA.TC
ホームページを作りたい人のためのホームページ
めちゃくちゃ簡単にHP作りｖｖ
bnote
rink77 はじめてHP制作
School Icons CLUB （ホームページ用アイコン＆壁紙・フリー素材集）
ホームページの作り方:初級者のための初級者によるホームページの作り方講座
相互リンクドクター/アクセスアップならお任せ!!相互リンク募集
OCHIE'S LIFEトピックス
ホームページを極めよう！
夢と成功のホームページ作成総合情報サイト
Moving Picture
ホームページを作ろう！
[無料ホームページ素材＆ネットショップ支援]
LITTLE HOUSE
tulip-house
●
サイト利用上の注意
●
■当サイトでは、スタイルシート初心者のための使用頻度の高いものだけを集めて解説とサンプルを掲載しています。
当サイトを参考にするにあたってはHTMLの知識が必須になりますのでまだの方はHTMLをある程度理解してから初めて下さい。
当サイト内の画像、文章などの無断転載及び使用を禁止します。
当サイトの掲載内容はあくまでも管理者の環境下に基づいて製作されておりますので、全ての環境での動作を保証するものではありません。
それではスタイルシートを使用した素敵なホームページ作りをして下さい。
●
スタイルシートとは？
●
■ＷＥＢページの製作をするページで頻繁に目にする、スタイルシートという言葉は最近ではごく当たり前に使われるようになってきました。
スタイルシートとは、ひとことで言うと「ＷＥＢページのレイアウトを定義する技術」ということになると思います。
ページの本体を記述するのがＨＴＭＬで、文書の論理的な構造を示す言語です。
それに対してスタイルシートは、ＨＴＭＬの機能にはない体裁の制御についての方法を導入するために作られたものだと言えます。
まだまだ耳慣れない言葉でしょうが、ＸＭＬというのがあります。
ＸＭＬはＨＴＭＬよりもブラウザへの依存度が低く、ＨＴＭＬでは実現できない様々な設定や操作が可能なのです。
いずれはＨＴＭＬからＸＭＬへの乗り換えをする日がやってくると思いますが、そのＸＭＬでのページデザインについてはスタイルシートを使用します。
そのことも踏まえて、今からスタイルシートを理解し使っていくことをおすすめします。
尚、現在一般的に使われている「スタイルシート」とは、スタイルシート言語の一つであるＣＳＳを指していることが多く、ここでもＣＳＳをスタイルシートと表記しています。
スタイルシートを少しでも多く理解して、素晴らしいＷＥＢページを製作してください。
ページトップへ
●
まず始めに知っておくこと（重要・必須）
●
■スタイルシートの書式
基本的な書式は次の通りになります。（HTMLの<HEAD>内に記述します）
<STYLE type="text/css">
<!--
body { font-size : 9pt } ←この部分は例です
-->
</STYLE>
この場合はＢＯＤＹ全体のフォントサイズを９ポイントにするという指定をしています。
この場合のＢＯＤＹを「セレクタ」（スタイルを適用する対象）、ＦＯＮＴ−ＳＩＺＥを「プロパティ」（設定するスタイルの性質）、９ｐｔを「値」（プロパティごとに決められた値）と言います。
また、例ではプロパティは一つだけ指定されていますが、複数のプロパティを同時に指定することも可能です。
その場合は、；（セミコロン）で区切って並べます。
※実際に使う場合は、把握しやすいようにプロパティごとに段を変えて指定している人が多いのが現状です。
ページトップへ
■コメントの挿入
自分で作ったスタイルシートですが、たまにどの指定がどこにあるのかがわからなくなる時があります。
その時のためにスタイルシートの中にコメントを記述しておいて、どれがどこの指定かをハッキリさせておくと便利です。
<STYLE type="text/css">
<!--
body { font-size : 9pt ;
/*ボディのフォントサイズ*/
color : #000000}
/*ボディのフォントカラー*/
-->
</STYLE>
上のように「/*」と「*/」ではさんでコメントを記述するとブラウザには表示されません。
ページトップへ
■その他スタイルシートの記述法
上記で述べたのはＢＯＤＹのＨＥＡＤ内に記述する方法ですが、その他にも指定の方法があります。
外部からの読み込み（
外部スタイルシート
）
スタイルシートを別のＣＳＳファイルとして保存して、それを外部からＨＴＭＬページへ読み込む方法で記述は次の通りです。
<LINK rel="stylesheet" href="ＣＳＳファイル名" type="text/css">
（ＨＥＡＤ内に記述）
※ＣＳＳファイルを別に用意しなければなりませんが、スタイルシートの量が多くなってしまった時やページの設定を見られたくない時などに使用するといいでしょう。
★外部スタイルシートの作成方法
通常のスタイルシートの記述から
<STYLE type="text/css"><!-- --></STYLE>
を取ったものをメモ帳などにコピーして、「名前をつけて保存」で（名前は好きなもの）、最後の拡張子を
．ｃｓｓ
に変更すれば完了です。
HTMLタグ内記述法
文字通りＨＴＭＬの中に埋め込む方法です。例えば、テーブルタグなどへの使用頻度が一番高いです。（TDやTRへの記述が多いです。例はTABLE）
<TABLE
style="font-size:9pt; color:#000000;"
></TABLE>
かなり省略してますが、記述する場合は ｓｔｙｌｅ＝"" の中にプロパティと値を埋め込みます。
この方法が一番直接的でいいのですが、同じ指定がいくつもあった場合、それを全て書き込まなければいけないのでタグがかなり多くなってしまうという難点があります。
※しかし、最初に指定を決める前の段階では、タグごとに記述してみて、様子を見るためならばこの方法も使えると言えますね。
確認後に、あらためてスタイルシートとしてＨＥＡＤ内（あるいは外部）に記述するといいかも知れませんね。（私の場合はそうしています）
ページトップへ
■複数のタグを同時に指定する方法
一つのセレクタに複数の指定をするのは上で記述しましたが、複数のセレクタにも同時に同じ指定をすることが可能なんです。
<STYLE type="text/css">
<!--
body,td
{font-size : 9pt }
-->
</STYLE>
このようにＢＯＤＹとＴＤに対して同時に同じ指定をした例ですが、セレクタを「カンマ」で区切って指定することができます。
ページトップへ
■任意の範囲への指定方法
一部の限られた部分のみにも指定をすることが可能です。
その場合の指定法はクラスとＩＤで指定します。
クラス指定の場合はセレクタの前に「．」を入れて指定して、設定場所（HTML内）に class=""という風に記述します。
ＩＤでの指定の場合も同様に、「#」を前に入れて指定して、設定場所（HTML内）に id=""という風に記述して指定します。
<STYLE type="text/css">
<!--
.sample { font-size : 10pt }
#sample{ font-size : 20pt }
-->
</STYLE>
上の名前は両方ともにsampleとなっていますが、別々のものとして認識されます。
実際にはあまり使わないのですが、たまにダブったりもします。
上のスタイルを反映させるためのＨＴＭＬへの記述。
<TD class="sample"></TD>
<TD id="sample"></TD>
上のほうは文字サイズが１０ポイントになり、下は２０ポイントになるという指定です。
ページトップへ
今まで述べてきた以外にもいろいろな指定法などがありますが、普段よく使うものとしてはこのぐらい覚えておけば困らないと言えます。
あとは、どこにどの指定をすれば効果的かを自分で試してみて、あらたな指定の妙を探り出してみてくださいね。他のサイトを見て研究するのもいい手ですね。
Copyright 2007 CSS Lecture All Rights Reserved.
