2025/4/9 「WEBデザイン実習②」の記録です。
講師：⼤浜 信彦先生
本日の課題
Webページ制作実践で作成したページのキャプチャを取得してWordPressの投稿ページに貼り付けを行いましょう。（出来たところまでで大丈夫です）
レスポンシブウェブデザインとは？
レスポンシブウェブデザインは、様々なデバイス（スマートフォン、タブレット、PCなど）で快適にウェブページを表示するためのデザイン手法です。画面サイズに応じたデザインを提供するために、メディアクエリやブレイクポイントを利用します。
メディアクエリについて
メディアクエリは、CSSで指定された条件に基づいてスタイルを適用する仕組みです。例えば、画面幅が600px以下のときに異なるデザインを表示するように設定できます。
例:
@media (max-width: 600px) {
body {
background-color: lightblue;
}
}
このコードは、画面幅が600px以下の場合に背景色をライトブルーに変更します。
ブレイクポイントとは？
ブレイクポイントは、ウェブデザインで異なるレイアウトを適用する基準となる画面幅です。一般的なブレイクポイントの例は以下の通りです：
- 320px: スマートフォンの小型画面
- 768px: タブレットの画面
- 1024px: 一般的なデスクトップ画面
- 1440px以上: ワイドスクリーンモニター
よく使われるサイズは、時期によって変わる
これらのブレイクポイントに基づいて、メディアクエリを設定することで、それぞれの画面サイズに適したデザインを構築します。
例:
@media (max-width: 768px) {
.container {
display: block;
}
}
@media (min-width: 769px) {
.container {
display: flex;
}
}
パーツサンプルを利用する時の注意
https://html-css.hamaya2020.com/webparts-0.html
（※１）～（※４）がある
-
個別ライブラリのCSS
- 個別ライブラリに関連するCSS（※1）は、リンクタグなどをHTMLにコピーして使用します。
-
パーツ装飾用CSS
- パーツ装飾に必要なCSS（※2）は、外部CSSファイル（例: style.css）へコピーすることを推奨。
- id名やclass名を変更する場合、関連する部分も更新が必要です。
-
パーツ定義用HTML
- パーツの構造を定義するHTML（※3）は、必要に応じてコピーします。
- id名やclass名変更時は、CSSやSCRIPTとの整合性を確認してください。
-
パーツ定義用SCRIPT
- パーツの動作を定義するSCRIPT（※4）は、必要な場合のみ
</body>タグ直前に配置。 - id名やclass名変更時は、関連箇所を調整してください。
- パーツの動作を定義するSCRIPT（※4）は、必要な場合のみ
