これを読んだら割とイカしたcssが書ける。小技集

おはようございます！黄金りんごです。
今日は朝から雨ですね～…。。。
最近、天気予報がサッパリ当たらないのでイライラします。

洗濯が乾かないよっっ！！（；；）

ウチのおかんが何か疲れたのか

「魔法が使えてあっという間に洗濯乾かせたらなぁ…(´･ω･`) 」

とぼやいてました。・・・まぁそれは間違いないよね。

さて、そろそろ本題に入りましょうか！
今日は、

コレを読んでおくと色んなところで使えて便利！

そんなcssの小技集が載っているページを見つけたので紹介しようと思います。

「意外と知らない!?CSSセレクタ20個のおさらい」http://weboook.blog22.fc2.com/blog-entry-268.html

実は結構前に発見して、読んでたページなんですが、
最近読み直す機会があって、内容を読んでいたら私、このページの中でいっこ間違って覚えてたのを発見しました。。。il||li ＿|￣|○ il||l

マジで読み返して良かった！

最近すごく思うことがあるんですが、自分ひとりで読んだり聞いたり
教わったりしたことって、自分から次の誰かに教えることがないと、
なかなか覚えないし自分の身にならないんですよね。。

今回がいい例です。

なのでこのSEOトレンドにも書き込んで、自分もしっかり覚えるし、
皆にも是非読んで覚えて欲しい、と思ったので紹介しました。

記事の書き方も、実際にソースとweb上でどう表示されるのかの
プレビューを乗っけてくれているので非常にわかりやすいです。

しかも、個人的にですが読んでて 楽しい！

しかもサイト制作している上では、
結構使いどころがあって、活用しやすい内容が多いです。

ちなみに私が間違って覚えてたのはコレ↓↓

5. E ＞ F（子要素にのみ適用）
セレクタを「＞」で区切ると、要素の直下にある要素にスタイルがあたります。

CSS

div.sample > a {
  font-size:18px;
  font-weight:bold;
}

クラス名sampleの直下にあるaタグだけに適用されます。

html

<div class="sample">
  <a href="#">リンク1</a>
  <ul>
    <li><a href="#">リンク1</a></li>
  </ul>
</div>

サンプル

↑このように、知っていると便利な小技がいくつも載っています。
実際に使う機会がないと、読んでいるだけでは覚えるのが難しいとは思いますが、

こういう使い方が出来る！

と知っているだけでも全然違うんじゃないかなと思います。

是非、読んでみて下さいね！！

以上、黄金りんごでした。

The following two tabs change content below.

• この記事を書いた人
• 最新の記事

黄金りんご

バイク、海、ストレッチ、そしてアニメ好きのオタクです！おでんはちくわぶ派！

最新記事 by 黄金りんご (全て見る)

• 正しく読めてる？cssプロパティの読み方のまとめ！ - 2015年3月31日
• Googleアナリティクスのアカウントにて複数サイトで同一IPを除外する方法 - 2015年3月2日
• Googleアナリティクスの検索キーワードの取得場所変わったよね？ - 2015年2月6日