スタートアップ研修記

uchiumiです。
今日のCSSは前回のCSS講習で出された「A List apartのCSSを調査して、こんな事をしてみた／この宣言はこういう機能をもっているという事を１人３つ探し出す」という宿題の解答をいくつか出し合いながら、backgroundの機能や、セレクタの指定方法などについて学びました。

backgroundについて

1つ目の解答はbackgroundで指定されたところをいじってみるというものでした。

{background:url(画像のURL) 580px 0 repeat-y;}

と記述されており、それぞれ

• url(画像のURL) 　・・・　背景の画像のurlを指定
• x指定　・・・　左側からの距離を指定
• y指定　・・・　上側からの距離を指定
• repeat指定　・・・繰り返し指定 repeat-yで縦、repeat-xで横に繰り返し表示。

という意味があるということでした。
私はy指定の部分と、repeatの「y」の意味が解らなかったのですが、今回の講習で理解することができました！

色指定について

backgroundでいろいろ試している時に、色の指定を付け足してみるということをしました。

{background: #3333ff;}

とすると、簡単に背景の色の指定ができます。
私は、

{background-color:#33f;}

という記述しか知らなかったので、とても勉強になりました。
また上に上げた2つの例の色の指定方法は少し違いますが、同じ色になります。とても綺麗な色です。
どちらも16進数の色コードを指定する方法で、2つ目の例は1つ目の例の簡略系になります。
他にもredやgreenなど、色の名前で指定することもできます。

セレクタについて

さて次の解答は、セレクタに関するものでした。
セレクタはカンマで区切っていくつか並べて書いて、まとめて設定できるとのことでした。

これは整列表記と言うもので、整列表記には下記の様ないくつかの方法があります。

• 複数指定（p, a {}）・・・カンマ区切りで書く
• 子要素（p .p1 {})←p 要素の下の .p1 全部を指定・・・空白区切りで書く
• 直下の子要素（p > .p1 {})←p 要素の真下の .p1 全部を指定・・・> を使って書く

小要素や直下の小要素といった細かい指定までできるので、便利な反面、場所を把握しておかないと自分がどこを指定しているのかわからなくなりそうだと思いました。

さて今日はセレクタに関する宿題がありました。以下が問題になります。興味を持たれた方は是非解いてみて下さい。

問題：次の HTML に対して、「ratta」のみ指定するセレクタはどう書くか？

HTML:

<div id="preamble">
 <div>
   hoge
   <div>ratta</div>
 </div>
 <div>huni</div>
</div>

・動画