∇ WEBプログラマー 便利帳 ≫ CSS
HTML CSS
*
▼スポンサー広告
次の広告へ☺
CSS CSS
CSSとはHTMLと組み合わせて使用する言語です。
1・CSSの基本
(CSSの書き方)
2・CSSプロパティ
(目的別)
3・CSSプロパティ
(アルファベット順)
▼スポンサー広告
次の広告へ☺
▼スポンサー広告
次の広告へ☺
CSS(カスケーディング・スタイル・シート)の略で、色やサイズ・レイアウトそしてプリンタ出力や再生スタイルなどを指定して、HTMLと組み合わせて使用する言語です。
・
さて、ここではCSSを利用し見栄えを良くして行きます！ CSSの書き方は<body>内に書く、「style属性」と<head>内に書く「セレクタ」の二種類があります。 初めての人はstyle属性で理解していくと良いですよ！
『 CSSの基本 』
STEP1『style属性』は各要素の中に直接記入します。 ちょっとしたCSSを書くだけなら「style属性」が簡単かも。
STEP2『セレクタ』は<head>内に記入します、 セレクタの書き方はちょいムズですがいくつかのメリットがあって基本は「セレクタ」で指定します。 そして「セレクタ」には「要素名」 「ID名」「クラス名」の3種類があります！
STEP3『外部スタイルシート』は別ファイルを作ってリンクで紐付する方法です、 こうする事で複数のページを一括で管理する事も可能です。
STEP4『様々な指定方法』は「属性セレクタ」 「疑似クラス」があってさらに細かく設定できます。 使い方はムズいけど理解すると超便利！是非トライしてみて下さいねっ！
STEP1『style属性』style属性の書き方はいたってシンプルでHTML要素内に記入するだけなんです！
●たとえば水平線<hr>をHTMLだけで装飾すると・・・
通常は→
<hr>
を→
<hr color="red">
こんな感じに装飾。
●上記をCSSで指定するとこんなコード・・・
<hr style="background-color:red;height:1px;border:0px;">
●え？同じ表示なのにコード長くない！？・・・長いです（汗）・・・・ですが、下記の様にしたい場合は？・・・
<hr style="height:3px; background-color:#fff; border:1px red solid; border-radius:2px; box-shadow:0px 0px 4px 0px #CD0000;">
これはHTMLタグでは表現が出来ないのです！コードが長くてごちゃごちゃしてしまうけど、見やすくてオシャレな感じを出すにはCSSが欠かせないって事ですねっ！
コードをスッキリさせるには次のステップ「セレクタ」で書くと良いですよ！
STEP2『セレクタ』セレクタの書き方はちょいムズ！記入場所はHTML要素の<head>～</head>内に記入します！
●『要素名』編 （前項ステップ水平線<hr>で例えます！）
[ sample1.html ]内
<html>
 <head> 		説明
  <style type="text/css"> ←ここからCSSですよ開始宣言
  <!-- ←コメントアウト開始※これを入れないとそのまま表示されます。
   hr { ←この「 hr { 」がセレクタの宣言
    height:3px; ←高さプロパティ
    background-color:#fff; ←中の色プロパティ
    border:1px red solid;
 ←枠線の色と太さと線種プロパティ
    border-radius:2px; ←角の丸みプロパティ
    box-shadow:0px 0px 4px 0px #CD0000; ←影プロパティ
   } ←この「 } 」がセレクタの終了
  --> ←コメントアウト終了※これを入れないとその後も表示されない。
  </style> ←ここまでがCSSですよ終了宣言
 </head>
 <body>
  <hr> ←あとは<hr>要素を書くだけ！
 </body>
</html>
これで全ての<hr>要素に適応されるよ！
●『ID名』編 （前項ステップ水平線<hr>で例えます！）
[ sample2.html ]内
<html>
 <head> 		説明
  <style type="text/css"> ←ここからCSSですよ開始宣言
  <!-- ←コメントアウト開始※これを入れないとそのまま表示されます。
   #sample { ←この「 #sample { 」がセレクタの宣言
    height:3px; ←高さプロパティ
    background-color:#fff; ←中の色プロパティ
    border:1px red solid;
 ←枠線の色と太さと線種プロパティ
    border-radius:2px; ←角の丸みプロパティ
    box-shadow:0px 0px 4px 0px #CD0000; ←影プロパティ
   } ←この「 } 」がセレクタの終了
  --> ←コメントアウト終了※これを入れないとその後も表示されない。
  </style> ←ここまでがCSSですよ終了宣言
 </head>
 <body>
  <hr id="sample"> ←あとは<hr id="sample">要素内にidを書くだけ！
 </body>
</html>
  id名はアルファベットから始まる好きなネームで決められます。
これで任意の要素に「id="sample"」を入れると適応されます！注意点は、同名「id」は一回しか使えないから憶えて下さいね。
●『クラス名』編 （前項ステップ水平線<hr>で例えます！）
[ sample3.html ]内
<html>
 <head> 		説明
  <style type="text/css"> ←ここからCSSですよ開始宣言
  <!-- ←コメントアウト開始※これを入れないとそのまま表示されます。
   .sample { ←この「 .sample { 」がセレクタの宣言
    height:3px; ←高さプロパティ
    background-color:#fff; ←中の色プロパティ
    border:1px red solid;
 ←枠線の色と太さと線種プロパティ
    border-radius:2px; ←角の丸みプロパティ
    box-shadow:0px 0px 4px 0px #CD0000; ←影プロパティ
   } ←この「 } 」がセレクタの終了
  --> ←コメントアウト終了※これを入れないとその後も表示されない。
  </style> ←ここまでがCSSですよ終了宣言
 </head>
 <body>
  <hr class="sample"> ←あとは<hr class="sample">要素内にclassを書くだけ！
 </body>
</html>
  class名はアルファベットから始まる好きなネームで決められます。
これで任意の要素に「class="sample"」を入れると適応されます！「class」は何回でも使えるのが特徴ですね！
って事で、慣れてきたらセレクタを使うのが良いですよ！
セレクタを使うことでプログラムを軽く出来るし、画面表示速度が速く感じますよ！
STEP3『外部スタイルシート』やり方は至って簡単！作成したHTMLファイルにCSSファイルにリンクを貼るだけです！
●前項ステップ水平線<hr>で例えます！
[ sample4.css ]内

説明
   hr { ←この「 hr { 」がセレクタの宣言
    height:3px; ←高さプロパティ
    background-color:#fff; ←中の色プロパティ
    border:1px red solid;
 ←枠線の色と太さと線種プロパティ
    border-radius:2px; ←角の丸みプロパティ
    box-shadow:0px 0px 4px 0px #CD0000; ←影プロパティ
   } ←この「 } 」がセレクタの終了



[ sample4.html ]内
<html>
 <head> 		説明
  <link rel="stylesheet" type="text/css" href="sample4.css"> ←「 link 」要素を記入
 </head>
 <body>
  <hr> ←あとは<hr>要素を書くだけ！
 </body>
</html>
上記のリンクを貼ったファイル内、全ての<hr>要素に適応されます！
STEP4『様々な指定方法』さらに細かく指定したり、マウスが乗っかったら色を変えたり、文字を挿入したりもできます！
●『属性セレクタ』編 （前項ステップ水平線<hr>で例えます！）
要素のみ
要素+属性名
要素+属性名+属性値
[ sample5.css ]内

説明
   hr { ←セレクタの宣言（要素のみ）
    height:3px; ←高さプロパティ
    background-color:#fff; ←中の色プロパティ
    border:1px red solid;
 ←枠線の色と太さと線種プロパティ
    border-radius:2px; ←角の丸みプロパティ
   } ←この「 } 」がセレクタの終了
   hr[title] { ←セレクタの宣言（要素+属性名）
    box-shadow:0px 0px 4px 0px #CD0000; ←影プロパティを追加
   } ←この「 } 」がセレクタの終了
   hr[title="これは水平線です"] { ←セレクタの宣言（要素+属性名+属性値）
    box-shadow:0px 0px 4px 0px blue; ←影プロパティを更新
   } ←この「 } 」がセレクタの終了



[ sample5.html ]内
<html>
 <head> 		説明
  <link rel="stylesheet" type="text/css" href="sample5.css"> ←「 link 」要素を記入
 </head>
 <body>
  <hr> ←要素だけを書いた<hr>を表示。
  <hr title="test"> ←要素+属性名を書いた<hr>を表示。
  <hr title="これは水平線です"> ←要素+属性名+属性値を書いた<hr>を表示。
 </body>
</html>
これで要素<hr>に属性名や属性値を指定する事により色んな表現が出来ます！
●『疑似クラス』編 （前項ステップ水平線<hr>で例えます！）
水平線にマウスを乗っけてみて下さい！
[ sample6.css ]内

説明
   hr { ←セレクタの宣言（要素のみ）
    height:3px; ←高さプロパティ
    background-color:#fff; ←中の色プロパティ
    border:1px red solid;
 ←枠線の色と太さと線種プロパティ
    border-radius:2px; ←角の丸みプロパティ
   } ←この「 } 」がセレクタの終了
   hr:hover { ←セレクタの宣言（要素）に疑似クラスを追加
    border:1px green solid; ←枠線の色と太さと線種プロパティを更新
    box-shadow:0px 0px 4px 0px green; ←影プロパティを更新
   } ←この「 } 」がセレクタの終了



[ sample6.html ]内
<html>
 <head> 		説明
  <link rel="stylesheet" type="text/css" href="sample6.css"> ←「 link 」要素を記入
 </head>
 <body>
  <hr> ←あとは<hr>要素を書くだけ！
 </body>
</html>
これで全ての<hr>要素に適応されます！
『疑似クラス名』は「hover」を含んで11種類あるから知っておくと便利ですねっ！
▼スポンサー広告
次の広告へ☺
▼スポンサー広告
次の広告へ☺