こんにちは！管理人ピスカです（@rina_pisca）！
只今デイトラWEB制作コース中級編（WEB制作コース開始76日目）ですが、初級偏の学習記録を振り返って残したいと思います。
管理人ピスカです。
１９９０年大阪市生まれ
3年間エステ、5年間美容皮膚科カウンセラー
その後、保育士資格を取得し３年間保育士として勤務
長男11時間保育園に預けるフルタイムワーキングママ
育休中に在宅ワークを目指してWEBスキル習得中です！
デイトラとは？
筆者は以前少しだけワードプレスでのブログ運営はしておりましたがすぐに挫折し、ほぼWEBスキル0からのスタートです。
まず、HTML、CSS、コーディングって何？のレベルから始めました。
デイトラWEB制作コースはそんな全くの未経験でも初級編だけで月5万のスキルが身に付くという内容の“未経験でも・迷わず・楽しく”学べるオンラインスクールです。
中級、上級レベルになると本業でバリバリやっていけるスキルが身につきそうです♪
今までのデイトラ初級学習記録はこちら
DAY5からはデイトラ簡易サイトをレッスン動画を見ながら実際に手を動かして作成します。
DAY6まではサイト全体を一通り完成しました。
今回はDAY７レスポンシブ表示編。
スマホやタブレット対応のサイトにしていきます。
DAY７でいよいよ完成です♪
HTMLとCSSのコードも残してますので、答え合わせにも使ってくださいね♪
WEB制作コース初級編 DAY６ ゼロからサイトを作ってみよう③
DAY７ レスポンシブ表示編の主な内容がこちら
- 画像の上に文字を載せよう
- レスポンシブで表示しよう
- 困ったらまずはよくある質問をご覧ください
画像の上に文字を載せよう！
ここでのレッスン動画はtopについての内容です。
topにつきましてはDAY６メインコンテンツ編でまとめているのでこちらをご覧ください♪
レスポンシブで表示しよう！
ついに最後のレッスンです♪
レスポンシブ対応とは表示させる画面の大きさ、すなわちスマホやタブレットでもどんなデバイスでも見やすいサイトに表示対応することです。
ちなみに、デバイスの画面のサイズに合わせて表示を切り替えるポイントをブレイクポイントといいます。
よく使われているブレイクポイントはこちらです。
- スマホ 〜767px
- タブレット. 768〜1100px
- PC. 1101px〜
レスポンシブ対応では主にCSSに追加していきます。
メディアクエリ基本の型
@media only screen and (max-width:767px){
.clear::after{
content: none;
}
}
こちらがメディアクエリと言われるレスポンシブ対応の型です。
今回はスマホ用サイズで767pxで指定です。
この指定で表示画面が767px以下になったらレスポンシブ対応にすることができます。
@media only screen and (max-width:767px)の後の{ }の中に全て書き込んでいきます。
まずはレスポンシブ共通CSSとして.clear::afterのcontent: none;
こちらはfloatをはずすことによってheaderの表示がずれていたので書いています。
header
header レスポンシブCSS .header-left{ float: none; } .header-title{ text-align: center; } .header-right{ float: none; } .header-nav{ display: flex; justify-content: space-between; } .header-nav-item{ float: none; margin: 0; }
- float: none; pc表示でfloatで横並びにしているので、横並びをはずして縦に表示するため
- .header-nav のみ横並びにしたいのでflexboxを使います。
- justify-content: space-between; 各アイテムを均等に配置する
top
top レスポンシブCSS .top{ padding: 120px 0; } .top-title{ font-size: 32px; } .top-subtitle{ font-size: 14px; }
それぞれ余白とフォントサイズでバランス調整。
section共通class
section共通class レスポンシブCSS
.section{
padding: 80px 0;
}
.section-title{
font-size: 24px;
}
.section p{
font-size: 14px;
}
それぞれ余白とフォントサイズでバランス調整。
about
about レスポンシブCSS .about-left{ float: none; width: 100%; margin-bottom: 20px; } .about-right{ float: none; width: 100%; }
- 画像とテキストが横並びだと画像が小さくなり見えにくいため、floatをはずして縦に並ぶように。
- width: 100%; 横幅は画面横いっぱいに表示
course
course レスポンシブCSS
.course-wrapper{
flex-wrap: wrap;
}
.course-item{
width: 100%;
margin-bottom: 20px;
}
flex-wrap: wrap;で子要素<div class=”course-item”>が親要素<div class=”course-wrapper”>におさまらない時に折り返す
input
input レスポンシブCSS
input[type="email"],input[type="text"]{
width: 100%;
}
inputの枠はwidth: 600px;からwidth: 100%;に
footer
footer レスポンシブCSS
.copyright{
font-size: 10px;
float: none;
text-align: center;
}
- float: none; floatをはずして
- text-align: center; センター表示に
- フォントサイズもバランスよく
よくある質問
- レスポンシブ対応がうまく反映されません
- ディアクエリのCSS設定で、.header-nav-item{float:none;}を設定する意味が分かりません
- スマホサイズにした際に、「デイトラとは」のセクションの画像とテキストが横並びのままになってしまう
- width: 100%が反映されない。
まとめ
つ、い、に！完成〜！！
おつかれさまでした〜！！かんぱ〜い♪
１週間でサイトが自分で作れちゃいましたね！
DAY８、９はHTML/CSSのコーディング復習でまとめる内容がほぼ同じなので割愛いたしまして、次回はDAY１０〜１１Bootstrapの基本編です。
是非続けてご覧ください♪
最後までご覧いただきありがとうございました！
