これを読んだら割とイカした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>
サンプル
↑このように、知っていると便利な小技がいくつも載っています。
実際に使う機会がないと、読んでいるだけでは覚えるのが難しいとは思いますが、
こういう使い方が出来る!
と知っているだけでも全然違うんじゃないかなと思います。
是非、読んでみて下さいね!!
以上、黄金りんごでした。
黄金りんご
最新記事 by 黄金りんご (全て見る)
- 正しく読めてる?cssプロパティの読み方のまとめ! - 2015年3月31日
- Googleアナリティクスのアカウントにて複数サイトで同一IPを除外する方法 - 2015年3月2日
- Googleアナリティクスの検索キーワードの取得場所変わったよね? - 2015年2月6日
最近のコメント