HTML
&CSS
Quick Reference
当サイトで紹介するプルダウンメニューやアコーディオンなどの本来JavaScriptを要する動きについて、全てCSSのみで実現しています。よって極一部の例外（対象となる解説ページにその旨を記載しています）を除きAMPサイトでも正常に表示されます。
HTML&CSSリファレンス分数をHTML上に表示する コピペで使えるHTML+CSS
分数を表示する flex-directionを用いる inline-flexとして指定し、flex-direction:columとすることで、子要素を縦方...
HTML&CSSリファレンスdivを水平方向に均等配置する コピペで使えるHTML+CSS
ここでは複数のdivを間隔をあけた上で水平方向に均等配置する方法を紹介します。 水平方向に均等配置 justify-contentを用いる div...
HTML&CSSリファレンス漢字を含む日本語全角文字を斜め斜体にする コピペで使えるHTML+CSS
ここでは文字の斜体化について説明します。em要素を適用することで斜体化されるわけですが、この方法では漢字や平仮名といった全角文字は斜めになりません。多くの日本語...
HTML&CSSリファレンスデザイン自由自在のdivドロップダウンメニューをCSSのみで実現 コピペで使えるHTML+CSS
リスト構造を用いず、divを用いることで、自在なデザインが可能なドロップダウンメニュー(プルダウンメニュー)を実装します。:hoverの重ね掛けで実現します。C...
HTML&CSSリファレンス画像にカーソルを合わせると少し拡大する方法 コピペで使えるHTML+CSS
画像、img要素にマウスカーソルを合わせると、画像が少し拡大して表示されます。カーソルが当たっていることを閲覧者に知らせることができる。absoluteを使用す...
HTML&CSSリファレンス画像にカーソルを合わせると徐々に白いぼやをかける方法 コピペで使えるHTML+CSS
画像、img要素にマウスカーソルを合わせると、徐々に白くなり、離すと徐々に元の画像に戻る。hoverの逆も含め、hoverの前後にアニメーションを付けます。 ...
HTML&CSSリファレンスプルダウンメニューをCSSのみで作る方法 コピペで使えるHTML+CSS
CSSのみでプルダウンメニュー、ドロップダウンメニューを実装します。li、ul要素、及び:hoverセレクタを使用して設計していきます。表示の切り替えにおいてはdisplay属性を使用します。各項目の見出しについて::beforeを用いて装飾します。
HTML&CSSリファレンス画像を徐々に表示するアニメーションをCSSで コピペで使えるHTML+CSS
画像、img要素を徐々に表示するアニメーション。opacityを使って透明度を操作します。 画像imgを徐々に表示 (透明度の操作) スタイルシート属性...
HTML&CSSリファレンス文字を徐々に表示するアニメーションをCSSで コピペで使えるHTML+CSS
文字を徐々に表示するアニメーション。トップページなどで大きな文字とともに用いると効果的です。 文字を徐々に表示 (透明度の操作) これからの未来へ向けて新し...
HTML&CSSリファレンス三角形や不等号など文字の向きを変える コピペで使えるHTML+CSS
三角の▲、不等号の>といった記号や文字の表示の方向を変えます。見出しや、文の初めなどに配置して文章にアクセントを加えることができます。 ▲の向きを変える...
HTML&CSSリファレンスoverflow ボックスのはみだし文字 コピペで使えるHTML+CSS
overflowを使ってdivボックスなどからはみ出す文字を処理します。どのようにしてスクロールバー表示とするか、はみ出し分を非表示にするかを具体例を挙げて解説します。
HTML&CSSリファレンスCSSのみでクリックによりボックスが開くアニメーション コピペで使えるHTML+CSS
JavaScriptを用いず、CSSのみでアコーディオンアニメーションdivボックスを実現します。ページを読み込んだ際に開いた状態とならないよう、ラジオボタンとチェックボックスの２つをフラグとして利用します。CSSのみで実現できる限界点の一つ。
HTML&CSSリファレンス@important規則 最優先適用 コピペで使えるHTML+CSS
@important規則 最優先に適用するCSS @important 目的 指定したスタイルシートについて最優先で適用する...
HTML&CSSリファレンス@page規則 印刷ページ コピペで使えるHTML+CSS
@page規則 印刷時のページ設定CSS @page 目的 印刷時に適用するスタイルです 使用 すべて ...
HTML&CSSリファレンス@keyframes規則 アニメーション コピペで使えるHTML+CSS
@keyframes規則 アニメーションの実現CSS @keyframes 目的 htmlについてアニメーションを実現します...
HTML&CSSリファレンス@import規則 外部スタイルシート読み込み コピペで使えるHTML+CSS
@import規則 外部スタイルシートの読み込み CSS @import 目的 外部スタイルシート(.css)を読み込む。...