この記事にはプロモーションが含まれています。

【Web制作シリーズ】レスポンシブ対応サイトを完成させよう！ブレークポイント対応の実践

2025-08-042025-08-10

Web制作学習シリーズの第6回目です！

ケケンタ

今回は、レスポンシブデザインの完全マスターで、どんなデバイスでも美しく表示されるWebサイトを作成します！

前回（第5回）までの状態では、まだスマートフォンサイズには対応できておらず、画面幅を狭くしたときにレイアウトが崩れてしまいます。この記事では、モバイルファーストデザインの考え方から、ブレークポイントの設定まで、プロフェッショナルなレスポンシブサイトの作り方を学びます。

あらゆるデバイスで完璧な表示を実現しましょう！ このシリーズを通して、最終的には完全な自己紹介サイトが完成します。

この記事でできるようになること

モバイルファーストデザインの完全理解
適切なブレークポイントの設定
レスポンシブ画像の最適化
パフォーマンスの改善

この記事で完成するもの

完全なレスポンシブ対応ポートフォリオサイト（全デバイス対応）

シリーズの進行:
第5回でCSSレイアウトとスタイリングを完成させ、今回はレスポンシブデザインを実装。これでHTML・CSSが完全に仕上がり、次回はJavaScriptで動的な機能を追加します！

シリーズ目次

前回の記事

【Web制作シリーズ】CSSでポートフォリオサイトの見た目を整えよう！FlexboxとGrid

Webアニメーションの引き出しを増やすのにおすすめの書籍

動くWebデザインアイディア帳

created by Rinker

¥1,399 (2025/08/11 08:44:57時点 Amazon調べ-詳細)

ケケンタ

ケケンタのITブログでは、Webアプリ（PHP・Laravel）やWeb制作（WordPress・コーディング）について情報を発信しています。
学習中の方や実務をされている方など多くの方にアクセスいただいていますので、ぜひほかの記事も参考にしてみてください！

運動不足、気になっていませんか？

もしプログラミング学習やお仕事で運動不足が気になっているなら

連続屈伸運動がおすすめです！

ボタンにカーソルを合わせるだけで
カウントダウンが始まるタイマーをご用意してみました！

ケケンタ

無理のない範囲で、ぜひ隙間時間に屈伸運動を取り入れてみて下さい！

タイマースタート

3:00

1分 3分 5分 10分

※運動不足だと連続３分で取り組んでもかなり息が切れます。
（僕は加えて気分もちょっと悪くなりました……）
絶対にご無理の無い範囲でお取り組みください！

Laravelの教科書バージョン10対応【Laravel11サポートガイドあり】

created by Rinker

¥1,499 (2025/08/12 03:12:59時点 Amazon調べ-詳細)

学習目標

この記事で身につくスキル

モバイルファーストデザイン
ブレークポイントの設定
レスポンシブ画像の最適化
パフォーマンスの改善

モバイルファーストデザインとは

モバイルファーストの考え方

レスポンシブデザインとは？

画面サイズに応じてWebサイトのレイアウトが自動的に調整される設計手法です。スマートフォン、タブレット、パソコンなど、どんなデバイスでも美しく表示されるWebサイトを作ることができます。

モバイルファーストデザインとは？

最初にモバイルデバイス（スマートフォン）向けのデザインを作成し、その後デスクトップ向けに拡張していく設計手法です。

なぜモバイルファーストなのか？

スマートフォンでのWeb閲覧が主流になっている
モバイルから作ることで、重要なコンテンツを優先できる
パフォーマンス（読み込み速度）が向上する
検索エンジン（Google）がモバイルファーストを推奨している

モバイルファーストの利点

パフォーマンスの向上
ユーザビリティの向上
開発効率の向上
SEOの改善

従来のアプローチとの違い

メディアクエリ（@media）とは？

画面サイズやデバイスの特性に応じてCSSを変更するための機能です。例えば「画面幅が768px以上の場合」や「画面幅が768px以下の場合」など、条件を指定してスタイルを適用できます。

従来のアプローチ（デスクトップファースト）

最初にパソコン用のデザインを作り、後からスマートフォン用に調整する方法です。

/* デスクトップ用スタイル */
.container {
    width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 2fr 1fr;
}

/* モバイル用スタイル（後から追加） */
@media (max-width: 768px) {
    .container {
        width: 100%;
        grid-template-columns: 1fr;
    }
}

モバイルファーストアプローチ

最初にスマートフォン用のデザインを作り、後からパソコン用に拡張する方法です。

/* モバイル用スタイル（基本） */
.container {
    width: 100%;
    padding: 1rem;
    display: flex;
    flex-direction: column;
}

/* デスクトップ用スタイル（後から追加） */
@media (min-width: 768px) {
    .container {
        max-width: 1200px;
        margin: 0 auto;
        flex-direction: row;
    }
}

違いのポイント

max-width: 768px → 「768px以下」の条件
min-width: 768px → 「768px以上」の条件
モバイルファーストではmin-widthを使うことで、小さい画面から大きい画面へ段階的に拡張していきます

現在はモバイルファーストでWeb制作を行うことも増えてきましたが、依然としてデスクトップファーストでコーディングを行うことも多くあります。どちらを優先してWeb制作を行うのかは、案件によって変わります。

ケケンタ

個人的にはデスクトップファーストな案件の方がまだまだ多い印象なので、まずは従来の方法でしっかりレスポンシブ対応できるようになるのが望ましいのかなと思います！

モバイルファーストの設計原則

モバイルファーストでは、タッチフレンドリーなデザインを導入したり、ハンバーガーメニューを活用してメニューが導線を妨げないようにするなどの工夫が大切です。

ハンバーガーメニューとは？

3本の横線（☰）で表されるメニューボタンのことです。スマートフォンでは画面スペースを節約するために、メニューを折りたたんでハンバーガーボタンで表示・非表示を切り替えます。

参考記事

【コピペOK】ハンバーガーメニューのスライドアニメーション｜5種類【Web制作】

タッチフレンドリーとは？

スマートフォンやタブレットでタップしやすいデザインのことです。指でタップするボタンは44px×44px以上にするのが一般的です。

コンテンツファースト: 重要なコンテンツを最初に配置
シンプルなナビゲーション: ハンバーガーメニューなどの簡潔なナビ
タッチフレンドリー: 十分なタップ領域（44px以上）
読みやすいテキスト: 適切なフォントサイズとコントラスト
高速読み込み: 軽量な画像とCSS

ブレークポイントの設定

一般的なブレークポイント

ブレークポイントとは？

レスポンシブデザインでレイアウトを変更する画面幅の境界線のことです。例えば「768px以上になったら2列レイアウトにする」というように、画面サイズに応じてデザインを切り替えるポイントです。

px（ピクセル）は、画面の大きさを表す単位です。1pxは画面の1つの点を表します。スマートフォンは約320px〜400px、タブレットは約768px〜1024px、パソコンは約1024px以上が一般的です。

/* モバイルファーストのブレークポイント */

/* スマートフォン（基本） */
/* 320px - 767px */

/* タブレット */
@media (min-width: 768px) {
    /* 768px以上 */
}

/* デスクトップ */
@media (min-width: 1024px) {
    /* 1024px以上 */
}

/* 大画面デスクトップ */
@media (min-width: 1440px) {
    /* 1440px以上 */
}

各ブレークポイントの意味

768px: タブレットの縦向きから横向き、スマートフォンの大画面
1024px: タブレットの横向きからパソコンの小画面
1440px: パソコンの標準画面から大画面

コンテンツベースのブレークポイント

コンテンツベースのブレークポイントとは、デバイスの画面サイズではなく、実際のコンテンツ（内容）が読みやすくなるタイミングでレイアウトを変更する方法です。例えば「ナビゲーションが窮屈になったら横並びにする」「カードが2つ並べられる幅になったら2列にする」などです。

/* コンテンツに基づくブレークポイント */

/* ナビゲーションが崩れるポイント */
@media (min-width: 768px) {
    nav ul {
        flex-direction: row;
    }
}

/* カードが横並びになるポイント */
@media (min-width: 600px) {
    #works {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
    }
}

/* 3列レイアウトになるポイント */
@media (min-width: 900px) {
    #works {
        grid-template-columns: repeat(3, 1fr);
    }
}

fr（フラクション）は、CSS Gridで使われる単位で、利用可能な空間の割合を表します。1frは「1つの割合」、2frは「2つの割合」を意味します。例えばgrid-template-columns: 1fr 2frなら、1:2の比率で2列のレイアウトになります。

デバイス別の最適化

デバイス別の最適化とは、スマートフォン、タブレット、パソコンそれぞれに最適なスタイルを適用することです。画面サイズに応じて、フォントサイズ、余白、レイアウトを調整します。

/* デバイス別の最適化 */

/* スマートフォン */
@media (max-width: 767px) {
    body {
        padding: 1rem;
    }

    nav ul {
        flex-direction: column;
    }

    #home h1 {
        font-size: 2rem;
    }
}

/* タブレット */
@media (min-width: 768px) and (max-width: 1023px) {
    body {
        padding: 2rem;
    }

    #home h1 {
        font-size: 2.5rem;
    }
}

/* デスクトップ */
@media (min-width: 1024px) {
    body {
        padding: 3rem;
        max-width: 1200px;
        margin: 0 auto;
    }

    #home h1 {
        font-size: 3.5rem;
    }
}

remは、フォントサイズを表す単位で、ルート要素（html）のフォントサイズを基準にします。1rem = 16px（一般的なブラウザのデフォルト）です。2rem = 32px、0.5rem = 8pxになります。remを使うと、ユーザーがブラウザのフォントサイズを変更した時に、サイト全体のサイズが比例して変わります。

レスポンシブレイアウトの実装

Flexboxを使ったレスポンシブレイアウト

/* モバイルファーストのFlexboxレイアウト */

/* 基本（モバイル） */
#about {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 1rem;
}

#about article,
#about aside {
    flex: 1;
    min-height: 200px;
    background: #f0f0f0;
    border-radius: 8px;
    padding: 1rem;
}

/* タブレット */
@media (min-width: 768px) {
    #about {
        flex-direction: row;
        flex-wrap: wrap;
        gap: 2rem;
        padding: 2rem;
    }

    #about article,
    #about aside {
        flex: 1 1 calc(50% - 1rem);
    }
}

/* デスクトップ */
@media (min-width: 1024px) {
    #about {
        max-width: 1200px;
        margin: 0 auto;
        padding: 3rem;
    }

    #about article,
    #about aside {
        flex: 1 1 calc(33.333% - 1.33rem);
    }
}

calc()は、CSSで計算を行う関数です。calc(50% - 1rem)なら「50%の幅から1remを引いた値」になります。これにより、余白を考慮した正確な幅を指定できます。

要素を均等に3等分したいときなどに重宝するので覚えておくと便利です！

Gridを使ったレスポンシブレイアウト

/* モバイルファーストのGridレイアウト */

/* 基本（モバイル） */
#skills ul {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
    padding: 1rem;
}

#skills li {
    background: #f0f0f0;
    border-radius: 8px;
    padding: 1rem;
    min-height: 200px;
    text-align: center;
}

/* タブレット */
@media (min-width: 768px) {
    #skills ul {
        grid-template-columns: repeat(2, 1fr);
        gap: 2rem;
        padding: 2rem;
    }
}

/* デスクトップ */
@media (min-width: 1024px) {
    #skills ul {
        grid-template-columns: repeat(3, 1fr);
        max-width: 1200px;
        margin: 0 auto;
        padding: 3rem;
    }
}

/* 大画面 */
@media (min-width: 1440px) {
    #skills ul {
        grid-template-columns: repeat(4, 1fr);
    }
}

レスポンシブナビゲーション

レスポンシブナビゲーションとは、画面サイズに応じてナビゲーションの表示方法を変更する機能です。スマートフォンではハンバーガーメニュー、パソコンでは横並びのメニューとして表示します。

/* レスポンシブナビゲーション */

/* モバイル用ナビゲーション */
header {
    position: relative;
}

nav ul {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    background: white;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    z-index: 1000;
    list-style: none;
    margin: 0;
    padding: 0;
}

nav ul.active {
    display: block;
}

nav ul li {
    border-bottom: 1px solid #eee;
}

nav ul a {
    display: block;
    padding: 1rem;
    color: #333;
    text-decoration: none;
}

.hamburger {
    display: block;
    background: none;
    border: none;
    font-size: 1.5rem;
    cursor: pointer;
    padding: 0.5rem;
}

/* デスクトップ用ナビゲーション */
@media (min-width: 768px) {
    .hamburger {
        display: none;
    }

    nav ul {
        display: flex;
        position: static;
        background: none;
        box-shadow: none;
        width: auto;
    }

    nav ul li {
        border-bottom: none;
    }

    nav ul a {
        padding: 0.5rem 1rem;
        color: white;
    }
}

レスポンシブ画像の最適化

レスポンシブ画像の実装

レスポンシブ画像とは？

画面サイズに応じて最適な画像サイズを表示する機能です。スマートフォンでは小さな画像、パソコンでは大きな画像を表示することで、読み込み速度を改善できます。

pictureタグによる表示画像の制御

<!-- レスポンシブ画像 -->
<picture>
    <source media="(min-width: 1024px)" srcset="large.jpg">
    <source media="(min-width: 768px)" srcset="medium.jpg">
    <img src="small.jpg" alt="レスポンシブ画像">
</picture>

picture要素は、HTML5で追加された要素で、複数の画像ソースを指定できます。ブラウザが画面サイズに応じて最適な画像を自動的に選択します。

srcsetは、画像の候補を指定する属性です。画面サイズや解像度に応じて異なる画像を提供できます。

CSSにおける画像サイズの適切な制御

/* CSSでのレスポンシブ画像 */
img {
    width: 100%;
    height: auto;
    max-width: 100%;
}

/* アスペクト比を保持 */
.image-container {
    position: relative;
    width: 100%;
    height: 0;
    padding-bottom: 56.25%; /* 16:9のアスペクト比 */
}

.image-container img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

アスペクト比は、画像の縦横の比率のことです。16:9は横長、4:3はやや横長、1:1は正方形を表します。padding-bottom: 56.25%は16:9のアスペクト比（9÷16×100=56.25%）を表します。

object-fit: coverは、画像がコンテナに収まるように調整するプロパティです。画像の比率を保ちながら、コンテナを埋めるように表示します。

遅延読み込み（Lazy Loading）

遅延読み込み（Lazy Loading）

画面に表示されるまで画像の読み込みを遅らせる機能です。ページの読み込み速度を改善し、データ通信量を節約できます。

<!-- 遅延読み込み（HTML5標準） -->
<img src="placeholder.jpg" 
     alt="遅延読み込み画像"
     loading="lazy">

loading=”lazy”は、HTML5で追加された属性で、画像が画面に表示される直前まで読み込みを遅らせます。スクロールして画像が画面に入ってきた時に読み込みが開始されます。

注意: loading="lazy"はHTML5の標準機能で、JavaScriptなしで遅延読み込みを実現できます。ただし、古いブラウザでは対応していない場合があります。

WebP画像の対応

WebPとは？

Googleが開発した画像フォーマットで、JPEGやPNGよりもファイルサイズが小さく、高品質な画像を提供できます。

ただし、古いブラウザでは対応していない場合があるため、フォールバック（代替）画像を用意する必要があります。

<!-- WebP画像の対応 -->
<picture>
    <source type="image/webp" srcset="image.webp">
    <img src="image.jpg" alt="WebP対応画像">
</picture>

この例では、WebPに対応しているブラウザはimage.webpを表示し、対応していないブラウザはimage.jpgを表示します。

ポートフォリオサイトのレスポンシブ完成

これまでの知識を活用して、完全なレスポンシブポートフォリオサイトを作成しましょう。

以下は、第5回で作成したHTMLとCSSをベースにした、レスポンシブ対応用のコードです。これを既存のCSSの最後へ追加してみましょう。


/* レスポンシブデザイン */
/* タブレット対応 */
@media (max-width: 768px) {
    .navigation {
        margin: 0 1rem;
        border-radius: 0;
    }
    
    .nav-menu {
        gap: 15px;
    }
    
    .nav-menu a {
        padding: 10px 15px;
        font-size: 0.9rem;
    }
    
    section {
        padding: 3rem 1rem;
    }
    
    #home h1 {
        font-size: 2.5rem;
    }
    
    #home h2 {
        font-size: 1.2rem;
    }
    
    #home p {
        font-size: 1rem;
    }
    
    #about {
        grid-template-columns: 1fr;
        gap: 2rem;
    }
    
    #about h2 {
        font-size: 2rem;
    }
    
    #about article h3 {
        font-size: 1.3rem;
    }
    
    #about article p {
        font-size: 1rem;
    }
    
    #skills h2 {
        font-size: 2rem;
    }
    
    #skills ul {
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
        gap: 1.5rem;
    }
    
    #skills li {
        padding: 1.5rem;
        font-size: 1.1rem;
    }
    
    #works h2 {
        font-size: 2rem;
    }
    
    #works article h3 {
        font-size: 1.3rem;
    }
    
    #contact h2 {
        font-size: 2rem;
    }
    
    #contact form {
        padding: 1.5rem;
    }
}

/* スマートフォン対応 */
@media (max-width: 480px) {
    header {
        position: relative;
        transform: none;
        left: auto;
    }
    
    .navigation {
        margin: 0;
        border-radius: 0;
        padding: 15px 0;
    }
    
    .nav-menu {
        flex-direction: column;
        gap: 10px;
        align-items: center;
    }
    
    .nav-menu a {
        padding: 8px 20px;
        font-size: 0.9rem;
        width: 80%;
        text-align: center;
    }
    
    main {
        margin-top: 0;
    }
    
    section {
        padding: 2rem 1rem;
    }
    
    #home {
        min-height: 80vh;
    }
    
    #home h1 {
        font-size: 2rem;
    }
    
    #home h2 {
        font-size: 1rem;
    }
    
    #home p {
        font-size: 0.9rem;
    }
    
    #about h2 {
        font-size: 1.8rem;
    }
    
    #about article h3 {
        font-size: 1.2rem;
    }
    
    #about article p {
        font-size: 0.9rem;
    }
    
    #about aside {
        padding: 1.5rem;
    }
    
    #skills h2 {
        font-size: 1.8rem;
    }
    
    #skills ul {
        grid-template-columns: 1fr;
        gap: 1rem;
    }
    
    #skills li {
        padding: 1rem;
        font-size: 1rem;
    }
    
    #works h2 {
        font-size: 1.8rem;
    }
    
    #works article h3 {
        font-size: 1.2rem;
    }
    
    #works article p {
        font-size: 0.9rem;
    }
    
    #contact h2 {
        font-size: 1.8rem;
    }
    
    #contact form {
        padding: 1rem;
    }
    
    #contact form input,
    #contact form textarea,
    #contact form select {
        padding: 0.5rem;
        font-size: 0.9rem;
    }
    
    #contact form button {
        padding: 0.75rem 1.5rem;
        font-size: 0.9rem;
    }
    
    footer {
        padding: 1.5rem 1rem;
    }
    
    footer nav ul {
        flex-direction: column;
        gap: 1rem;
    }
}

表示内容（スマートフォンサイズ）