今回は実際にレスポンシブ対応されたwebサイトを制作していきます。
一つひとつ確認しながら学習を進めていきましょう。
レスポンシブサイトを作ってみよう！
今回は以下の記事で作成したサイトに対して、レスポンシブ対応を行っていきます。
https://zero-plus.io/media/html-css/coding-practice/
サンプルのダウンロード
以下のリンクから教材をダウンロードすることができます。
デザインの確認
今回、レスポンシブ対応させていくサイトのデザインはこちらになります。
タブレット時のデザイン
スマートフォン時のデザイン
コーディングしてみよう
HTMLファイルにレスポンシブ対応に必要なmataタグを記述する
ますは、レスポンシブ対応を進めるために、HTMLのheadタグ内に以下のコードを追加しましょう。
<meta name="viewport" content="width=device-width, initial-scale=1”>CSSファイルにメディアクエリを記述する
次に、CSSファイルに、レスポンシブ時のスタイルを記述していくメデイアクエリを記述します。
CSSファイルの一番下の行に記述していきましょう。
@media screen and (max-width: 896px) {
/*タブレット時のスタイルを記述*/
}
@media screen and (max-width: 480px) {
/*スマートフォン時のスタイルを記述*/
}タブレットのレスポンシブ対応
レスポンシブ対応する際は、元のスタイルとどのように変更されているか確認することが大切です。
それでは、タブレット時にスタイルを調節する箇所を確認していきましょう。
スタイルを調節する箇所をまとめていくと、以下のようになります。
- 「サイト全体」の横幅
- 「mainタグ」と「asideタグ」の縦並び
- 「mainタグ」と「asideタグ」の横幅
- 「asideタグの中身」の横並び
- 「asideタグの中身」の横幅
- フォントサイズの調節
スタイルの変更点が確認できたところで、次は実際にスタイルを当てていきましょう！
サイト全体の横幅を調節する
@media screen and (max-width: 896px) {
.wrapper{
max-width: 90%;
margin: 0 auto;
}
}「mainタグ」と「asideタグ」を縦並びにする
.wrapper{
max-width: 90%;
margin: 0 auto;
flex-direction: column;
}元々、.wrapperに対して、display: flex;を指定しているので
「mainタグ」と「asideタグ」を縦並びにするためにflex-direction: colum;を適用します。
「mainタグ」と「asideタグ」の横幅を調節する
.main {
width: 100%;
margin-bottom: 40px;
}
.aside {
width: 100%;
}
縦並びにした「main」と「aside」の横幅を、.wrapperの中で横幅いっぱいに広がるように調節します。
「asideタグ」の中身を横並びにする
.aside {
width: 100%;
display: flex;
justify-content: space-between;
}
サイドバーの中の「おすすめ記事のリスト」とバナーのまとまりを横並びにするために、display: flex;を適用させます。
要素同士の間に余白をあけたいので、justify-content: space-between;を適用します。
「asideタグの中身」の横幅
.aside-banner {
width: 48%;
} バナーをまとめているdivタグに対して、横幅を調節します。
フォントサイズの調節
.header-sub-ttl {
font-size: 18px;
}
.article-txt {
font-size: 18px;
}
.aside-recommend-ttl {
font-size: 24px;
}
.aside-recommend-list {
font-size: 18px;
}
タブレット時にサイトを閲覧することを考慮して、フォントサイズも調節し、みやすいように整えてあげましょう。
ここまでの作業により、上記で確認したデザインと同じように、タブレット時のレスポンシブ対応を行う事ができました。
次は、スマートフォン時のレスポンシブ対応を行っていきましょう。
スマートフォンのレスポンシブ対応
それでは、スマートフォン時にスタイルを調節する箇所を確認していきましょう。
スタイルを調節する箇所をまとめていくと、以下のようになります。
- 「記事の中身」を縦並びにする
- 「記事の中身」の横幅を調節する
確認ができましたら、実際にスタイルを当てていきましょう！
「記事の中身」を縦並びにする
@media screen and (max-width: 480px) {
.article {
flex-direction: column;
}
}「main」の、画像とテキストが横並びになっているものを縦並びに直します。
「記事の中身」の横幅を調節する
.article-img {
width: 100%;
}
.article-body {
width: 100%;
}
「記事の中身の要素の横幅を、articleタグの横幅いっぱいに調節します。
ここまで記述できたら、今回のサイトのレスポンシブ対応は完了です！
