PORTFOLIOセクションをレスポンシブに対応してみよう!【超初心者向けHTML講座18】

 どうもフリーランスプログラマのTakaです。

 昨今の状況によって在宅勤務、それから外出自粛を余儀なくされている方も多いと思いますが、そんな時間のある時こそ新しいことにチャレンジしてスキルを身につけていきたいものですね。

 さて、今回は前回のメインエリアに引き続きPORTFOLIOセクションのレスポンシブコーディングをやっていきたいと思います。

ここまでのおさらい

 まずは、いつも通りここまでの本プロジェクトのおさらいですが、本プロジェクトで作成するサンプルページの見本はこちらになります。

 そして、前回まででメインエリアのレスポンシブコーディングまで進めてきましたね。

前回の記事は下記関連記事を参照してください!

共通要素のコーディング

 では、早速コーディングしていきたいと思いますが、今回のPORTFOLIOセクションだけでなく各コンテンツセクションに共通して存在するタイトル要素のh3タグに対して、あらかじめこのタイミングでスタイルを下記のように適用しておきたいと思います。

 上記の通り、全てのコンテンツセクションのタイトル要素(h3)に対してスタイルが適用されるようにセレクターを指定して、内容的にはフォントサイズをrem単位を使用して指定しています。

PORTFOLIOのレスポンシブコーディング

 これで、全てのコンテンツセクションのタイトルに同じフォントサイズが適用されました。続いて、今回の本題であるPORTFOLIOセクションのレスポンシブコーディングをしていきたいと思います。まず、スマホに最適されたPORTFOLIOセクションの見た目は下図のようになっています。

少し見切れていますが、PCでは横並びになっていたコンテンツが縦並びになっている感じですね

 ということで、スマホではこの見た目になるようにレスポンシブコーディングをしていきたいと思います。とりあえず現状のhtmlのマークアップは下記のような感じになっていると思うので、このマークアップに合わせてレスポンシブでCSSコーディングをしていきたいと思います。

PORTFOLIOのスタイルをスマホ用に調整

 では、cssファイルを開いて、メディアクエリセレクターにスタイルを追記していきたいと思います。

 まずは、上記のように各コンテンツを格納しているitemsクラスのdisplayプロパティにblockを適用します。PCでは、横並びにするために「display:flex;」を適用していましたが、これをblockにすることでflexを無効化し横並びを縦並びにすることができます。

 次に下記のスタイルを適用します。

 ここでは、itemsクラスの中のaタグ、つまり各ボックスコンテンツに対してスタイルを適用しており、内容としてはwidth(横幅)プロパティにautoを適用し、横幅を自動幅にしてマージンボトムに40pxを指定しています。これにより、親要素の横幅いっぱいにコンテンツが広がり、かつ各コンテンツの下に40pxのマージンを作ることができます。

 この2つのスタイルを適用することで、大体上図のようなスマホに最適化された見た目になったと思いますが、最後にボックスコンテンツのリード文のフォントサイズも下記のようにスマホ用に最適化しておきます。

 これで、PORTFOLIOセクションもスマホ用に最適化されたと思うので、実際にhtmlファイルを開いてブラウザで確認してみてください。

まとめ

 ということで、今回はPORTFOLIOセクション部分をスマホ用にも最適化するためにレスポンシブコーディング(スマホ用のスタイル)してみました。今回も前回のメインエリア同様、追記する内容も少なく比較的分かり安かったのではないかと思います。

本記事のまとめ

  • 各コンテンツセクション共通のh3タグ(セクションタイトル)にCSSを適用
  • PORTFOLIOのレスポンシブコーディング

 てことで、今回はこんな感じで終わりになります。次回はSKILLセクションのレスポンシブコーディングをしていきたいと思います。

 それでは今回はここまで!また!

お仕事のご相談・ご依頼
お気軽にお問い合わせください!

お仕事の依頼はこちら

シェアありがとうございます!

著者プロフィール

Takanori Hashi

東京、奄美大島、宮崎の拠点にサーフィンとスノーボードが好きなフリーランスのWebクリエイターです。普段はプログラム書いたりデザインしたり映像作ったりしています。いろいろな人の話しを聞くのが好きなので、このブログを通して多くの人と繋がりが出来たら嬉しいです。noteとInstagramもやっているのでフォローしてくれたらありがたいです!

人気記事

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です