提供可能サービスのセクション【ポートフォリオ作成】

バナー

この教材は「ギャクサン」というWeb制作学習カリキュラムの一部です。

はじめての方はこちらからご覧ください👉

更新日

#25  提供可能サービスのセクション【ポートフォリオ作成】

web兄さん

＼SHARE／

１｜HTMLのコーディングをしよう

画像の名前のつけ方について

セクション内に、内容が似通った画像がある場合、一つひとつ特徴を考えて名前をつけていては大変なので、「共通名+連番」で名前をつけることがあります。（例：service__icon01.png、service__icon02.png）

そのため、複数似たような画像がある場合は

  1. 使用ソフト・言語のセクションのように「共通名+差分」でつける場合と（例：icon-ai.png、icon-ps.png）
  2. 今回のように「共通名+連番」でつける場合があります（例：icon01.png、icon02.png）
画像名のつけ方

もちろん、どちらが正解というのはありませんが、特徴がはっきりとしていて、名前をつけやすい画像の場合は「共通名+差分」で命名し、

これといってはっきりとした特徴がなく名前がつけずらい画像の場合は「共通名+連番」で良いかと思います。

動画内で書いたコード

<!-- 提供可能なサービス -->
<div class="service">
    <div class="service__inner">
        <h2 class="service__headline">
            <span class="service__headline-en">Service</span>
            <span class="service__headline-jp">提供可能なサービス</span>
        </h2>
        <div class="service__lineup">
            <div class="service__item">
                <h3><img class="service__icon" src="img/service__icon01.png" alt="集客プランの作成のアイコン">集客プランの作成</h3>
                <p>WEBサイトでの目的達成をするためには、作成前の集客プランが大切です。
                <br>集客方法のご提案〜ユーザーに刺さるコピーの作成を行います。</p>
            </div>
            <div class="service__item">
                <h3><img class="service__icon" src="img/service__icon02.png" alt="デザイン制作のアイコン">デザイン制作</h3>
                <p>お客様のご要望をもとにイメージ通りのデザインを作成します。
                <br>各種デザインソフトを使用し、ご希望の納品形式にて納品いたします。</p>
            </div>
            <div class="service__item">
                <h3><img class="service__icon" src="img/service__icon03.png" alt="コーディング業務のアイコン">コーディング業務</h3>
                <p>HTML、CSS、JavaScriptを使用し、デザイン通りのコーディングが可能です。
                <br>モバイルファーストを考慮し、<strong>レスポンシブ対応</strong>もいたします。</p>
            </div>
        </div>
    </div>
</div>
<!-- /提供可能なサービス -->

２｜CSSのコーディングをしよう

３つの要素を両端を揃えて均等に並べたいとき

動画の中で「３つのブロックを余白を入れてかつ両端を揃えて並べたい」時のテクニックを紹介しました。

改めて図解を用いて解説をします。

今回のケースではコンテンツのインナー（1140px）の幅いっぱいにひろげつつも、各ブロックに余白をつけたいという状況でした。

margin-rightやmargin-leftで余白をとると端のどちらかのブロックに無駄な余白が生まれてしまいます。

※真ん中のブロックにだけ左右に24pxずつ余白を取る方法もありますがスマートではありません。

そのため以下のような形で対応すると綺麗に表現することができます。

  1. ブロックの横幅を指定する（364px）
  2. justify-content: space-betweenで両端に揃えて均等に配置する
  3. 1140px（インナーの幅）- 1092px（364px × 3ブロック）= 48px（余白）のができる
  4. 3つのブロックの2つの間に48pxの余白が均等に振り分けられ24pxの余白ができる

このテクニックは非常に良く使用するのでしっかりと理屈を押さえておきましょう。

動画内で書いたコード

.service {
    padding: 130px 0;
    background-color: #f9f9ff;
}

.service__inner {
    max-width: 1140px;
    margin: 0 auto;
}

.service__headline {
    margin-bottom: 60px;
}

.service__headline-en {
    display: block;
    margin-bottom: 10px;
    color: #7768ed;
    font-weight: 700;
    font-size: 20px;
    font-family: "Montserrat";
}

.service__headline-jp {
    font-weight: 700;
    font-size: 32px;
}

.service__lineup {
    display: flex;
    justify-content: space-between;
}

.service__item {
    flex-basis: 364px;
    padding: 40px;
    border-radius: 20px;
    background-color: #ffffff;
}

.service__item h3 {
    display: flex;
    align-items: center;
    margin-bottom: 15px;
    color: #7768ed;
    font-weight: 700;
    font-size: 16px;
}

.service__item p {
    font-size: 14px;
    line-height: 150%;
}

.service__item strong {
    background-color: #fcff58;
    font-weight: normal;
}


.service__icon {
    margin-right: 10px;
}