【無料公開】模写徹底練習note - ⑤フッターを含む最終編

こんにちは。スキプラ(@riman_skillplus)です。

さて、今回は【会員登録】【スマホでもProgate】【フッター】の部分をやっていきましょう！

出来上がりはこんな感じです。

これまでに使った知識だけで実装できるので超簡単です。

今回の実装の流れはこちらのプルリクエストに残されてるので参考にしてみてください。

無料会員登録周りの実装 by skipla01234 · Pull Request #4 · skipla01234/progate_mosha.github.io以下の3つを実装予定 無料会員登録周り アプリでもProgate周り いつでもどこでもプログラミング周りgithub.com

では早速やっていきましょう。

Step1: まずは箱を作る

いつもどおり、箱を作っていきましょう。

と、言いたいところですが、もう脳内で勝手に箱は作れるようになってると思うので(できない人は是非第一回からのを復習してみてください)、割愛しちゃいますね。

Step2: HTMLを組む

  <div>
   <h1 >さっそく始めよう<br />1分後、プログラミングの世界でお会いしましょう。</h1>
   <div >
     <a href="" >無料会員登録</a>
   </div>
 </div>

 <div >
   <h1 >アプリでも、Progate</h1>
   <p >「まずは手軽に始めてみたい」「スキマ時間でも予習復習をしたい」という方に特にオススメです</p>
 </div>

 <div >
   <div >
     <img src="./img/progate_device.png" alt="">
   </div>
   <div >
     <h3 >いつでもどこでもプログラミング</h3>
     <p >好きな時間、好きな場所でプログラミングを学べます。</p>
     <h2 >Web版とは一味違うレッスンを用意しております。</h2>
     <p >アプリ独自版のレッスンを用意しております。<br />実践的なWeb版に比べ、より初心者向けのため、サクサク進められます。</p>
     <div >
       <img src="./img/app_store.svg" alt="">
       <img src="./img/google_play.svg" alt="">
     </div>
   </div>
 </div>

 <div >
   <ul>
     <li ></li>
     <li>Follow @progateJP</li>
     <li>
       <p>アプリ版のダウンロードはこちら</p>
       <div >
         <img src="./img/app_store.svg" alt="">
         <img src="./img/google_play.svg" alt="">
       </div>
     </li>
   </ul>
   <ul>
     <li><h3 >サービス</h3></li>
     <li><a href="">レッスン一覧</a></li>
     <li><a href="">有料会員プラン</a></li>
     <li><a href="">サクセスストーリー</a></li>
     <li><a href="">ブログ</a></li>
     <li><a href="">ヘルプ</a></li>
   </ul>
   <ul>
     <li><h3 >サポート</h3></li>
     <li><a href="">運営会社</a></li>
     <li><a href="">利用規約</a></li>
     <li><a href="">プライバシポリシー</a></li>
   </ul>
   <ul>
     <li><h3 >SNS</h3></li>
     <li><a href="normal-text">Facebook</a></li>
     <li><a href="">Twitter</a></li>
   </ul>
 </div>

これも特段難しいことはありません。いつもどおり愚直にやってます。

上から大きく4つのdivで囲まれたブロックがありますが、簡単に説明しておきます。

1つ目:  「無料会員登録」の部分
2つ目: 「スマホでもProgate」の部分
3つ目: 「いつでもプログラミング」の部分
4つ目: 「フッター」部分

1つ目の「無料会員登録」は、これまでになかったボタンの装飾(ちょっと影がついてる感じ)の実装が難しいだけで、文字の部分はこれまでの見出しの装飾を再利用できるので楽勝です。

2つ目の「アプリでもプログラミング」の部分は、背景色付けて白い文字で書くだけなので速攻で完成します。

3つ目の「いつでもプログラミング」の部分では、Flexを使って左右に並べる技術、スマホの時縦並びにする技術、画像が上の要素に食い込むように見せる技術、の3つを駆使するだけです。

4つ目の「フッター」部分は、PCでは4列表示、タブレットでは2列表示、スマホでは1列表示にしてみましたので、そこもFlexを活用してます。良く使うテクニックなのでぜひ覚えてください。

Step3: CSSを当て込んでいく

  <div class="start-programing">
   <h1 class="headline text-black text-center">さっそく始めよう<br />1分後、プログラミングの世界でお会いしましょう。</h1>
   <div class="register">
     <a href="" class="btn btn-md btn-orange">無料会員登録</a>
   </div>
 </div>

 <div class="app">
   <h1 class="headline text-center">アプリでも、Progate</h1>
   <p class="text-center">「まずは手軽に始めてみたい」「スキマ時間でも予習復習をしたい」という方に特にオススメです</p>
 </div>

 <div class="anywhere">
   <div class="device-image">
     <img src="./img/progate_device.png" alt="">
   </div>
   <div class="anywhere-text">
     <h3 class="headline-md text-black text-center">いつでもどこでもプログラミング</h3>
     <p class="normal-text text-center">好きな時間、好きな場所でプログラミングを学べます。</p>
     <h2 class="headline-md text-black text-center">Web版とは一味違うレッスンを用意しております。</h2>
     <p class="normal-text text-center">アプリ独自版のレッスンを用意しております。<br />実践的なWeb版に比べ、より初心者向けのため、サクサク進められます。</p>
     <div class="apps">
       <img src="./img/app_store.svg" alt="">
       <img src="./img/google_play.svg" alt="">
     </div>
   </div>
 </div>

 <div class="footer">
   <ul>
     <li class="footer-block footer-logo-img-pc"><img src="./img/logo_progate.png"></li>
     <li>Follow @progateJP</li>
     <li>
       <p>アプリ版のダウンロードはこちら</p>
       <div class="apps">
         <img src="./img/app_store.svg" alt="">
         <img src="./img/google_play.svg" alt="">
       </div>
     </li>
   </ul>
   <ul>
     <li><h3 class="headline-md text-black">サービス</h3></li>
     <li><a href="">レッスン一覧</a></li>
     <li><a href="">有料会員プラン</a></li>
     <li><a href="">サクセスストーリー</a></li>
     <li><a href="">ブログ</a></li>
     <li><a href="">ヘルプ</a></li>
   </ul>
   <ul>
     <li><h3 class="headline-md text-black">サポート</h3></li>
     <li><a href="">運営会社</a></li>
     <li><a href="">利用規約</a></li>
     <li><a href="">プライバシポリシー</a></li>
   </ul>
   <ul>
     <li><h3 class="headline-md text-black">SNS</h3></li>
     <li><a href="normal-text">Facebook</a></li>
     <li><a href="">Twitter</a></li>
   </ul>
 </div>

いったん、この状況で見てみます。

ではいつもどおり、解決したい課題を羅列していきます。

▼ 解決したい課題
① すべてのブロックで上下に100pxのpaddingを付けたい
② 無料会員登録のボタンを良い感じにしたい
③ ボタンのサイズ感を調整したい
④ スマホの画像を上の要素に食い込ませたい
⑤ フッターは表示端末によって表示する列を調整したい

① すべてのブロックで上下に100pxのpaddingを付けたい

まずは、1つ目のブロックの「無料会員登録」の部分にpaddingを付けて見ましょう。

/* 無料会員登録 */
.start-programing {
 padding: 100px 0;
 text-align: center;
}

これは簡単ですね。

さぁ、無料会員登録のボタンを装飾していきますよー！

② 無料会員登録のボタンを良い感じにしたい

完成系を見ると、影がかかって浮いてる感じに見えますよね。

これは、box-shadowというプロパティを使って実現します。僕自身も理解が浅かったので、今日ツイートしましたが、こんなイメージです。

今回の影の付け方を見ると、「ちょっとぼかして」「若干ボタンの外を覆うように」なイメージですよね。

なので、①px、②pxの部分は0のまま、③pxの部分で少しぼかす為に大きめに設定し、④pxで若干ボタンの外を覆う感じにするために1pxくらい指定してみます。

.register a {
 box-shadow: 0 0 15px 1px rgba(33, 47, 51, 0.3);
}

こんな感じでどうでしょうか。

良い感じですね。ボタンの周りに若干グレーっぽい影が付きました。

この③pxのぼかしの強さって良く分からないと思うので、試しに0pxにしてみます。

.register a {
 box-shadow: 0 0 0 1px rgba(33, 47, 51, 0.3);
}

グレーのくっきりとした縁ができてるように見えますよね。

つまり、この数字を大きくすればするほどこのグレーの縁がぼわっとしてくるんです。

③ ボタンのサイズ感を調整したい

じつは、現状のままだと、PCで見た時に結構小さく表示されるという問題がありました。

これは、btnクラスにfont-sizeまで指定しちゃってたためです。

.btn {
 padding: 1rem 2rem;
 border-radius: 2rem;
 display: inline-block;
 font-size: 0.75rem;
}

0.75remですね。小さすぎますｗ

第一回でヘッダーを作った時にそこに表示するボタンとして作った為です。

PC : 大きく表示
タブレット : 可変にしたい
スマホ : 小さく (0.75remくらい)で表示したい

って感じにしたいです。本来btnクラスはbtnの形を表現する為に使うのが良いので、btn-sm(小さめなボタン用 - ヘッダーで使う用)と、btn-md(大きめのボタン)と2つ新しいクラスを追加して、そこにfont-sizeを指定してみましょう。

.btn {
 padding: 1rem 2rem;
 border-radius: 2rem;
 display: inline-block;
}

/* 小さめのボタン */
.btn-sm {
 font-size: 0.75rem;
}

/* 大きめのボタン */
.btn-md {
 font-size: 1.8rem;
}

これで、PCで見た時、1.8remで表示サれるはずです。

よしよし。見やすくなりましたね。でもこのままだとスマホで見た時に大きすぎます。

ちょっと分かりづらいですが、実際スマホで見るとボタンが大きすぎます。

スマホの時は0.75remに、タブレットの時は、0.75rem~1.8remを可変にしたいです。

まずはスマホ。

/* スマホ用の表示 */
@media screen and (max-width: 559px) { 
 /* 大きめのボタン */
 .btn-md {
   font-size: .75rem;
 }
}

タブレットはどうするのか？また計算式のサイトを使いましょう。

Fluid-responsive font-size calculator

560px(56rem)〜960px(96rem)の間、font-sizeを0.75rem~1.8remで調整するように入れます。

↓こんな感じで、「Copy CSS」を押すと下にCSSが表示されるのでコピペでOK

/* タブレット用の表示 */
@media screen and (min-width: 560px) and (max-width: 960px) {
 /* 大きめのボタン */
 .btn-md {
   font-size: calc(0.75rem + ((1vw - 0.56rem) * 2.625));
 }
}

これで、↓PC表示

↓ タブレット表示

↓ スマホ表示

サイズ感の問題はありますが、リファクタリング(綺麗にすること)対象として残しておきつつ、一旦これでいきましょう。

④ スマホの画像を上の要素に食い込ませたい

の、前に一旦、2つ目の「アプリでもProgate」の部分をサクっと実装しちゃいます。

ここでは、背景色を緑にするのと、中央寄せするだけです。

/* アプリでもProgate */
.app {
 background: #29CEC7;
 padding: 100px 0;
 color: #fff;
}

簡単ですね。笑

さて本題、次の3つ目のブロックの「いつでもプログラミング」の部分を実装していきます。

大きくやることは3つ。

1: PCで見た時に画像とテキストを横並びにする
2: スマホで見た時に縦並びにする
3: 画像を上のブロックに食い込ませる

まずは、横並びにしてみましょう。これはFlexをつかっていきましょう。

/* いつでもどこでもプログラミング */
.anywhere {
 display: flex;
 align-items: center;
}

.device-image {
 width: 30%;
}

.device-image img {
 max-width: 100%;
}

.anywhere-text {
 width: 70%;
}

これだけです。PCで表示した時、デバイス画像を30%でテキスト部分を70%で表示するようにしてます。

また、画像にmax-width: 100%を指定することで、画像が大きすぎて画面をはみ出ることがなくなります。

良いですが、AppStoreとGooglePlayのロゴが左寄せになっちゃってるのが気持ち悪いので中央に寄せておきます。

/* google playとapp storeのアイコンを中央寄せ */
.apps {
 text-align:center;
}

OKですね。

ただ、このままだとスマホで見たときにぎゅっとしちゃうので、これまでも駆使してきたテクニックの「スマホの時は縦並びにする技術」を使います。

/* スマホ用の表示 */
@media screen and (max-width: 559px) {
  .anywhere {
   flex-direction: column;
 }

 .anywhere-text, .device-image {
   width: 100%;
 }
}

flex-direction: columnで、縦並び指定にします。ただこれだけだと、画像は横幅30%のまま、テキストは70%のまま表示されてしまうので、両方のwidthを100%にしてます。

↓ 100%指定をしない場合

画像が小さいですよね。

↓ 100%指定した場合

良い感じですね。

じゃあ最後の「3: 画像を上のブロックに食い込ませる」を実装します。

これ、めちゃ簡単で、margin-topをマイナス指定するだけですｗ

.device-image {
 /* 上の要素に食い込ませる */
 margin-top: -60px;
 width: 30%;
}

これだけ。

↓ PCでの表示

↓ スマホでの表示

難しそうに見えて簡単でしたね。

あとはフッターができれば完成です。

⑤ フッターは表示端末によって表示する列を調整したい

これはどういうことかというと、PCで見た時は4列表示なのですが、このままスマホで見るとぎゅっとなりすぎるので、1列にしたいです。

とは言え、タブレットで見た時に1列だと少し横幅が広いので2列にしたい。

これを実現していきます。

まずは、4列表示を実現するためのflexです。

/** フッター用デザイン **/
.footer {
 padding: 100px 0;
 display: flex;
}

とりあえず横並びはできました。

ただ、等間隔に並べたいですね。

そんな時どうするか覚えてますか？

そう・・！justify-contentです！

/** フッター用デザイン **/
.footer {
 padding: 100px 0;
 display: flex;
 justify-content: space-between;
}

等間隔にはなったんですが、何となく左に寄っていて、間隔がキツく感じます。

各々を中央寄せしてみましょう。

窮屈な感じが解消されました。

さて、次にスマホの時に1列表示をやってみましょう。

/* スマホ用の表示 */
@media screen and (max-width: 559px) {
  /* スマホの時、フッターは縦並びにする */
 .footer {
   flex-direction: column;;
 }
}

これは簡単でした。

最後に、タブレットの時に2列表示にしてみます。

/* タブレット用の表示 */
@media screen and (min-width: 560px) and (max-width: 960px) {
  /* スマホの時、フッターは2列表示にする */
 .footer ul {
   width: 50%
 }
}

あれ、タブレットで見ても4列になっちゃってますね。

これはflexの指定のときに、はみ出した時の扱いを指定してないからです。

flexには、flex-wrapというプロパティがあって、これをwrapに指定すると、幅がいっぱいになった時に次の段に落とす。ってことをしてくれます。

/** フッター用デザイン **/
.footer {
 padding: 100px 0;
 display: flex;
 justify-content: space-between;
 flex-wrap: wrap; /* はみ出たら次の段へ */
 text-align: center;
}

これだけで2列表示が実現できます。

フッターに限らず、サイト全体でも、PC/タブレット/スマホで表示する列を変えたいとか表示項目を変えたいってあると思うので、かなり実践でも使えるテクニックです。覚えておきましょう！

これですべての会が終わりです！マガジン化してすべて公開しますので、ぜひレスポンシブデザインをマスターしてください。

全体を通してやってみると、ある程度のパターンが掴めて、簡単にレスポンシブデザイン対応のサイトが作れるようになります。

最後にお願い

ぜひぜひ、今後のモチベーションのためにもお願いします！！

もしこのnoteが参考になったら....

■ 最後にたった2つのお願い
① このnoteを「スキ」してください 🙇‍♂️
② このnoteの感想、何でも良いので @riman_skillplus 宛にください 🙇‍♂️

完成形のコード

↓ 今回の対象の作業

無料会員登録周りの実装 by skipla01234 · Pull Request #4 · skipla01234/progate_mosha.github.io

↓ コードの全体像

 https://github.com/skipla01234/progate_mosha.github.io

公開してるサイト

Progate模写