実績のご紹介のセクション【ポートフォリオ作成】

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

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

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

動画内で書いたコード

<!-- 実績のご紹介 -->
<div id="works" class="works">
    <div class="works__inner">
        
        <h2 class="works__headline">
            <span class="works__headline-en">Works</span>
            <span class="works__headline-jp">実績のご紹介</span>
        </h2>
        
        <!-- 実績01 -->
        <div class="works__each">
            <div class="works__img">
                <img src="img/works__img01.jpg" alt="株式会社GoodMusic様のWEBサイトのキャプチャ">
            </div>
            <div class="works__content">
                <h3>株式会社GoodMusic様</h3>
                <p>音楽事務所のホームページをリニューアルしました。<br>アーティストの魅力が伝わるデザインに仕上げました。</p>
                <h4>対応範囲</h4>
                <ul>
                    <li>ロゴデザイン作成、イラスト作成、WEBデザイン作成</li>
                    <li>コーディング</li>
                </ul>
                <a href="">View Project</a>
            </div>
        </div>
        
        <!-- 実績02 -->
        <div class="works__each --reverse">
            <div class="works__img">
                <img src="img/works__img02.jpg" alt="株式会社GoodTrip様様のWEBサイトのキャプチャ">
            </div>
            <div class="works__content --reverse">
                <h3>株式会社GoodTrip様</h3>
                <p>旅行会社様のホームページをリニューアルしました。<br>宿泊者が旅行先を比較検討しやすいようにデザインを工夫しました。</p>
                <h4>対応範囲</h4>
                <ul>
                    <li>ロゴデザイン作成、イラスト作成、WEBデザイン作成</li>
                    <li>コーディング</li>
                </ul>
                <a href="">View Project</a>
            </div>
        </div>
        
        <div class="works__link">
            <a href="">その他の実績を見る</a>
        </div>
    
    </div>
</div>
<!-- /実績のご紹介 -->

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

動画解説のポイントまとめ

05:45〜｜SVGについて

png(120×120)

svg(120×120)

今回、リストに使用する「✔️」のアイコンやボタンの「→」のアイコンを「.svg」という拡張子でエクスポートしました。

SVGはロゴやアイコンで多く使用される拡張子で、ファイルサイズが小さく読み込みが早いのにも関わらず画質もpngやjpgと比べて高いというメリットがあります。

▶︎参考記事：【初心者向け】HTMLのimgタグを使って画像を表示する方法

06:55〜｜リストのアイコンの背景画像の設置について

アイコンのサイズが20px * 20px
アイコンとテキストの余白が10px

であるため、padding-left: 30pxをliに設定し、そのリストに対してbackground-imageでアイコンを背景画像として左端に設置することで再現しています。

19:25〜｜最初の要素だけにCSSを適用させる

通常のセレクタに:first-of-typeという擬似クラスをつけることで最初に登場する特定の要素をセレクタにすることが可能です。

▶︎参考記事：【初心者向け】HTMLのimgタグを使って画像を表示する方法

24:00〜｜ほぼ共通の見た目で差分が少しある場合

ほぼ見た目が同じ要素があった時に、いちいちclass名を変えて同じCSSのコードを書いていたら時間がかかってしまいますよね。

“ほぼ同じでも少し差がある”見た目を再現する場合は、共通のclass名で同じ見た目にした上で、差分がある要素にだけ特定のclass名を追加することで、効率よくコードをかくことができます。

<div class="service__item">
  <!-- １つ目 -->
</div>

<div class="service__item --purple">
  <!-- ２つ目の差分があるブロック -->
</div>

.service__item{
  /*共通のCSSを書く*/
}

.service__item.--purple{
  /*差分のCSSを書く*/
  background-color : purple
}

35:22 〜｜インライン要素のボタンを中央配置する

※画像が見にくい場合はクリックして拡大してください

text-align:centerはブロック要素の中身のインライン要素またはテキストを中央寄せにするプロパティです。

そのためaやspanは当然中央寄せにすることができません。

そこで、aやspanはそのままに、divなどのブロック要素の入れ子にした上で、そのdivに対してtext-align: centerを適用することで中身のaを真ん中寄せにすることができます。

動画内で書いたコード

/* ===========================

実績のご紹介

=========================== */

.works{
    padding: 130px 0;
}

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

.works__headline {
    margin-bottom: 60px;
}

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

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

.works__each{
    display: flex;
}

.works__each.--reverse{
    flex-direction: row-reverse;
}

.works__each:first-of-type{
    margin-bottom: 130px;
}

.works__img{
    flex-basis: 50%;
}

.works__img img{
    box-shadow: 0px 4px 25px rgba(0, 0, 0, 0.25);
}

.works__content{
    flex-basis: 50%;
    margin-left: 60px;
}

.works__content.--reverse{
    margin-left: 0px;
    margin-right: 60px;
}

.works__content h3{
    font-weight: 700;
    font-size: 24px;
    margin-bottom: 20px;
}

.works__content p{
    font-size: 16px;
    line-height: 200%;
    margin-bottom: 40px;
}

.works__content h4{
    font-weight: 700;
    font-size: 16px;
    margin-bottom: 20px;
}

.works__content ul{
    margin-bottom: 40px;
}

.works__content li{
    background-image: url(img/works__icon-check.svg);
    background-repeat: no-repeat;
    background-position: left center;
    padding-left: 30px;
    line-height: 150%;
}

.works__content li + li{
    margin-top: 15px;
}

.works__content a{
    background: #000000;
    border: 1px solid #FFFFFF;
    border-radius: 40px;
    color: #fff;
    display: inline-block;
    padding: 20px 80px;
}

.works__link{
    text-align: center;
    margin-top: 100px;
}

.works__link a{
    background-image: url(img/works__icon-arrow.svg);
    background-repeat: no-repeat;
    background-position: right center;
    padding-right: 40px;
    line-height: 150%;
}

Category

Pickup

Contact

#26 実績のご紹介のセクション【ポートフォリオ作成】