前回もお話したように、スタイルシートはスタイル指定だけが並んでいます。
スタイルの名前｛実際のスタイル指定}
これが基本書式。
スタイルの名前＝どの部分についての指定か、ということですね。
名前の前に「#（半角シャープ）」か「.（半角ピリオド）」がついています。
私はブログのスタイルシートで「#」を初めて見ましたが、これはいわば「大分類」的なものにはこちらが使われているようです。
対する「.」は「小分類」とでもいった感じでしょうか。
｛ ｝の中は
スタイル : 数値 ; スタイル:数値 ; スタイル:数値 ; ・・・・・
早い話が、「何についてなのか」と「実際の数値や種類の指定」を「：」の両辺に置き、ひとつごとに「；」で区切るわけですね。
実際には「；」の後で改行して見やすくしてあることがほとんどです。
このブログのスタイルシートの一部は次のようになっています。
body {
font-family: Arial, Helvetica, sans-serif;
background-image:url(http://blog.seesaa.jp/img/bg/blue/bg.gif );
background-repeat:repeat-x;
background-color:#CBDBE1;
margin:0px;
padding:0px;
text-align:center;
}
最初のところですね。
さて、先ほど名前の前に「#」か「.」がついていると言いましたが・・・。
例外的についていないものがあります。
「body」「a」「H1」～「H3」がそれに当たります。
これは、自分で名前をつけるものではなく、最初から決まっている定型文的なものなので、そういう扱いになるらしいです。
（詳しいことは知らない；；）
スタイルシートの最初には「body」の指定が来ます。
これは、全体のスタイルについてですね。
全体に背景が入る時は、ここにその指定を入れます。
後は、スタイルシートによって順番が違うかもしれませんが・・・。
「a」 （リンクについての指定）
「H1」 大見出し＝ブログではタイトル
「H2」 中見出し＝ブログでは日付をこれに当てています
「H3」 小見出し＝ブログでは記事タイトル
とまぁ、こんなものが来ているはずです。
それと前後して入っている「#container」は、いわばパーツを入れるための箱、といった感じでしょうか。
このブログは幸い、そのcontainerの説明がすごくし易いのですが・・・横幅一杯一杯に使ってませんよね？
両サイドに背景だけの部分があると思います。
そして、画面の表示幅を狭くしていくと、下にスクロールバーが現れ、背景だけの部分はなくなってしまいますが、主要部分は何がなんでも表示されることになっているはず。
これが「container」部分なんですねｗ
スタイルシートによっては「container」の指定がないものもありますが・・・。
なるべくなら、containerで幅指定はしておく方がいいと思います。
でないと、表示幅が狭くなった時に、画面が思いっきり崩れて見えるからです。
ちなみに、seesaaブログでは「#container」という名前なのですが、他のブログでは必ずしもその名前ではありません。
というのも、スタイルシートというのは、先ほどの「定型分的」なもの以外は、自分で名前をつけて、それに対する指定をする、という形式だからです。
単に、seesaaでは、パーツを入れる箱を「#container」と名づけるように統一している、ということなんですね。
では今日は、「a」についての説明だけして終わりにします。
a{
color:#00C657;
text-decoration:none;
}
こんな感じが基本かな？
「a」はリンクが張ってある文字についての指定です。
「color」はリンクが張ってある文字を何色にするかの指定です。
色の指定は「#と、その後に続く６桁の英数字」あるいは「カラー名」ですることが多いです。
「#」の後が３桁になっているものもありますが、それは全部同じものの時だと思います。
「#CCC」なら「#CCCCCC」と同じ、というわけですね。
「text-decoration」は、リンクが張ってある文字の装飾についてです。
「none」は装飾なし、他に「underline」（下線）、「overline」（上線）、「line-through」（打ち消し線）、「blink（点滅）」などがあります。
「a」については、他にもこんなものがあります。
a:visited
a:active
a:hover
「visited」は訪問済みリンク、「active」はクリックされた瞬間のリンク、「hover」はマウスが上に乗った時のリンク、を表します。
普通の状態と違うスタイルにしたい場合には、それを追加で指定します。
a:visited {
color:#00C657;
text-decoration:underline;
}
a:active {
color:#000;
text-decoration:blink;
}
a:hover{
color:#000;
text-decoration:overline;
}
「a」については、ちょっと特殊です；；
これだけ、名前の中で「：」が使ってある・・・。
でも、これは定型文みたいなものなので、これはこういうものでしょうがないみたいです。
では、今日はここまで。
・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・
この記事はいかがでしたか？少しずつですが、頑張っています。
応援お願いします！
・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・
ランキングから訪問させていただきました。ＨＴＭＬは難しくてわかりにくいので、敬遠しがちです＾＾；詳しいんですね～。
応援して帰りますね。ポチッ！
やっとこ、リンク完了しました
遅くて申しわけありません。
これからもどうぞよろしくおねがいいたしますよ。・・・それから！
初心者から質問ですがソラさんのこの上のところにある小さいバーＦＣ２ランキング
と人気ブログランキングの小さい長四角はどうゆう風にすればできるんでしょうか？
できればおねがいいたします。ぺこり！
HTMLっていまいち苦手なわたし・・・
勉強させてもらいますね♪
後ほど、リンク貼らせて頂きますね。
応援ポチッ！
HTMLやらスタイルシートやらって難しいですよね；；
でも、わかった時にはそれが快感になるのですよ♪
・・・というのは、半分冗談ですがｗ
私も勉強する機会があったわけでもなく、全部ネットで調べながら実践しただけなのです～
小さな「なるほど」の積み重ねなんですね。
もりやんさん、記事の最後のところに来ているやつのことでしょうか？
だったらそれは、記事ごとに、コピペで最後の部分に挿入してるだけです・・・。
最初、記事の「フッター」に設定して、自動で入るようにしてみたんですが、フッターだと表示される場所が、どうしても気に入らなかったんですよね・・・。
この回答でダメでしたら、またコメント下さいね、わかる範囲のことは何でもお答えします。
CSS詳しいですね。勉強させてもらいます
応援 ポチ
リンク、コメントを有難うございます。
当方も完了しました。ご確認下さい。
http://yumekanau-joho.seesaa.net/
シートに随分詳しいですね。
一つ教えて下さい。（汗）
シート全体をセンターに移動するには
どこをどうすればいいですか？
一度いじって、シートをダメにしたもので
怖くていじられませんでした。
ぜひ、ご教授を。
又来ます。応援ポチッと。
こちらもリンク完了しました！！
それから、リンクしてくださった方、本当にありがとうございます。
これからも、どうぞよろしくお願いしますね。
pondさんの質問についてですが。
普通なら、「body」のところに「text-align:center;」と入れるだけなんですが・・・。
現在、pondさんが使っているスタイルシートでは、それでは崩れてしまいますね。
それは「背景の制約」の問題なんです。
ちょっと長くなってしまうので・・・ええと、数回先にそのことについて書く予定なので、待っていただいていいでしょうか？
書けたら、お知らせに行きますねｗ
コメント、有難うございます。
待ってますので宜しくお願い致します。
応援ポチッと。