transform

HTML&CSSリファレンス

漢字を含む日本語全角文字を斜め斜体にする コピペで使えるHTML+CSS

ここでは文字の斜体化について説明します。em要素を適用することで斜体化されるわけですが、この方法では漢字や平仮名といった全角文字は斜めになりません。多くの日本語...
HTML&CSSリファレンス

デザイン自由自在のdivドロップダウンメニューをCSSのみで実現 コピペで使えるHTML+CSS

リスト構造を用いず、divを用いることで、自在なデザインが可能なドロップダウンメニュー(プルダウンメニュー)を実装します。:hoverの重ね掛けで実現します。C...
2021.01.30
HTML&CSSリファレンス

プルダウンメニューをCSSのみで作る方法 コピペで使えるHTML+CSS

CSSのみでプルダウンメニュー、ドロップダウンメニューを実装します。li、ul要素、及び:hoverセレクタを使用して設計していきます。表示の切り替えにおいてはdisplay属性を使用します。各項目の見出しについて::beforeを用いて装飾します。
2021.01.29
HTML&CSSリファレンス

三角形や不等号、記号の向きを変える コピペで使えるHTML+CSS

三角の▲、不等号の>といった記号の表示向きを変えます。見出しや、文の初めなどに配置して文章にアクセントを加えます。 ▲の向きを変える ▲を右向きにする...
2021.01.26
HTML&CSSリファレンス

徐々に文章を透明化と、すべて読む コピペで使えるHTML+CSS

新聞や雑誌のサイトなどでよく使われている記事が下に向かって徐々に半透明になり、[全てを読む]が表示されるページ。CSSのみで実現する方法を詳しく解説します。inputとlabel、checked、~セレクタを適切な順序と階層で使用します。
2021.01.16
HTML&CSSリファレンス

divを使ったボックスのデザイン コピペで使えるHTML+CSS

divを使って様々なデザインのコンテンツボックスをCSSで実現します。角の丸いボックス、見出しだけが角丸のボックス。少し斜めにした見出し。入り込む見出し、アイコンが追加された見出し等、見やすく洗練されたデザインボックスを紹介します。
2021.01.17
HTML&CSSリファレンス

transform 要素を変形するコピペで使えるHTML+CSS

要素を変形させるtransformについて、拡大縮小、移動、回転、傾斜など具体例を挙げて解説します。回転するrotateは::beforeセレクターと組み合わせて見出しのアイコンに使用するなどの用途もあり要注意事項です。
2021.01.25
HTML&CSSリファレンス

blockquote q 引用符をデザイン コピペで使えるHTML+CSS

引用する際に用いるblockquote要素とq要素について、CSSの::beforeセレクターと::afterセレクター及びtransformプロパティのrotate()関数を用いて独自の引用符を実装します。
2021.01.16
タイトルとURLをコピーしました