はじめに
このプロジェクトでは、公式の Gulp.js ウェブサイトに似た、ウェブサイトのレスポンシブレイアウトを実装する方法を学びます。画面サイズに基づいて、メディアクエリを使ってウェブページのレイアウトとスタイルを調整します。
👀 プレビュー
🎯 タスク
このプロジェクトで学ぶことは以下の通りです。
- HTML ファイルにメディアクエリルールを追加して、レスポンシブレイアウトを作成する方法
- 異なる画面サイズに基づいて、ページ要素の幅と表示性を調整する方法
- ブラウザウィンドウのサイズを変更することで、レスポンシブレイアウトをテストする方法
🏆 成果
このプロジェクトを完了すると、以下のことができるようになります。
- メディアクエリを使ってレスポンシブなウェブデザインを実装すること
- 画面サイズに基づいてレイアウトとスタイルを調整すること
- 異なるデバイスと画面解像度に対して、効果的にウェブページをテストして最適化すること
プロジェクトのセットアップ
このステップでは、プロジェクトをセットアップし、エディタでファイルを開きます。
プロジェクトフォルダを開きます。このフォルダには、以下のファイルとディレクトリが含まれています。
├── css
├── imgs
├── js
└── index.html
WebIDE の右下隅にある「Go Live」ボタンをクリックして、プロジェクトを実行します。
次に、VM の上部にある「Web 8080」を開き、手動で更新してページを表示します。
これで、まだレスポンシブではない Gulp ウェブサイトの静的ページが表示されます。ウィンドウサイズを手動で変更すると、以下のような結果が得られます。
メディアクエリを追加する
このステップでは、HTML ファイルにメディアクエリを追加して、ページをレスポンシブにする方法を学びます。
- コードエディタで
index.htmlファイルを開きます。 - ドキュメントの
<head>内の最初の<style>セクションを見つけます。 <style>内の/* TODO */の下に、次のメディアクエリルールを追加します。
/* TODO */
@media screen and (max-width: 1400px) {
nav.content,
main section {
width: 900px !important;
}
}
@media screen and (max-width: 900px) {
nav.content,
main section {
width: 700px !important;
}
}
@media screen and (max-width: 650px) {
main section,
main ul li {
width: 100% !important;
}
nav.content.list {
display: none;
}
nav.content.menu {
display: block;
position: absolute;
right: 10px;
}
main ul li:nth-child(even) {
margin-left: 0 !important;
}
}
これらのメディアクエリは、画面幅に基づいてページに特定のスタイルを適用します。最初のメディアクエリは、画面幅が 1400px 以下の場合、コンテンツとメインセクションの幅を 900px に設定します。2 番目のメディアクエリは、画面幅が 900px 以下の場合、幅を 700px に設定します。3 番目のメディアクエリは、画面幅が 650px 以下の場合、ナビゲーションリストを非表示にし、メニューアイコンを表示し、メインセクションとリスト項目の幅を 100% に設定します。
レスポンシブレイアウトをテストする
このステップでは、レスポンシブデザインをテストし、必要な調整を行います。
index.htmlファイルを保存します。- ブラウザでウェブページを更新します。
- ブラウザウィンドウのサイズを様々な幅に変更して、レスポンシブレイアウトの変化を確認します。
- ページのレイアウトが提供された画像に示された予想結果と一致することを確認します。
この時点で、Gulp.js ウェブサイトのレスポンシブレイアウトの実装が完了しています。ページはこれで必要に応じて異なる画面サイズに適応するようになっています。
完成したモバイルの結果を以下に示します。
おめでとうございます！Gulp.js ウェブサイトのレスポンシブレイアウトを正常に実装しました。
まとめ
おめでとうございます！このプロジェクトを完了しました。技術力を向上させるために、LabEx でさらに多くの実験を行って練習してください。
