コーポレートサイトをコーディングしよう

このレッスンでは、シンプルなコーポレートサイトをコーディングしながら、実践的なスキルを身につけていきます。

最終的なデザインはコチラからご覧ください。

レスポンシブ対応させるので、先にスマホ、その後にPC用のコーディングをしていきます。

レスポンシブとは、画面の幅が異なる、どの端末でも表示が崩れないようにすることです。

フォルダの作成

任意の場所に、「my-company」フォルダを作成して、その中にindex.html、assetsフォルダを作成してください。

assetsフォルダの中にimagesフォルダとCSSフォルダを作成してください。

ベースとなるHTML/CSSを作成

まずはindex.htmlに以下のように記述してください。

index.html
<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My Company</title>
</head>
<body>
    <div class="container">
        <header class="header">

        </header>
        <main class="main">

        </main>
        <footer class="footer">
            
        </footer>
    </div>
</body>
</html>

CSSフォルダの中に、style.cssを追加してください。

style.css
@charset "utf-8";

body {
    margin: 0;
    line-height: 1.5;
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

img {
    max-width: 100%;
    vertical-align: middle;
    height: auto;
}

bodyにはデフォルトでマージンが入ってしまうので、margin: 0;でマージンを削除します。

line-heightは単位なしで指定するのがおすすめです。

全ての要素にbox-sizing: border-box;を適用させて、レイアウトしやすくします。

img要素は親要素からはみ出ないようにmax-width: 100%を指定し、余計な余白が入らないようにvertical-align: middle;を指定します。

index.html
<!-- 省略-->
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My Company</title>
    <link rel="stylesheet" href="./assets/css/style.css">
</head>
<!-- 省略-->

headでstyle.cssを読み込む記述を追加します。

Webフォントの設定(Google Fonts)

今回制作するサイトではWebフォントのGoogle Fontsを使いますので、以下のページにアクセスしてください。

https://fonts.google.com/noto/specimen/Noto+Sans+JP

「Full axis」を選択し、右サイドバーのコードをindex.htmlとstyle.cssにコピーします。

index.html
<!-- 省略-->
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My Company</title>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100..900&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="./assets/css/style.css">
</head>
<!-- 省略-->
style.css
/* 省略 */
body {
    font-family: 'Noto Sans JP', sans-serif;
    margin: 0;
    line-height: 1.5;
}
/* 省略 */

ヘッダーを作成

header要素を以下のように記述してください。

index.html
        <!-- 省略 -->
        <header class="header">
            <div class="header__inner">
                <h1 class="site-name">
                    <a href="#">
                        My Company
                    </a>
                </h1>
                <nav class="global-nav">
                    <ul class="global-nav__list">
                        <li class="global-nav__item">
                            <a href="#">サービス</a>
                        </li>
                        <li class="global-nav__item">
                            <a href="#">会社案内</a>
                        </li>
                        <li class="global-nav__item">
                            <a href="#">ブログ</a>
                        </li>
                        <li class="global-nav__item">
                            <a href="#">お問い合わせ</a>
                        </li>
                    </ul>
                </nav>
                <button class="hamburger">
                    <span class="hamburger__line"></span>
                    <span class="hamburger__line"></span>
                    <span class="hamburger__line"></span>
                </button>
            </div>
        </header>
        <!-- 省略 -->

クラス名はBEMの形式で記述します。

header要素はその名の通りヘッダーに使用する要素です。

ナビゲーションメニューにはnav要素を使用します。

ハンバーガーメニューはクリックできるようにするため、button要素で作成します。button要素にすることでキーボード操作でフォーカスがあたるようになります。

style.css
/* 省略 */
.header {
    padding: 16px 0;
}
.header__inner {
    width: 90%;
    max-width: 1200px;
    margin: auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

headerの上下には16pxの余白をあけます。

内側は左右に5%の余白が入るようにするため、90%に設定。今回のデザインは1200px以上は広がらないようになっているので、max-width: 1200pxに設定しました。

サイト名とハンバーガーは横方向に配置するため、display: flexを指定。

align-items: center;で縦方向に中央寄せにして、justify-content: space-between;でサイト名を左端、ハンバーガーメニュー(スマホではグローバルナビ)が右に来るようにしました。

style.css
/* 省略 */
.site-name {
    margin: 0;
    font-size: 20px;
}
.site-name a {
    color: currentColor;
    text-decoration: none;
}

サイト名のCSSです。currentColorは親要素で指定したcolorを引き継ぐことができます。

親要素であるbody要素でcolorを変更した場合、サイト名の色も同時に変更されるので、後から文字色が変更になった場合楽です。

style.css
/* 省略 */
.global-nav {
    display: none;
}

グローバルナビは一旦非表示にします。ウィンドウサイズが広くなった時に表示させますが、それは後ほどやります。

style.css
/* 省略 */
.hamburger {
    appearance: none;
    border: none;
    background-color: transparent;
    box-shadow: none;
    width: 30px;
    height: 30px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    cursor: pointer;
}
.hamburger__line {
    display: block;
    width: 24px;
    height: 2px;
    background-color: currentColor;
}

button要素には、デフォルトでCSSが適用されており、ブラウザによって若干CSSの内容が異なります。

そのデフォルトCSSをリセットするために、appearance: none;を指定しています。また、border、background-color、box-shadowなどが入らないようにnoneを指定しています。

ハンバーガーのライン幅は24pxですが、指でタップしやすいように30x30pxのサイズにしています。

ラインは上下左右の真ん中に寄せるので、レイアウトがしやすいようフレックスボックスにしています。

flex-direction: column;で縦に並ぶように変更し、align-items: center;とjustify-content: center;で中央に配置されるようになります。

gap: 6px;でラインの間に6pxの隙間を入れます。

hamburger__lineクラスに幅と高さを指定するために、display:blockを適用します。

これでスマホのヘッダーは完成です。

メインビジュアルの作成

次にメインビジュアルの作成をします。

画像の指定はないので、pixabayのようなフリー素材サイトから、コーポレートサイトっぽい画像をダウンロードしておいてください。

スマホ用の画像とPC用の画像を別に用意して、PC用の画像にはmv-pc.jpg、スマホ用の画像にはmv-sp.jpgと名前をつけてください。

header要素の直後に以下のコードを追加してください。

index.html
<!-- 省略 -->
        <div class="main-visual">
            <picture class="main-visual__img">
                <source srcset="assets/images/mv-pc.jpg" media="(min-width: 768px)" />
                <img src="assets/images/mv-sp.jpg" alt="メインビジュアル画像" decoding="async">
            </picture>
        </div>
<!-- 省略 -->

picture要素とsource要素を使えば、簡単に画像のレスポンシブ対応ができます。

source要素のsrc属性には使用する画像のパス、media属性には、どのメディアで表示させるかを指定します。

min-width: 768pxというのは、「ウィンドウの幅が768px以上になった時」という意味になります。

sourceのmedia属性に該当しない場合は、imgタグの画像が読み込まれます。

picture要素はsource要素やimg要素を囲む形で使用します。

ファーストビュー(ページを開いて最初に見えるコンテンツ)の画像には、decoding=”async”を入れることで、下のコンテンツの読み込みがブロックされるのを防ぎます。

style.css
/* 省略 */
.main-visual img {
    width: 100%;
}

メインビジュアル画像は横幅いっぱいに広がるようにし、PCの画像は非表示にします。

メインコンテンツの作成

次にメインコンテンツを作成していきます。

index.html
        <!-- 省略 -->
        <main class="main">
            <section class="information">
                <div class="information__inner">
                    <h2 class="information__ttl">お知らせ</h2>
                    <div class="info-archive">
                        <ul class="info-archive__list">
                            <li class="info-archive__item">
                                <p class="info-archive__item-date">
                                    <time datetime="2024-01-02">2024年1月2日</time>
                                </p>
                                <div class="info-archive__item-body">
                                    <p class="info-archive__item-ttl">
                                        <a href="#">採用サイトを開設しました。</a>
                                    </p>
                                </div>
                            </li>
                            <li class="info-archive__item">
                                <p class="info-archive__item-date">
                                    <time datetime="2024-01-02">2024年1月1日</time>
                                </p>
                                <div class="info-archive__item-body">
                                    <p class="info-archive__item-ttl">
                                        <a href="#">ホームページを開設しました。</a>
                                    </p>
                                </div>
                            </li>
                        </ul>
                    </div>
                </div>
            </section>
        </main>

ここはお知らせを表示するセクションなので、sectionタグを使います。

sectionタグの中には必ずh1~h6のいずれかが入る必要があります。見出しがないセクションにはsectionタグは使用できません。

時間にはtimeタグとdatetime属性を使い、検索エンジンに公開日を伝えるようにします。

今回リンク先のページは作成しないので、リンクのURLは仮で#にしています。

style.css
/* 省略 */
.information {
    padding: 20px 5% 4px;
    background-color: #F7F7F7;
}
.information__ttl {
    margin: 0;
    font-size: 18px;
    text-align: center;
}
.info-archive {
    margin-top: 6px;
}
.info-archive__list {
    margin: 0;
    padding: 0;
    list-style: none;
}
.info-archive__item {
    padding: 16px 0;
}
.info-archive__item + .info-archive__item {
    border-top: 1px solid #ddd;
}
.info-archive__item-date {
    margin: 0;
}
.info-archive__item-body {
    margin-top: 0;
}
.info-archive__item-ttl {
    margin: 0;
    font-size: 16px;
    font-weight: 700;
}
.info-archive__item-ttl a {
    color: currentColor;
    text-decoration: none;
}

.info-archive__item + .info-archive__item この指定は、info-archive__itemの次のinfo-archive__itemにスタイルを適用させます。

つまり、最初のinfo-archive__itemにはborder-topが適用されず、2番目以降のinfo-archive__itemにborder-topが適用されるようになります。

そのほかは基本的なコードになるので、説明は省きます。

index.html
        <!-- 省略 -->
            <section class="section section--service">
                <div class="section__inner">
                    <h2 class="section-ttl">事業内容</h2>
                    <div class="service-list">
                        <div class="service-list__item">
                            <div class="service-list__item-media">
                                <img src="./assets/images/service.jpg" alt="事業内容のイメージ画像" loading="lazy" />
                            </div>
                            <div class="service-list__item-body">
                                <h3 class="service-list__item-heading">
                                    企業の成長を支援
                                </h3>
                                <p class="service-list__item-desc">
                                    My Companyは、あなたの企業が成長するようアドバイスいたします。
                                </p>
                                <p class="service-list__item-link">
                                    <a href="#">Read More</a>
                                </p>
                            </div>
                        </div>
                        <div class="service-list__item">
                            <div class="service-list__item-media">
                                <img src="./assets/images/service.jpg" alt="事業内容のイメージ画像" loading="lazy" />
                            </div>
                            <div class="service-list__item-body">
                                <h3 class="service-list__item-heading">
                                    企業の成長を支援
                                </h3>
                                <p class="service-list__item-desc">
                                    My Companyは、あなたの企業が成長するようアドバイスいたします。
                                </p>
                                <p class="service-list__item-link">
                                    <a href="#">Read More</a>
                                </p>
                            </div>
                        </div>
                    </div>
                </div>
            </section>

ファーストビュー以外の画像には、loading=”lazy”を入れるのがおすすめです。画像が遅延して読み込まれるので、ページの表示速度が速くなります。

ファーストビューの画像にloading=”lazy”を指定すると逆効果になるのでメインビジュアルには入れません。

style.css
/* 省略 */
.section {
    padding: 60px 0;
}
.section__inner {
    width: 90%;
    max-width: 1200px;
    margin: auto;
}
.section-ttl {
    margin: 0;
    font-size: 20px;
    text-align: center;
}

事業内容以下のセクションの余白や見出しのスタイルはほぼ同じなので、汎用的な命名にしています。

ヘッダーの内側同様、コンテンツは1200px以上広がらないようにしています。

ボタンの色は他の要素でも使いますので、変数にしておきます。

文字コード指定の下に以下のコードを追加します。

style.css
@charset "utf-8";

:root {
    --color-primary: #486BC6;
}
/* 省略 */

CSS変数には–から始まる任意の名前をつけます。

style.css
/* 省略 */
.service-list {
    margin-top: 32px;
}
.service-list__item + .service-list__item {
    margin-top: 50px;
}
.service-list__item-media {
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
}
.service-list__item-media img {
    width: 100%;
}
.service-list__item-heading {
    margin: 20px 0 0;
}
.service-list__item-desc {
    margin: 14px 0 0;
}
.service-list__item-link {
    margin: 20px 0 0;
}
.service-list__item-link a {
    display: inline-block;
    background-color: var(--color-primary);
    color: #fff;
    text-decoration: none;
    font-weight: 700;
    padding: 8px 14px 9px;
}

変数はvar(変数名)の形で使用します。var(変数名, デフォルト値)の形にすると、変数が定義されていないかった場合デフォルト値が適用されます。

事業内容の画像は、スマホでは画面幅になっています。

100vwはウィンドウの幅100%という指定です。

calc()の中には計算式を入れることができ、50%で画像を画面中央に寄せ、-50vwで画像を画面の半分左に寄せています。

width: 100vw;
margin-left: calc(50% - 50vw);
margin-right: calc(50% - 50vw);

画像画面いっぱいに広げたい時に使えるので覚えておきましょう。

100vwはスクロールバーを含めるため、100vw幅の要素があるとスクロールバーの分横スクロールが発生してしまいます。

style.css
/* 省略 */
body {
    font-family: 'Noto Sans JP', sans-serif;
    margin: 0;
    line-height: 1.5;
    overflow-x: clip;
}

はみ出た部分はスクロールではなく隠すようにするため、overflow-x: clipを指定します。

overflow-x: hiddenでも隠れますが、position: stickyが使えなくなるのでclipを指定するのがおすすめです。

index.html
        <!-- 省略 -->
            <section class="section section--about">
                <div class="section__inner">
                    <h2 class="section-ttl">会社案内</h2>
                    <div class="about-list">
                        <div class="about-list__item">
                            <a href="#" class="about-list__item-link">
                                <p class="about-list__item-text">
                                    会社概要
                                </p>
                            </a>
                        </div>
                        <div class="about-list__item">
                            <a href="#" class="about-list__item-link">
                                <p class="about-list__item-text">
                                    代表メッセージ
                                </p>
                            </a>
                        </div>
                        <div class="about-list__item">
                            <a href="#" class="about-list__item-link">
                                <p class="about-list__item-text">
                                    アクセス
                                </p>
                            </a>
                        </div>
                    </div>
                </div>
            </section>

特に説明が必要な箇所はないため、HTMLの解説は省きます。

style.css
/* 省略 */
.section--about {
    padding-top: 0;
}
.about-list {
    margin-top: 30px;
}
.about-list__item + .about-list__item {
    margin-top: 40px;
}
.about-list__item-link {
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    text-decoration: none;
    aspect-ratio: 1 / 1;
    background-image: url("../images/about.jpg");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    position: relative;
}
.about-list__item-link::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,.5);
    z-index: 1;
}
.about-list__item-text {
    font-size: 20px;
    font-weight: 700;
    position: relative;
    z-index: 2;
}

テキストを楽に中央配置させるために、フレックスボックスを使用しています。

aspect-ratioはアスペクト比を指定するプロパティで、幅/高さで指定します。

ここでは、正方形になるように1/1のアスペクト比にしています。

擬似要素でボックスと同じサイズの要素作り、半透明の黒をのせています。rgba()の4つ目の数字で不透明度を設定できます。

index.html
        <!-- 省略 -->
            <section class="section section--blog">
                <div class="section__inner">
                    <h2 class="section-ttl">ブログ</h2>
                    <div class="blog-list">
                        <div class="blog-list__item">
                            <a href="#" class="blog-list__item-link">
                                <div class="blog-list__item-media">
                                    <img src="./assets/images/blog.jpg" alt="アイキャッチ画像" loading="lazy" />
                                </div>
                                <div class="blog-list__item-body">
                                    <p class="blog-list__item-date">
                                        <time datetime="2024-01-03">2024-01-03</time>
                                    </p>
                                    <p class="blog-list__item-ttl">
                                        SEOに効果があるオウンドメディアの運営方法とは
                                    </p>
                                    <div class="blog-list__item-cats">
                                        <span class="blog-list__item-cat">マーケティング</span>
                                    </div>
                                </div>
                            </a>
                        </div>
                        <div class="blog-list__item">
                            <a href="#" class="blog-list__item-link">
                                <div class="blog-list__item-media">
                                    <img src="./assets/images/blog.jpg" alt="アイキャッチ画像" loading="lazy" />
                                </div>
                                <div class="blog-list__item-body">
                                    <p class="blog-list__item-date">
                                        <time datetime="2024-01-02">2024-01-02</time>
                                    </p>
                                    <p class="blog-list__item-ttl">
                                        成果が出るWebマーケティングの手法とは
                                    </p>
                                    <div class="blog-list__item-cats">
                                        <span class="blog-list__item-cat">マーケティング</span>
                                    </div>
                                </div>
                            </a>
                        </div>
                        <div class="blog-list__item">
                            <a href="#" class="blog-list__item-link">
                                <div class="blog-list__item-media">
                                    <img src="./assets/images/blog.jpg" alt="アイキャッチ画像" loading="lazy" />
                                </div>
                                <div class="blog-list__item-body">
                                    <p class="blog-list__item-date">
                                        <time datetime="2024-01-01">2024-01-01</time>
                                    </p>
                                    <p class="blog-list__item-ttl">
                                        財務諸表を読んで会社の財務を把握しよう
                                    </p>
                                    <div class="blog-list__item-cats">
                                        <span class="blog-list__item-cat">会計</span>
                                    </div>
                                </div>
                            </a>
                        </div>
                    </div>
                </div>
            </section>
style.css
/* 省略 */
.section--blog {
    background-color: #f7f7f7;
}
.blog-list {
    margin-top: 30px;
}
.blog-list__item+.blog-list__item {
    margin-top: 30px;
}
.blog-list__item-link {
    color: currentColor;
    text-decoration: none;
}
.blog-list__item-media img {
    width: 100%;
    aspect-ratio: 38 / 27;
    object-fit: cover;
}
.blog-list__item-body {
    padding: 20px;
    background-color: #fff;
}
.blog-list__item-date {
    margin: 0;
    font-size: 14px;
}
.blog-list__item-ttl {
    margin: 6px 0 0;
    font-size: 16px;
    font-weight: 700;
}
.blog-list__item-cats {
    margin-top: 14px;
}
.blog-list__item-cat {
    display: inline-block;
    background-color: var(--color-primary);
    color: #fff;
    padding: 2px 4px;
    font-size: 14px;
}

サムネイル画像は38:27の比率で固定し、画像が切り抜かれて表示するようにobject-fit: cover;を指定しています。

フッターの作成

フッターは特に

index.html
        <!-- 省略 -->
        <footer class="footer">
            <div class="footer__inner">
                <p class="copyright">
                    ©2024- My Company
                </p>
            </div>
        </footer>
        <!-- 省略 -->
style.css
/* 省略 */
.footer {
    background-color: var(--color-primary);
    padding: 14px 0;
}
.footer__inner {
    width: 90%;
    max-width: 1200px;
    margin: auto;
}
.copyright {
    margin: 0;
    color: #fff;
    text-align: center;
    font-size: 14px;
}

フッターは特に難しいコードはないので、解説は省きます。

レスポンシブ対応させる

ここまではスマホのCSSだけを書いてきましたが、次はPCのレイアウトを行なっていきます。

レスポンシブ対応にはメディアクエリというものを使います。

メディアクエリとは、@mediaから始まる以下のようなコードです。

p {
    font-size: 14px;
}
@media (min-width: 768px) {
    p {
        font-size: 16px;
    }
}

この記述は、ウィンドウサイズが768px以上になったら、p { font-sitze: 16px; }を適用させるという意味になります。

また、以下のような書き方もできるようになりました。

@media (width < 768px) {
    p {
        font-size: 14px;
    }
}
@media (width >= 768px) {
    p {
        font-size: 16px;
    }
}

この記述の良い点は、以下なのか未満なのか、以上なのか超えなのかを指定できる点です。

不等号は義務教育で学ぶので、コチラの方がわかりやすいでしょう。

このレッスンでは、不等号を使った書き方で統一します。

上記の例でCSSが変化するポイント(ブレイクポイント)は768pxに指定しています。このpx数に決まりはありませんが、今回はBootstrapを参考にします。

ブレイクポイント · Bootstrap v5.3

Bootstrapはデザインやコーディングの知識がなくてもクラス名をつけるだけで良い感じのサイトが作成できるライブラリです。

style.cssに、以下のコードを追加してください。

style.css
.global-nav {
    display: none;
}
/* 追加するコード */
@media (width >= 768px) {
    .global-nav {
        display: block;
    }
}

非表示にしていたグローバルナビが表示されたと思います。

ハンバーガーメニューはPCでは不要なので、非表示にします。

style.css
.hamburger {
    appearance: none;
    border: none;
    background-color: transparent;
    box-shadow: none;
    width: 30px;
    height: 30px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    cursor: pointer;
}
/* 追加するコード */
@media (width >= 768px) {
    .hamburger {
        display: none;
    }
}

グローバルナビのCSSは以下のように記述してください。

style.css
.global-nav {
    display: none;
}
@media (width >= 768px) {
    .global-nav {
        display: block;
    }
}
/* 追加するコード */
.global-nav__list {
    display: flex;
    align-items: center;
    gap: 30px;
    margin: 0;
    padding: 0;
    list-style: none;
}
.global-nav__item a {
    color: currentColor;
    text-decoration: none;
    font-weight: 700;
}

gapでメニュー間の余白を30pxにします。

次に、768px以上でメインビジュアルの画像をPC用に切り替えます。

style.css
.main-visual img {
    width: 100%;
}
/* 追加するコード */
@media (width >=768px) {
    .main-visual__img-sp {
        display: none;
    }
}
.main-visual__img-pc {
    display: none;
}
/* 追加するコード */
@media (width >=768px) {
    .main-visual__img-pc {
        display: inline;
    }
}

768px以上でスマホ用の画像を非表示にして、PC用の画像を表示させました。

style.css
.information {
    padding: 20px 5% 4px;
    background-color: #F7F7F7;
}
/* 追加するコード */
@media (width >= 768px) {
    .information {
        width: 90%;
        max-width: 1200px;
        margin: -50px auto 0;
        padding: 30px 100px 30px;
        position: relative;
        z-index: 2;
    }
}

デザインではお知らせはメインビジュアルに少し被せているので、マイナスのマージンで上にズラしています。

style.css
.info-archive__item {
    padding: 16px 0;
}
@media (width >=768px) {
    .info-archive__item {
        display: flex;
    }
}
.info-archive__item + .info-archive__item {
    border-top: 1px solid #ddd;
}
.info-archive__item-date {
    margin: 0;
}
@media (width >=768px) {
    .info-archive__item-date {
        width: 140px;
    }
}
.info-archive__item-body {
    margin-top: 0;
}
@media (width >=768px) {
    .info-archive__item-body {
        flex: 1;
    }
}

日付とタイトルを横並びにするために、ブレックスボックスを使います。

日付の幅は140pxに固定して、タイトルはflex: 1で右いっぱいに広がるようにします。

style.css
.section {
    padding: 60px 0;
}
@media (width >=768px) {
    .section {
        padding: 80px 0;
    }
}

セクションの余白は、PCで広めに設定します。

style.css
.service-list {
    margin-top: 32px;
}
@media (width >= 768px) {
    .service-list__item {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    .service-list__item:nth-child(even) {
        flex-direction: row-reverse;
    }
}
.service-list__item + .service-list__item {
    margin-top: 50px;
}
.service-list__item-media {
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
}
@media (width >=768px) {
    .service-list__item-media {
        width: 46%;
        margin: 0;
    }
}
.service-list__item-media img {
    width: 100%;
}
@media (width >=768px) {
    .service-list__item-body {
        width: 46%;
    }
}
.service-list__item-heading {
    margin: 20px 0 0;
}
@media (width >=768px) {
    .service-list__item-heading {
        font-size: 20px;
        margin: 0;
    }
}
.service-list__item-desc {
    margin: 14px 0 0;
}
@media (width >=768px) {
    .service-list__item-desc {
        margin-top: 20px;
    }
}
.service-list__item-link {
    margin: 20px 0 0;
}
@media (width >=768px) {
    .service-list__item-link {
        margin-top: 30px;
    }
}

nth-childはn番目の要素にスタイルを適用させる時に使います。

.service-list__item:nth-child(even)は、偶数番目の.service-list__itemにスタイルを適用させます。奇数の場合はoddが入ります。

偶数番目の.service-list__itemにflex-direction: row-reverse;を指定して、画像とテキストの並びを逆にします。

.service-list__item:nth-child(2)と書いても良いですが、項目が3つ4つと増えた時のために、evenを指定しておきます。

コーディングをする際は、要素が後から増えたり減ったりすることを考えておくことが重要です。

次に、会社案内にPC用のCSSを追加します。

style.css
.about-list {
    margin-top: 30px;
}
@media (width >=768px) {
    .about-list {
        display: flex;
        flex-wrap: wrap;
        margin-top: 40px;
        margin-left: -15px;
        margin-right: -15px;
    }
}
@media (width >=768px) {
    .about-list__item {
        width: calc(100% / 3);
        padding: 0 15px;
    }
}
.about-list__item + .about-list__item {
    margin-top: 40px;
}
@media (width >=768px) {
    .about-list__item + .about-list__item {
        margin-top: 0;
    }
}

.about-list__itemの幅を100% / 3つまり3分の1にして、左右に15pxの余白を開けます。これでボックスとボックスの間に30pxのスペースが開いたように見えます。

そのままだと、1番目ボックスの左に15px、3番目ボックスの右に15px余計な空白が入ってしまうので、親要素の左右に-15pxのマイナスマージンを指定しています。

ブログ一覧にメディアクエリでPC用のCSSを記述します。

style.css
.blog-list {
    margin-top: 30px;
}
@media (width >=768px) {
    .blog-list {
        display: flex;
        flex-wrap: wrap;
        margin-left: -15px;
        margin-right: -15px;
    }
}
@media (width >=768px) {
    .blog-list__item {
        width: calc(100% / 3);
        padding: 0 15px;
    }
}
.blog-list__item+.blog-list__item {
    margin-top: 30px;
}
@media (width >=768px) {
    .blog-list__item+.blog-list__item {
        margin-top: 0;
    }
}

追加するコードは会社案内とほぼ同じです。

これでコーポレートサイトのコーディングは完了です。