CSS・JavaScriptでサイトの完成度をアップ！

今日はポートフォリオ制作を進めながら、CSSとJavaScriptを使ってサイトの見た目や使いやすさを改善しました。

「デザインカンプをそのまま再現するにはどうすればいいのか？」を考えながら、一つひとつ調整を行いました。

NEWSセクションのレイアウト調整

まず取り組んだのは、お知らせ一覧のデザイン調整です。

デザインカンプでは、各ニュースの区切り線が左右の枠線に少し余白を残したデザインになっていました。

最初は border-top を使っていましたが、線が横いっぱいに表示されてしまうため、CSSの擬似要素（::before）を使って長さを調整しました。

これにより、デザインカンプに近い上品な仕上がりになりました。

枠線を二重にする方法を学習

ABOUTセクションでは、外側の金色の枠だけでは少しシンプルに感じたため、内側にも細い金色のラインを追加しました。

この時に使用したのがCSSの擬似要素です。

position: relative; と position: absolute; を組み合わせることで、HTMLを書き換えずに内側の線を追加できることを学びました。

CSSだけでデザインの幅が大きく広がることを実感しました。

Googleマップのレスポンシブ対応

ACCESSセクションでは、画面幅を小さくするとGoogleマップの高さまで小さくなってしまう問題がありました。

原因を調べながら、

height

aspect-ratio

min-height

などの違いについて理解を深めました。

レスポンシブデザインでは、幅だけでなく高さの指定も重要であることを学ぶ良い機会になりました。

ファーストビューをスマホ向けに最適化

スマートフォン表示では、ファーストビューの画像が拡大されすぎて一部分しか表示されない状態になっていました。

画像サイズや余白を調整しながら、

どこを見せたいのか

どのくらい余白を取るのか

を意識して微調整しました。

パソコンだけではなく、スマホでも見やすいデザインを考える大切さを改めて感じました。

JavaScriptでスマホメニューを改善

JavaScriptでは、ハンバーガーメニューの動作も見直しました。

メニューの開閉

メニュークリック時に自動で閉じる処理

表示・非表示の切り替え

などを確認しながら、スマホでも快適に操作できるよう改善しました。

実際のWebサイトでは、見た目だけでなく操作性もとても重要だと感じました。

今日の学び

今日はCSSだけでも

擬似要素

レスポンシブ対応

Gridレイアウト

余白調整

レイアウトの考え方

など、多くの知識を実践しながら身につけることができました。

少しずつですが、デザインカンプを再現する力も付いてきていると感じます。

これからも細かな部分までこだわりながら、実務を意識したサイト制作を続けていきたいと思います！