【html/css】よくあるWebページ、結局どう作るの? 第6回 〜メインコンテンツのエリア、footer(SP版)編〜

ABOUTこの記事をかいた人

大学でプログラミングを学ぶ→経営に興味を持ち勉強→月2桁は稼ぐフリーランスに→プログラミング初心者向けのオンラインメンタリング Udemy講師もやってます→u0u1.net/MGfz

こんにちは。いよいよ最後になりました。前回作った部分をレスポンシブにします。

〜目次〜

外枠の調整

まずは外枠です。ここはちょっと特殊で、デバイス幅に依らずちょうど良い余白になるようinnerクラスの横幅を90%にします。

各セクションの調整

続いて各セクションです。セクションの余白はinnerクラスで確保しているのでpaddingを0にします。また、marginも小さくします。

続いて文字サイズを調整します。

最後に画像とレイアウトを調整します。ここで前回orderプロパティを使った意味が出てきます。

まずsection__contentクラスのdisplayをblockに戻します。これで要素が縦並びに戻りますが、html上での構造がsection2、3共に画像→テキストの順番になっているのでその通りに表示されます。PC版でorderプロパティを使って順番を変えたためこのように簡単に調整できます。
あとは幅とmarginを整えます。

これでSP版もできたので、ページ完成です!動画のようになりましたか?

完成コードの確認

index.html
style.css

まとめ

さて、いかがでしたでしょうか。よくあるページを実際どんな風に作るのかを解説してみました。場面によって使うべきプロパティが違ったり、実現したいデザインによって適切な書き方が様々に異なります。特に、よくプログラミング教育サービスでいの一番に紹介されるfloatプロパティは基本的に使いません。要素の横並べは特にこだわりがなければflexを使いましょう。
もし他にも「こんなデザインの作り方が知りたい」というのがあればコメントしていただければ別記事で解説します。

最後に

ここまで読んでいただきありがとうございました。結構長い記事になったので読むのも一苦労だったかと思います。ですが今回解説した内容は実際の仕事で行う内容のごく一部です。もし「もっと勉強したい」「実際に仕事ができるようになりたい」という方がいらっしゃいましたら、そういう方向けにオンラインメンタリングサービスを行なっております。内容は以下の通りです。

内容

  1. 学習サポート
  2. 仕事のサポート

・学習サポートは主に普段の勉強の中での質問に答えることと、週1ペースでのメンタリング課題を提示したり、学習ロードマップ(後述)を提示しながら進めていく。

仕事のサポートは、形式としては学習サポートと同じ。質問を受けたり週1でサポートしたり。

料金は月額で、
・質問のみ:5000円
・メンタリングあり:10000円
・仕事のサポート:売上の20%、僕が作業をする場合はその分をプラス

学習ロードマップ

  1. HTML/CSSって?
  2. タグ / プロパティ紹介
  3. タグ個別 / プロパティ個別(LV1)
  4. タグ個別 / プロパティ個別(LV2)
  5. タグ個別 / プロパティ個別(LV3)
  6. boxについて(margin / paddingなど)
  7. サイトトレース(LV1)
  8. サイトトレース(LV2)
  9. サイトトレース(LV3)
  10. ツール効率化(git, emmet, エディタ拡張)
  11. オリジナル ・ bootstrap / sass / less ・ js本格化 ・ 仕事など、相手の方のタイプに合わせて

このような形で行なっております。ロードマップに関しては完全初心者の方からも対応可能になっております。また、先日もメンタリングをさせていただいている方が実際に仕事受けるところまで達成でき、非常に嬉しく思っております。
ご興味がある方はTwitter(@hideki_climax)のDMでご相談を受け付けておりますのでぜひご連絡ください。

改めて、最後まで読んでいただきありがとうございました。

コメントを残す

メールアドレスが公開されることはありません。

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください