HTML
&CSS
Quick Reference
当サイトで紹介するプルダウンメニューやアコーディオンなどの本来JavaScriptを要する動きについて、全てCSSのみで実現しています。よって極一部の例外（対象となる解説ページにその旨を記載しています）を除きAMPサイトでも正常に表示されます。
目次
CSS box-shadowプロパティ CSS+HTML完全ガイド 使い方について徹底解説
box-shadowプロパティは、要素に影を付けるために使用します。影のオフセット、ぼかしの強さ、色、広がりなどを細かく設定でき、デザインに奥行きや立体感を加えることができます。 box-shadowプロパティの値とその効果 オフセットX (px): 水平方向の影の位置を指定します。 オフセットY (px): 垂直方向...
CSS borderプロパティ CSS+HTML完全ガイド 使い方について徹底解説
CSSのborderプロパティは、要素の周囲に枠線を追加するために使用されます。このプロパティを使って、枠線の太さ、スタイル、色を自由に設定できます。以下に、主な値とその効果をリストで説明し、詳細な表示例を紹介します。 borderプロパティの値とその効果の一覧 border: 3px solid #000; - 太さ...
CSS border-imageプロパティ CSS+HTML完全ガイド 使い方について徹底解説
CSSのborder-imageプロパティは、要素の枠線に画像を使用することができるプロパティです。このプロパティを使用することで、単色の枠線だけでなく、画像を利用したデザイン性の高い枠線を作ることができます。以下に、主要な値とその効果をリストで説明し、詳細な表示例を紹介します。 border-imageプロパティの値...
CSS border-image-widthプロパティ CSS+HTML完全ガイド 使い方について徹底解説
CSSのborder-image-widthプロパティは、画像を使用して枠線を作成する際に、枠線の太さを指定します。このプロパティを使用して、枠線の画像部分がどれだけの幅を取るかを制御できます。 border-image-widthプロパティの値とその効果の一覧 border-image-width: 10px; - ...
CSS background-sizeプロパティ CSS+HTML完全ガイド 使い方について徹底解説
background-sizeプロパティは、背景画像のサイズを指定するためのプロパティです。背景画像を要素に対してどのように拡大・縮小するかを制御できます。 background-sizeプロパティの値とその効果 auto: 画像の実際のサイズが使用されます（デフォルト値）。 cover: 要素を覆うように画像を拡大・...
CSS background-repeatプロパティ CSS+HTML完全ガイド 使い方について徹底解説
background-repeatプロパティは、背景画像を繰り返して表示するかどうか、またどの方向に繰り返すかを制御するためのプロパティです。背景画像が要素のサイズより小さい場合に使用されます。 background-repeatプロパティの値とその効果 repeat: 背景画像を水平方向および垂直方向に繰り返して表示...
CSS background-originプロパティ CSS+HTML完全ガイド 使い方を徹底解説
background-originプロパティは、背景画像の描画が開始される位置を指定します。背景画像がボーダーから描かれるのか、パディング内から描かれるのか、コンテンツの内側から描かれるのかを制御します。このプロパティを使用することで、要素の内部構造に応じて背景画像の位置を細かく調整することが可能です。 backgro...
CSS background-clipプロパティ CSS+HTML完全ガイド 使い方から効かない理由まで徹底解説
background-clipプロパティは、背景画像や背景色の描画範囲を指定するために使用されます。このプロパティを使うことで、背景がどの領域に表示されるかをコントロールできます。 background-clipの値とその効果の一覧 border-box: 背景はボーダー領域まで表示されます。 padding-box:...
CSS appearanceプロパティ CSS+HTML完全ガイド 使い方を徹底解説
CSSのappearanceプロパティは、要素のデフォルトのユーザーエージェントスタイル（ブラウザの標準表示）を変更するために使用されます。このプロパティを使うことで、例えばフォーム要素などの見た目をカスタマイズすることができます。 appearanceプロパティの値とその効果 none: 要素のデフォルトの外観を取り...
CSS animation-play-stateプロパティ CSS+HTML完全ガイド 使い方を徹底解説
animation-play-stateプロパティは、アニメーションの再生を一時停止または再開するために使用されます。通常は再生される設定ですが、一時停止することも可能です。これを使うことで、ユーザーの操作に応じてアニメーションの動作を制御することができます。 animation-play-stateプロパティの値とそ...
CSS animation-nameプロパティ CSS+HTML完全ガイド 使い方について徹底解説
animation-nameプロパティは、適用するアニメーションを指定するために使用されます。@keyframesで定義されたアニメーションを関連付けることで、要素に動きを追加することができます。アニメーションの名前を指定しない場合や無効にしたい場合は、noneを使用します。 animation-nameプロパティの値...
CSS animationプロパティ CSS+HTML完全ガイド 使い方を徹底解説
CSSのanimationプロパティは、要素にアニメーション効果を与えるためのプロパティで、複数のプロパティを組み合わせてアニメーションの動きや速度、繰り返し回数などを制御することができます。以下では、animationプロパティの詳細とその使い方について説明し、表示例を示します。 animation関連プロパティとそ...
CSS ~セレクタ CSS+HTML完全ガイド 使い方から効かない理由まで徹底解説
~ セレクタは「全般兄弟結合子」と呼ばれ、同じ親要素内で指定した要素の後に続くすべての兄弟要素に対してスタイルを適用します。つまり、ターゲットとする要素の後に存在するすべての兄弟要素が対象になります。 CSS: ~ セレクタが効かない時の原因と対策 要素が兄弟要素ではない ~ セレクタは、指定した要素とターゲットが同じ...
CSS >セレクタ CSS+HTML完全ガイド 使い方から効かない理由まで徹底解説
> セレクタは「子要素セレクタ」とも呼ばれ、指定した親要素の直下にある子要素に対してスタイルを適用します。このセレクタは、指定された親要素に直接含まれる子要素だけをターゲットにし、孫要素には影響を与えません。 CSS: > セレクタが効かない時の原因と対策 要素が直接の子要素ではない > セレクタは、指定された要素の直...
CSS +セレクタ CSS+HTML完全ガイド 使い方から効かない理由まで徹底解説
+ セレクタは「隣接兄弟結合子」と呼ばれ、指定した要素の直後に続く兄弟要素(同じ深さ)に対してスタイルを適用します。これは、2つの要素が同じ親要素内にあり、指定した要素の直後に続いている場合にのみ機能します。 CSS: + セレクタが効かない時の原因と対策 要素が隣接していない + セレクタは、ターゲットとする要素が指...
CSS *セレクタ CSS+HTML完全ガイド 使い方から効かない理由まで徹底解説
* セレクタは、ページ内のすべての要素を選択するユニバーサルセレクタです。特定の要素を指定せず、すべての要素に一括でスタイルを適用したい場合に使用されます。例えば、ページ内の全要素に枠線や背景色を一度に適用したい場合に便利です。 CSS: * セレクタが効かない時の原因と対策 セレクタの特異性が低い * セレクタは特異...