本サイトは「WordPress」で構築しています。
ちなみに、ゼロから（テキストファイルで空白の「index.php」ファイルを作成して全て手入力して）構築しています。
とはいうものの、この本を参考にして本サイトを構築しました。
本格ビジネスサイトを作りながら学ぶ WordPressの教科書2
内容的には、ゼロから HTML や PHP を手入力で記述して少しずつサイトを構築していくスタイルで、WordPress の構造や関連性が勉強になります。
この本をマスターすれば、そのスキルだけで WordPress を基にした Web サイトディレクターとして「フリーランサー」になれたり「起業」もできるのではというくらいの濃い内容になっています。
結構内容が深くてスキルを求められるので、合う合わないがあるかもしれませんが、気合を入れて勉強する分には非常に良い本だと思います。
池袋のジュンク堂で WordPress 関連の本を全冊立ち読みしてチェックしましたが（笑）、「本格ビジネスサイトを作りながら学ぶ WordPressの教科書2」以外の本は正直言って「物足りない」印象を受けるくらいでした。
それくらいこの本が突出しているとも言えます。
ただ「HTML/CSS」に関しては、今まで分からないところがあればその都度調査してサイトを構築してきましたが、複雑で入り組んだタグ付けをした場合、スタイルシート（style.css）での「パス」というか「セレクタ」をどうすればいいのか結構悩むときがありました。
そこで一念発起してゼロから学びなおしました。
そのため、私と同じように「基本から勉強したい」という「超初心者」の方にとっては参考になると思います。
毎回必ず悩んで無駄な時間を浪費する「セレクタ」を指定しても反映されない問題
たとえば、<table></table>タグがあります。
この<table>タグに対してデザインを設定したい場合は「style.css」ファイルに以下のように書けば、<table>タグに対してデザインが反映されます。
index.html
|
<table> </table> |
style.css
|
table { background: #EEE; |
ここまでは分かります。
基本が分かってなくても、なんとなく分かります。
しかしこうなると、途端に身構えてしまいます。
index.html
|
<table class=”test”> ← tableタグに「class=”～”」が付いています。 </table> |
これは「要素」を「特定」しています。
上記の例の場合は「class」属性と言います。
よく見かけるのは「class」属性と「id」属性です。
「<table class=”test”>」と記述されているtableを特定する場合はスタイルシート（style.css）に以下のように記述します。
style.css
|
table.test { ← 「table.test」でつなげています。 background: #EEE; |
これは
「要素（table）」.「class名（test）」
で要素を特定しています。（たくさんある要素（table）の中から test という class を特定しています）
「class」と「id」の違い
「class」も「id」も「属性」です。
違いは何かというと
class → html 内で繰り返し使ってもOK
id → html 内で1回しか使えない
という規則があるそうです。
私はこれを知った時に少々焦りました。
というのも、今までこの違いが分からずに html 内で繰り返し id を使っていたからです。
だから「id → html 内で1回しか使えない」からと言って、2回使ってしまった場合、2回目以降の「id=”test”」は無効になるのかというと、そうでもないようです。
しかし一応ルールがそうなので影響がなくてもルールに則った形で HTML/CSS を記述するのがいいです。
CSSの基本ルール
ここで一度 CSS の基本ルールを確認しましょう。
私も CSS の「基本ルール」を勉強すると、今までいかにルールを知らずにスタイルシートを記述していたのかが分かります。
まずは、このようなスタイルをよく見かけると思います。
|
table { background: #EEE; |
これをスタイルシートの書式で表すと
セレクタ { プロパティ: 値; }
になります。
セレクタ
セレクタ（selector）とは、スタイルを適用する対象です。
上記の【例】では「table」に対してスタイルを設定しますよという意味になります。
ちなみに、「h1」「h2」「table」「li」「p」などがセレクタになりますが、これは HTML 上では「要素名」になります、。
プロパティ
プロパティとは、セレクタに対してどのようなスタイルを設定するのかを指定する要素になります。
例えばセレクタが「h1」で、プロパティが「font-size」ならば、「h1」のフォントサイズが対象になります。
値
値は、具体的にプロパティに対して設定する値になります。
セレクタが「h1」で、プロパティ「font-size」の値が「16px」なら「h1」のフォントサイズは「16px」の大きさになります。
セレクタはどのように指定すればいいのか？
基本を振り返ったところで、いよいよ具体的なセレクタの指定方法に関して詳しく見ていきます。
先ほどお話ししましたが、以下のような「class」や「id」が並び始めると、途端によく分からなくなります。
【例】
index.html
|
<table class=”test”> </table> |
style.css
|
table.test { background: #EEE; |
CSSはパターンマッチングで適用する要素を決定する
あらためて調べると CSS はどのようにして「html」ファイルの中から、スタイルを適用する要素を見つけるのでしょうか？
実は CSS ではパターンマッチングにより要素を見つけ出しています。
今まで何となくホームページやサイトを構築してきたので、経験的にそうかもしれないと思ってやってきましたが、改めて勉強すると実際に「パターンマッチング」により要素を見つけていることが分かりました。
タイプセレクタ
要素名（h1,h2,h3,table,pとか）をセレクタにします。
【例】
|
table { background: #EEE; |
パターンがマッチングすれば、マッチングした要素に対して「プロパティ：値（font-size:16px;など）」が適用されます。
ユニバーサルセレクタ
要素名ではなく「＊（アスタリスク）」で全部を指定することができます。
以下の例では、すべての要素に対して「font-size:16px;」が適用されます。
【例】
|
* { font-size:16px; |
「classセレクタ」と「idセレクタ」
「classセレクタ」と「idセレクタ」を使うことで、更に対象を絞り込むことができます。
例えば、以下の【例】の場合は、すべての「table」ではなく、数ある「table」要素の中の「test」クラスに対してのみ適用されます。
【例】
|
table.test { background: #EEE; |
なぜ「classセレクタ」と「idセレクタ」が存在しているのかというと、
- 特定の要素のみスタイルを適用することができる
- スタイルを効率的に管理することができる
からです。
その結果、
- ミスがなくなり
- HTML/CSSを軽量化が可能
になります。
上でも説明しましたが「classセレクタ」と「idセレクタ」の違いは
class → html 内で繰り返し使う場合
id → html 内で1回しか使わない場合
に利用するという違いがあります。
classセレクタの使い方
classセレクタには2通りに使い方があります。
要素を特定する場合
以下の例は、「table」に対して「class」を適用します。
要素名.クラス名
【例】
|
table.test { background: #EEE; |
要素を特定しない場合
要素を特定しない場合は、すべての要素に対して「.test」の「classセレクタ」が付いている要素だけが対象になります。
つまり、
- <table class=”test”>
- <p class=”test”>
- <h4 class=”test”>
が対象になります。
【例】
|
.test { font-size:20px; |
idセレクタの使い方
idセレクタは HTML 文書の中で唯一の要素に対してスタイルを適用するために使用します。
要素を特定する場合
以下の例は、「table」に対して「id」を適用します。
要素名#クラス名
class とは異なり、「.（ドット）」ではなく「#（シャープ）」になります。
【例】
|
table#test { background: #EEE; |
要素を特定しない場合
要素を特定しない場合は、すべての要素に対して「#test」の「idセレクタ」が付いている要素だけが対象になります。
つまり、
- <table id=”test”>
- <p id=”test”>
- <h4 id=”test”>
が対象になります。
【例】
|
#test { font-size:20px; |
まとめ
まだまだ深く基本から勉強して記事を更新します。
コメント