CSS（Cascading Style Sheets）は、ウェブページやウェブアプリケーションの見栄えやレイアウトを設定するためのスタイルシート言語です。HTMLが文書の構造を定義するのに対し、CSSはその文書をどのように表示するかを指定します。

CSSの役割と利点

CSSの主な役割は、ウェブページの外観を装飾することです。例えば、文字のスタイルや色、背景のデザイン、レイアウトの配置、要素の大きさなどを指定することができます。

HTMLが文書の構造を定義し、情報の意味を伝えるのに対し、CSSはその情報を視覚的に理解しやすくします。これにより、ユーザー体験を向上させ、読みやすく魅力的なウェブページを作成することが可能です。

CSSの利点には以下のようなものがあります。

• 一元管理: スタイルを別々のCSSファイルにまとめて記述し、複数のページで再利用することができます。
• 柔軟性: 外部スタイルシートやインラインスタイルを使用することで、異なるページやメディアに対して異なるスタイルを簡単に適用できます。
• メンテナンス性: スタイルが一箇所に集約されているため、修正や変更が容易です。
• レスポンシブ対応: メディアクエリを使用して、デバイスの種類や画面サイズに応じたスタイルを設定できます。

CSSの基本構造

CSSは基本的に「プロパティ（Property）と値（Value）」のペアで構成されます。プロパティは要素のスタイルを指定し、値はそのスタイルの具体的な設定です。

例えば、以下のようにして段落の文字色を赤に指定することができます。

p {
    color: red;
}
                

このCSSコードは、pセレクタに対してcolorプロパティを赤の値（red）で指定しています。これにより、すべての段落（<p>要素）の文字色が赤くなります。

CSSはその名前の通り「カスケーディング」（階層化）されたスタイルシートであり、スタイルの適用順序や優先度が定義されています。このため、より具体的なセレクタやインラインスタイルが優先されることがあります。

CSSの適用方法

CSSをHTMLに適用する方法にはいくつかの方法があります。

• 外部スタイルシート: 別々のCSSファイルを作成し、HTML文書でそれをリンクします。
• 内部スタイルシート: HTML文書のセクション内にスタイルを埋め込みます。
• インラインスタイル: HTML要素のstyle属性を使用して直接スタイルを適用します。

これらの方法を組み合わせることで、より柔軟にスタイルを管理することができます。例えば、共通のスタイルは外部スタイルシートで管理し、特定のページや要素に対するスタイルはインラインスタイルで直接指定することができます。

まとめ

CSSはウェブデザインや開発において非常に重要な役割を果たしており、HTMLと組み合わせて魅力的で使いやすいウェブページを作成するための基本的な技術です。次の記事ではCSSの文法やセレクタについて詳しく説明します。

A

accent-color – ユーザーインターフェースコントロールのアクセントカラーを指定します。

align-content – フレキシブルコンテナ内の行の配置を指定します。

.container {
    align-content: center;
}

align-items – フレキシブルコンテナ内のアイテムの配置を指定します。

.container {
    align-items: flex-start;
}

align-self – 選択したアイテムの配置をフレキシブルコンテナ内で指定します。

.item {
    align-self: baseline;
}

all – unicode-bidiとdirectionを除くすべてのプロパティをリセットします。

* {
    all: unset;
}

animation – 全てのanimation-*プロパティのショートハンドです。

.box {
    animation: slidein 3s ease-in-out 1s infinite alternate;
}

animation-delay – アニメーションの開始を遅らせる時間を指定します。

.box {
    animation-delay: 2s;
}

animation-direction – アニメーションの再生方向を指定します（前進、後退、交互に）。

.box {
    animation-direction: alternate;
}

animation-duration – アニメーションが1サイクル完了するのにかかる時間を指定します。

.box {
    animation-duration: 5s;
}

animation-fill-mode – アニメーションが再生されていないときの要素のスタイルを指定します（開始前、終了後、またはその両方）。

.box {
    animation-fill-mode: backwards;
}

animation-iteration-count – アニメーションが再生される回数を指定します。

.box {
    animation-iteration-count: infinite;
}

animation-name – @keyframesアニメーションの名前を指定します。

.box {
    animation-name: slidein;
}

animation-play-state – アニメーションが実行中か一時停止中かを指定します。

.box {
    animation-play-state: paused;
}

animation-timing-function – アニメーションの速度曲線を指定します。

.box {
    animation-timing-function: ease-in-out;
}

aspect-ratio – 要素の優先アスペクト比を指定します。

.box {
    aspect-ratio: 16 / 9;
}

B

backdrop-filter – 要素の背景にフィルター効果を追加します。

.element {
    backdrop-filter: blur(10px);
}

backface-visibility – 要素の裏面の表示/非表示を制御します。

.element {
    backface-visibility: hidden;
}

background – 要素の背景を設定します（ショートハンド）。

.element {
    background: #ffffff url('background.png') no-repeat center center;
}

background-attachment – 背景画像のスクロール方法を指定します。

.element {
    background-attachment: fixed;
}

background-blend-mode – 背景画像と要素の背景のブレンドモードを指定します。

.element {
    background-blend-mode: multiply;
}

background-clip – 背景の描画範囲を制限します。

.element {
    background-clip: padding-box;
}

background-color – 要素の背景色を設定します。

.element {
    background-color: #f0f0f0;
}

background-image – 要素の背景に画像を設定します。

.element {
    background-image: url('image.jpg');
}

background-origin – 背景の描画を開始する位置を指定します。

.element {
    background-origin: content-box;
}

background-position – 背景画像の位置を指定します。

.element {
    background-position: top right;
}

background-repeat – 背景画像の繰り返し方法を指定します。

.element {
    background-repeat: no-repeat;
}

background-size – 背景画像のサイズを指定します。

.element {
    background-size: cover;
}

block-size – ブロックレベル要素の高さまたは幅を指定します。

.element {
    block-size: 200px;
}

border – 要素の境界線を設定します（ショートハンド）。

.element {
    border: 1px solid #cccccc;
}

C

caret-color – 入力フィールド内のカーソルの色を指定します。

input {
    caret-color: red;
}

clear – 要素の周囲で浮動をクリアする方法を指定します。

.element {
    clear: both;
}

clip-path – 要素の描画範囲をクリップするための形状を指定します。

.element {
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 80%);
}

color – 要素のテキストの色を指定します。

.element {
    color: #333333;
}

column-count – 複数の列で要素のコンテンツを表示する際の列数を指定します。

.element {
    column-count: 3;
}

column-gap – 複数の列で要素のコンテンツを表示する際の列間の幅を指定します。

.element {
    column-gap: 20px;
}

content – 伪要素のコンテンツを設定します。

.element::before {
    content: "★";
}

counter-increment – カウンターの値を増加させます。

.element {
    counter-increment: section;
}

counter-reset – カウンターの値をリセットします。

.element {
    counter-reset: section;
}

cursor – マウスポインターが要素上に置かれた際のカーソルの形状を指定します。

.element {
    cursor: pointer;
}

custom-properties – カスタムプロパティを定義します。

:root {
    --main-color: #336699;
}
.element {
    color: var(--main-color);
}

D

display – 要素の表示方法を指定します。

.element {
    display: flex;
    display: grid;
}

filter – 要素に対してフィルタ効果を適用します。

.element {
    filter: grayscale(50%);
}

flex – 要素の伸縮性を指定します。

.container {
    display: flex;
}
.item {
    flex: 1 1 auto;
}

flex-basis – flexアイテムの初期サイズを指定します。

.item {
    flex-basis: 200px;
}

flex-direction – flexコンテナ内のアイテムの配置方向を指定します。

.container {
    display: flex;
    flex-direction: row | row-reverse | column | column-reverse;
}

flex-flow – flex-directionとflex-wrapのショートハンドです。

.container {
    display: flex;
    flex-flow: row wrap;
}

flex-grow – flexアイテムが余白をどの程度取得するかを指定します。

.item {
    flex-grow: 1;
}

flex-shrink – flexアイテムが必要以上に縮小されるかどうかを指定します。

.item {
    flex-shrink: 0;
}

flex-wrap – flexアイテムの折り返し方法を指定します。

.container {
    display: flex;
    flex-wrap: nowrap | wrap | wrap-reverse;
}

float – 要素の浮動を指定します。

.element {
    float: left;
}

E

empty-cells – 空のセルの表示に関する規則を指定します。

table {
    empty-cells: show;
}

filter – 要素に対してフィルタ効果を適用します。

.element {
    filter: grayscale(50%);
}

flex – 要素の伸縮性を指定します。

.container {
    display: flex;
}
.item {
    flex: 1 1 auto;
}

flex-basis – flexアイテムの初期サイズを指定します。

.item {
    flex-basis: 200px;
}

flex-direction – flexコンテナ内のアイテムの配置方向を指定します。

.container {
    display: flex;
    flex-direction: row | row-reverse | column | column-reverse;
}

flex-flow – flex-directionとflex-wrapのショートハンドです。

.container {
    display: flex;
    flex-flow: row wrap;
}

flex-grow – flexアイテムが余白をどの程度取得するかを指定します。

.item {
    flex-grow: 1;
}

flex-shrink – flexアイテムが必要以上に縮小されるかどうかを指定します。

.item {
    flex-shrink: 0;
}

flex-wrap – flexアイテムの折り返し方法を指定します。

.container {
    display: flex;
    flex-wrap: nowrap | wrap | wrap-reverse;
}

F

float – 要素の浮動を指定します。

.element {
    float: left | right | none;
}

font – フォントの関連するプロパティをまとめて指定します。

.element {
    font: italic small-caps bold 16px/3 cursive;
}

font-family – フォントのファミリー名を指定します。

.element {
    font-family: Arial, sans-serif;
}

font-size – フォントのサイズを指定します。

.element {
    font-size: 1.2em;
}

font-style – フォントのスタイルを指定します。

.element {
    font-style: italic;
}

font-variant – フォントのバリアントを指定します。

.element {
    font-variant: small-caps;
}

font-weight – フォントのウェイト（太さ）を指定します。

.element {
    font-weight: bold;
}

G

grid – グリッドレイアウトの関連するプロパティをまとめて指定します。

.container {
    display: grid;
    grid-template-columns: 1fr 2fr 1fr;
    grid-template-rows: auto;
    gap: 10px;
}

grid-area – グリッドアイテムの位置とスパンを指定します。

.item {
    grid-area: 2 / 1 / 3 / 3;
}

grid-auto-columns – 自動生成されるグリッド列のサイズを指定します。

.container {
    grid-auto-columns: 100px;
}

grid-auto-rows – 自動生成されるグリッド行のサイズを指定します。

.container {
    grid-auto-rows: 50px;
}

grid-column – グリッドアイテムの開始と終了の列を指定します。

.item {
    grid-column: 1 / span 2;
}

grid-row – グリッドアイテムの開始と終了の行を指定します。

.item {
    grid-row: 2 / 4;
}

grid-template – グリッドの行と列の定義を指定します。

.container {
    display: grid;
    grid-template: 100px / repeat(3, 1fr);
}

H

hanging-punctuation – 行ボックスの外側に句読点を配置するかどうかを指定します。

.text {
    hanging-punctuation: first;
}

height – 要素の高さを設定します。

.box {
    height: 200px;
}

hyphens – テキストのレイアウトを改善するために単語を分割する方法を指定します。

.text {
    hyphens: auto;
}

hypenate-character – ハイフネーションの前に置かれる文字を設定します。

.text {
    hyphenate-character: "\2010";
}

I

initial-letter – 要素の最初の文字を大きく表示します。

.text {
    initial-letter: 3;
}

inherit – 要素が親要素からプロパティの値を継承することを指定します。

.child {
    inherit: inherit;
}

inline-size – 要素のブロック軸のサイズを指定します。

.box {
    inline-size: 300px;
}

isolation – 要素のレイヤー化を制御し、バックグラウンドや境界のブレンディングを設定します。

.element {
    isolation: isolate;
}

J

justify-content – コンテナ内のアイテムの水平方向の配置方法を指定します。

.container {
    display: flex;
    justify-content: space-between;
}

justify-items – グリッドコンテナ内のアイテムの水平方向の配置方法を指定します。

.container {
    display: grid;
    justify-items: center;
}

justify-self – グリッドアイテムの水平方向の配置方法を指定します。

.item {
    justify-self: end;
}

K

@keyframesは、アニメーションのコードを指定します。

/* アニメーションの定義 */
@keyframes example {
    from {background-color: red;}
    to {background-color: yellow;}
}

/* 要素にアニメーションを適用 */
div {
    width: 100px;
    height: 100px;
    background-color: red;
    animation-name: example;
    animation-duration: 4s;
}

@keyframesルールは、アニメーションの開始（from）と終了（to）のスタイルを定義します。この例では、要素が赤から黄色に変化するアニメーションが4秒間繰り返されます。

L

left – 要素の左位置を指定します。

.element {
    position: absolute;
    left: 50px;
}

letter-spacing – テキスト内の文字間のスペースを増減させます。

.text {
    letter-spacing: 2px;
}

line-break – 行の改行方法を指定します。

.text {
    line-break: strict;
}

line-height – 行の高さを設定します。

.text {
    line-height: 1.5;
}

list-style – リストのすべてのプロパティを1つの宣言で設定します。

ul {
    list-style: circle inside url('bullet.png');
}

list-style-image – リストアイテムのマーカーとして画像を指定します。

ul {
    list-style-image: url('marker.png');
}

list-style-position – リストアイテムのマーカーの位置を指定します。

ul {
    list-style-position: inside;
}

list-style-type – リストアイテムのマーカーのタイプを指定します。

ul {
    list-style-type: square;
}

M

margin – 要素のマージンを一括で指定します。

.element {
    margin: 10px;
}

margin-block – ブロック方向のマージンを指定します。

.element {
    margin-block: 20px;
}

margin-block-end – ブロック方向の末端のマージンを指定します。

.element {
    margin-block-end: 10px;
}

margin-block-start – ブロック方向の始端のマージンを指定します。

.element {
    margin-block-start: 5px;
}

margin-bottom – 要素の下部のマージンを指定します。

.element {
    margin-bottom: 15px;
}

margin-inline – インライン方向のマージンを指定します。

.element {
    margin-inline: 20px;
}

margin-inline-end – インライン方向の末端のマージンを指定します。

.element {
    margin-inline-end: 10px;
}

margin-inline-start – インライン方向の始端のマージンを指定します。

.element {
    margin-inline-start: 5px;
}

margin-left – 要素の左側のマージンを指定します。

.element {
    margin-left: 15px;
}

margin-right – 要素の右側のマージンを指定します。

.element {
    margin-right: 15px;
}

margin-top – 要素の上部のマージンを指定します。

.element {
    margin-top: 15px;
}

mask – 要素の一部を画像でマスクまたはクリッピングして非表示にします。

.element {
    mask: url('mask-image.svg');
}

mask-clip – マスク領域を指定します。

.element {
    mask-clip: padding-box;
}

mask-composite – 現在のマスクレイヤーに対して下のマスクレイヤーとのコンポジット操作を表します。

.element {
    mask-composite: add;
}

mask-image – 要素のマスクレイヤーとして使用する画像を指定します。

.element {
    mask-image: url('mask-image.png');
}

mask-mode – マスクレイヤー画像を輝度マスクまたはアルファマスクとして扱うかどうかを指定します。

.element {
    mask-mode: luminance;
}

mask-origin – マスクレイヤー画像の原点位置（マスクの位置領域）を指定します。

.element {
    mask-origin: content-box;
}

mask-position – マスクレイヤー画像の開始位置を指定します（マスクの位置領域に対して相対的）。

.element {
    mask-position: center;
}

mask-repeat – マスクレイヤー画像の繰り返し方法を指定します。

.element {
    mask-repeat: no-repeat;
}

mask-size – マスクレイヤー画像のサイズを指定します。

.element {
    mask-size: cover;
}

mask-type – SVGの要素を輝度マスクまたはアルファマスクとして扱うかどうかを指定します。

.element {
    mask-type: alpha;
}

max-height – 要素の最大の高さを指定します。

.element {
    max-height: 300px;
}

max-width – 要素の最大の幅を指定します。

.element {
    max-width: 100%;
}

@media – 異なるメディアタイプ/デバイス/サイズ用のスタイルルールを設定します。

@media screen and (max-width: 600px) {
    .element {
        display: none;
    }
}

max-block-size – ブロック方向の要素の最大サイズを指定します。

.element {
    max-block-size: 400px;
}

max-inline-size – インライン方向の要素の最大サイズを指定します。

.element {
    max-inline-size: 100%;
}

min-block-size – ブロック方向の要素の最小サイズを指定します。

.element {
    min-block-size: 100px;
}

min-inline-size – インライン方向の要素の最小サイズを指定します。

.element {
    min-inline-size: 50%;
}

min-height – 要素の最小の高さを指定します。

.element {
    min-height: 200px;
}

min-width – 要素の最小の幅を指定します。

.element {
    min-width: 320px;
}

mix-blend-mode – 要素のコンテンツが直接親の背景とどのように混合するかを指定します。

.element {
    mix-blend-mode: multiply;
}

O

object-fit – 置換要素の内容が、使用される高さと幅に合わせてボックスにどのように適合するかを指定します。

.element {
    object-fit: cover;
}

object-position – 置換要素をそのボックス内でどの位置に配置するかを指定します。

.element {
    object-position: center;
}

offset – 要素をパスに沿ってアニメートする方法を指定するショートハンドです。

.element {
    offset: path('M 0 0 L 100 100');
}

offset-anchor – 要素のパス上で固定されるポイントを指定します。

.element {
    offset-anchor: center;
}

offset-distance – アニメートされる要素が配置されるパス上の位置を指定します。

.element {
    offset-distance: 50%;
}

offset-path – 要素がアニメートされるパスを指定します。

.element {
    offset-path: path('M 0 0 L 100 100');
}

offset-rotate – 要素がパスに沿ってアニメートされる際の回転を指定します。

.element {
    offset-rotate: auto;
}

opacity – 要素の不透明度レベルを設定します。

.element {
    opacity: 0.8;
}

order – 柔軟なアイテムの順序を、他のアイテムに対して相対的に設定します。

.element {
    order: 2;
}

orphans – ページやカラムの底部に残す必要がある最小行数を設定します。

.element {
    orphans: 2;
}

outline – アウトラインの幅、スタイル、色を一括で指定するショートハンドです。

.element {
    outline: 1px solid #000;
}

outline-color – アウトラインの色を指定します。

.element {
    outline-color: blue;
}

outline-offset – アウトラインのオフセットを指定し、境界線の外側に描画します。

.element {
    outline-offset: 5px;
}

outline-style – アウトラインのスタイルを指定します。

.element {
    outline-style: dotted;
}

outline-width – アウトラインの幅を指定します。

.element {
    outline-width: 2px;
}

overflow – コンテンツが要素のボックスを超えた場合の挙動を指定します。

.element {
    overflow: auto;
}

overflow-anchor – スクロール可能なコンテナ内の表示可能領域に新しいコンテンツがロードされた際に、内容を下押しするかどうかを指定します。

.element {
    overflow-anchor: auto;
}

overflow-wrap – 長い単語がコンテナを超えた場合に、ブラウザが改行できるかどうかを指定します。

.element {
    overflow-wrap: break-word;
}

overflow-x – コンテンツが要素のコンテンツ領域の左/右端を超えるかどうかを指定します。

.element {
    overflow-x: hidden;
}

overflow-y – コンテンツが要素のコンテンツ領域の上部/下部端を超えるかどうかを指定します。

.element {
    overflow-y: scroll;
}

overscroll-behavior – x-およびy-方向でスクロールチェーンまたはオーバースクロールアフィンダンスを持つかどうかを指定します。

.element {
    overscroll-behavior: auto;
}

overscroll-behavior-block – ブロック方向でスクロールチェーンまたはオーバースクロールアフィンダンスを持つかどうかを指定します。

.element {
    overscroll-behavior-block: contain;
}

overscroll-behavior-inline – インライン方向でスクロールチェーンまたはオーバースクロールアフィンダンスを持つかどうかを指定します。

.element {
    overscroll-behavior-inline: auto;
}

overscroll-behavior-x – x-方向でスクロールチェーンまたはオーバースクロールアフィンダンスを持つかどうかを指定します。

.element {
    overscroll-behavior-x: none;
}

overscroll-behavior-y – y-方向でスクロールチェーンまたはオーバースクロールアフィンダンスを持つかどうかを指定します。

.element {
    overscroll-behavior-y: auto;
}

P

padding – 全てのpadding-*プロパティのショートハンドです。

.element {
    padding: 10px;
}

padding-block – ブロック方向のパディングを指定します。

.element {
    padding-block: 20px;
}

padding-block-end – ブロック方向の末尾のパディングを指定します。

.element {
    padding-block-end: 10px;
}

padding-block-start – ブロック方向の開始のパディングを指定します。

.element {
    padding-block-start: 15px;
}

padding-bottom – 要素の下部のパディングを指定します。

.element {
    padding-bottom: 15px;
}

padding-inline – インライン方向のパディングを指定します。

.element {
    padding-inline: 20px;
}

padding-inline-end – インライン方向の末尾のパディングを指定します。

.element {
    padding-inline-end: 10px;
}

padding-inline-start – インライン方向の開始のパディングを指定します。

.element {
    padding-inline-start: 15px;
}

padding-left – 要素の左側のパディングを指定します。

.element {
    padding-left: 10px;
}

padding-right – 要素の右側のパディングを指定します。

.element {
    padding-right: 10px;
}

padding-top – 要素の上部のパディングを指定します。

.element {
    padding-top: 15px;
}

page-break-after – 要素の後ろでページブレークを挿入するかどうかを指定します。

.element {
    page-break-after: always;
}

page-break-before – 要素の前でページブレークを挿入するかどうかを指定します。

.element {
    page-break-before: avoid;
}

page-break-inside – 要素内でページブレークを挿入するかどうかを指定します。

.element {
    page-break-inside: auto;
}

paint-order – SVG要素やテキストの描画順序を指定します。

.element {
    paint-order: stroke fill markers;
}

perspective – 3D位置合わせされた要素に透視効果を与えます。

.element {
    perspective: 1000px;
}

perspective-origin – ユーザーが3D位置合わせされた要素を見ている位置を定義します。

.element {
    perspective-origin: center;
}

place-content – フレックスボックスやグリッドレイアウトのためのalign-contentおよびjustify-contentプロパティの値を指定します。

.element {
    place-content: center space-between;
}

place-items – グリッドレイアウトのためのalign-itemsおよびjustify-itemsプロパティの値を指定します。

.element {
    place-items: center stretch;
}

place-self – グリッドレイアウトのためのalign-selfおよびjustify-selfプロパティの値を指定します。

.element {
    place-self: end start;
}

pointer-events – 要素がポインタイベントに反応するかどうかを定義します。

.element {
    pointer-events: auto;
}

Q

quotes – 埋め込まれた引用の引用符のタイプを設定します。

blockquote {
    quotes: "「" "」" "『" "』";
}

R

resize – ユーザーが要素をリサイズできるかどうか（および方法）を定義します。

.resizable {
    resize: both;
}

right – 要素の右側の位置を指定します。

.positioned-element {
    position: absolute;
    right: 10px;
}

rotate – 要素の回転を指定します。

.rotated-element {
    transform: rotate(45deg);
}

row-gap – グリッド行間の間隔を指定します。

.grid-container {
    display: grid;
    grid-row-gap: 20px;
}

S

scale – 要素のサイズを拡大または縮小して指定します。

.scaled-element {
    transform: scale(1.5);
}

scroll-behavior – スクロール可能なボックス内でスクロール位置を滑らかにアニメーション化するかどうかを指定します。

html {
    scroll-behavior: smooth;
}

scroll-margin – スナップ位置とコンテナ間のマージンを指定します。

.snap-container {
    scroll-margin: 20px;
}

scroll-margin-block – ブロック方向でスナップ位置とコンテナ間のマージンを指定します。

.snap-container {
    scroll-margin-block: 10px;
}

scroll-margin-block-end – ブロック方向のスナップ位置とコンテナ間のエンドマージンを指定します。

.snap-container {
    scroll-margin-block-end: 5px;
}

scroll-margin-block-start – ブロック方向のスナップ位置とコンテナ間のスタートマージンを指定します。

.snap-container {
    scroll-margin-block-start: 5px;
}

scroll-margin-bottom – 下部のスナップ位置とコンテナ間のマージンを指定します。

.snap-container {
    scroll-margin-bottom: 10px;
}

scroll-margin-inline – インライン方向でスナップ位置とコンテナ間のマージンを指定します。

.snap-container {
    scroll-margin-inline: 10px;
}

scroll-margin-inline-end – インライン方向のスナップ位置とコンテナ間のエンドマージンを指定します。

.snap-container {
    scroll-margin-inline-end: 5px;
}

scroll-margin-inline-start – インライン方向のスナップ位置とコンテナ間のスタートマージンを指定します。

.snap-container {
    scroll-margin-inline-start: 5px;
}

scroll-margin-left – 左側のスナップ位置とコンテナ間のマージンを指定します。

.snap-container {
    scroll-margin-left: 10px;
}

scroll-margin-right – 右側のスナップ位置とコンテナ間のマージンを指定します。

.snap-container {
    scroll-margin-right: 10px;
}

scroll-margin-top – 上部のスナップ位置とコンテナ間のマージンを指定します。

.snap-container {
    scroll-margin-top: 10px;
}

scroll-padding – コンテナから子要素のスナップ位置までの距離を指定します。

.snap-container {
    scroll-padding: 20px;
}

scroll-padding-block – ブロック方向でコンテナから子要素のスナップ位置までの距離を指定します。

.snap-container {
    scroll-padding-block: 10px;
}

scroll-padding-block-end – ブロック方向でコンテナのエンドから子要素のスナップ位置までの距離を指定します。

.snap-container {
    scroll-padding-block-end: 5px;
}

scroll-padding-block-start – ブロック方向でコンテナのスタートから子要素のスナップ位置までの距離を指定します。

.snap-container {
    scroll-padding-block-start: 5px;
}

scroll-padding-bottom – コンテナの下部から子要素のスナップ位置までの距離を指定します。

.snap-container {
    scroll-padding-bottom: 10px;
}

scroll-padding-inline – インライン方向でコンテナから子要素のスナップ位置までの距離を指定します。

.snap-container {
    scroll-padding-inline: 10px;
}

scroll-padding-inline-end – インライン方向でコンテナのエンドから子要素のスナップ位置までの距離を指定します。

.snap-container {
    scroll-padding-inline-end: 5px;
}

scroll-padding-inline-start – インライン方向でコンテナのスタートから子要素のスナップ位置までの距離を指定します。

.snap-container {
    scroll-padding-inline-start: 5px;
}

scroll-padding-left – コンテナの左側から子要素のスナップ位置までの距離を指定します。

.snap-container {
    scroll-padding-left: 10px;
}

scroll-padding-right – コンテナの右側から子要素のスナップ位置までの距離を指定します。

.snap-container {
    scroll-padding-right: 10px;
}

scroll-padding-top – コンテナの上部から子要素のスナップ位置までの距離を指定します。

.snap-container {
    scroll-padding-top: 10px;
}

scroll-snap-align – ユーザーがスクロールを停止したときに要素を配置する方法を指定します。

.snap-element {
    scroll-snap-align: start;
}

scroll-snap-stop – トラックパッドやタッチスクリーンでの高速なスワイプ後のスクロール動作を指定します。

.scroll-container {
    scroll-snap-stop: always;
}

scroll-snap-type – スクロール時のスナップ動作を指定します。

.snap-container {
    scroll-snap-type: mandatory;
}

scrollbar-color – 要素のスクロールバーの色を指定します。

.scrollable-element {
    scrollbar-color: #999999 #cccccc;
}

>text-underline-position – 下線テキスト装飾の位置を指定します。

.underlined-text {
    text-underline-position: under right;
}

top – 要素の上位置を指定します。

.top-positioned {
    top: 50px;
}

transform – 要素に2Dまたは3D変換を適用します。

.transformed-element {
    transform: rotate(30deg);
}

transform-origin – 変形された要素の位置を変更します。

.transformed-element {
    transform-origin: top left;
}

transform-style – ネストされた要素が3D空間でレンダリングされる方法を指定します。

.transformed-element {
    transform-style: preserve-3d;
}

transition – すべての遷移-* プロパティのショートハンドです。

.transitioned-element {
    transition: width 1s ease-in-out;
}

transition-delay – 遷移効果が開始するタイミングを指定します。

.transitioned-element {
    transition-delay: 0.5s;
}

transition-duration – 遷移効果の完了にかかる時間を指定します。

.transitioned-element {
    transition-duration: 2s;
}

transition-property – 遷移効果が適用されるCSSプロパティの名前を指定します。

.transitioned-element {
    transition-property: width, height;
}

transition-timing-function – 遷移効果の速度曲線を指定します。

.transitioned-element {
    transition-timing-function: ease-in-out;
}

translate – 要素の位置を指定します。

.translated-element {
    transform: translate(50px, 100px);
}

U

unicode-bidi – 同じドキュメント内で複数の言語をサポートするためにテキストが上書きされるかどうかを設定または返します。

.bidi-text {
    unicode-bidi: embed;
    direction: rtl;
}

user-select – 要素のテキストを選択できるかどうかを指定します。

.selectable-text {
    user-select: none;
}

V

vertical-align – 要素の垂直方向の配置を設定します。

.aligned-element {
    vertical-align: middle;
}

visibility – 要素が表示されるかどうかを指定します。

.hidden-element {
    visibility: hidden;
}

W

white-space – 要素内の空白の扱い方を指定します。

.whitespace-element {
    white-space: nowrap;
}

widows – ページまたは列の上部に残す必要のある最小行数を設定します。

.widow-elements {
    widows: 2;
}

width – 要素の幅を設定します。

.width-element {
    width: 300px;
}

Z

z-index – 位置指定された要素のスタック順序を設定します。

.z-indexed-element {
    z-index: 100;
}

基本的なドロップダウン

<style>
.dropdown {
  position: relative;
  display: inline-block;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  padding: 12px 16px;
  z-index: 1;
}

.dropdown:hover .dropdown-content {
  display: block;
}
</style>

<div class="dropdown">
  <span>Mouse over me</span>
  <div class="dropdown-content">
    <p>こんにちは、世界！</p>
  </div>
</div>

説明: HTML) ドロップダウンの内容を開くためには、例えば <span> や <button> 要素を使用します。 CSS) .dropdown クラスは position: relative; を使用しています。これは、ドロップダウンのコンテンツが position: absolute; を使用してドロップダウンボタンのすぐ下に配置されることを示します。

ドロップダウンメニュー

<style>
/* スタイル ドロップダウン ボタン */
.dropbtn {
  background-color: #4CAF50;
  color: white;
  padding: 16px;
  font-size: 16px;
  border: none;
  cursor: pointer;
}

/* コンテナ $lt;div> - ドロップダウンのコンテンツを配置するために必要 */
.dropdown {
  position: relative;
  display: inline-block;
}

/* ドロップダウン コンテンツ (初期状態では非表示) */
.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}

/* ドロップダウン内のリンク */
.dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}

/* ドロップダウンリンクのホバー時の色を変更 */
.dropdown-content a:hover {
  background-color: #f1f1f1;
}

/* ホバー時にドロップダウンメニューを表示 */
.dropdown:hover .dropdown-content {
  display: block;
}

/* ドロップダウンコンテンツが表示されている場合にドロップダウンボタンの背景色を変更 */
.dropdown:hover .dropbtn {
  background-color: #3e8e41;
}
</style>

<div class="dropdown">
  <button class="dropbtn">ドロップダウン</button>
  <div class="dropdown-content">
    <a href="#">リンク 1</a>
    <a href="#">リンク 2</a>
    <a href="#">リンク 3</a>
  </div>
</div>

注意: 右寄せのドロップダウンコンテンツを作成する場合は、.dropdown-content に right: 0; を追加します。

ナビゲーションバーデモ

縦方向

• ホーム
• ニュース
• お問い合わせ
• 会社概要

横方向

• ホーム
• ニュース
• お問い合わせ
• 会社概要

使いやすいナビゲーションはどんなウェブサイトにも重要です。

CSSを使用すると、退屈なHTMLメニューを見栄えの良いナビゲーションバーに変えることができます。

ナビゲーションバー = リンクのリスト

ナビゲーションバーは基本的にリンクのリストなので、<ul>と<li>要素を使うのが理にかなっています：

<ul>
  <li><a href="default.asp">ホーム</a></li>
  <li><a href="news.asp">ニュース</a></li>
  <li><a href="contact.asp">お問い合わせ</a></li>
  <li><a href="about.asp">会社概要</a></li>
</ul>

それでは、リストからブレット（黒丸）とリストのマージンやパディングを取り除いてみましょう：

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

例の説明：

list-style-type: none; – ブレット（黒丸）を削除します。ナビゲーションバーにはリストマーカーは不要です。

margin: 0; および padding: 0; を設定して、ブラウザのデフォルト設定を削除します。

opacityプロパティは要素の透明度を指定します。

opacityプロパティは0.0から1.0の値を取ります。値が小さいほど透明になります：

img {
  opacity: 0.5;
}

opacityプロパティはよく:hoverセレクターと一緒に使用され、マウスオーバー時に透明度を変更します：

img:hover {
  opacity: 1.0;
}

マウスポインターが画像から離れると、画像は再び透明になります。

RGBAを使用した透明度

子要素に透明度を適用したくない場合は、RGBA色値を使用します。次の例では、背景色の透明度を設定し、テキストには透明度を適用しません：

100%の透明度

60%の透明度

30%の透明度

10%の透明度

CSSカラーの章で学んだように、色の値としてRGBを使用できます。RGBに加えて、アルファチャネル（RGBA）を使用することもできます。これは色の透明度を指定します。

アルファパラメータは0.0（完全に透明）から1.0（完全に不透明）の間の数値です。

div {
  background: rgba(76, 175, 80, 0.3); /* 30%の透明度の緑の背景 */
}

<html>
<head>
<style>
div.background {
  background: url(klematis.jpg) repeat;
  border: 2px solid black;
}

div.transbox {
  margin: 30px;
  background-color: #ffffff;
  border: 1px solid black;
  opacity: 0.6;
}

div.transbox p {
  margin: 5%;
  font-weight: bold;
  color: #000000;
}
</style>
</head>
<body>

<div class="background">
  <div class="transbox">
    <p class="hint">これは透明ボックスに配置されたテキストです。</p>
  </div>
</div>

</body>
</html>

疑似要素とは？

CSSの疑似要素は要素の特定の部分をスタイル付けするために使用されます。

::first-line 疑似要素

::first-line 疑似要素はテキストの最初の行に特別なスタイルを追加します。

p::first-line {
  color: #ff0000;
  font-variant: small-caps;
}

注意：::first-line 疑似要素はブロックレベル要素にのみ適用できます。

::first-line 疑似要素には以下のプロパティが適用されます：

• フォントプロパティ
• カラープロパティ
• 背景プロパティ
• ワードスペーシング
• レタースペーシング
• テキスト装飾
• 垂直方向の配置
• テキスト変形
• 行の高さ
• クリア

疑似要素の記法はダブルコロン (::) を使います – ::first-line のように。

CSS3で、疑似クラスと疑似要素を区別するために、W3Cはシングルコロンの代わりにダブルコロンの記法を導入しました。CSS2とCSS1では、疑似クラスと疑似要素の両方にシングルコロンの記法が使用されていました。

::first-letter 疑似要素

::first-letter 疑似要素はテキストの最初の文字に特別なスタイルを追加します。

p::first-letter {
  color: #ff0000;
  font-size: xx-large;
}

注意：::first-letter 疑似要素はブロックレベル要素にのみ適用できます。

::first-letter 疑似要素には以下のプロパティが適用されます：

• フォントプロパティ
• カラープロパティ
• 背景プロパティ
• マージンプロパティ
• パディングプロパティ
• ボーダープロパティ
• テキスト装飾
• 垂直方向の配置（”float”が”none”の場合のみ）
• テキスト変形
• 行の高さ
• フロート
• クリア

疑似要素とHTMLクラスの組み合わせ：

/* .intro クラスを持つ段落の最初の文字にスタイルを適用 */
p.intro::first-letter {
  color: #ff0000;
  font-size: 200%;
}

複数の疑似要素の組み合わせ

複数の疑似要素を組み合わせて使用することもできます。

/* 段落の最初の文字を赤く、xx-largeのフォントサイズにします */
p::first-letter {
  color: #ff0000;
  font-size: xx-large;
}

/* 段落の最初の行を青く、small-capsのフォント変種にします */
p::first-line {
  color: #0000ff;
  font-variant: small-caps;
}

::before 疑似要素

::before 疑似要素は要素の内容の前に何かを挿入するために使用されます。

/* 各 
 要素の内容の前に画像を挿入します */
h1::before {
  content: url(smiley.gif);
}

::after 疑似要素

::after 疑似要素は要素の内容の後に何かを挿入するために使用されます。

/* 各 
 要素の内容の後に画像を挿入します */
h1::after {
  content: url(smiley.gif);
}

::marker 疑似要素

::marker 疑似要素はリストアイテムのマーカーを選択します。

/* リストアイテムのマーカーを赤く、23pxのフォントサイズにします */
::marker {
  color: red;
  font-size: 23px;
}

::selection 疑似要素

::selection 疑似要素はユーザーによって選択された要素の部分にマッチします。

::selection に適用できるCSSプロパティ：color、background、cursor、outline。

/* 選択されたテキストを赤色で、黄色の背景色にします */
::selection {
  color: red;
  background: yellow;
}

すべてのCSS疑似要素

疑似クラスは要素の特別な状態を定義するために使用されます。

たとえば、以下のような場合に使用できます：

• ユーザーがマウスオーバーしたときに要素のスタイルを設定する
• 訪問済みと未訪問のリンクを異なるスタイルで設定する
• 要素がフォーカスを受け取ったときにスタイルを設定する

selector:pseudo-class {
  property: value;
}

アンカー疑似クラス

リンクは異なる方法で表示できます：

/* 訪問していないリンク */
a:link {
  color: #FF0000;
}

/* 訪問済みのリンク */
a:visited {
  color: #00FF00;
}

/* マウスオーバーしたリンク */
a:hover {
  color: #FF00FF;
}

/* 選択されたリンク */
a:active {
  color: #0000FF;
}

注意：効果を発揮するためには、a:hoverはa:linkとa:visitedの後に配置する必要があります。a:activeはa:hoverの後に配置する必要があります。疑似クラスの名前は大文字小文字を区別しません。

疑似クラスとHTMLクラスの組み合わせ：

/* 例のリンクにマウスオーバーすると色が変わります */
a.highlight:hover {
  color: #ff0000;
}

ホバー効果

<div> 要素に対して :hover 疑似クラスを使用する例：

div:hover {
  background-color: blue;
}

シンプルなツールチップのホバー

<div> 要素にカーソルを合わせると <p> 要素が表示される例（ツールチップのように）：

p {
  display: none;
  background-color: yellow;
  padding: 20px;
}

div:hover p {
  display: block;
}

:first-child 疑似クラス

:first-child 疑似クラスは、指定された要素が他の要素の最初の子要素である場合にマッチします。

/* 最初の 
 要素にマッチ */
p:first-child {
  color: blue;
}

/* すべての 
 要素内の最初の  要素にマッチ */
p i:first-child {
  color: blue;
}

/* 他の要素の最初の 
 要素内のすべての  要素にマッチ */
p:first-child i {
  color: blue;
}

<html>
<head>
<style>
q:lang(no) {
  quotes: "~" "~";
}
</style>
</head>
<body>

<p>Some text <q lang="no">A quote in a paragraph</q> Some text.</p>

</body>
</html>

div p {
  background-color: yellow;
}

div > p {
  background-color: yellow;
}

div + p {
  background-color: yellow;
}

div ~ p {
  background-color: yellow;
}

.center {
  margin: auto;
  width: 50%;
  border: 3px solid green;
  padding: 10px;
}

.center {
  text-align: center;
  border: 3px solid green;
}

img {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 40%;
}

.right {
  position: absolute;
  right: 0px;
  width: 300px;
  border: 3px solid #73AD21;
  padding: 10px;
}

.right {
  float: right;
  width: 300px;
  border: 3px solid #73AD21;
  padding: 10px;
}

.clearfix::after {
  content: "";
  clear: both;
  display: table;
}

.center {
  padding: 70px 0;
  border: 3px solid green;
}

.center {
  padding: 70px 0;
  border: 3px solid green;
  text-align: center;
}

.center {
  line-height: 200px;
  height: 200px;
  border: 3px solid green;
  text-align: center;
}

/* テキストが複数行の場合、以下を追加します： */
.center p {
  line-height: 1.5;
  display: inline-block;
  vertical-align: middle;
}

.center {
  height: 200px;
  position: relative;
  border: 3px solid green;
}

.center p {
  margin: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.center {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 200px;
  border: 3px solid green;
}

span.a {
  display: inline; /* spanのデフォルト */
  width: 100px;
  height: 100px;
  padding: 5px;
  border: 1px solid blue;
  background-color: yellow;
}

span.b {
  display: inline-block;
  width: 100px;
  height: 100px;
  padding: 5px;
  border: 1px solid blue;
  background-color: yellow;
}

span.c {
  display: block;
  width: 100px;
  height: 100px;
  padding: 5px;
  border: 1px solid blue;
  background-color: yellow;
}

.nav {
  background-color: yellow;
  list-style-type: none;
  text-align: center; 
  padding: 0;
  margin: 0;
}

.nav li {
  display: inline-block;
  font-size: 20px;
  padding: 20px;
}