×
[PR]上記の広告は3ヶ月以上新規記事投稿のないブログに表示されています。新しい記事を書く事で広告が消えます。
大神です．筆ブラシで描いてみました．
曲良し，内容良し，まさに神ゲー
PR
●CSSの主な記述書式について
一般的に，セレクタ{プロパティ:値;}
となります．
たとえば，
h1 {color:#ff0000;}
⇒H1タグが赤になる
複数指定も可能
h1, h2, h3 {color:#ff0000;}
⇒H1，H2，H3タグが赤になる（セレクタをカンマで区切る）
ある要素の中の要素に対して
ul li {color:#ff0000;}
⇒ulタグ内のliタグに対して行う（セレクタをスペースで区切る）
●IDセレクタとクラスセレクタ
pタグなんかはHTML内にたくさん出てくると思います．
上記の方法でpにスタイルを割り当てると，HTML内の全p要素が同じスタイルになります．
違うスタイルを同じ要素（例えばp要素）に割り当てたいときは，IDセレクタやクラスセレクタを用います．
IDとは，<p id="sample">サンプルコードですよ</p>みたいに，id="識別子"をHTML内で加えて，CSSで設定します．CSSの例は，
#sample {color:#ff0000;}
のように，先頭に＃（シャープ）をつけます．
クラスとは，<p class="smaple">サンプルコードですよ</p>みたいに，id="クラス"を加えて，CSSで設定します．CSSの例は，
.sample {color:#ff0000;}
のように，先頭に．（どっと）をつけます．
2つの違いは･･･どうなんですかね（ぇ
とりあえず，レイアウトが決まっている固定部分はIDを使って，臨機応変に変えていく場合はクラスを利用すればいいと思います．C言語でいえば，whileとforみたいな（笑
一般的に，セレクタ{プロパティ:値;}
となります．
たとえば，
h1 {color:#ff0000;}
⇒H1タグが赤になる
複数指定も可能
h1, h2, h3 {color:#ff0000;}
⇒H1，H2，H3タグが赤になる（セレクタをカンマで区切る）
ある要素の中の要素に対して
ul li {color:#ff0000;}
⇒ulタグ内のliタグに対して行う（セレクタをスペースで区切る）
●IDセレクタとクラスセレクタ
pタグなんかはHTML内にたくさん出てくると思います．
上記の方法でpにスタイルを割り当てると，HTML内の全p要素が同じスタイルになります．
違うスタイルを同じ要素（例えばp要素）に割り当てたいときは，IDセレクタやクラスセレクタを用います．
IDとは，<p id="sample">サンプルコードですよ</p>みたいに，id="識別子"をHTML内で加えて，CSSで設定します．CSSの例は，
#sample {color:#ff0000;}
のように，先頭に＃（シャープ）をつけます．
クラスとは，<p class="smaple">サンプルコードですよ</p>みたいに，id="クラス"を加えて，CSSで設定します．CSSの例は，
.sample {color:#ff0000;}
のように，先頭に．（どっと）をつけます．
2つの違いは･･･どうなんですかね（ぇ
とりあえず，レイアウトが決まっている固定部分はIDを使って，臨機応変に変えていく場合はクラスを利用すればいいと思います．C言語でいえば，whileとforみたいな（笑
senのCSSレイアウトこうざ その１
という訳で，徒然なく書きます．HTML知ってるものとしてはじめます（ぇ
まず，CSS⇒Cascading Style Sheets（カスケーディング・スタイル・シート）はホームページを作成する上で，色やレイアウトなどを決定するためのファイルです．
大昔は，HTMLの中に直接 color=●●● とかなんとか，16進で色を記述したり， font size=● なんかで文字の大きさを変えてましたが，colorとかfont sizeとか，レイアウトや色に関する部分を別ファイルにまとめる（＝CSS）ことで、HPの保守管理の効率UP!!になるわけです．
では，早速実践だー
●CSSの例
例えば，style.cssというファイル名で作成し，以下の要領で書いていきます．
body {
text-align: center;
background-image: url(images/bg02.gif);
background-repeat: repeat;
color: #333333;
}
これは，HTMLのbodyタグに対する例．
最初の要素は，body以下を「中央揃え」にします．
次は，bodyの背景を指定しています（bg02.gif)．
repeatは繰り返しを表します（ちなみに，縦，横それぞれのみ繰り返すことも可能）
最後のcolorはフォントカラーです．#333333なので濃い灰色ですね．
●CSSの適用の仕方
上記の内容でstyle.cssを作成したら，HTML側で読み込んで見ましょう．
<head>タグ内に以下のように記述
<link href="style.css" rel="stylesheet" type="text/css" media="screen" />
これでstyle.cssが読み込めます．
※上の例では，htmlとcssは同じ階層にあります．
media=""の部分では，screen（PCのモニタ）を指定していますが，出力別に変更できます．
print ： 印刷用ページ，projection ： プロジェクタ，tv ： テレビ などなど．
●CSSの適用の仕方２
<link>タグを使わない方法もあります．
<head>タグ内で以下のように記述
<style type="text/css" media="all">
@import url("style.css");
</style>
この方法では，IE（InternetExplorer)やネスケ（ネットスケープ）の古いバージョンではCSSを読み込みません．
CSSハックってやつですね．
確か，IE3-4，ネスケ4みたいな古いブラウザ（ぇ
<link>では中途半端に読み込んで，スタイル崩れが起きる（？）ので @importを使うというもの．
しかし，4代前のブラウザとかは相当稀なので，<link>でもいいとは思いますが･･･
私は<link>使ってます．
今日はここまでー
次回はもう少し詳しく見ていきましょう～
という訳で，徒然なく書きます．HTML知ってるものとしてはじめます（ぇ
まず，CSS⇒Cascading Style Sheets（カスケーディング・スタイル・シート）はホームページを作成する上で，色やレイアウトなどを決定するためのファイルです．
大昔は，HTMLの中に直接 color=●●● とかなんとか，16進で色を記述したり， font size=● なんかで文字の大きさを変えてましたが，colorとかfont sizeとか，レイアウトや色に関する部分を別ファイルにまとめる（＝CSS）ことで、HPの保守管理の効率UP!!になるわけです．
では，早速実践だー
●CSSの例
例えば，style.cssというファイル名で作成し，以下の要領で書いていきます．
body {
text-align: center;
background-image: url(images/bg02.gif);
background-repeat: repeat;
color: #333333;
}
これは，HTMLのbodyタグに対する例．
最初の要素は，body以下を「中央揃え」にします．
次は，bodyの背景を指定しています（bg02.gif)．
repeatは繰り返しを表します（ちなみに，縦，横それぞれのみ繰り返すことも可能）
最後のcolorはフォントカラーです．#333333なので濃い灰色ですね．
●CSSの適用の仕方
上記の内容でstyle.cssを作成したら，HTML側で読み込んで見ましょう．
<head>タグ内に以下のように記述
<link href="style.css" rel="stylesheet" type="text/css" media="screen" />
これでstyle.cssが読み込めます．
※上の例では，htmlとcssは同じ階層にあります．
media=""の部分では，screen（PCのモニタ）を指定していますが，出力別に変更できます．
print ： 印刷用ページ，projection ： プロジェクタ，tv ： テレビ などなど．
●CSSの適用の仕方２
<link>タグを使わない方法もあります．
<head>タグ内で以下のように記述
<style type="text/css" media="all">
@import url("style.css");
</style>
この方法では，IE（InternetExplorer)やネスケ（ネットスケープ）の古いバージョンではCSSを読み込みません．
CSSハックってやつですね．
確か，IE3-4，ネスケ4みたいな古いブラウザ（ぇ
<link>では中途半端に読み込んで，スタイル崩れが起きる（？）ので @importを使うというもの．
しかし，4代前のブラウザとかは相当稀なので，<link>でもいいとは思いますが･･･
私は<link>使ってます．
今日はここまでー
次回はもう少し詳しく見ていきましょう～
<<
前のページ