WEBサイトのレイアウトのフッター部分を決めよう

次は後半部分の作成じゃな。前半部分で習った事を活かして、効率的に作成していこう。

こちらが後半部分のソースコードとなります。ひとつずつ見ていきましょう。

<html>

<main>
<div class="container">
            <div class="main__business">
                <div class="main__business-img"><img src="business.jpg" alt=""></div>
                <div class="main__business-describe descride">
                    <h2>BUSINESS</h2>
                    <p>常にユーザーファーストの精神を心がけております。<br>
                    </p>
                    <a class="viewmore" href="#">view more<span>＋</span></a>
                </div>
            </div>
            <div class="main__info">
                <div class="main__info-carrer descride">
                    <h2>採用情報</h2>
                    <p>2021年度　採用情報はこちらから</p>
                    <a class="viewmore" href="#">view more<span>＋</span></a>
                </div>
                <div class="main__info-contact">
                    <h2>お問い合わせ</h2>
                    <i class="far fa-envelope fa-5x"></i>
                </div>
            </div>
</div>
</main>

<scss>

.main__business {
            display: flex;
            justify-content: space-between;
            padding-bottom: 300px;
            flex-direction: row-reverse;
        }

        .main__business-img img {
            max-width: 100%;
            height: Auto;
        }

        .main__business-describe {
            text-align: left;
        }

        .main__business>div
         {
            flex-basis: 40%;
        }

        .main__info {
            display: flex;
            justify-content: space-between;
            height: 400px;
            background-color: black;
            padding: 100px 50px;
        }

        .main__info-contact {
            text-align: center;
            cursor: pointer;
        }

1. BUSINESS部分をコーディングしよう!
2. INFO部分をコーディングしよう!
3. まとめ
4. 合わせて読みたい記事はこちら

BUSINESS部分をコーディングしよう!

以下がBUSINESS部分のコードです。

<html>

<main>
<div class="container">
            <div class="main__business">
                <div class="main__business-img"><img src="business.jpg" alt=""></div>
                <div class="main__business-describe descride">
                    <h2>BUSINESS</h2>
                    <p>常にユーザーファーストの精神を心がけております。<br>
                    </p>
                    <a class="viewmore" href="#">view more<span>＋</span></a>
                </div>
            </div>
</main>

.main__business {
            display: flex;
            justify-content: space-between;
            padding-bottom: 300px;
            flex-direction: row-reverse;
        }

        .main__business-img img {
            max-width: 100%;
            height: Auto;
        }

        .main__business-describe {
            text-align: left;
        }

        .main__business>div
         {
            flex-basis: 40%;
        }

あれ?前半部分で学んだ部分と似ている箇所が多いね。

そうじゃな。けっこう使いまわしてる部分が多いんじゃ。このように使いまわしを意識したソースを書くようにすると効率も良くなるぞい。

あれ?aboutと違って文字と画像の並び順が逆だワン。

そうじゃの。これはflex-directionプロパティで表現できるんじゃ。詳しくはフレックスボックスの項目で説明しておるから見てほしいんじゃの。
row-reverseを用いる事によって逆順に表示できるぞい。ちなみに何も指定しなかった場合はrowになるぞ。

INFO部分をコーディングしよう!

<html>

<main>
<div class="main__info">
                <div class="main__info-carrer descride">
                    <h2>採用情報</h2>
                    <p>2021年度　採用情報はこちらから</p>
                    <a class="viewmore" href="#">view more<span>＋</span></a>
                </div>
                <div class="main__info-contact">
                    <h2>お問い合わせ</h2>
                    <i class="far fa-envelope fa-5x"></i>
                </div>
 </div>
</main>

<scss>
.main__info {
            display: flex;
            justify-content: space-between;
            height: 400px;
            background-color: black;
            padding: 100px 50px;
        }

        .main__info-contact {
            text-align: center;
            cursor: pointer;
        }

ここまでくれば説明はもう不要かの。最後に文字の調整をして終わりじゃ。

何だか味気ないですね・・。

それだけ皆の実力がついてきたという事じゃの。次は動きのあるページをつけるぞい。

以下のコードを追加して文字間の調整を行いましょう!。

.descride {
            h2 {
                padding: 20px 0;
            }
            p {
                padding: 20px 0;
            }
            a {
                display: inline-block;
                padding: 20px 0;
            }
        }

.viewmore {
            color: white;
            cursor: pointer;
        }

まとめ

いががでしたでしょうか。次はサイドメニューバーを作っていきます!

合わせて読みたい記事はこちら

Prev→→→【WEBデザイン】未経験向けに徹底解説!デザインの良いサイトの作り方➂

Next→→→【WEBデザイン】未経験向けに徹底解説!デザインの良いサイトの作り方⑤

前の記事

WEBサイトのメインコンテンツの決め方を分かりやすく解説 2020.06.22
次の記事

レスポンシブWEBデザインとは?サンプルも交えてわかりやすく解説 2020.06.24