MUZUMI
Pocket

みなさんこんにちは。ムズミです。

今回もCSSを学んでいきましょう。


今回のテーマは「セレクタを書こう」です。

まずは前回の復習からいきまっしょい!

 

前回は値を書き換えたり、プロパティを追加したりしました。

《具体例》
p{
color:green;
font-size:20px;
margin: 5% auto;
}
《構造と名称》
セレクタ{
プロパティ:;
プロパティ:;
プロパティ:値 値;
}

セレクタの欄で変える対象を決定します。上図では要素pを対象にしてます。

プロパティで対象の何を変えるのかを決定します。上図では文字の色を変えています。

でどの程度・どのように変えるのかを決定します。上図では緑に変えています。


 

では、下記のリンクをクリックしてください。

実践でセレクタを学ぼう

それでは開いたページのCSSを変更してみましょう。

 

1.記事タイトルの色を変えてみよう

「記事タイトル:セレクタを意識してみよう」を右クリック⇒要素の調査を行ってください。

CSS欄に「h1{font-size:30px}」とあるので、ここに「color:blue;」と書き足してみましょう。

 

ヘッダ―タイトルの色まで変わっちゃった!

どうしてなんだろう?


理由:セレクタに設定している「h1」要素を、記事タイトルだけでなくヘッダ―タイトルも持っていたから。

(HTMLを知ってる人はわかりやすい話だと思います。)
h1要素というのは、HTMLに書かれている<h1> ~~~ </h1>のことです。

先ほど書いてもらったCSSですが、
h1{
font-size: 30px;
color: blue;
}

これを翻訳すると、「ページ内のh1要素はすべて、文字サイズを30px、色を青にしなさい」となります。

記事タイトルだけでなく、ヘッダ―タイトルもh1要素だったんですね。
それでは、見て確認しておきましょう。

ヘッダ―タイトルにて、要素の調査を行ってください。

この要素もやはりh1でしたね。

 

<h1>などの要素が被っているとき、どうすれば個別にCSSを書けるのか?

それは、要素の横にあるclassidを使うことです。

HTMLを見てください。ヘッダ―タイトルはclass=”title”と書かれています。一方で記事タイトルの行はclass=”content-title”です。

ということで、CSSのセレスタ部分にこう書いてみましょう。

.content-title { (中身) }

これを翻訳すると、「class=”content-title”を持つ要素の中身に対して命令する」ということになります。

 

それでは書きこみに行きましょう。

まずは先ほど変えてしまった青文字をもとに戻したいので、【CTRLキー + R】を同時押しして再読み込みする。

記事タイトルに対して要素の調査を行う。

CSS欄の「スタイルを絞り込み」の右隣りにある「+」をクリック。

ん?セレクタ部分が初めから【.content-title】となっていますね。
セレクタ部分はこのままでよさそうです。

では新しくできた.content-titleの{}の中に、color: blue;と書きこんでみましょう。

これで記事タイトルだけ青色になりました!


 

内容1,2両方のフォントを変えてみよう

Q.フォントってなーに?
A.明朝体やゴシック体のことです。

まず「フォントを変えるCSS」について、プロパティと値がどのようなものなのか、検索で調べてみてください。

 

「CSS フォント変更」で検索すればいいかな?


するとわかるとおり、

セレクタ{
font-family: serif;
}

この場合は文字をserif=明朝体にすることができます。

 

それでは早速、内容1,2のフォントを変えていきましょう。

内容1に対して要素の調査を行ってください。

…CSSは空っぽだね。
「要素」っていうセレクタが気になる…


それではまず、要素セレクタの{}の中に書いてみましょう。

font-family: serif; と書いてみてください。

…片方だけ変わりましたね。

ここでHTMLに注目してください。

<p>だった部分が
<p style=”font-family: serif;”>に変わってます。

これは特殊な書き方で、
「HTMLに直接CSSを書きこんでいる」
「一つの要素だけに影響している」
この2つの特徴を持っています。

あれ?CSS欄に書きこんだはずなのに、どうしてHTMLに書きこまれてるんだろう。


細かいことは考えなくて大丈夫です汗

覚えてほしいことは以下のことです。
要素セレクタに書きこむと、
「CSSではなくHTMLに書きこまれる」
「その要素だけしか影響しない」

今回は内容1だけでなく内容2も変えたく、この方法だと非効率的なので別の方法を使いましょう!

 

さて、内容1,2のフォントを変える続きです。
いったん、【CTRL+R】で再読み込みしてリフレッシュしましょう。

HTMLを見て下さい。内容1、2それぞれはpという要素からできています。
つまりセレスタを「p」にすれば、内容両方を変えることができるはずです。
(先ほど「h1要素」でやってしまったミスを、今回は狙ってやります。)

内容1に要素の調査を行う。

CSS欄の「スタイルを絞り込み」の右隣りにある「+」をクリック。

…セレスタはすでにpになっていると思います。

ではその中に、font-family: serif;と入力しましょう。

よしでき…あれ?

右側のおすすめ記事も明朝体になりましたね。先ほどのh1と同様に、pという共通した要素で作られていたようです。

先ほどと同様に解決してみましょう。
要素が被ったときは、「classやidを利用する」ですね。
早速classやidを探しましょう。

内容1,2のHTMLを確認してください。

要素pにclassやidはついていませんか?ついてませんね。

ではpの親要素を調べることにします。

 

親ってなに?
左上の要素のことです。

では記事1,2の親は誰ですかね…

 

<div id=”main-content”>が親ですね。
だからセレスタは、「id=”main-content”を親に持つようなp」にすれば、記事1,2だけを対象にすることができるでしょう。

それでは以下のようにやってみます。

HTML欄の記事1または記事2をクリックして青くする。

CSS欄の「スタイルを絞り込み」の右隣りにある「+」をクリック。

セレスタであるpをクリックすると書き変えられるので、
【#main-content p】と書く。

{}の中は、font-family: serif;と書く。

 

これで記事1,2のフォントだけを変えることができました!

 


まとめ

セレクタとして書けるものは、要素(p,h,divなど)、class(.~~~)、id(#~~~)である。

複数の要素・class・idを組み合わせて、限定的な部分を指定することができる。

要素の調査にて、セレクタが「要素」となっている部分は、HTMLを書き換えることになる。

今回はとても難しかったですが、CSSを理解する上で核となる部分です。
この記事通りに手を動かしたり、ほかの部分もいじってみれば必ず理解できますし、そうなればCSSを自由に書けるも同然です!!

ぜひ最後まで頑張ってください!!

  • このエントリーをはてなブックマークに追加

コメント

  1. この記事へのコメントはありません。

  1. この記事へのトラックバックはありません。