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