コトダマウェブホームHTMLCSSBootsrtapWordPressプラグインphotoshopIllustratorJavaScriptjQueryその他サーチコンソールGoogleアナリティクスツールWordPressとデザインが学べるWebメディアmenuホームCSSCSS|基本となる3つのセレクタCSS2017.08.16CSS|基本となる3つのセレクタセレクタというのは、スタイルシートの中でデザインを適用させる場所を指定する部分です。ここでは、セレクタの基礎編としてよく使用される3つのセレクタのお話をしていきます。基本的な3つのセレクタ基本的な3つのセレクタは次の通りです。タイプ(要素)セレクタclassセレクタidセレクタ例えば、こんなHTMLがあったとします。ボタンで表示を切り替えてご覧ください。CodePen.上記のソースコードをブラウザで表示させると、「ここの色を変えていくよ」というテキストが表示されます。意味を持たない要素です。文章の段落を表す要素になります。classとidについて要素の開始タグには、「class」や「id」といった属性を付けて自分で好きな名前を付けることができます。現時点では、名前を付けただけなので、特に意味はありません。この後、3つのセレクタを使って「ここの色を変えていくよ」というテキストの色を変えていきたいと思います。色の指定方法テキストの色を変えたいときは、プロパティに「color」を記入。値には具体的な色の指定(ここでは、「red」または「blue」)を記入。ある場所のテキストを赤にしたい場合は次のように書きます。セレクタ{color:red;}今回は、この「セレクタ」の部分の書き方が3パターンありますよ、というお話でしたね。1.タイプセレクタを使った指定方法タイプセレクタは、HTMLの要素(開始タグから終了タグまで)を指定する方法です。p要素のテキストを赤くしたい場合は下記のように書きます。p{color:red;}これでp要素の中にあるテキストの色を「赤」として指定しましたので、これが、先ほどのソースコードに適用された場合、「ここの色を変えていくよ」という文字が赤くなります。CodePen.この方法で指定した場合、ページ内にあるp要素がすべて赤くなります。class="red">ここの色を変えていくよ</p></div>上記のp要素に付いているclass名「red」を利用してデザインを適用させるのがclassセレクタです。書き方は、次のとおりです。.red{color:red;}HTMLにclassを付けるときは、「class=”red”」でしたが、スタイルシートでclassを指定するときはclass名の前にドット「.」を記入します。CodePen.これで、「red」というclass属性が付けられた部分がすべて赤になります。同じ要素がページ内に複数あり、その中の特定の要素のみにデザインを入れたい場合はこのclassセレクタを使います。3.idセレクタを使った指定方法3つ目の方法がidセレクタを使ったデザイン適用方法です。これはclassセレクタとほとんど同じです。#blue{color:blue;}先ほど、divタグに付けた「blue」というid属性を指定して色は青を指定してみました。これで、「blue」というid名が付けられた部分がすべて青くなります。CodePen.先ほど、classのときは前にドット「.」を入れるというお話をしましたが、idのときはシャープ「#」を入れます。以上が3つのセレクタの書き方になります。ここの内容がなんとなく理解できたら次は、下記のページも見てみて下さい。2017.08.17CSS|セレクタを実践的に使う方法(初心者向け)基本となる3つのセレクタでは、スタイルシートのセレクタの基礎についてお話させていただきました。今回は、少しだけ応用編という形で、前回の例をもとにセレクタをより具体的に指定する方法についてお話させていただきます。