はじめに
このプロジェクトでは、さまざまな画面サイズに対応するレスポンシブなウェブデザインを作成する方法を学びます。目的は、デスクトップユーザーとモバイルユーザーの両方に快適なユーザーエクスペリエンスを提供するウェブページを開発することです。
👀 プレビュー
🎯 タスク
このプロジェクトでは、以下を学びます。
- メニューとコンテンツセクションの初期レイアウトを設定する方法
- メディアクエリを使用してレスポンシブデザインを実装する方法
- レスポンシブデザインをテストして微調整し、シームレスなエクスペリエンスを確保する方法
🏆 成果
このプロジェクトを完了すると、以下のことができるようになります。
- さまざまな画面サイズに対応するレスポンシブなウェブデザインを作成する
- 折りたたみ可能なメニューを含むユーザーフレンドリーなモバイルインターフェイスを開発する
- レスポンシブなウェブデザインのテストと反復に関するベストプラクティスを適用する
プロジェクトのセットアップ
このステップでは、プロジェクトをセットアップし、エディタでファイルを開きます。
プロジェクトフォルダを開きます。このフォルダには、以下のファイルとディレクトリが含まれています。
├── css
│ └── style.css
├── images
│ ├── 1.png
│ └── 2.png
├─── js
│ └── jQuery.min.js
└─── index.html
その中で：
index.htmlはメインページです。css/style.cssはスタイルを追加する必要があるファイルです。js/jQuery.min.jsは jQuery ライブラリファイルです。imagesは画像フォルダです。
WebIDE の右下隅にある Go Live ボタンをクリックして、プロジェクトを実行します。
次に、VM の上部にある「Web 8080」を開き、手動でページを更新して、ブラウザで以下のような表示を確認します。
レスポンシブデザインを実装する
このステップでは、ウェブページのレスポンシブデザインを実装する方法を学びます。
css/style.cssファイルの末尾に以下の CSS ルールを追加します。
@media (max-width: 800px) {
.menu {
height: 54px;
line-height: 54px;
margin-bottom: 25px;
}
.icon-menu {
color: #a0a0a0;
margin-left: 20px;
display: inline-block !important;
}
.icon-menu:hover {
color: white;
cursor: pointer;
}
.collapse {
display: none;
}
input[type="checkbox"]:checked ~ .collapse {
display: flex;
flex-direction: column;
background-color: #252525;
}
.dropdown:hover ul {
display: flex;
flex-direction: column;
}
.row {
margin-top: 20px;
display: flex;
flex-wrap: wrap;
}
.box {
margin-bottom: 15px;
}
#tutorials img {
margin: 0;
}
}
この CSS コードは、ウェブページのレスポンシブデザインを設定します。モバイル側のレイアウトに関するスタイルを含み、メニューボタン、展開されたメニュー、コンテンツレイアウトが含まれます。
主な変更点は以下の通りです。
- メニューの高さと行間を 54px に設定して、モバイルデザインに合わせます。
- メニューボタン（
.icon-menu）を表示してスタイルを設定します。 .collapseクラスを使用して、メニュー項目を初期状態で非表示にし、メニューボタンがクリックされたときに表示されるようにします。.rowと.boxのスタイルを更新して、モバイルではコンテンツを 1 列レイアウトで表示するようにします。#tutorials imgの余白を削除して、モバイルレイアウトに合わせます。
css/style.cssファイルを保存して、ウェブページを更新します。画面幅が 800px 未満のときにモバイルレイアウトが表示されるレスポンシブデザインが動作するはずです。
レスポンシブデザインをテストして微調整する
このステップでは、レスポンシブデザインをテストし、必要な微調整を行います。
- ブラウザでウェブページを開き、ウィンドウのサイズを様々な幅に変更して、レイアウトが正しく調整されることを確認します。
- モバイルレイアウトでのメニューボタンの機能をテストし、ボタンをクリックしたときにメニュー項目が表示されることを確認します。
- デスクトップとモバイルの両方のビューでコンテンツレイアウトを確認し、画像、テキスト、余白が良好に見えることを確認します。
- 問題点や改善の余地が見つかった場合は、
css/style.cssファイルの CSS を更新し、ページを更新して変更を確認します。
レスポンシブなウェブデザインは反復的なプロセスであることを忘れないでください。結果に満足するまで、大胆に実験してデザインを微調整してください。
完成したモバイルの結果を以下に示します。
まとめ
おめでとうございます！このプロジェクトを完了しました。実験技術を向上させるために、LabEx でさらに多くの実験を行って練習してください。
