CSSを学び始めたものの、プロパティの一覧を眺めるだけでは「何から書けばいいの？」と迷ってしまいますよね。
CSS入門では、完成形の小さな部品を一つ作りながら、セレクター・プロパティ・値の関係を覚える方法がおすすめです。
この記事では、装飾のないHTMLから始め、背景、余白、画像、文字、ボタンを順番に整えてプロフィールカードを完成させます。パソコンとスマートフォンの両方で崩れにくく、キーボードでも操作しやすいCSSまで一緒に書いていきましょう。
CSS入門で作るプロフィールカードの完成イメージ
今回作るのは、画像、名前、肩書き、自己紹介、リンクをまとめたカードです。HTMLだけでは縦に並んだ内容ですが、CSSを追加すると中央寄せの読みやすい部品へ変わります。
上の図では、左が変更前、中央が追加するスタイル、右が完成後です。一度にすべてを書くのではなく、変更する箇所と結果を一つずつ確認します。
CSS入門を始める前に用意するもの
パソコン、コードを編集するテキストエディター、確認用のWebブラウザを用意します。作業用フォルダの中には、次の3つを配置してください。
index.html：ページの内容と構造を書くファイルstyle.css：見た目を整えるCSSファイルimages/profile.jpg：カードに表示する画像
画像は自分で用意したJPEGやPNGへ置き換えられます。ファイル名が違う場合は、後で書くsrc属性も同じ名前へ変更してください。
プロフィールカードのHTMLを書く
最初に内容と構造をHTMLで作ります。次のコードをindex.htmlへ保存してください。
<!doctype html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="style.css">
<title>プロフィールカード</title>
</head>
<body>
<main class="page">
<article class="profile-card">
<img
class="profile-card__image"
src="images/profile.jpg"
alt="湖と山の風景"
>
<h1 class="profile-card__name">山田 花子</h1>
<p class="profile-card__role">Webデザイン学習中</p>
<p class="profile-card__text">
HTMLとCSSを使い、読みやすいWebページを作る練習をしています。
</p>
<a class="profile-card__link" href="https://example.com/">
制作物を見る
</a>
</article>
</main>
</body>
</html>class属性はCSSから要素を選ぶための名前です。カード全体にはprofile-card、画像にはprofile-card__imageのように役割が分かる名前を付けています。
alt属性には、画像が伝える内容を書きます。人物写真なら誰の写真か、風景なら何が写っているかを簡潔に説明してください。
HTMLからCSSファイルを読み込む
HTMLの<head>内には、すでに次の一行を書きました。
<link rel="stylesheet" href="style.css">rel="stylesheet"は読み込むファイルがスタイルシートであること、href="style.css"はファイルの場所を表します。今回はHTMLとCSSを同じフォルダへ置くため、このパスで読み込めます。
まずstyle.cssへ次のコードを書き、ブラウザを再読み込みしてください。本文が青くなれば接続成功です。確認後、このテストコードは削除します。
body {
color: blue;
}CSSの基本構文を確認する
CSSは「どの要素を変えるか」をセレクターで選び、波括弧の中へ「何を」「どのように」変えるかを書きます。
.profile-card {
background-color: #ffffff;
}.profile-card：対象を選ぶセレクターbackground-color：背景色を変えるプロパティ#ffffff：白色を示す値
プロパティと値はコロンで区切り、宣言の末尾へセミコロンを書きます。この形を保ちながら、カードへ必要なスタイルを追加していきます。
背景とフォントを整える
変更前はブラウザ既定の白い背景とフォントです。最初に、すべての要素で幅と余白を計算しやすくし、ページ全体の文字と背景を整えます。
*,
*::before,
*::after {
box-sizing: border-box;
}
body {
margin: 0;
color: #334155;
background-color: #eef2ff;
font-family: system-ui, -apple-system, sans-serif;
line-height: 1.7;
}
.page {
display: grid;
min-height: 100vh;
padding: 2rem 1rem;
place-items: center;
}box-sizing: border-box;を指定すると、幅の中にpaddingとborderが含まれます。.pageはGridを使ってカードを画面中央へ配置しています。
カードへ幅・余白・枠線・影を付ける
次に、カードの範囲が分かるように白い背景、余白、角丸、薄い枠線と影を追加します。
.profile-card {
width: min(100%, 24rem);
padding: 2rem;
border: 1px solid #c7d2fe;
border-radius: 1.25rem;
background-color: #ffffff;
box-shadow: 0 1rem 2.5rem rgb(49 46 129 / 12%);
text-align: center;
}width: min(100%, 24rem);は、使える幅が狭いときは100%、広いときは最大24remにします。固定幅だけを書くより、スマートフォンではみ出しにくい指定です。
画像を正方形から円形へ整える
変更前の画像は元ファイルの比率で表示されます。大きさと縦横比を決め、中央部分を切り抜いて円形にしましょう。
.profile-card__image {
display: block;
width: 8rem;
aspect-ratio: 1;
margin-inline: auto;
border-radius: 50%;
object-fit: cover;
}aspect-ratio: 1;で縦横比を1対1にし、object-fit: cover;で枠を埋めるように切り抜きます。border-radius: 50%;を追加すると円形になります。
名前・肩書き・本文の読みやすさを整える
見出しと段落にはブラウザ既定の余白があります。部品の中では余白を自分で管理すると、要素間の距離を揃えやすくなります。
.profile-card__name {
margin-block: 1.25rem 0;
color: #1e1b4b;
font-size: 1.75rem;
line-height: 1.3;
}
.profile-card__role {
margin-block: 0.5rem 0;
color: #4f46e5;
font-weight: 700;
}
.profile-card__text {
margin-block: 1rem 1.5rem;
text-align: left;
}margin-blockは上側と下側の余白をまとめて指定します。名前と肩書きは中央揃え、少し長い自己紹介文は左揃えにすると読みやすくなります。
リンクをボタンのように見せる
最後にリンクへ背景色と余白を付け、操作できる場所を分かりやすくします。マウスを重ねた状態だけでなく、キーボードでフォーカスした状態も用意します。
.profile-card__link {
display: inline-block;
min-height: 2.75rem;
padding: 0.7rem 1.25rem;
border-radius: 0.75rem;
color: #ffffff;
background-color: #4f46e5;
font-weight: 700;
text-decoration: none;
transition: background-color 160ms ease, transform 160ms ease;
}
.profile-card__link:hover {
background-color: #3730a3;
transform: translateY(-2px);
}
.profile-card__link:focus-visible {
outline: 3px solid #f59e0b;
outline-offset: 3px;
}:hoverはマウスが重なった状態、:focus-visibleは主にキーボード操作でフォーカスが見えるべき状態を選びます。フォーカス枠は操作位置を伝えるため、理由なく消さないでください。
スマートフォン向けに余白と文字サイズを調整する
カードの幅はすでに画面へ収まりますが、狭い端末では内側の余白と見出しを少し小さくすると、内容を表示できる範囲が広がります。
@media (width <= 30rem) {
.profile-card {
padding: 1.5rem;
}
.profile-card__name {
font-size: 1.5rem;
}
}メディアクエリは、指定した条件に合うときだけ中のCSSを適用します。ブラウザの幅を狭くし、余白と見出しが切り替わるか確認してみてください。
動きを減らす設定へ配慮する
ボタンが少し動く演出は、利用者の設定に応じて止められます。次のCSSを末尾へ追加します。
@media (prefers-reduced-motion: reduce) {
.profile-card__link {
transition: none;
}
.profile-card__link:hover {
transform: none;
}
}prefers-reduced-motion: reduceは、端末で余計な動きを減らす設定を選んでいる利用者を検出します。CSS入門の段階から、見た目と使いやすさを一緒に考える習慣を付けましょう。
CSSが反映されないときの確認ポイント
完成形と違っても、すぐにすべてを書き直す必要はありません。次の順番で一つずつ確認します。
index.htmlとstyle.cssを保存したか<link>のhrefとCSSファイルの場所が一致しているか- HTMLの
class名とCSSのセレクターが一致しているか - コロン、セミコロン、波括弧に抜けや入力ミスがないか
- 画像ファイルの場所と
srcが一致しているか - ブラウザを再読み込みしたか
文字色を一時的に赤へ変えるなど、結果が分かりやすい一行で接続を確認する方法も有効です。ブラウザの開発者ツールを開ける場合は、対象要素にどのCSSが適用されているかも確認できます。
CSS入門後に練習したいこと
完成したコードを眺めるだけでなく、値を変えて表示結果を比べてみましょう。background-colorの色、paddingの大きさ、border-radiusの丸みを変えるだけでも、各プロパティの役割が分かります。
- カードの配色を自分の好きな色へ変える
- 自己紹介文や画像を差し替える
- 同じカードを複数並べ、FlexboxやGridで配置する
- ブラウザ幅を変え、はみ出しや読みにくい箇所を直す
- キーボードのTabキーでリンクへ移動し、フォーカス枠を確認する
CSSの公式な学習資料として、MDNの「CSSを始める」とコンテンツのスタイル設定も参照できます。動きを減らす設定はprefers-reduced-motionの解説で確認してください。
まとめ
CSS入門では、HTMLから対象を選び、プロパティと値を一つずつ追加して結果を確かめることが大切です。
- HTMLで内容と構造を作り、外部CSSファイルを読み込む
- 背景、余白、画像、文字、ボタンの順で小さく変更する
- 固定幅だけに頼らず、狭い画面でも収まる幅を指定する
- マウスだけでなく、キーボードや動きを減らす設定へ配慮する
- 反映されないときは、ファイル・パス・クラス名・構文を順番に確認する
プロフィールカードが完成したら、色や文章を自分向けに変更してみてください。「書く→保存する→再読み込みする→結果を見る」を繰り返すほど、CSSの役割が自然に身に付きます。