CSS CSSのtransformで要素を移動・回転・拡大縮小・傾斜させる方法をわかりやすく解説
transformプロパティは、要素に対して変形（移動、拡大、回転、傾斜など）を適用するために使用されます。transformプロパティの値とその効果の一覧 translate(x, y) - 要素をx軸およびy軸方向に移動させます。 scale(x, y) - 要素を拡大縮小します。xは横方向、yは縦方向を指定します...
transform
CSS 
HTML&CSS 漢字を含む日本語全角文字を斜め斜体にする コピペで使えるHTML+CSS
ここでは文字の斜体化について説明します。em要素を適用することで斜体化されるわけですが、この方法では漢字や平仮名といった全角文字は斜めになりません。多くの日本語フォントが斜体を用意していないためです。そこで、全く別の方法によって、全角文字を斜体化します。font-synthesisを用いる方法もある。HTML全角文字の...
HTML&CSS スクロールするとdivが表示されるようにする コピペで使えるHTML+CSS+JavaScript
無効なテキストを指定するS要素の修正。一般的なブラウザでは文字の中央に打消し線が引かれるS要素。text-decorationを修正して線の種類や太さ、色を変更します。
HTML&CSS 画像を加工せずに切り抜き表示する コピペで使えるHTML+CSS
無効なテキストを指定するS要素の修正。一般的なブラウザでは文字の中央に打消し線が引かれるS要素。text-decorationを修正して線の種類や太さ、色を変更します。
HTML&CSS デザイン自由自在のdivドロップダウンメニューをCSSのみで実現 コピペで使えるHTML+CSS
リスト構造を用いず、divを用いることで、自在なデザインが可能なドロップダウンメニュー(プルダウンメニュー)を実装します。:hoverの重ね掛けで実現します。Chrome、Edge、Opera、Firefoxで確認済。実際に実装する際はスマートフォン向けに@mediaを使って低解像度向けにwidthを狭く指定するか、又...
HTML&CSS 三角形や不等号など文字の向きを変える コピペで使えるHTML+CSS
三角の▲、不等号の>といった記号や文字の表示の方向を変えます。見出しや、文の初めなどに配置して文章にアクセントを加えることができます。▲の向きを変える▲を右向きにする▲を右向きにしますと、▲となりますstyle属性で記述<span>▲を右向きにしますと、</span><span style="display: inli...
CSSの置き場所 画像を回転して表示する CSSコードの置き場所 transformの使い方
ここでは画像を回転表示させるコードを紹介します。画像を回転して表示するCSSのコード以下の画像を回転させます700px、467pxの画像です。このような状態に回転させます20度の回転です。切り抜き表示コードHTML表記<div class="rotate-image"> <img src="image.jpg"></d...
HTML&CSS 徐々に文章を透明化と、すべて読む コピペで使えるHTML+CSS AMP対応
新聞や雑誌のサイトなどでよく使われている記事が下に向かって徐々に半透明になり、[全てを読む]が表示されるページ。CSSのみで実現する方法を詳しく解説します。inputとlabel、checked、~セレクタを適切な順序と階層で使用します。
HTML&CSS プルダウンメニューをCSSのみで作る方法 コピペで使えるHTML+CSS
CSSのみでプルダウンメニュー、ドロップダウンメニューを実装します。li、ul要素、及び:hoverセレクタを使用して設計していきます。表示の切り替えにおいてはdisplay属性を使用します。各項目の見出しについて::beforeを用いて装飾します。
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()関数を用いて独自の引用符を実装します。