ホームページの運営に携わっていれば自然に身につく知識ですが、関わりのない方にとっては全くの未知の世界。基本を知ると知らないでは大違い！？ ホームページにまつわる情報を、苦手意識や抵抗感のある方にも分かりやすくお届けいたします。
CSSの基本についての解説で、CSSにはデザインを担う役割があることをお伝えさせてもらいました。今回はさわり程度になりますが、よく使われるCSSのプロパティをピックアップしてみましたので、CSSを学ぶ入り口として見てもらえればと思います。
ちなみにCSSを覚える一番の方法は実際に使ってみる事です（断言）！
よく使うCSSプロパティ
レイアウト（Flex関連）
display: flex; /* フレックスボックス */
flex-direction: row; /* 横並び */
flex-wrap: wrap; /* 折り返し有効 */
justify-content: center; /* 中央寄せ */
align-items: center; /* 縦方向中央寄せ */
align-content: flex-start; /* コンテンツの配置 */
gap: 20px; /* 要素間の隙間 */ボックスモデル（サイズ・余白）
width: 100%; /* 幅いっぱい */
max-width: 1200px; /* 最大幅 */
min-width: 320px; /* 最小幅 */
height: auto; /* 高さ自動調整 */
max-height: 600px; /* 最大高さ */
min-height: 100vh; /* 最小高さ：画面いっぱい */
padding: 16px; /* 内側余白 */
margin: 0 auto; /* 外側余白：中央寄せ */
box-sizing: border-box; /* ボックスサイズの定義 */
overflow: hidden; /* はみ出し部分非表示 */
overflow-x: auto; /* はみ出したら横スクロール */
overflow-y: scroll; /* 縦スクロール表示 */色・背景
color: #333; /* 文字色 */
background-color: #f0f0f0; /* 背景色 */
background-image: url('img/bg.jpg'); /* 背景画像 */
background-size: cover; /* 背景画像を全面に表示 */
background-repeat: no-repeat; /* 背景画像繰り返しなし */
background-position: center center; /* 背景画像を中央配置 */
background-attachment: fixed; /* 背景画像を固定 */
opacity: 0.8; /* 半透明 */フォント・テキスト
font-family: 'Helvetica', sans-serif; /* フォント指定 */
font-size: 16px; /* 文字の大きさ */
font-weight: bold; /* 太字 */
font-style: italic; /* 斜体 */
line-height: 1.5; /* 行間 */
letter-spacing: 0.05em; /* 文字間隔 */
text-align: center; /* 中央揃え */
text-decoration: underline; /* 下線 */
text-shadow: 1px 1px 2px rgba(0,0,0,0.2); /* テキストに影 */
white-space: nowrap; /* 折り返し禁止 */
vertical-align: middle; /* 垂直中央揃え */ボーダー・角丸
border: 1px solid #ccc; /* 枠線 */
border-width: 2px; /* 枠線の太さ */
border-style: dashed; /* 点線 */
border-color: #666; /* 枠線色 */
border-radius: 8px; /* 角丸 */
border-top: 2px solid #000;/* 枠線上だけ */位置指定・ポジショニング
position: relative; /* 相対位置 */
top: 10px; /* 上から10px */
right: 20px; /* 右から20px */
z-index: 10; /* 重なり順 */
float: left; /* 左寄せ */
clear: both;/* フロート解除 */アニメーション・トランジション
/* なめらかな変化 */
transition: all 0.3s ease-in-out;
/* フェードイン */
animation: fadeIn 1s ease forwards;
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}視覚効果
box-shadow: 0 4px 6px rgba(0,0,0,0.1); /* ボックス影 */
transform: scale(1.1); /* 拡大 */
transform-origin: center center; /* 拡大の中心 */リスト・テーブル
list-style: none; /* リストのマーク消す */
list-style-type: disc; /* 黒丸 */
list-style-position: inside; /* インデント内側 */
table-layout: fixed; /* テーブルの幅固定 */まとめ
指定する値はプロパティにより異り、値にも単位や種類が色々あるので上記はほんの一例に過ぎません。
プロパティ名で検索すれば指定の方法はすぐにみつかるので、全てを覚える必要はなく、使う度に調べていけば自然と身に付いてきます。
以上、よく使うCSSのプロパティでした。
