css3に関するjackie7のブックマーク (2)

  • jQueryとCSS3を使ったアコーディオンメニューを詳しく説明します|Webpark

    jQueryとCSS3を使ったアコーディオンメニューを作ってみましたので、作り方を紹介します。かなり長くなりますが、お役に立てばうれしいです。 色々事情があってIEでご覧になっている方のためにスクリーンショットも載せておきます。カテゴリー3にマウスを乗せているところです。 それではコードを解説していきます。 HTML まずはHTMLです。無駄に長いですが一応載せます。 <ul id="accordion"> <li><a href="#">カテゴリー1<span class="arrow rotate"></span></a> <ul id="active"> <li><a href="#">サブカテゴリー1</a></li> <li><a href="#">サブカテゴリー2</a></li> <li><a href="#">サブカテゴリー3</a></li> </ul> </li> <l

    jQueryとCSS3を使ったアコーディオンメニューを詳しく説明します|Webpark
  • 劇的!(でもない)before after 擬似要素の使い方まとめ

    自宅を匠にまかせて改造するほどの資金力なんてとうてい捻出できないゴロドクです、どうも。 普段コーディングするのにbefore/after擬似要素ってほとんど使ったことないんですけど、最近あちこちのCSSのTIPS系ブログ読んで結構使ってる例があったので、勉強がてら自分なりにまとめて備忘録付けておこうと思いまして。 before/after擬似要素 基的な使い方 まず最初にbefore/after擬似要素とはなんでしょ、という話なんですがこれはHTMLソース上に書かれた要素に対し、【:before】【:after】という擬似要素を付すことで、HTMLソース上には存在しない付加的な要素を、指定した要素の前後に生成する、というものです。 このニュアンスが言葉で説明するのがちょっと上手く行かなくて、自分が理解するのに壁であった部分でもあるんですが。 ものすごくシンプルなソースを見ていただけるとわ

  • 1