ドットインストール：レスポンシブウェブデザイン入門#10~#12
ドットインストールさんでレスポンシブデザインについて学んでいます。
今日は#10~#12です。楽しみ！
前回の学習はこちらです。
#10 要素を左右に振り分けてみよう
前回までの学習で、幅の狭いスタイルの時にはうまくいきました。
次は、中くらいの幅の時のスタイルを考えます。
完成版を確認してみましょう。
「features」の部分は、
画像とテキストが左右に振り分けられています。
ちょっと見づらいですが、こちらが２枚目と３枚目の画像です。
画像が左、右、左と位置している形にしていきます。
また、「news」の部分はこのようになっています。
画像とテキストがこのように3つ並んでいる形になります。
「レスポンシブウェブデザイン」の#03で、中くらいの幅のときにはこのような設定をしていました。
/*medium*/
@media(min-width:570px){
}
幅が570px以上になったら「中くらい」のスタイルが適用されるのでしたね。
この続きを書いていきましょう。
まずは、featuresと画像の幅を指定します。
今回は、画像が幅に対して50%、
テキストは45%、
間の余白に5%をあてたいと思います。
.features p{
width:45%;
}
.features img{
width:50%;
}
そして、pは左右に振り分けます。
そのためのclassをつけましょう。
pに対して、右にふりわけたいところは
<p class="pull-right">
左にふりわけたいところは
<p class="pull-left">
というように書き足します。
そして、floatをあてていきます。
.pull-right{
float:right;
padding-left:5%;
}
pull-rightのときには
float:right;で
左側の余白を5%。
そしてもちろん、pull-leftのときには
.pull-left{
float:left;
padding-right:5%;
}
それから、floatを使ったので
親要素に対してoverflow:hidden;をつけましょう。
.features .item{
overflow:hidden;
}
ブラウザの幅を中くらいにして見てみましょう。
うん、いいですね。当初の目標通りの形になっています。
＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊
overfloaw:hiddenについては、CSSレイアウト入門の#07でも使っています。
#11 ニュースを横に並べてみよう
さて、次はnewsのところです。
横並びになるようにします。
floatを使ってもいいのですが、
最近だとflexboxがよく使われるそうです。
これらのitemの親要素に、display:flex;をつけます。
newsのitemの親要素がcontainerなので、こちらにスタイルをあてます。
.news .container{
display:flex;
}
また、アイテム間の余白が均等につくように
justfy-content:space-between;という指定もします。
.news .container{
display:flex;
justfy-content:space-between;
}
これで、flexboxで配置されているはずです。確認してみましょう。
こんなふうになっています。
みちみちですね！
横ならびに配置はされたのですが、
アイテムの幅を指定していなかったのでおすもうさんの満員電車みたいなことになっています。
幅を指定しましょう。
.news .item{
width:30%;
}
するとこうなります。
「？！」
ちゃんと30%にはなったようですが、
画像が大き過ぎて何がなんだかわからなくなっています。
画像の幅を、itemに対して100%になるようにしましょう。
.news .item img{
width:100%;
}
なるほど、いい感じになりました♪
これで、中くらいの幅のレイアウトはできあがりました。
次からは大きい幅のレイアウトですね。
＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊
display:flex;やjustfy-content:space-between;については
実践ウェブサイトを作ろうの#14でも取り上げられています。
floatよりも簡単な気がするのでぜひ覚えたい。
#12 画面幅が広い時のレイアウトを作ろう
最後に、画面幅が820px以上のときのレイアウトを作ります。
完成版はこんな感じ。
右上の、アイコンだった「メニュー」が
それぞれ姿を表しました。
また、画面幅を広げても
コンテンツの幅は820pxで固定されるように作ります。
/*large*/
@media(min-width:820px){
}
この続きを書いていきます。
まずは、containerの幅を、%ではなく820pxで固定します。
/*large*/
@media(min-width:820px){
width:820px;
}
(右上のメニューはまだアイコンのままですね)
ブラウザの幅を広げても、コンテンツの820pxになるようになりました。
次はメニューを作ります。
font awesomeを入れた次の行から、
リストを作ります。
（今回はリンクなどをはらずに、そのままだそうです＾皿＾）
リスト、ulにclassをつけましょう。
820px以上＝パソコンで見た場合、ということで
「header-pc-menu」です。
そして、この「header-pc-menu」にスタイルをあてます。
.header-pc-menu{
list-style:none;
padding:0;
margin:0;
リストの黒丸はなしに。
余計な余白がつかないようにします。
そのあと、この要素を横並びにします。
.header-pc-menu > li{
display:inline-block;
width:60px;
text-aline:center;
cursor:pointer;
}
リストにスタイルをあてます。
インラインブロックで並ぶようにし、
それぞれの幅は60pxに。
文字は中央揃えで、
マウスをあてると指さしが出てくるようにするとそれっぽいですね。
メニューが横ならびになりました。
さて、メニューさんたちは今左側にいるので、
floatで右側に飛ばします。
.header-pc-menu > li{
display:inline-block;
width:60px;
text-aline:center;
cursor:pointer;
float:right;
}
おなじみfloatさん。
こちらは、header-pc-menuのほうにもつけないといけませんね。
.header-pc-menu{
list-style:none;
padding:0;
margin:0;
float:right;
}
はい、右にいきました。
でも、あれれ？
アイコンも一緒に出たままなのでそれは次回になおしていくそうです！
＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊
display:inline-blockはCSS レイアウト入門の#13でも触れています。
