color:#1767a1;
/* 文字の色を青に */
color:rebeccapurple;

用例をコピー

font-size:18px;
/* 読みやすい大きさに */
font-size:1.125rem;

用例をコピー

font-family:sans-serif;
/* 日本語フォントを複数指定 */
font-family:"Noto Sans JP",sans-serif;

用例をコピー

font-weight:700;
/* 見出しを太字に */
font-weight:bold;

用例をコピー

font-style:italic;
/* 強調した文字に */
font-style:normal;

用例をコピー

line-height:1.8;
/* 日本語本文の行間 */
line-height:1.9;

用例をコピー

letter-spacing:.05em;
/* 見出しの文字間隔 */
letter-spacing:1px;

用例をコピー

text-align:center;
/* 本文を左揃え */
text-align:left;

用例をコピー

text-decoration:underline;
/* リンクの下線をなくす */
text-decoration:none;

用例をコピー

text-shadow:1px 2px 3px #777;
/* 見出しの奥行きを演出 */
text-shadow:0 2px 4px #0005;

用例をコピー

text-transform:uppercase;
/* 先頭だけ大文字 */
text-transform:capitalize;

用例をコピー

white-space:pre-wrap;
/* コードの改行を保持 */
white-space:nowrap;

用例をコピー

word-break:break-word;
/* 長い文字列を折り返す */
overflow-wrap:anywhere;

用例をコピー

background:#f2f7fc;
/* 画像と背景色を指定 */
background:linear-gradient(90deg,#125,#39a);

用例をコピー

background-color:#e8f3ff;
/* カードに淡い背景 */
background-color:aliceblue;

用例をコピー

background-image:linear-gradient(120deg,#194b78,#3b91bf);
/* 背景をグラデーションに */
background-image:radial-gradient(circle,#fff,#ddeaff);

用例をコピー

background-size:cover;
/* 画像全体を収める */
background-size:contain;

用例をコピー

background-position:center;
/* 右上基準 */
background-position:right top;

用例をコピー

opacity:.8;
/* 半透明にする */
opacity:.5;

用例をコピー

border:1px solid #bdd0e0;
/* 破線の枠 */
border:2px dashed #2682ad;

用例をコピー

border-radius:12px;
/* 丸いボタン */
border-radius:999px;

用例をコピー

box-shadow:0 4px 16px #1234;
/* ふんわりした影 */
box-shadow:0 8px 24px #0012;

用例をコピー

outline:2px solid #126fbb;
/* キー操作時の見やすい輪郭 */
outline-offset:3px;

用例をコピー

filter:grayscale(1);
/* 少し明るく表示 */
filter:brightness(1.1);

用例をコピー

margin:16px;
/* 上下と左右を分ける */
margin:12px auto;

用例をコピー

padding:16px;
/* ボタンを押しやすくする */
padding:12px 20px;

用例をコピー

width:100%;
/* 横幅を最大600pxまで */
width:min(100%,600px);

用例をコピー

height:240px;
/* 画面高さの一部 */
height:50vh;

用例をコピー

max-width:1100px;
/* PCで広がり過ぎない */
max-width:70rem;

用例をコピー

min-height:48px;
/* 押しやすいボタン */
min-height:44px;

用例をコピー

box-sizing:border-box;
/* 幅に余白を含める */
box-sizing:border-box;

用例をコピー

aspect-ratio:16/9;
/* 正方形の画像 */
aspect-ratio:1;

用例をコピー

overflow:hidden;
/* 横方向のみスクロール */
overflow-x:auto;

用例をコピー

object-fit:cover;
/* 画像を切らずに全体表示 */
object-fit:contain;

用例をコピー

display:flex;
/* 格子状に並べる */
display:grid;

用例をコピー

flex-direction:column;
/* 横並びにする */
flex-direction:row;

用例をコピー

justify-content:space-between;
/* 中央に配置 */
justify-content:center;

用例をコピー

align-items:center;
/* 上揃えにする */
align-items:flex-start;

用例をコピー

gap:12px;
/* 行と列で分けて指定 */
gap:12px 20px;

用例をコピー

flex-wrap:wrap;
/* 一列を維持 */
flex-wrap:nowrap;

用例をコピー

flex:1;
/* 伸縮と基本幅を指定 */
flex:1 1 240px;

用例をコピー

grid-template-columns:repeat(2,1fr);
/* 自動で列数を調整 */
grid-template-columns:repeat(auto-fit,minmax(220px,1fr));

用例をコピー

grid-column:span 2;
/* 全列をまたぐ */
grid-column:1/-1;

用例をコピー

position:sticky;
/* 画面下に固定 */
position:fixed;

用例をコピー

top:0;
/* 固定したヘッダー */
top:12px;

用例をコピー

bottom:0;
/* 下部固定メニュー */
bottom:env(safe-area-inset-bottom);

用例をコピー

z-index:100;
/* メニューを前面へ */
z-index:999;

用例をコピー

inset:0;
/* 上下左右に余白 */
inset:12px;

用例をコピー

transform:translateY(-4px);
/* 少し拡大 */
transform:scale(1.05);

用例をコピー

transition:opacity .2s;
/* 色の変化を滑らかに */
transition:background .25s ease;

用例をコピー

animation:fade .5s ease;
/* 別途@keyframesを定義 */
animation:slide .4s both;

用例をコピー

cursor:pointer;
/* 入力禁止を示す */
cursor:not-allowed;

用例をコピー

pointer-events:none;
/* クリックを受け付ける */
pointer-events:auto;

用例をコピー

scroll-behavior:smooth;
/* 通常に戻す */
scroll-behavior:auto;

用例をコピー

scroll-margin-top:80px;
/* 固定ヘッダー対策 */
scroll-margin-top:5rem;

用例をコピー

touch-action:pan-y;
/* 両方向の移動を許可 */
touch-action:auto;

用例をコピー

user-select:none;
/* テキストを選択可能に */
user-select:text;

用例をコピー

@media(min-width:768px){.grid{display:grid;}}
/* PCだけ幅を変える */
@media(min-width:1024px){.page{max-width:1100px;}}

用例をコピー

@supports(display:grid){.list{display:grid;}}
/* 未対応環境への配慮 */
@supports not (display:grid){.list{display:block;}}

用例をコピー

button:focus-visible{outline:3px solid #39f;}
/* アクセシビリティ向上 */
a:focus-visible{outline:2px solid #267ac0;}

用例をコピー

a:hover{color:#b45;}
/* ボタン背景の変更 */
button:hover{background:#def;}

用例をコピー

:root{--main:#1766a4;}
/* 変数を読み込む */
h2{color:var(--main);}

用例をコピー

@keyframes fade{from{opacity:0}to{opacity:1}}
/* 左右に移動 */
@keyframes slide{from{transform:translateX(-10px)}to{transform:translateX(0)}}

用例をコピー