だるかぶ
ご訪問ありがとうございます。ゆっくりしていってね。（本ページは広告を含みます。）
CSS の文法を簡単に書いておきます。
CSS のコメントの書き方
CSS のコメントは /* */ で囲まれた部分のみです。
/* これが CSS のコメント */私は JavaScript と間違えて、よく次のように書いてしまいます。
// これは CSS のコメントではありませんまぎらわしいですねえ。
CSS のセレクタ
CSS セレクタとは、スタイルを適用する対象を指定するもので、何個か種類があるのですが、いつまでたっても覚えられないので自分用にメモ。
https://gist.github.com/darucub/026080222449651f8ebc5f83a6fba6c2
擬似クラス
https://gist.github.com/darucub/8efcd5cc40633420e30840220dc0f6b8
属性セレクタ
CSS には、属性が一致した時にスタイルを適用する [ 属性セレクタ ] なるものがあるらしい。 実際に試してはいませんが、とりあえずメモ。 なんで参考程度に。
https://gist.github.com/darucub/faec589b1c56c4a92eb7f8425ab29fcc
CLASS と ID の命名規則
CLASS と ID には、半角英数字とハイフンを使って任意の名前を付けることができます。
ただ、一文字目を数字にすると、Netscape でうまく認識してくれません。一文字目はアルファベットで始めるようにしましょう。
また、クラス名にアンダーバー(_)を使用していると Netscape 4.7 でスタイルシートが適用されないので、これも注意です。
それから ID は、ひとつの HTML 文書内で一度しか使えないことになっているそうです。
ということで、サンプルを作ってみました。
https://codepen.io/darucub/pen/QwNyEmM
よく使う id, class 名の覚え書き
CSS を書いている時、id, class 名を決めるとき悩む事が多いので、忘れっぽい自分の為に覚え書き。
-
header
-
head
-
footer
-
foot
-
logo
-
menu
-
body
-
contents
-
wrap
-
col-2
-
main
-
side
-
left
-
container
-
container-inner
とか書いてたら、もっと役に立つページがありました。
色々あるんですねぇ。
ひとつの要素に class 属性を複数指定する
CSS の class 属性は半角空白で区切って複数の値を指定する事が出来ます。例えば…
.font_red { color: #FF0000; }
.font_10px { font-size: 10px; }上の様なスタイルを定義しておき、
<p class="font_red font_10px">テキスト</p>こんな感じで指定します。
ちょっと気になって確認してみた所、Mac 版 Netscape 4.7 では、うまく動きませんねー。
外部 CSS ファイルの文字コード指定
外部 CSS ファイルの中に日本語（コメントとか、フォントファミリーで日本語フォントを指定する時とか）を記述するときは、HTML のページに合わせた文字コードを指定しておきましょう。文字コードを指定していないと文字化けするのかな？
文字コードの指定方法は、CSS ファイルの一行目に以下のような記述を入れておきます。
EUC-JP の場合
@charset "EUC-JP";
UTF-8 の場合
@charset "UTF-8";
Shift-JIS の場合
@charset "Shift_JIS";代替スタイルシート
CSS ファイルを何種類か作っておき、head 内に、
<link rel="stylesheet" type="text/css" title="black" href="color_black.css" />
<link rel="alternate stylesheet" type="text/css" title="red" href="color_red.css" />
<link rel="alternate stylesheet" type="text/css" title="blue" href="color_blue.css" />なんて書いておくと、Opera 8 や Firefox 1.5 なんかの「表示」→「スタイルシート」で CSS を切り替える事ができるみたい。この時、title に書いてある文字列がメニューに表示される。
margin と padding の違い
margin はボーダー外側の余白、padding はボーダー内側の余白。なので、要素の margin 同士が重なると大きい方が優先されるみたいです。
現場からは以上です。それでは、またッ！！！
だるかぶ