どうもフリーランスプログラマの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のマージンを作ることができます。
この２つのスタイルを適用することで、大体上図のようなスマホに最適化された見た目になったと思いますが、最後にボックスコンテンツのリード文のフォントサイズも下記のようにスマホ用に最適化しておきます。
これで、PORTFOLIOセクションもスマホ用に最適化されたと思うので、実際にhtmlファイルを開いてブラウザで確認してみてください。
まとめ
ということで、今回はPORTFOLIOセクション部分をスマホ用にも最適化するためにレスポンシブコーディング（スマホ用のスタイル）してみました。今回も前回のメインエリア同様、追記する内容も少なく比較的分かり安かったのではないかと思います。
本記事のまとめ
- 各コンテンツセクション共通のh3タグ（セクションタイトル）にCSSを適用
- PORTFOLIOのレスポンシブコーディング
てことで、今回はこんな感じで終わりになります。次回はSKILLセクションのレスポンシブコーディングをしていきたいと思います。
それでは今回はここまで！また！