前回は、前々回に続きリキッドレイアウトにつきまして記載いたしました。
max-widthとmin-widthなどの概念が重要だと記載いたしましたが、
実は、ボックスで大きなブロックのレイアウトをおこない、
その要素には、paddingやmargin、borderなどの指定はおこなわず、
内包されるブロック要素にmarginやpaddingの指定をおこなっていくことも、とても重要です。
個人的にこの事柄をチョイチョイ忘れることが多々ございます。
アレッ！ボーダー書いちゃった！！
なぁ～んてことがあり、レイアウト幅が狂ってしまったりすることがあります。
皆さんは、ぜひそんなことにならない様、しっかりと覚えておきましょう。
それでは今回はッ…、
リキッドレイアウトよりさらに進んだ
・2段カラムのエラステックィックレイアウト
・ボックスの幅をem単位で指定
上記について、記載していきます…。
可変レイアウトにはリキッドレイアウトの他に、さらに進んだエラスティックレイアウトがございます。
ブラウザに実装されているズーム機能と同様の挙動をするレイアウトになります。
ブラウザで、フォントサイズだけを拡大・縮小しても、文字だけでなく
ボックスも同様に伸縮されるため、全体のレイアウトが崩れにくく、可読性の低下も避けられます。
ieで確認するとyahooでは、フォント拡大時にレイアウトも拡大
ブラウザで文字を拡大すると、文字と一緒に各ボックスの横幅も拡大
フォントサイズの変更時に有効なテクニック
エラスティックレイアウトは、リキッドレイアウトと同様、
可変レイアウトに分類されるテクニックになります。
しかしながら、リキッドレイアウトとは異なる特徴で、リキッドレイアウトの場合は、
ボックスの横幅を％で指定するため、ブラウザウィンドウの大きさにボックスが追従して
伸縮し、ボックス内のコンテンツが再配置されるものですが、
エラスティックレイアウトがその特徴的な変化の動きを見せるのは、
ブラウザの機能でフォントサイズを拡大。縮小させたときになります。
ボックスの幅をem単位で指定
エラスティックレイアウトは、ボックスの横幅をpxや％ではなくemで指定します。
em（エム）とは1文字分の長さから算出される単位で、50emならその時のフォントサイズの
50文字分の長さとなります。
そのため、ボックスの幅をemで指定しておけば、ブラウザでフォントサイズが
変更された時には、その変更後のフォントサイズがボックス幅のemにも適用されることとなります。
エラスティックレイアウトは、ボックス幅と文字の大きさを同時に変更できるため、
見やすいレイアウトを維持したままコンテンツを伸縮できるレイアウトになります。
文字とボックスが一緒に伸縮する
リキッドレイアウトであろうと固定幅レイアウトであろうと、
ブラウザでフォントサイズを変更することは可能です。
しかしながら、フォントサイズだけを変更してもボックス幅は変わりません。
そのため、場合によってはレイアウトが崩れてしまう事があります。
見やすくレイアウトしているウェブページの画面ならば、
整ったレイアウトのままで閲覧されたほうが読みやすく見やすいページになります。
それでは実際にサンプルとして、2段カラムのエラスティックレイアウトを記載してみます。
サンプルでは、#containerで全体を囲み、#header、#sidebar、#contents、#footerの
ボックスが配置され、#sidebarをfloat:left、#contentsをfloat:rightにて
2段カラムのレイアウトとしています。
<div id=”container”>
<div id=”header”>
<h1>ヘッダー</h1>
</div>
<div id=”contents”>
<p>メインコンテンツサンプルテキスト</p>
</div>
<div id=”sidebar”>
<ul>
<li>メニュー</li>
</ul>
</div>
<div id=”footer”>
<p>フッター</p>
</div>
</div>
一般的な2段カラムのレイアウトをエラステックレイアウトで記載する場合も、
HTMLの基本構造は通常のレイアウトと全く同じマークアップで問題ありません。
これは1emを10pxと同等の長さにセットするための指定方法になります。
一般的な多くのブラウザにおいては、たとえば1.4emなら14px、5emなら50pxと
ほぼ同じ長さで表示されるようになります。
上記「例」のHTML、#containerは「width:95em;」として、これで、
デフォルトのフォントサイズの時には950pxとほぼ同じ幅で表示されます。
#sidebarは「width:20em;」、#contentsは「width:70em;」として、
それぞれ左右にフローとするよう記載してみました。
そのため間には5em（デフォルトフォントサイズで約50px）の余白が生まれます。
body {
text-align: center;
margin: 0;
padding: 0;
font-size: 62.5%;
}
#container {
text-align: left;
margin: 0 auto;
width: 95em;
}
#header {
background: #4c482;
margin: 0 0 30px;
}
#contents {
float: right;
width: 70em;
background: #7b86ca;
margin: 0 0 30px;
}
#sidebar {
float: left;
width: 20em;
background: #7b86ca;
margin: 0 0 30px;
]
#footer {
clear: both;
background: #4c5482;
}
横スクロールを回避
そのため横スクロールが発生してしまう可能性があります。
レイアウトを崩さずズームが出来るのがエラスティックレイアウトの利点とはいえ、横スクロールはあまり歓迎されません。
そのような場合、ボックスについては一定の幅以上には広がらない様にmax-widthプロパティをあわせて指定しておく方法があります。
今回のサンプルコードでは、#containerに「max-width:1200px;」として、さらに#sidebarおよび#contentsにもmax-widthを指定しました。
#container {
txt-align: left;
margin: 0 auto;
width: 95em;
max-width: 1200px;
}
#contents {
float: right;
width: 70em;
max-width: 820px;
background: #7b86ca;
margin: 0 0 30px;
}
#sidebar {
float: left;
width: 20em;
max-width: 370px;
background: #7b86ca;
margin: 0 0 30px;
}
今回は、エラステックレイアウトの記載方法をご紹介いたしました。
このエラスティックレイアウトを使用してページを作成する場合は、
おもに記事内容でテキストを多く含むページに適しているものと思います。
個人的には、テキストが含まれる記事内容が多いページなどは
ほとんどといってイイほど、作成した経験はございませんが、
しかしながら、ページ作成の案件としてクライアントが普段見ている
ブラウザ環境などを考慮しますと、
覚えておいた方がいいレイアウトデザインだと思います。
とりあえず、今回はここまで…。
お仕事のご依頼は↓コチラより…、それではまた次回…。
- 投稿タグ
- css, ボックスレイアウト, エラステックレイアウト
