| CSS（スタイルシート）に関して少しまとめ | |
 |
ページに設定する以外にクラスと呼ばれる設定方法があります。 左のようにページに設定するのと同じ埋め込み場所に 設定を埋め込む事になります。 ページの場合はタグの種類別に埋め込みましたよね？ ここでは任意に名前を付けて埋め込んでおきます。 名前を付ける条件は「.○○○」です。もちろん…半角英数字です。 このままではスタイルは適用されません。 左の例だと.testと言う名前のクラスに font指定とsize指定をしている事になります。 |
 |
そこで<P>タグを使って”おめでとう”と挿入してみました。 一度表示してみましょう。 |
 |
スタイルはまだ適用されていないので左のような感じです。 |
 |
左のような感じで<P>タグにclass="test"と挿入しました。 これで指定したPタグに testと名前を付けたクラスを指定した事になります。 違いをみてみましょう。 |
 |
きちんと適用されました。 クラスを選択する事でページ内の複数のタグに同じスタイルを 設定出来るようになります。 クラスと同じような効果でID指定も存在します。 あまり使う機会はないと思いますが解説します。 |
 |
タグを埋め込む場所はクラスと同じ場所です。 違うのはクラスが「.○○○」だったのに対し「#○○○」なだけです。 <P>タグに挿入する方法も同じです。 <p class="test">が<p id=kaoru">に変化しているだけです。 表示してみましょう。 |
|
そう…全く同じです。 何が違うのか？と言われれば…さぁ？（笑 id指定は１ページに１カ所しか無理らしい…です。 クラスはいくつでも指定出来ます。 もっともidも複数、指定しても表示されるのですが… ダメらしいので一つにしておきましょうね^^;) |
 |
もう一つの埋め込み方があります。 直接的にタグに打ち込む方法です。 <p style="…"と言う感じで直接指定していきます。 ；で区切る事で色やサイズ、fontの種類などを指定します。 この方法の場合は<HEAD>タグ内にstyleタグを必要としません。 単体で使う場合は各タグに凄い量の設定を打ち込む 必要がありますよね？ そこでページ設定、クラス設定なども使いながら 効率よく作業出来るように考えましょう。 挿入する文字群は変わる事がないので… 今まで解説してきた物をそのまま使えます。 |
 |
ページ設定やクラス設定だけでも楽になりますが… それでも全ページに埋め込むのは大変ですよね？ 一度打ち込んだものを全ページ共通で使えたら… 便利だと思いませんか？そういう事も出来ます。 そこまで出来て初めてCSS（スタイルシート）が便利だと思えます。 それが出来なければ…HTML＋CSSで余計面倒ですしね^^;) あらかじめスタイルシートの設定を記憶しておくファイルを作ります そこにページ設定したものやクラス設定したものを保存しておきます それを全ページで読み込むようにすれば…いいわけです。 外部ファイルで保存すると言われています。 |
 |
作り方も簡単です。 単にページ設定やクラス設定した時と同じような感じで メモ帳などのテキストエディタに書き込んでいきます。 <style>〜</style>の部分は必要ありません。 ダイレクトに h1{ font-family : serif ; } と言う感じで入力してください。 全て入力したらファイル名を.cssで保存します。 仮にtest.cssとしたとしましょう。 |
 |
後は全ページの<HEAD>タグ内に左のように <LINK href="test.css" rel="stylesheet" type="text/css"> と埋め込めば完成です。 ページによってはスタイルを適用させたくない！ と言う場合は上の部分も削除すれば適用されません。 href=test.cssファイル名が違う場合はこの部分だけ変更します。 後はとりあえず…使ってみてください。 文章だけでは上手く伝わらない事も多いですから。 それでも…疑問があれば掲示板の方にお願いします。 |
|
予定外のスペースです…^^;)
スタイルシートで遊んでますこんなこと出来ますテーブルみたいでしょ？でもテーブルじゃありません^^)
それでは…まとめ終了です^^;)お疲れ様でしたm(_ _)m
|
最後に…肝心な事を忘れるところでした^^;） CSSの優先度を伝えておきましょうね〜 個別＞ID,クラス＞ページとなります。 ページ設定でH1タグにグリーンを指定していても 個別設定でレッドにすればレッドになると言う事になります。 大まかな設定をページ設定で よく使う部分はクラス設定で 一つしか使わないものは個別設定で…と使い分ける事で 凄く便利に使う事が出来ます。 もちろん…外部ファイルも使ってくださいね。 |
| HOME BACK | |
| パソコン初心者講座ぱそおーる | |