15分で覚えられるCSSの初歩の初歩 - Tools&Toolz

infomation

更新履歴

お勧め・人気記事

15分で覚えられるCSSの初歩の初歩
久しぶりにHTML・CSS関係の記事を書こうかと思います

今回はCSSの基礎のところを適当に書いていこうかと思います
普段のターゲット層と全然違うので読んでいただけるか心配ですが
まあおもしろそうなネタも無いのでやってみます

注）管理人もCSSの知識が有る方とはいえないので、間違ったこと書いてるかもしれません
もし書いていたら、良ければコメントのところに書き込んでいただけると幸いです。
◆まずはじめに

HTMLについてある程度の知識を持っている方が対象です
まあ、ある程度といってもHTML？何それおいしいの？状態では無ければ
大丈夫だと思います、、、たぶん

対象のCSSのバージョンは2.1です

◆CSSの書き方

まずCSSの書き方からやっていこうと思います。
例文↓
h4{color:red;}
このままじゃ訳がわからないと思うので解説を付けます

h4 ・・・<h4>についてですよ～と指定しています。
　　　　ちなみにここの部分を「セレクタ」といいます

color ・・・文字の色を決めますよ～っという意味です。
　　　　リファレンスという便利なものがあるので
　　　　特にあるもの全部覚える必要はないです。
　　　　ちなみにこの部分は「プロパティ」といいます
　　　　まとめると<h4>内の文字の色を赤にするってことです

red ・・・文字の色は赤にしますよ～ってことです
　　　　プロパティによってどんなものが入ってくるかは変わります
　　　　まあこれも基本的にリファレンスを見れば問題は無いと思います
　　　　ちなみにここの部分は「値」っていうらしいです

個人的には名称は覚えても覚えなくてもどっちでもいいと思います
（質問の時とか便利かもですが）

ポイント
1. h4{color:red;font-size:8pt;}みたいに続けて書くこともできます
2. h4.test{color:red;}とすると
  HTMLの方で<h4 class=”test”>となっているものだけ
  赤い文字にすることができます
3. h4#test2{color:red;}とすると
  HTMLの方で<h4 id=”test2″>となっているものだけ
  赤い文字にすることができます。
  ↑のとの違いは、idはHTML文書中一回しか使うことが出来ないことです
  （宣言の優先度がidのが高いってのもあります）
4. .test{color:red;}とすると
  HTMLの方でclass="test"と付いたタグだけを赤い文字にすることが出来ます（#testでも出来ます）
5. h4 a{color:red;}とするとHTMLの方で
  <h4>の中にある<a>の中にある文字を赤色にすることが出来ます
6. Class名やID名の最初には英字以外は使えない（○h4.test2 ×h4.2test）
その他ポイント
1. {color:red;}のところをまとめて「宣言ブロック」といいます。
2. color:redの部分をまとめて「宣言」といいます
3. h4{color:red;}をまとめて規則集合といいます
◆CSSの記述場所

HTMLでのCSSの記述場所は主に3つあります
1. HTML文書の内で記述
2. 外部ファイルを指定して記述
3. タグに直接記述する
１.HTML文書の内で指定

まず<head>内に
<META http-equiv=”Content-Style-Type” content=”text/css”>
を記述しておきます（他の２つでも指定しておいた方がいいです）
後は内に下みたいにすればおkです
```
<style type=”text/css”>
<!–
h4.posttitle{color:red;padding:10px;}
–>
</style>
```
２.外部ファイルを指定して記述

<head>内に
<link rel=stylesheet type=”text/css” href=”CSSファイルの相対または絶対アドレス” media=”screen” />
とすればおｋです
ちなみにmedia="screen"のscreenの部分をprintに変えると
印刷するときに用のCSSファイルを指定することが出来ます（他にもいろいろあります）

３.タグに直接記入

<h4 style=”color:red”>とするとその場所だけ赤い文字になります

ポイント
1. サイトを作る場合2番目の外部ファイルを指定して記述」のやり方が一番便利です
2. 同じ内容の宣言があった場合「タグに直接記入」するのが一番優先度が高く
  「外部ファイルを指定して記述」するのが一番低いです
今回はこれでひとまずお終いです。（たぶん１５分くらいで読める内容だと思います。
もちろん↑の内容だけではCSSファイルを編集したりは出来るようになったりはしませんが
リファレンスなどを必要になったとき読んでいけばだんだんと出来ていくと思います
一応↓にリファレンスなどのリンクを張っておきます

CSS概説リファレンス
 CSS2リファレンス
 CSS とはなんだろうか
 水無月ばけらの CSS リファレンス
 スタイルシートリファレンス - YEAR OF THE CAT
Internet Explorer (Windows) CSSバグリスト
 Cascading Style Sheets Level 2 Revision 1 (CSS?2.1) Specification
CSS2勧告邦訳について

なんか自分の文章力とCSSの知識の無さの暴露回になった気が、、、
tag：
- Popularity: 5%
- 2008-05-29
- By鷹本
- HTML・CSS
- ▲

No Related Posts

« 【GIMPチュートリアル】第四回簡単にWeb2.0風の画像を作る

Livedoor Readerの英語版を使い易くしてみる »
コメント (0) »

このエントリーにはまだレスポンスがありません。

コメント RSS トラックバック URL

コメントをどうぞ

Name

E-mail

Website

XHTML: You can use these tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <code> <em> <i> <strike> <strong>