HTML&CSSリファレンス デザイン自由自在のdivドロップダウンメニューをCSSのみで実現 コピペで使えるHTML+CSS
リスト構造を用いず、divを用いることで、自在なデザインが可能なドロップダウンメニュー(プルダウンメニュー)を実装します。:hoverの重ね掛けで実現します。Chrome、Edge、Opera、Firefoxで確認済。実際に実装する際はスマートフォン向けに@mediaを使って低解像度向けにwidthを狭く指定するか、又...
rotate
HTML&CSSリファレンス HTML&CSSリファレンス transform 要素を変形するコピペで使えるHTML+CSS
要素を変形させるtransformについて、拡大縮小、移動、回転、傾斜など具体例を挙げて解説します。回転するrotateは::beforeセレクターと組み合わせて見出しのアイコンに使用するなどの用途もあり要注意事項です。
HTML&CSSリファレンス divを使ったボックスのデザイン コピペで使えるHTML+CSS
divを使って様々なデザインのコンテンツボックスをCSSで実現します。角の丸いボックス、見出しだけが角丸のボックス。少し斜めにした見出し。入り込む見出し、アイコンが追加された見出し等、見やすく洗練されたデザインボックスを紹介します。
HTML&CSSリファレンス blockquote q 引用符をデザイン コピペで使えるHTML+CSS
引用する際に用いるblockquote要素とq要素について、CSSの::beforeセレクターと::afterセレクター及びtransformプロパティのrotate()関数を用いて独自の引用符を実装します。