生涯、学習していきたい

2018年はプログラミング学習に凝っています。

ドットインストール:レスポンシブウェブデザイン入門#10~#12

ドットインストールさんでレスポンシブデザインについて学んでいます。

今日は#10~#12です。楽しみ!

f:id:ponnkichi:20180416223308p:plain

 

前回の学習はこちらです。

ponnkichi.hatenablog.com

 #10 要素を左右に振り分けてみよう

前回までの学習で、幅の狭いスタイルの時にはうまくいきました。

次は、中くらいの幅の時のスタイルを考えます。

 

完成版を確認してみましょう。

f:id:ponnkichi:20180414211024p:plain

「features」の部分は、

画像とテキストが左右に振り分けられています。

f:id:ponnkichi:20180414211049p:plain

ちょっと見づらいですが、こちらが2枚目と3枚目の画像です。

画像が左、右、左と位置している形にしていきます。

 

また、「news」の部分はこのようになっています。

f:id:ponnkichi:20180414211133p:plain

画像とテキストがこのように3つ並んでいる形になります。

 

「レスポンシブウェブデザイン」の#03で、中くらいの幅のときにはこのような設定をしていました。

ponnkichi.hatenablog.com

/*medium*/

@media(min-width:570px){

}

 幅が570px以上になったら「中くらい」のスタイルが適用されるのでしたね。

 

この続きを書いていきましょう。

まずは、featuresと画像の幅を指定します。

f:id:ponnkichi:20180414211024p:plain

今回は、画像が幅に対して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;

}

ブラウザの幅を中くらいにして見てみましょう。

f:id:ponnkichi:20180416215238p:plain

うん、いいですね。当初の目標通りの形になっています。

****************

overfloaw:hiddenについては、CSSレイアウト入門の#07でも使っています。

ponnkichi.hatenablog.com

#11 ニュースを横に並べてみよう

さて、次はnewsのところです。

f:id:ponnkichi:20180414211133p:plain

横並びになるようにします。

floatを使ってもいいのですが、

最近だとflexboxがよく使われるそうです。

 

これらのitemの親要素に、display:flex;をつけます。

f:id:ponnkichi:20180416215622p:plain

newsのitemの親要素がcontainerなので、こちらにスタイルをあてます。

.news .container{

display:flex;

 

 また、アイテム間の余白が均等につくように

justfy-content:space-between;という指定もします。

.news .container{

display:flex;

justfy-content:space-between;

 

 これで、flexboxで配置されているはずです。確認してみましょう。

f:id:ponnkichi:20180416215932p:plain

こんなふうになっています。

みちみちですね!

 

横ならびに配置はされたのですが、

アイテムの幅を指定していなかったのでおすもうさんの満員電車みたいなことになっています。

 

幅を指定しましょう。

.news .item{

width:30%;

}

 するとこうなります。

f:id:ponnkichi:20180416220119p:plain

「?!」

ちゃんと30%にはなったようですが、

画像が大き過ぎて何がなんだかわからなくなっています。

 

画像の幅を、itemに対して100%になるようにしましょう。

.news .item img{

width:100%;

}

 

f:id:ponnkichi:20180416220430p:plain

 

なるほど、いい感じになりました♪

 

これで、中くらいの幅のレイアウトはできあがりました。

次からは大きい幅のレイアウトですね。

 

 

****************** 

display:flex;やjustfy-content:space-between;については

実践ウェブサイトを作ろうの#14でも取り上げられています。

ponnkichi.hatenablog.com

floatよりも簡単な気がするのでぜひ覚えたい。

 

#12 画面幅が広い時のレイアウトを作ろう

最後に、画面幅が820px以上のときのレイアウトを作ります。

完成版はこんな感じ。

f:id:ponnkichi:20180416220851p:plain

右上の、アイコンだった「メニュー」が

それぞれ姿を表しました。

 

また、画面幅を広げても

コンテンツの幅は820pxで固定されるように作ります。

/*large*/

@media(min-width:820px){

}

 この続きを書いていきます。

まずは、containerの幅を、%ではなく820pxで固定します。

/*large*/

@media(min-width:820px){

width:820px;

}

 

f:id:ponnkichi:20180416221223p:plain

(右上のメニューはまだアイコンのままですね)

ブラウザの幅を広げても、コンテンツの820pxになるようになりました。

 

次はメニューを作ります。

f:id:ponnkichi:20180416221409p:plain

font awesomeを入れた次の行から、

リストを作ります。

(今回はリンクなどをはらずに、そのままだそうです^皿^)

 

f:id:ponnkichi:20180416221512p:plain

リスト、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に。

文字は中央揃えで、

マウスをあてると指さしが出てくるようにするとそれっぽいですね。

f:id:ponnkichi:20180416222042p:plain

メニューが横ならびになりました。

 

さて、メニューさんたちは今左側にいるので、

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;

}

 

f:id:ponnkichi:20180416222325p:plain

はい、右にいきました。

 

でも、あれれ?

アイコンも一緒に出たままなのでそれは次回になおしていくそうです!

 

****************

display:inline-blockはCSS レイアウト入門の#13でも触れています。

ponnkichi.hatenablog.com