Web Programming
CSS is a language that specifies the design and layout of webpage elements, providing a way to centrally control colors, text sizes, margins, and other stylistic properties so that webpages look visually appealing.
CSS
CSSとは？
Selectors 「セレクタ」
属性セレクタ pseudo-class（疑似クラス） HTML要素に特定の状態がある場合にスタイルを適用するためのものです。
:after 要素の直後に内容を挿入する。
:before 要素の直前に内容を挿入する。
:focus フォーカスが当たった要素にスタイルを指定するための CSSの擬似クラスで、アクセシビリティの向上に役立ちます。
:focus-visible キーボード操作など、ユーザーに見える形で必要なときだけフォーカスを表示できる仕組みです。
pseudo-element（擬似要素） コンテンツ内に生成された仮想的な要素を指定するための仕組みです。
::first-letter 要素の最初の文字にスタイルを適用する。
::focus-within フォーカスを持っているか、フォーカスを持った要素を含む要素を表します。
nth selectors（n番目系セレクタ） 特定の順番に位置する子要素を指定して選択するためのセレクタです。
色の指定方法 CSSでは、キーワードや16進数（Hex）、RGB/RGBA、HSL/HSLAなど複数の形式で色を指定でき、それぞれ透明度やブラウザ対応を考慮しながら目的に応じて使い分けるのがポイントです。
CSSの単位 CSSの単位は、要素のサイズや位置を指定するためのもので、固定された値を持つ絶対単位と、他の要素や画面サイズに応じて変動する相対単位に分かれています。
viewport units ビューポート単位。画面いっぱいに要素を表示する方法。
グローバル値
inherit 要素のプロパティの計算値を親要素から取得するよう指定します。
initial 要素にプロパティの初期値 (または既定値) を設定します。
unset プロパティをリセットし、親から自然に継承された場合は継承値、そうでなければ初期値を設定します。
Custom Properties（カスタムプロパティ : CSS Variables） CSS内で変数を宣言して動的に値を管理できる機能で、デザインの一貫性や保守性を高めるのに役立つ仕組みです。
ボックスモデル
レイアウトの実装手段
Horizontal list CSSを使用して横並びリストを作成するには、ul要素にdisplay: flex;とflex-wrap: wrap;を設定し、li要素に適切なマージンを追加します。
Flexbox コンテナ内のアイテムの配置、方向、順序を柔軟に管理できるレイアウトモデルです。
Grid layout グリッドレイアウトは、Webページのコンテンツを行と列に分割して配置するための強力かつ柔軟なレイアウトシステムです。
Dark mode CSS で Web サイトをダークモードに対応させる方法
Vendor prefix ベンダープレフィックスとは、各ブラウザが新しい CSS機能を正式にサポートする前に、それらを試験的に適用できるようにするためのブラウザ固有の接頭辞です。
polyfill 古いブラウザでも新しいCSS機能を使えるようにする仕組みです。
点滅する CSS animation と @keyframes を使って、文字や要素を点滅させてみます。
3D effect 3D効果とは、要素に奥行きを持たせ、視点やパースペクティブを設定することで、ウェブページ上で立体的に見せる技術です。
Properties
/* 〜 */ comment
:active クリックして押している間の見た目を指定するための疑似クラスです。
align-content コンテナ内全体の交差軸方向（初期値では縦方向）の揃え位置を指定する。
align-items フレックスボックスやグリッドコンテナ内の要素の垂直方向（縦方向）の配置を制御する。
align-self コンテナ内の個別アイテムの縦方向の揃え位置を指定する。
alignment-adjust テキストや要素のベースラインを微調整して、垂直方向の配置を制御するためのプロパティです。
alignment-baseline SVGなどでテキストのベースラインを親要素や周囲のテキストに対してどこに合わせるかを指定するためのものです。
animation アニメーションについてまとめて指定する。
animation-delay アニメーションがいつ始まるかを指定する。
animation-direction アニメーションが正方向、逆方向、または交互に再生されるかどうかを指定するために使用されます。
animation-duration アニメーション１回分の時間の長さを指定する。
animation-fill-mode アニメーションの実行の前後にどう対象にスタイルを適用するかを設定します。
animation-iteration-count アニメーションの繰り返し回数を指定する。
animation-name 要素に適用するアニメーションの名前を指定し、その名前は同じ CSSファイル内で定義された @keyframesルールと一致させる必要があります。
animation-play-state 再生中か一時停止かを指定する。
animation-timing-function アニメーションのタイミング・進行割合を指定する。
appearance プラットフォームにおける標準的な UI の外観にする。
aspect-ratio アスペクト比を定義する。
attr() [function] HTML要素の属性値をスタイルシート内で利用できるようにする機能です。
backface-visibility 3D空間で変形する要素の背面の表示方法を指定する。
background 背景に関するすべてのプロパティをまとめて一括指定できる。
background-attachment 背景画像の固定・移動を指定する。
background-break インライン要素の背景画像の繰り返し方法を指定する。
background-clip 背景の適用範囲を指定する。
background-color 要素の背景色を指定するために使用されます。
background-image 背景画像を指定する際に使用します。
background-origin 背景の基準位置を指定する。
background-position 背景画像の表示開始位置を指定する。
background-repeat 要素の背景画像を上下左右にどのように繰り返して表示するかを指定するためのプロパティです。
background-size 背景画像のサイズを指定する際に使用します。
baseline-shift テキストの特定範囲のベースラインを指定し直す。
binding 結合するスタイル規則の参照。
block-size 文章の向き（横書き/縦書き）に関係なく、いつでも“高さ側”の大きさを指定できるプロパティ。横書きでは height と同じ感覚で使え、縦書きでもそのまま効くから、多言語でもレイアウトが崩れにくい。
bookmark-label ブックマークのラベル（名前）の指定。
bookmark-level 階層構造のブックマークのレベル指定。
bookmark-target ブックマークのリンク先の指定。
border ボックスの上下左右のボーダー（境界）のスタイル・太さ・色に対して同じ値をまとめて指定することができます。
border-block-end-width 書字方向に合わせて「最後側の枠線の太さ」を調整できるCSSのプロパティです。
border-block-start-color 要素の上側にあるボーダーの色を指定する。
border-block-start-width 要素の始点側に配置されるボーダーの幅を設定する。
border-bottom 要素の下端に線（ボーダー）を指定して、色・太さ・線の種類などを設定できるプロパティです。
border-bottom-color 下側のボーダーの色を指定する。
border-bottom-left-radius ボックスの左下の角丸を指定する。
border-bottom-right-radius ボックスの右下の角丸を指定する。
border-bottom-style 要素の下辺に引く線の種類（実線・点線・破線・二重線など）を指定し、デザインを制御できるプロパティです。
border-bottom-width 下側のボーダーラインの太さを指定する。
border-collapse セルの枠線（ボーダー）の表示の仕方を指定する。
border-color ボーダー色の一括指定。
border-image 画像ボーダーを指定する。
border-image-outset ボーダーイメージ領域がボーダーボックスを超えて拡がる量を指定する。
border-image-repeat 画像ボーダーの繰り返し方法を指定する。
border-image-slice ボーダー画像の使用範囲を指定する。
border-image-source 画像ボーダーに使用する画像ファイルを指定する。
border-image-width 画像ボーダーの太さを指定する。
border-inline-end-width border-inline-start-width border-left 要素の左側にだけボーダー（太さ・色・線のスタイル）をまとめて設定できるプロパティです。
border-left-color 左側のボーダーの色を指定する。
border-left-style 要素の左側に表示するボーダーの「線の種類」を個別に指定する。
border-left-width 左側のボーダーラインの太さを指定する。
border-radius ボックスの角丸をまとめて指定する。
border-right 要素の右側に枠線の太さ、スタイル、色を一括して設定するショートハンドプロパティです。
border-right-color 右側のボーダーの色を指定する。
border-right-style 右側のボーダーのスタイルを指定する。
border-right-width 右側のボーダーラインの太さを指定する。
border-spacing セルのボーダーの間隔を指定する。
border-style ボーダーのスタイルを一括指定する。
border-top 要素の上のふち線を自由にデザインできるスタイルです。
border-top-color 上側のボーダーの色を指定する。
border-top-left-radius ボックスの左上の角丸を指定する。
border-top-right-radius ボックスの右上の角丸を指定する。
border-top-style 上側のボーダーのスタイルを指定する。
border-top-width 上側の境界線（border）の幅（width）を指定する。
border-width ボーダーの太さを一括指定する。
bottom 要素の下端を基準にして、指定された距離分だけ上に位置を調整するプロパティです。
box-decoration-break ボックスが改行する際の表示形式を指定する。
box-shadow ボックスに影をつける。
box-sizing ボックスサイズの算出方法を指定する。
break-after ボックス後でのカラムの区切り方法を指定する。
break-before ボックス前でのカラムの区切り方法を指定する。
break-inside ボックス途中でのカラムの区切り方法を指定する。
calc() calc()関数は算術演算を行い、その結果を要素のサイズやマージン、パディングなどに指定することができます。
caption-side 表のタイトルを「上」か「下」に表示するかを決めて、見やすいレイアウトにできるプロパティ。
clamp() 画面が小さい時も大きい時も、値を「ちょうどいい範囲」に自動でおさえてくれる関数で、最小・理想・最大を一度に指定して文字サイズや幅を気持ちよく伸び縮みさせる。
clear 回り込みを解除する
clip ボックスを切り抜き表示（クリッピング）する
clip-path 指定された形状で要素を切り抜くことができる。
color 文字の色（前景色）を設定します。
color() 先進的な色空間を使って色を細かく指定できる関数です。
color-mix() 2つの色を好きな割合で混ぜて新しい色を作れる関数です。
color-profile 色の表現方法を定義する。
column-count ブロック要素を複数の列に分割する。
column-fill 複数の列を持つコンテンツを均等に配置するためのプロパティで、"balance"値を指定することで余白を最小限に抑えられます。
column-gap アイテム同士の縦方向の間隔を指定する。
column-rule マルチカラムレイアウトの境界線を設定する。
column-rule-color 多列レイアウトで各列の境界線の色を指定する。
column-rule-style カラムの区切り線のスタイルを指定する。
column-rule-width 多列レイアウトで列間の縦線の太さを指定する。
column-span 複数のカラムを持つレイアウトで、カラムの境界をまたぐ要素を指定する。
column-width カラム幅を指定する。
columns 要素内のテキストを複数の列に分割する。
container-type 要素のサイズを使って中身のデザインを変えられるように、その要素をコンテナとして指定するためのプロパティです。
content 主に擬似要素を使用して、HTMLに記述されていないテキストや画像などのコンテンツをWebページに追加するために用いられます。
counter() [function] Webページ内で項目の自動番号付けを管理するために使用されます。
counters() [function] Webページ内のネストされた要素に自動的に階層的な番号付けを行うための関数です。
counter-increment 要素の連番（カウンタ）の値を進める。
counter-reset 要素の連番（カウンタ）の値をリセットする。
cursor カーソルの形状を指定する。
direction 文字表記の方向（左右）を指定する。
display HTML要素がページ上でどのように配置され表示されるかを決定する基本的な設定です。
empty-cells 空白セルのボーダーの表示・非表示を指定する。
env() スマホなどの画面の安全な表示領域に合わせて、スタイルを自動調整できる関数です。
:first-of-type 同じ親要素内にある特定のタグタイプの最初の要素にスタイルを適用するためのCSSセレクタです。
fit-content() 内容に合わせて自動でサイズを決めつつ、指定した上限を超えないようにするための関数で、ボタンやラベル、Grid の列幅などを“ちょうどよく”収めたいときに使う。
flex フレックスアイテムの伸縮性、縮小性、および基本的なサイズを一度に定義するためのショートハンドです。
flex-basis Flexboxレイアウト内の要素の初期メインサイズを指定します。
flex-direction フレックスコンテナ内のアイテムの配置方向を指定する。
flex-grow フレックスボックス内のアイテムが利用可能な追加スペースをどのように分割して占めるかを決定するための比率を設定します。
flex-shrink フレックスボックス内のアイテムがコンテナーの空間が不足した際にどれだけ縮小するかを定義する数値を指定します。
flex-wrap Flexboxコンテナ内の要素の折り返し（改行）の挙動を制御します。
Flexbox コンテナ内のアイテムの配置、方向、順序を柔軟に管理できるレイアウトモデルです。
float 左または右に寄せて配置する。
:focus いま「どの要素を操作しているか」をハッキリ見せるための合図が:focus。キーボードのTab移動やクリック後に出る“フォーカスの見た目”を、outline中心に安全に整えるコツをまとめています。
:focus-visible キーボード操作など、ユーザーに見える形で必要なときだけフォーカスを表示できる仕組みです。
:focus-within フォーカスを持っているか、フォーカスを持った要素を含む要素を表します。
font フォントに関する指定をまとめて行う。
@font-face インターネット上のフォントを適用する。
font-family フォントの種類を指定する。
font-size フォントのサイズを指定する。
font-size-adjust フォントのサイズを調整する。
font-stretch フォントの形状を幅広・幅狭にする。
font-style フォントをイタリック体・斜体にする。
font-variant フォントをスモールキャップにする。
font-variant-numeric 数字の形や揃え方を細かく調整して、見やすく整えるための設定です。
font-weight フォントの太さを指定する。
gap グリッドやフレックスコンテナ内のアイテム間のスペースを簡単に設定するためのプロパティです。
grid-area グリッド内での表示位置と範囲をまとめて指定できるプロパティです。
grid-auto-flow グリッド内の未配置アイテムを行または列方向に自動的に並べる方法を指定するためのものです。
grid-column 列グリッドの開始と終了についてまとめて指定する。
grid-gap グリッド内の行や列のすき間を設定するプロパティです。
grid-row グリッドレイアウトにおいて要素が配置される開始行と終了行を指定するプロパティです。
grid-template-areas レイアウトの位置を名前で指定して、見た目どおりに並べられる方法です。
grid-template-columns グリッドトラックの横方向のサイズリストを指定する。
grid-template-rows グリッドレイアウトにおける各行の高さ（サイズ）を指定して、行方向のレイアウトをコントロールするためのものです。
:has() 中に特定の要素がある親をCSSだけで選べる新しい方法です。
height 高さを指定する。
hsl() 色を「色相・彩度・明度」で直感的に指定できる関数です。
hsla() 色相・彩度・明度・透明度で色を指定する関数。
hyphens 長い単語を途中で改行するかどうかを指定できます。
!important 他のスタイルよりも強く優先して適用させたいときに使います。
inline-block 横に並び、高さや幅を指定できる表示方法です。
inline-size 文字が流れる向きに合わせて大きさを決める書き方で、横書きなら横幅、縦書きなら高さとして働き、縦書き・横書きを切り替えても同じCSSで扱える。
inset 要素の上下左右の位置をまとめて指定できるプロパティです。
inset-block 段の並ぶ向き（ブロック方向）への位置ズレを、書字方向に合わせて上下または左右として自動で解釈し、inset-block-start/inset-block-end をひとまとめに指定できるショートハンド。
inset-block-end 文字の流れに合わせて「ブロックの終わり側」（横書きなら下）からの距離を指定し、ボタンやバッジを端にぴったり配置できるプロパティ。
inset-block-start ページの書き方に合わせて、要素を“段落が始まる側”からどれだけ離すかを決める指定で、横書きなら〈上からの距離〉、縦書きなら〈右や左からの距離〉として自然に切り替わる、top の言語対応版です。
inset-inline 文字が流れる向き（横書き/縦書き・LTR/RTL）に合わせて、要素をインライン方向の両端からどれだけ離すかを一度に指定できる位置プロパティ。
inset-inline-end 文字の流れで見た「終わり側」からの距離を指定して、要素をその側に寄せたり固定したりできるプロパティで、右/左や上下が書字方向に合わせて自動で切り替わる。
inset-inline-start 文章の向き（左から右／右から左）に合わせて、自動で「横方向のスタート側」の位置を決められるプロパティ。
:invalid 入力内容が正しくないときに自動で適用されるスタイル指定用の仕組みです。
justify-content 要素の水平方向（横方向）の配置を調整し、余白やスペースの使い方を制御します。
justify-items コンテナ内のアイテムの主軸方向（初期値では横方向）のデフォルト揃え位置を指定する際に使用します。
justify-self コンテナ内の個別アイテムの横方向（主軸方向）の揃え位置を指定する。
@keyframes アニメーションの動きを指定する。
lab() 人間の目に自然な色合いを再現できる新しい色指定方法です。
:last-of-type 指定された要素の兄弟要素の中で最後の特定の要素を選択するために使用されます。
lch() 色の明るさ・鮮やかさ・色味を自然にコントロールできる色指定方法です。
left 左からの配置位置（距離）を指定する。
letter-spacing 文字の間隔を指定する。
line-height 行の高さを指定する。
linear-gradient() 画像を使わずに色が直線的に滑らかに変化する背景グラデーションを作成できる機能です。
list-style リスト項目のマーカーの形・位置・画像を一括で指定できるショートハンドです。
list-style-image リストのマーク画像。
list-style-position リストのマークの表示位置を指定する。
list-style-type リストの先頭に表示するマーカー文字の種類を指定する。
margin マージンに関する指定をまとめて行う。
margin-block 文章の流れに応じて、上下の余白をまとめて設定します。
margin-bottom 下マージンを指定する。
margin-inline 左右の余白を表示方向に合わせて調整するためのプロパティです。
margin-left 左マージンを指定する。
margin-right 右マージンを指定する。
margin-top 上マージンを指定する。
::marker リストのマーカー部分だけにスタイルを当てられます。
marker-offset リストマーカーとリスト内容の間隔を指定する。
max() 複数のサイズ候補の中から“いちばん大きい値”を自動で選ばせて、文字やブロックが小さくなりすぎない“下限”をかんたんに守らせる道具。
max-block-size 文章の流れに合わせた縦方向の最大サイズを決めて、それ以上は広がらないようにできるプロパティ。
max-content 中身が収まる最適なサイズまで広がる自動サイズ指定。
max-height 高さの最大値を指定する。
max-inline-size 長い文章やボックスが横に伸びすぎないように、**書き方向に合わせた“最大の広がり”**を決めて読みやすさを保つための上限スイッチ。
max-width 要素の最大幅を指定する。
@media デバイスの画面サイズや特性に応じてスタイルを動的に切り替えるためのルールです。
min() 画面や文字の大きさを候補として並べ、常に“いちばん小さい値”だけを採用して、広がりすぎ・大きくなりすぎを手軽に止める関数。
min-block-size 要素が縦書きでも横書きでも、これ以上小さくならない最小の高さ（または幅）を決めておくためのプロパティ。
min-content 内容の一番長い単語に合わせて幅が決まります。
min-height 高さの最小値を指定する。
min-inline-size 文字が並ぶ方向に対して、これ以上小さくならないように最小サイズを決めるプロパティ。
min-width 幅の最小値を指定する。
minmax() 要素のサイズを「最小サイズと最大サイズの間」で自動調整する関数です。
object-fit 画像やビデオがそのコンテナ要素にどのように収まるか（縦横比を保つかどうかなど）を指定するプロパティです。
opacity 0.0～1.0の数値で要素全体の透明度を指定し、その中の子要素も含めて一括して「どれだけ透けて見えるか」を制御できるプロパティです。
orphans テキストブロックの最後の行に少なくともいくつの単語を残すかを制御する。
outline アウトラインのスタイル・太さ・色を指定する。
outline-color 要素のアウトライン（輪郭）の色を指定する。
outline-offset アウトラインの位置を指定する。
outline-style アウトラインのスタイルを指定する。
outline-width 要素の周囲に描かれるアウトラインの太さを指定する。
overflow はみ出た要素の表示方法を指定する。
overflow-wrap 長い単語やURLを自動で途中改行して、レイアウト崩れを防ぎます。
overflow-x ボックスの範囲内に内容が収まらない場合に、はみ出た要素の左右の表示方法を指定する。
overflow-y はみ出た要素の上下の表示方法を指定する。
padding パディングに関する指定をまとめて行う。
padding-block 文章の流れに合わせて上下の余白をまとめてつけられる、レイアウトが崩れにくい便利なプロパティ。
padding-bottom 要素の下部に余白（内側のスペース）を設定する。
padding-inline 文字の流れる方向に合わせて、左右の内側のすき間をまとめて決められるプロパティ。
padding-left 要素の左側の余白（内側のスペース）を設定する。
padding-right 要素の右側の余白（内側のスペース）を設定する。
padding-top 要素の上部に余白（内側のスペース）を設定する。
page-break-after break-after 印刷時の改ページ位置を指定する。
page-break-before 印刷時に要素の前で強制的に改ページを行い、新しいページの先頭に配置するためのプロパティです。
page-break-inside 印刷やページ分割時に要素内で改ページを制御する。
perspective 要素に3D効果を与える際の視点の距離を設定し、その要素の奥行き感を調整するためのものです。
perspective-origin 3D変換において視点の位置を設定し、要素がどの方向から見られるかを決定するプロパティです。
place-content グリッドやフレックスの中で、中身全体を上下・左右どこに寄せるかをまとめて決めるプロパティ。
place-items グリッドやフレックスの中で、子要素を上下・左右にそろえる位置を、まとめて指定できるショートカット。
position ボックスの配置方法（基準位置）が、相対位置か絶対位置かを指定する。
prefers-color-scheme ユーザーのダーク／ライト設定に応じてデザインを自動切替できます。
prefers-reduced-motion ユーザーの「動きを減らす」設定に応じて、アニメーションなどを控えめにできる仕組みです。
quotes 引用符を設定する
radial-gradient() 円や楕円を中心に色が広がる背景グラデーションを作る関数です。
repeat() 同じサイズの列や行を何回も繰り返して指定できるグリッド用の書き方。
resize 要素をドラッグしてサイズ変更できるようにするプロパティです。
rgb() 色を赤・緑・青の光の強さで作るための色指定方法です。
rgba() 透明度つきの色を指定できる方法です。
right 要素の位置を、右端からの距離で調整します。
:root ページ全体に共通する設定や変数をまとめておける、いちばん上の親のようなセレクター。
row-gap アイテム同士の横方向の間隔を指定する。
tab-size テキスト内のタブ文字の幅を設定する。
table-layout テーブルの幅と列の幅の調整方法を指定する。
text-align 行揃えの位置・均等割付を指定する。
text-align-last テキストコンテンツの最後の行の水平方向の位置を指定する。
text-decoration テキストの下線・上線・取消線・点滅を指定する。
text-decoration-color text-decoration-lineプロパティでテキストにつけた傍線の色を指定する。
text-decoration-line テキストに傍線をつける。
text-decoration-skip テキスト傍線のスキップ方法を指定する。
text-decoration-style テキスト傍線のスタイルを指定する。
text-decoration-thickness text-decoration-lineプロパティで指定された下線、上線、打ち消し線、または二重線の太さを変更する。
text-indent インデント（字下げ）を制御する。
text-orientation 縦書きを指定した場合の文字の表示方向を指定します。
text-overflow コンテナの幅を超えたテキストを切り取るか、省略記号（…）で表示するかを指定するプロパティです。
text-shadow テキストに影をつける。
text-size-adjust 一部のモバイル端末で使われる、テキストの自動拡大アルゴリズムを制御します。
text-transform 大文字・小文字・全角文字への変換を指定する。
text-underline-offset テキストの下線を基準位置からどれだけ離すか（オフセット）を指定し、可読性やデザイン面での調整を柔軟に行えるようにするためのプロパティです。
top top は“上からどれだけズラすか”を決めるプロパティです。position を relative/absolute/fixed/sticky にしたときの違いや、%の基準、動かない時のチェック方法を、短いコード例つきでやさしく解説します。touch-callout 対象を長押しすることで現れるコールアウト表示を制御します。
transform 要素に2D変形、または、3D変形を適用する。
transform-style 要素の子要素が3D変換の影響を受けるかどうかを指定するためのもので、flatは2D平面上で描画し、preserve-3dは3D空間内で描画します。
transition transition効果（時間的変化）をまとめて指定する。
transparent 要素の色や背景を完全に透明にして、背後を透けさせるために使います。
unicode-bidi Unicode の文字表記の方向を上書きする。
user-select ユーザーが文章や画像などの要素を範囲選択できるかどうかを制御します。
var() デザインでよく使う色や余白などの値を「名前」でまとめておき、あとから var() で呼び出せるしくみ。全体のデザイン変更が簡単になる。
vertical-align インライン要素やテーブルセル内のテキストや画像を上下方向に揃えるために使います。
view-transition-name ページの切り替え時に特定の要素を個別にアニメーションさせるために付ける“ラベル”です。
visibility ボックスの表示・非表示を指定する。
white-space 要素内の空白や改行の扱いと、テキストの折り返し方法を指定するためのものです。
widows 改ページされる際の次ページの最低行数を指定する。
width 要素の幅を指定する。
word-break 長い英単語やURLが横幅からはみ出しそうなときに、単語の途中で切ってもよいか・なるべく区切りで折り返すかを選んで、レイアウト崩れと読みやすさのバランスを取るためのスイッチ。
word-spacing テキスト内の単語の間隔を調整する。
word-wrap 長い単語やURLを途中で折り返して表示できるプロパティです。
writing-mode 縦書き・横書きの別と行ブロックを並べる方向を指定します。
z-index 要素のスタッキングコンテキスト内での優先順位（重なり）を調整するために使用される。
Home サイトのトップページ
HTML (HyperText Markup Language) ウェブページの基本的な構造を作成します。見出し、段落、リンク、画像などの要素を定義します。
CSS (Cascading Style Sheets) ウェブページのデザインやレイアウトを設定します。色、フォント、レイアウトなどのスタイルを指定します。
JavaScript ウェブページにインタラクティブな動作を追加します。フォームの検証、アニメーション、リアルタイムのデータ処理などを行います。
PHP (Hypertext Preprocessor) サーバー上で動作してデータベースと連携し、動的なWebページを簡単に作成できるスクリプト言語です。