実際に使用したものやいつか使うかもと思ったものをJSFiddleやEvernoteなんかでバラバラにメモしていたのですが、それらの中でよく使いそうなものを一覧化したものが欲しかったのでまとめました。 今となっては様々なところで用いられていますし、もっと凄くて面白い動きを実装しているチュートリアルなんかも沢山見かけますが、個人的に汎用性高いと思うもの中心です。 対象ブラウザに古いIEなどが含まれている場合はもちろん使えませんが、いずれもjQueryや画像などを一切使用せずにデザインやアニメーションも全てCSSのみで実装しているものです。 また、同様にCSSのみでクリエイティブなボタンデザインやエフェクトを実装できるエントリーや便利なジェネレータツールなども備忘録兼ねて併せて紹介します。 CSS3を多用しているため、ブラウザ（特にIE7・IE8など）によっては動きや見栄えが説明と異なる場合があ

定義リスト DL DT DD をCSSで装飾するサンプル例の紹介。レスポンシブでも崩れない指定を目指しました。基本属性を活かして無駄な指定をしないのがポイント。 定義リストDLタグは、言葉を定義したり説明したりするときに使う論理タグです。セマンティックなマークアップが求められるにつれ活用の機会が増えました。 ただし基本のマージンなどにやや癖があるので、CSSで装飾するときは注意します。 よく見る定義リスト DL/DT/DD 向けのデザインサンプルはスマホで見ると崩れるものも多いんですが、なるべく幅は可変になるように書きました。レスポンシブでもコピペでいけるんじゃないかと思います。 定義リストとは 主な用途は用語集や注意書きでしょうか。以前はdefinition list（定義リスト）と呼ばれましたが最近ではdescription list（説明リスト）となり、少し言葉の印象が柔らかくなりま

ヘッダー部分のグローバルナビゲーションを、スマホビューの縦持ちの時だけドロワーメニュー（ハンバーガーメニュー）にしたくて、プラグインや既存ライブラリなどを使わない、ごくシンプルな作り方を調べました。 jQuery の「.toggleClass」を使えば、あとは CSS だけで簡単に作れることがわかったので、メモっておきます。 デモを作りました。（画像クリックで別ウィンドウで開きます） スマホで見るならこちらから→ 本日のINDEX クラスを付与・解除できる jQueryの「.toggleClass」 ドロワーメニューの動作の原理 ドロワーメニューの作り方 ハンバーガー部分のCSS参考サイト クラス名を付与・解除できる jQueryの「.toggleClass」 ヘッダー部分のグローバルナビゲーションは、<nav>要素の中に <ul>を仕込んで作ります。 これを、PCビューの時は表示させて、