HTMLとCSS 実践編｜初心者でもコピペで作れる！モダンUIデザイン入門

HTMLとCSSの基礎は理解できているけれど、
「じゃあ、実際にどんなUI（画面の見た目）が作れるの？」
「コピペで使えるおしゃれなデザインを知りたい！」
そんな悩みを持つ初心者の方に向けて、この実践編を作りました。

本記事では、
HTML（骨組み）とCSS（見た目）を組み合わせて、モダンで使いやすいUIを作れるようになること
をゴールにします。

本記事では、

モダンなデザインのボタン
シャドウ付きのカードUI
Flexbox（フレックスボックス）で作る横並びレイアウト
モダンサイトで使われる余白・影・角丸のコツ

といった 実際に使えるUIサンプルを豊富に紹介 します。

まずは最小のモダンボタンを作ろう

まずは、HTMLとCSSを組み合わせて「モダンなボタンUI」を作ってみましょう。
ボタンはどのWebサイトにも必ずある基本パーツなので、
ここを押さえるだけでも UI制作の第一歩 が踏み出せます。

完成イメージ

コピペで動くコード（HTML＋CSS）

以下のコードをそのまま貼り付ければ、モダンなボタンが即完成します。

<style>
/* 外部CSSファイルに記述する場合を想定 */
.modern-btn {
    /* 1. ボックス調整 */
    padding: 12px 28px;        /* 内側の余白 */
    border: none;              /* 枠線を非表示 */
    border-radius: 8px;        /* 角丸 */
    cursor: pointer;           /* マウスカーソルを指の形に */
    
    /* 2. デザイン */
    background-color: #007bff; /* メインカラー（青） */
    color: white;              /* 文字色 */
    font-size: 16px;
    font-weight: bold;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* 影 */
    
    /* 3. 動き */
    transition: all 0.3s;      /* 変化を滑らかにする */
}

/* マウスが乗ったときのデザイン */
.modern-btn:hover {
    background-color: #0056b3; /* 色を少し濃く */
    box-shadow: 0 6px 8px rgba(0, 0, 0, 0.15); /* 影を強調 */
    transform: translateY(-2px); /* わずかに上に移動 */
}
</style>

<button class="modern-btn">クリック</button>

<style>

/* 外部CSSファイルに記述する場合を想定 */

.modern-btn {

/* 1. ボックス調整 */

padding: 12px 28px; /* 内側の余白 */

border: none; /* 枠線を非表示 */

border-radius: 8px; /* 角丸 */

cursor: pointer; /* マウスカーソルを指の形に */

/* 2. デザイン */

background-color: #007bff; /* メインカラー（青） */

color: white; /* 文字色 */

font-size: 16px;

font-weight: bold;

box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* 影 */

/* 3. 動き */

transition: all 0.3s; /* 変化を滑らかにする */

}

/* マウスが乗ったときのデザイン */

.modern-btn:hover {

background-color: #0056b3; /* 色を少し濃く */

box-shadow: 0 6px 8px rgba(0, 0, 0, 0.15); /* 影を強調 */

transform: translateY(-2px); /* わずかに上に移動 */

}

</style>

ポイント解説

padding（内側の余白）
要素の内側の余白を指定します。文字と枠線の間に空間を作り、ボタンを押しやすく、見やすくするために必須です。
background-color（背景色）
背景色を指定します。
border-radius（角丸）
要素の角を丸くします。角丸は、モダンでやさしい印象のUIには欠かせない要素です。値が大きいほど丸みが強くなります。
transition
hover（マウスが乗った時）などの状態変化を、一瞬で切り替えるのではなく、滑らかに（アニメーションのように）変化させるためのプロパティです。
box-shadow
影（シャドウ）を入れるだけで、ボタンが浮いて見え、立体感が生まれます。

ボタンは UI の基礎中の基礎。
ここを押さえれば、あとでフォームやメニューを作るときに必ず役立ちますよ。

ほーく

カードUIを作ってみよう（モダンUIの基本）

ボタンの次は、カードUI を作ってみましょう。
カードUIは、ブログの一覧表示や商品紹介、プロフィール欄など、
あらゆる場面で使われる「モダンUIの基礎パーツ」です。

完成イメージ

カードタイトル

FlexboxやモダンUIの作り方を実際に手を動かして学びます。このカード自体がUIデザインの基本です。

詳しく見る

コピペで動くコード（HTML＋CSS）

以下のコードをそのまま貼り付ければ、モダンなカードUI が即完成します。

<div class="card">
    <h4 class="card-title">カードタイトル</h4>
    <p class="card-text">FlexboxやモダンUIの作り方を実際に手を動かして学びます。このカード自体がUIデザインの基本です。</p>
    <a href="#" class="card-link">詳しく見る</a>
</div>

<style>
.card {
    width: 300px; /* カードの幅 */
    background: #ffffff;
    
    /* 1. モダンデザインの鍵 */
    border-radius: 12px; /* 角丸を少し大きめに */
    box-shadow: 0 10px 15px rgba(0, 0, 0, 0.08); /* ぼかしの効いた、やさしい影 */
    
    /* 2. ボックス調整 */
    padding: 20px;
}

.card-title {
    font-size: 20px;
    color: #333;
    line-height: 1.4; /* 行の高さ */
    margin-bottom: 10px; /* 下の余白 */
}

.card-text {
    color: #666;
    line-height: 1.6; /* 本文は行間を広めに見やすく */
    margin-bottom: 15px;
}

.card-link {
    color: #007bff;
    text-decoration: none; /* 下線を消す */
    font-weight: bold;
}
</style>

<h4 class="card-title">カードタイトル</h4>

<p class="card-text">FlexboxやモダンUIの作り方を実際に手を動かして学びます。このカード自体がUIデザインの基本です。</p>

<a href="#" class="card-link">詳しく見る</a>

</div>

<style>

.card {

width: 300px; /* カードの幅 */

background: #ffffff;

/* 1. モダンデザインの鍵 */

border-radius: 12px; /* 角丸を少し大きめに */

box-shadow: 0 10px 15px rgba(0, 0, 0, 0.08); /* ぼかしの効いた、やさしい影 */

/* 2. ボックス調整 */

padding: 20px;

}

.card-title {

font-size: 20px;

color: #333;

line-height: 1.4; /* 行の高さ */

margin-bottom: 10px; /* 下の余白 */

}

.card-text {

color: #666;

line-height: 1.6; /* 本文は行間を広めに見やすく */

margin-bottom: 15px;

}

.card-link {

color: #007bff;

text-decoration: none; /* 下線を消す */

font-weight: bold;

}

</style>

デザインのポイント

box-shadow（影）

要素の周囲に影をつけ、浮いているような立体感を演出します。
モダンデザインの影は薄く、ぼかしを強くするのが主流です。
記述例:0 10px 15px rgba(0, 0, 0, 0.08)
- 0: 横の移動
- 10px: 縦の移動
- 15px: 影のぼかし
- rgba(0, 0, 0, 0.08): 色（黒）と透明度（0.08）。透明度を低くするのがモダンなコツです。

border-radius（角丸）

カードはボタンよりも面積が大きいため、少し大きめの値（例：12px）を指定すると、より洗練された印象になります。

line-height（行間）

line-height（行の高さ）を広く取ると、本文が読みやすくなります。
marginとpaddingを使って、情報と情報の間に適切な空間（余白）を設けることが、情報の整理に直結します。

ちょい足しでもっとモダンにするコツ

カードにホバーアニメーションを追加する

.card:hover {
  transform: translateY(-2px);
  transition: 0.2s ease;
}

.card:hover {

transform: translateY(-2px);

transition: 0.2s ease;

}

カードがふわっと浮く演出ができます。

カード内に画像を入れる応用

<img src="sample.jpg" class="card-img">

1	<img src="sample.jpg" class="card-img">

画像＋テキストの構成は、記事一覧や商品紹介にも使えます。

Flexboxで横並びレイアウトを作ろう

モダンなUIを作るうえで欠かせないのが Flexbox（フレックスボックス） です。
Flexboxが登場したおかげで、要素の横並びや中央揃えなどの複雑なレイアウトでも たった数行 の CSS で実現できるようになりました！

Flexboxとは？

Flexbox (Flexible Box Layout Module) は、要素を柔軟に配置し、スペースを自動で調整してくれるCSSの仕組みです。これを使えば、「要素を画面の中央に置きたい」「3つの要素を均等な間隔で横に並べたい」といったレイアウトの悩みが一瞬で解決します。

完成イメージ

メインコンテンツ

コピペで動くコード（HTML＋CSS）

以下のコードをそのまま貼り付けれてください。
親要素（div）に display: flex; を指定するのが、Flexboxの第一歩です。

<div class="flex-container">
    <div class="main-content">メインコンテンツ</div>
    <div class="sidebar">サイドバー</div>
</div>

<style>
.flex-container {
    display: flex; /* ★これだけで子要素が横並びになる！★ */
    gap: 20px;     /* 子要素間の余白 */
    width: 80%;
    margin: 0 auto; /* 親要素自体を中央に */
    border: 1px solid #ccc; /* わかりやすくするための枠線 */
    padding: 20px;
}

.main-content {
    flex: 2; /* 領域を2の比率で占める */
    background: #e9f0f9;
    padding: 15px;
}

.sidebar {
    flex: 1; /* 領域を1の比率で占める */
    background: #f0f9e9;
    padding: 15px;
}
</style>

<div class="main-content">メインコンテンツ</div>

<div class="sidebar">サイドバー</div>

</div>

<style>

.flex-container {

display: flex; /* ★これだけで子要素が横並びになる！★ */

gap: 20px; /* 子要素間の余白 */

width: 80%;

margin: 0 auto; /* 親要素自体を中央に */

border: 1px solid #ccc; /* わかりやすくするための枠線 */

padding: 20px;

}

.main-content {

flex: 2; /* 領域を2の比率で占める */

background: #e9f0f9;

padding: 15px;

}

.sidebar {

flex: 1; /* 領域を1の比率で占める */

background: #f0f9e9;

padding: 15px;

}

</style>

ポイント解説

display: flex
- 親要素（flex-container）にこれを指定するだけで、子要素（main-contentとsidebar）が魔法のように横並びになります。
flex: 2; / flex: 1;
- 子要素に指定します。「2:1」の比率で幅を分割してね、という意味です。これで複雑な幅計算は不要になります。
gap (ギャップ):
- 子要素間の間隔を一括で指定できます。以前はmarginで複雑に調整する必要がありましたが、今はこのgapが主流です。

スマホ対応（簡単なレスポンシブの入り口）

レスポンシブデザイン（スマホやタブレットの画面サイズに合わせてレイアウトを変えること）も、Flexboxなら簡単です。

画面が狭くなったら、横並びを縦並びに戻したいですよね？

Flexboxの親要素に flex-direction: column; を指定するだけで、縦並びに戻すことができます。

/* 例：スマホサイズ（768px以下）になったら縦並びに戻す */
@media (max-width: 768px) {
    .flex-container {
        flex-direction: column; /* 縦並びに戻す！ */
    }
}

/* 例：スマホサイズ（768px以下）になったら縦並びに戻す */

@media (max-width: 768px) {

.flex-container {

flex-direction: column; /* 縦並びに戻す！ */

}

応用：中央揃えレイアウト（モダンUIに必須）

中央揃えにしたい場合は、こう書きます。

.container {
  display: flex;
  justify-content: center;  /* 横方向の中央 */
  align-items: center;       /* 縦方向の中央 */
}

.container {

display: flex;

justify-content: center; /* 横方向の中央 */

align-items: center; /* 縦方向の中央 */

}

Flexboxのおかげで、要素の横並びや中央揃えが簡単に実現できます。

ほーく

色・余白・影で「モダンっぽさ」を出す方法

余白（padding・margin）の黄金比

余白を 8px / 16px / 24px / 32px といった「8の倍数」に統一します。
これにより、デザイン全体に統一感とリズムが生まれます。

Googleの Material Design や、iOS/Android など
多くのデザインシステムがこのルールを採用しています。

また、要素の内側の余白（padding）を、外側の余白（margin）よりも少し広く取るように意識すると、窮屈感がなくなります。

背景色とアクセントカラーの選び方

ベースカラーは白か極薄い灰色
背景色を真っ白（#ffffff）にするのではなく、ごく薄い灰色（例：#f4f4f4）にすることで、
その上に置いた白いカードUIが際立ち、影が自然に見えます。
アクセントカラーは一貫して
ボタンやリンクの色（例：青 007bff）を「このサイトのテーマカラー」として統一して使います。

影（box-shadow）は「薄く・小さく」がモダンの基本

影は薄く、濃くしない
影の透明度をrgba(0, 0, 0, 0.05)〜0.1程度に抑えます。濃い影は古く、重たい印象を与えます。
影は一つだけ
要素の「下側」または「全体」に影を一つだけつけて、光源を意識します。複数の影は使わず、シンプルに保ちましょう。

角丸（border-radius）は「要素のサイズに合わせる」

角丸は UI の雰囲気を大きく左右します。

ボタンや小さな要素: 4px〜8px
カードや大きなボックス: 10px〜16px
完全な丸: 50%

要素のサイズが大きくなるほど、角丸の値を大きくするとバランスが良くなります。

UI がきれいに整わないときは、コードより 余白の取り方 を疑ってみましょう。

ほーく

よくあるつまずきQ&A

この章では、実際に制作中に起こりやすい問題を
Q&A形式で一気に解決 できるようにまとめました。

Q1. CSSが反映されません。なぜですか？

考えられる原因は大きく3つあります。

原因1：セレクタが間違っている
HTML側の class 名・id 名と CSS が一致していない可能性があります。
原因2：CSSの書く場所が違う
CSSファイルを正しく読み込めているか（ファイル名や場所が合っているか）を確認してください。
原因3：キャッシュが残っている
ブラウザが古いデータを保持している場合があります。
更新しても直らないときは Ctrl + Shift + R（強制リロード） を試しましょう。

Q2. ボタンやカードの余白が変わりません

padding と margin の違い を混同していませんか？

padding：要素の内側の余白（中身との距離）
margin：要素の外側の余白（ほかの要素との距離）

Q3. きれいに横に並びません

親要素（囲んでいるdiv）にdisplay: flexを指定してください。

Q4. CSSのどこを変えたらUIが良くなるのか分かりません

最初に見るべき場所は 3つだけです：

padding（内側の余白）
border-radius（角丸）
background・color（配色）

この3つを整えるだけで、UIは一気にモダンになります。

作ったUIをJavaScriptで動かすには？（次のステップ）

実践編を通して、HTMLとCSSで「Webページの見た目」を思い通りに作れるようになりました。
しかし、このボタンをクリックしても、まだ何も起こりません。
Webに「動き」を加えること。それが、次のステップである JavaScript の役割です。

例えば、

ボタンがクリックされたら、カードUIを非表示にする
入力フォームに文字が入力されたら、リアルタイムで文字数をカウントする

といった処理は、すべてJavaScriptのイベント処理（addEventListenerなど）で実現できます。

JavaScriptの基礎を最短で押さえたい方はこちら ▼
JavaScript入門｜初心者が最初に読むべき超やさしい基礎解説

まとめ：HTMLとCSSが分かればモダンUIは作れる

本記事では、HTMLとCSSの基礎を踏まえたうえで、
初心者でもコピペで作れる モダンUIデザインの実践方法 を紹介しました。

HTML/CSSでUIが作れるようになると、
Web制作・JavaScript学習・ツール開発など、
あなたの学習の幅は一気に広がります。

次のステップは、今回のUIをベースに、
JavaScriptで動きを加えること です。

この記事が、あなたのUI制作の第一歩になれば幸いです。

JavaScriptの基礎を最短で押さえたい方はこちら ▼
【初心者向け】JavaScript基礎入門｜最初に覚えるべき基本だけをわかりやすく解説

: JavaScript入門｜初心者が最初に読むべき超やさしい基礎解説
「JavaScriptを学びたいけれど、何から始めればいいのか分からない…」「プログラミングが初めてでも理解できるのかな？」そんな不安を感じているあなたへ向けて、この記事では JavaScriptの ...

基礎文法を詳しく知りたい方はこちら ▼
JavaScript初心者でもできる！文字数カウンターを作りながら基礎文法を学ぼう

: JavaScript初心者でもできる！文字数カウンターを作りながら基礎文法を学ぼう
「JavaScript を勉強したいけど、文法の説明だけ読んでも正直よく分からない…」「手を動かしながら学べる入門記事が欲しい！」そんな方のために、この記事では「文字数カウンター」を自作しながら ...

HTMLとCSS 実践編｜初心者でもコピペで作れる！モダンUIデザイン入門

まずは最小のモダンボタンを作ろう

完成イメージ

コピペで動くコード（HTML＋CSS）

ポイント解説

カードUIを作ってみよう（モダンUIの基本）

完成イメージ

コピペで動くコード（HTML＋CSS）

デザインのポイント

ちょい足しでもっとモダンにするコツ

カードにホバーアニメーションを追加する

カード内に画像を入れる応用

Flexboxで横並びレイアウトを作ろう

Flexboxとは？

完成イメージ

コピペで動くコード（HTML＋CSS）

ポイント解説

スマホ対応（簡単なレスポンシブの入り口）

応用：中央揃えレイアウト（モダンUIに必須）

色・余白・影で「モダンっぽさ」を出す方法

余白（padding・margin）の黄金比

背景色とアクセントカラーの選び方

影（box-shadow）は「薄く・小さく」がモダンの基本

角丸（border-radius）は「要素のサイズに合わせる」

よくあるつまずきQ&A

Q1. CSSが反映されません。なぜですか？

Q2. ボタンやカードの余白が変わりません

Q3. きれいに横に並びません

Q4. CSSのどこを変えたらUIが良くなるのか分かりません

作ったUIをJavaScriptで動かすには？（次のステップ）

おすすめの学習リソース｜もっとスキルを伸ばしたいあなたへ

スラスラわかるHTML＆CSSのきほん

1冊ですべて身につくHTML & CSSとWebデザイン入門講座

まとめ：HTMLとCSSが分かればモダンUIは作れる

関連記事

VSCode JavaScript拡張機能｜初心者はまずこれだけ入れればOK【厳選3つ】

Visual Studio Code（VSCode）インストール方法｜初心者でも5分でできる日本語化ガイド【Windows/Mac 両対応】

HTMLとCSS 実践編｜初心者でもコピペで作れる！モダンUIデザイン入門

HTMLとCSS 基礎入門｜初心者でも今日から作れる！わかりやすい超入門ガイド

JavaScript初心者でもできる！文字数カウンターを作りながら基礎文法を学ぼう