サイトの下部のfooterを書いていきましょう！

まずはHTML！

スマートフォンサイズのコーディング完成まで、もう一息です！頑張ってください！!

コピーライトの部分でsmallタグを使いました。なぜsmallタグなのか？これにも理由があります。調べてみてくださいね。

最後に、aタグのリンク先が外部サイトの場合の記述を書き足します！

外部サイトへのリンクは別タブで開いてあげると、スマホでもパソコンでも、外部のサイトと元いたサイトどちらも開いておくことができてユーザーファースト（ユーザーがより使いやすい）と言えます。

これで、スマホサイズのfooterまで完成しました！!

それでは最後にタブレット・PC用にレスポンシブ対応していきましょう！

レスポンシブWebデザイン(Responsive Web Design, RWD)は、パソコン、タブレット、スマホなど、どんな大きさのデバイスでも見やすいWebサイトにするためのものです。

2007年のiPhone（スマホ）登場以降は、対応が必須です！
近年普及率がぐんと上がってきたタブレットも、しっかり表示されるように調整していきましょうね。

今回ブレイクポイントは768pxの1つのみですが、スマホ・タブレット・PCとそれぞれのデバイスで別々にスタイルを当てたいときは、複数のブレイクポイントを用意する場合もあります。

他にもいくつかメジャーなブレイクポイントが存在するので、ぜひ調べてみてくださいね！

続きを書いていきましょう！

動画内で、.innerクラスにmax-widthとpaddingを設定しました！

別の書き方として↓のように指定することもできます！

コピー
.inner {
    max-width: calc(1000px + 20px * 2);
}

max-widthにcalc（カルク）というものがありますね。calcはプロパティ内で計算をすることができるCSS関数と呼ばれるものです。

例に出したコードを見てみましょう。  * は掛け算を意味しています。
1000pxはコンテンツの幅、20px * 2 は20pxのpaddingを左右2つ分 という意味になっています。

このように、CSSの書き方も「これが絶対正解！」というのものはありません。色々なパターンがあることを知っておきましょう！

レスポンシブ対応も完了です！！
次のTipsからは最終チェックの段階に移ります。
コードを書いて終わりではなく、最後のチェックと細かい修正までがサイト制作です！

ここまでたくさんコードを書いて来ました！すごい！
ハイスピードで進めてきましたので、一度立ち上がってストレッチをしたり、水分補給もして休憩を挟みながら進めてくださいね。

レスポンシブ化が終わったら、最終チェックをしましょう！

これが終わったら完成です！！

まずはフォントの字間・行間・色、余白の大きさなどを、完成版と見比べながら調整していきます！

そして次に、スマホサイズ・タブレットサイズの表示におかしいところが無いかをチェックします！

375px、768px、1440pxだけではなくて、色々な画面幅で崩れや不自然なレイアウトになっていないか確認する癖をつけておきましょう！

調整の段階で崩れてしまったレイアウトを細かく修正しました！

一つ修正したら、スマホ幅やPC幅でも崩れていないか、再度確認します。
ブラウザやVS Codeを何度も行き来しながらしっかりチェックしていきます。

これで細かな調整まで完了し、スイーツショップのサイトが完成しました！お疲れ様でした！！

どうでしたか？少し大変だったでしょうか？それとも、意外と簡単だったでしょうか？

みなさん、コーディングの勉強を初めてまだ7日目です！
そしてついに、1つのサイトを完成させることができました！
これってとてもすごいことです！！皆さんの努力が１つ、目に見える形になってできましたね！

ここまで一気にインプットしましたので、明日からの3日間は復習の時間にしましょう！

うっかりミスの一例を紹介します！

PCの画面幅を広げていくと、コンテンツの左右が見切れていることがあります。

画面幅を大きく広げても、必ず画面いっぱいまで画像や背景色がある状態にしてくださいね！

この解説ではbodyタグやinnerタグを例に上げていますが、HTML構造やCSSの書き方によって他にも原因が考えられるとは思います！

devツールで細かく見ながら原因を探してみましょうね！