【初心者必見】サイトの組み立て方レスポンシブ編～画像＆動画付き「過保護説明」
今回は、サイトの組み立て方「番外編２」ということで、前回までのサイトにレスポンシブを加えていきたいと思います！
前回まで復習は下記を参照
【保存版】超初心者のためのサイトの組み立て方！画像＆動画付き「過保護説明」
【初心者必見】サイトの組み立て方Bootstrap編～画像＆動画付き「過保護説明」
ちなみに、こちらのサイトでのレスポンシブはそこまで難しいものではないです！
とてもシンプルで簡単♪だからこそ初心者には非常に勉強になり、この方法は、ほとんどのレスポンシブサイトで使えるものだと思います(^^)
今回は、パソコンサイズと、タブレットサイズ（幅740px）の2種類を説明していきます。
Contents
まずはレスポンシブで変わる部分を見てみよう！
上記のサイトを開き、画面を縮めてみながら、変わる部分をチェックしてみましょう！
まずは、レスポンシブ用のスタイルシートを用意しよう！
まずは、レスポンシブ用のスタイルシートを用意し、「○○サイズになったら、このスタイルシートにリンクをする」という指定を、htmlに入れてあげましょう。
今回ですと、740pxの時に、レスポンシブデザインを採用するので、下記の通りに記述し、＜head＞の中に貼り付けてください。
|
1 |
<link rel="stylesheet" type="text/css" href="responsive.css" media="screen and (max-width:740px)"> |
これはどういった指定かと言うと、
上記のサイズになったら、responsive.cssを適用してくださいね！という意味です。
意外とこの部分を忘れて、リロードしても反映されない！ということがあるので（私です笑）、お気をつけください(-_-)
CSSの書き方は？
通常のCSSの書き方と全く同じです(^o^)
何も指定がない場合は、通常のCSSが反映されるだけで、変更がある部分だけ、記述していけばOKです！
変わる部分は下記の５か所です。
１．ヘッダーの右の部分が消える
２．背景画像のサイズ、文字・ボタンのサイズ
３．「いつも完璧な贈り物」の部分が縦並びになる
４．「ギフトカードをもらったら」の部分のボタンのサイズ
５．↑下の４つ横並びのところが消える
一つづつ見ていきましょう！！
１、５の「消える」部分
まず、１の部分、５の部分は「消える」というところが同じですね！
この「消える」という記述は、display: none;になります。実際のコードは下記の通りになります。
まずは、ヘッダーの部分です。
|
1 2 3 |
.right-menu{ display: none; } |
そして、４つ並びのところですね！
|
1 2 3 |
.last-colum-all{ display: none; } |
この二つはそこまで難しいところではありませんが、画面を小さくした際に、いらない部分を非表示にするということは、よくあると思うので、覚えておきましょう！
２．背景画像・文字、ボタンのサイズ
この部分は、普通のCSS通りデザインしていくだけなので、CSSの知識があれば、そこまで難しくはないかな？と思います。
一応、私の記述をシェアしておきますね！
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
/*背景画像です*/ .main-image{ clear: both; height: 450px; } /*旅を贈ろうの部分です*/ h1{ font-size: 35px; padding: 100px 0 0 50px; } /*Airbnbギフトカードで～の部分です*/ .main-p{ padding-left: 50px; } /*ボタンです*/ .mainbutton{ margin-left: 50px; } |
３．「いつも完璧な贈り物」の部分が縦並びになる
横並びが縦並びになる、ここがレスポンシブっぽいところですね。コードから行ってみましょう！
|
1 2 3 4 5 |
.second-colum{ display: block; width: 100%; margin: 0 auto; } |
上から説明していきますね！
display: block;
まずは横並びだったものを、ブロック要素にすることで、縦並びに変えます！ブロック要素の特徴としては、下に並んでいく、ということでしたね(^^)
下記らへんを参考にしてみてください！
＜li＞タグにおけるdisplayプロパティ「block」「inline」の過保護説明！
これで縦並びになりました。
width: 100%;
縦並びになったものの、横幅のサイズが指定されているため、こじんまり左寄せになってしまっていますね。
ですので、まずは、横幅いっぱいに広げます！
margin: 0 auto;
今度はそれを、中央寄せにする必要があります！ブロック要素の中央寄せと言えば、この記述ですね！
ちなみに、この記述は、widthの指定が必須になりますので、ご注意くださいm(_ _)m
４．「ギフトカードをもらったら」の部分の文字、ボタンのサイズ
最後のこの部分ですが、ボタンの幅のみ変えればOKかな？と思います。
|
1 2 3 |
.gift{ width: 98%; } |
幅はpxで指定してもOKですが、だいたい％も便利ですよ(^^)
Bootstrapではどうなる？
ちなみに、Bootstrapを使用して、レスポンシブ化すると便利だなと思う部分は、3つ並びの部分ですね！
この部分のレスポンシブの記述に関しては、下記のブログが参考になると思いますので、見てみてください(^^)
Bootstrapって実際のサイトではどうやって使うの？的な話。画像＆動画付き「過保護説明」
まとめ
このサイトの模写は、基礎が詰まっているので、サイト作成初心者には持って来いで、非常に勉強になりますね！
なんとなくの組み立て方や記述方法を頭に入れつつ、少しづつステップアップしていくといいのではないかなと思います(^^)
以上です！
