ドットインストールでCSSレイアウト入門 #10~#12
CSSレイアウトで、2カラムや3カラムの作り方などを学んできました。
今回は、レイアウトの幅を変えたりしてみましょう！
#10 可変幅のカラムを作ってみよう
#08と#09で、2カラムや3カラムの幅を変える方法を学びました。
今回は、「〇〇px」という数値（固定幅）ではなく、
ブラウザの幅が変わったときに柔軟に対応できる可変幅のカラムを作ってみましょう。
全てのカラムを可変幅にする
固定幅にするためにcontainerを指定していたので、それをとります。
取る前
<main>
<div class="container clearfix">
<div id="left">Left</div>
<div id="center">Center</div>
<div id="right">Right</div>
</div>
</main>
取った後
<main>
<div class=" clearfix">
<div id="left">Left</div>
<div id="center">Center</div>
<div id="right">Right</div>
</div>
</main>
今回は、ブラウザの幅に合わせて、
左が20%、センターが60%、右が20%の割合で表示されるように作ります。
#left{
background: limegreen;
float: left;
width:20%;
}
#center{
background: seagreen;
float: left;
width:60%;
}
#right{
background: lightgreen;
float: left;
width:20%;
}
全部、float:leftになっています。
ブラウザで見るとこのようになっています。
3カラムになっていますね。
ブラウザの幅を縮めると、合わせてそれぞれのカラムの幅も変わります。
細くしたら、それぞれのカラムも一定の割合を保って細くなりましたね。
どれかを固定幅に、残りを可変幅にする
今回は、左右のカラムを100pxにしつつ、残りはセンターに割り当てるという方法をとって見たいと思います。
まずは、左カラム。
#left{
background: limegreen;
float: left;
width:100px;
}
左カラムの幅は100pxにします。
次に右カラム。
#right{
background: lightgreen;
float: right;
width:100px;
}
floatはrightにして、幅を100pxにします。
これで、右カラムは右に寄ることになりますね。
センターは、
まずはfloatを外します。
幅も指定しません。
そして、marginをつけることで、
その左右に左カラムと右カラムが置かれるようにしたいと思います。
#center{
background: seagreen;
margin: 0 100px;
}
こんな方法があるんですね！
なるほど、marginをとったセンターがしっかりと位置して、
その左右に浮かんだカラムがふわっと着地するイメージですな！
シンプルなやり方なのですが、これには一つ注意点があります。
あれ、ずれてるよ？右が下に落ちちゃってる。
これはどうしてかというと、floatする要素は、他の要素よりも先に書かなくてはならないというルールがあるからなのです。
floatする要素は他の要素よりも先に書かなくてはならない
まずはhtmlの画面を直しましょう。
直す前はこうなっています。
<main>
<div class=" clearfix">
<div id="left">Left</div>
<div id="center">Center</div>
<div id="right">Right</div>
</div>
</main>
この、centerの位置を下にします。
<main>
<div class=" clearfix">
<div id="left">Left</div>
<div id="right">Right</div>
<div id="center">Center</div>
</div>
</main>
センター、一番下にやってきました。
こうすると、
はい、無事に想定通りの画面になりました。
ブラウザの幅を変えると、
左と右の幅は変わらず100pxで、
センターカラムの幅だけが変わるようになりました。
2カラムで、leftを固定幅、rightを可変幅にする
2カラムにするので、先ほどのセンターさんはさよならです。
<main>
<div class=" clearfix">
<div id="left">Left</div>
<div id="right">Right</div>
</div>
</main>
leftとrightだけの状態に戻りました。
固定幅にするleftのほうをfloatにするので、
leftの方を上に書きます。
floatする要素は、他の要素よりも先に書かなくてはならない
というルールがありますからね。
leftのほうは、先ほどのまま。
#left{
background: limegreen;
float: left;
width:100px;
}
float:leftになっています。
rightのほうは、floatを外して、先ほどと同じようにmarginを設定します。
#right{
background: lightgreen;
margin-left: 100px;
}
「左側に100pxの余白をとりますよ」ということですね。
そうすると、このようになります。
ちゃんと表示されていますね。
ブラウザの幅を縮めても、leftの幅は変わらないのがわかります。
なるほど！
ブログなどを作るときに、
サイドカラムが細くなりすぎたら見づらかったりしますものね。
そのようなときにはサイドカラムを固定幅に。
メインの記事のほうを可変幅にするといいかもしれないですね！
わくわくしますね＾皿＾
#11 リストでメニューを作ってみよう
今回はヘッダーのメニューを作ります。
さっそく、ヘッダーの中身を作っていきましょう。
ヘッダーのメニューは、意味的にはリストなので<ul>でリストを作ります。
<header>
<div class="container">
<ul id="menu">
<li a herf="">Menu 1</a></li>
<li a herf="">Menu 2</a></li>
<li a herf="">Menu 3</a></li>
</ul>
</div>
</header>
メニューには、よくリンクがつけられているのでaタグもつけておきましょう。
(リンク先は、まだ空です)
ブラウザで見ると、現段階ではこのようになっています。
メニューが縦に並んで、マークアップもついていますね。
余白もついているようです。
これを、メニューらしく変えていきましょう。
ul#menu{
padding: 0;
margin: 0;
list-style-type: none;
}
paddingとmarginを0にして余白をなくします。
list-style-type: none;で、リストのマークアップ（点）もなくなります。
ちなみに、リストのスタイルに関しては
さて、ブラウザで見てみましょう。
はい、余白と点がなくなりましたね。
でも、ヘッダーのメニューは、このように縦になっていないですよね。
たいていは横並びのものをイメージします。
横並びにしてみましょう。
横並びにするには、いろいろな方法があるのですが
最近はこのようにすることが多いそうです。
ul#menu > li{
display: inline-block;
}
セレクタに不等号を入れる意味は
この場合は、ul#menuの直下のliは、この形式にしてね、という意味になります。
また、displayプロパティやインラインボックスに関しては、
そうすると、このようになります。
横並びになりましたね！
横並びにしたあとの幅と高さなのですが、
li要素につけるというよりも、
liの下にあるa要素につけることでクリックできる領域を広げることができます。
これも付け足します。
ul#menu > li > a{
display: inline-block;
width: 80px;
height: 40px;
background: orange;
}
a要素の部分がどこかわかりやすくなるため、背景色をオレンジにしてくれていました（感謝！）。
なるほど！このオレンジの部分に、幅と高さが設定されたということですね。
ちなみにinline-blockを使うと、Menu1とMenu2の間などに、空白ができてしまうのです。
この空白をとってみましょう。
いろいろなやり方があるそうなのですが、一つのやりかたとしては
ulのほうのフォントサイズを0にして
ul#menu{
padding: 0;
margin: 0;
list-style-type: none;
font-size: 0;
}
そして、
さきほどのaのほうに正しいフォントサイズを書くのだそうです。
ul#menu > li > a{
display: inline-block;
width: 80px;
height: 40px;
background: orange;
font-size: 16px;
}
そうすると、
間の空白がなくなりました！
リストではなくて、リンクのほうにフォントサイズを設定すれば
空白がなくなる理由…なんだろう。
よく考えても全くわかりませんが、未来の自分には理解できると信じて（？）
次に行きたいと思います！
#12 メニューを完成させよう
さあ、だんだんヘッダーがヘッダーらしくなってきました！＾皿＾
今回はさらにメニューの完成度を高めるそうです。楽しみですね。
まず、先ほどのメニュー。
この下線をとることと、文字を上下中央に配置したいと思います。
aのところに指定していきましょう。
text-decoration: none;
とすることで、下線が取れます。
text-aline: center;
とすることで、左右で中央揃えにすることができます。
上下の中央揃えにするにはいろいろな方法があるのですが、
heightとline-heightを揃えると、上下が均等に割り当てられるので結果的に中央揃えになります。
ul#menu > li > a{
display: inline-block;
width: 80px;
height: 40px;
background: orange;
font-size: 16px;
text-decoration: none;
text-aline: center;
line-height: 40px;
}
line-heightに関しては、CSS入門編の#22で学習しています。
できました！かっこよくなりましたね。
マウスを近づけると、ちゃんと指差してくれますよ！
さて、次は、マウスをあてたときにちょっと色が変わるようにしたいと思います。
そんなときには、hoverを使いますね。
hover に関しては、CSS入門編の#06で学習しました。
また、CSS3の#17でもふれています。
色を変えるのも楽しいのですが、今回は透明度を上げる方法でいきます！
ul#menu > li > a :hover{
opacity: 0.5;
}
「透明度」とかテンションが上がりますよね（＞▽＜）
なんというか、嗜好にぐいぐいくる感じがします。
opacityについては、CSS3の#04でも学習しました。
マウスが乗った時に、ほら！透明度が上がりましたよね（＞▽＜）
ああ、楽しすぎる…！
このように色が変わると「クリックできるよ」ということがわかりやすくなりますね。
今は、マウスが乗った時に素早く色が変わりますが、
じんわり変わってほしいときにはtransitionを使います。
ul#menu > li > a :hover{
opacity: 0.5;
transition: 0.8s;
}
こうすると、じんわりと0.8秒の時間をかけて切り替わってくれます。
（動画でないと伝わらない）
伝わらないけれど楽しいですね。
ついにかっこいいヘッダーができあがりました！
続きも楽しみです。
