CSS実践編：CSSでのレイアウトstep13
前回は、positionによるレイアウトの指定、position:absolute;について、
実際にソースコードを記載し詳しくご説明いたしました。
実際のウェブページ作成現場でも、実際にヘッダーなどで多々使用することがございます。
気を付ける点といたしましては、多少異なりますが、floatと同じような挙動をします。
この点を初めから理解していると、比較的困ることは少ないように思います。
また、レスポンシブデザインでposition:absolute;を使用しますと、
パソコン用にCSSを上書きする際に、画面上からはみ出してしまい、
何処にブロックが行ってしまったのか、分からないなどという事が多々ございます。
その際は、一度position:relative;と上書きしてから、
基準となるブロックを確認して、positionを記載すると、比較的楽にレイアウトをおこなうことができることと思います。
それでは今回はッ…、
・重なった部分の余白調整
・ウィンドウに収まらないケース
上記について記載していこうと思います…。
ページ上部にナビの固定配置：fixed
positionプロパティによる指定は、絶対配置よりも固定配置のほうが、さらに特徴的な配置になります。
固定配置については、注意点もあるので慎重に使用する必要があるものの、
効果的に使えばユーサビリティーの向上にもなります。
最近良くみかける、ページ最上部のナビゲーション部分のみを固定配置し、
ウィンドウのスクロールに依存することなく常に表示されるサンプルを記載します。
固定配置にすることをふまえてHTMLコードは下記のようにします。
ボックスの大枠は#navigationと#containerのふたつに分けてあります。
#navigation内にはメニュー項目のul要素があり、#container内にはその他のコンテンツエリアが含まれます。
#sidebarを右にフロートして、#contentsの右マージンを調節して2段カラムのレイアウトになっています。
CSSのコードは、#containerの横幅を960pxに指定し、お決まりの左右のマージンをautoとし、
センタリングしています。
#navigationのpositionプロパティをfixed（固定）とし、
その位置を左上基準点から「top:0;left:0;」と指定しています。
これで#headerはウィンドウの左上にピッタリくっついた場所に固定されます。
widthプロパティを100%として、#navigationのボックスのみがウィンドウ幅いっぱいに伸びるようにしています。
さらに、そのなかのメニュー項目を横並びにするために、li要素のdisplayプロパティを
inlineとして、左右のマージンで項目同士の間の調整をしています。
※上記が完成形になります！
|
<!– HTML –> <div id=”navigation”> <ul> <li>メニュー</li> </ul> </div> <div id=”container”> <div id=”contents”> <div id=”sidebar”> <div id=”footer”> </div> |
<!– CSS –> body { text-align: center; margin: 0; padding: 0; color: #fff; } #navigation { backguround: #4c5482; position: fixed; left: 0; top: 0; width: 100%; height: 60px; text-align: center; } #navigation ul { margin: 0; padding: 0; list-style: none; } #navigation ul li { display: inline; line-height: 60px; margin: 0 20px; } #container { position: relative; text-align: left; margin: 0 auto; width: 960px; } #contents { background: #7b86ca; margin: 0 230px 30px 0; } #sidebar { width: 200px; background: #7b86ca; position: absolute; right: 0; top: 0; } #footer { background: #4c5482; } |
重なった部分の余白調整
上記のCSSでは、#containerの上の部分が#navigationの下になり、見えなくなる部分があります。
#containerの上のpaddingプロパティを調節して余白を設けることにします。
今回は#navigationの高さが60pxなので、20px分余白を加えて80pxという値を指定してみます。
これで上部のナビゲーションを固定表示するレイアウトは完成になります。
今回のようにナビゲーションを画面に常に表示させるデザインは、縦に長いページには便利かと思います。
※#containerの上の部分が#navigationの下になり、見えなくなってしまう。
#container {
text-align: left;
margin: 0 auto;
width: 960px;
padding: 80px 0 0;
}
ウィンドウに収まらないケース
fixedで固定配置を覆なう際は、サンプル画像のようなケースにも気を付けましょう。
表示領域の左上を基準として#sidebarを固定配置している例になりますが、
このような場合に#sidebar内に多くの内容を記載した為に縦が長くなると、
解像度の低い（ノートPC）ディスプレイでは、外にはみ出してしまう可能性があります。
#contentsはスクロールできるので問題ありませんが、固定配置された#sidebarは、
スクロールできないので、ウィンドウ内には#sidebarの途中までしか表示することができず、下のほうの内容を閲覧することができなくなってしまいます。
このような場合は、javascriptもしくは、CSS3で解消することができますが、おすすめはCSS3になりますが、CSS3は、また別記事にまとめたいと思います。
現段階では、解像度の低いモニターを考慮したデザインを心がけるようにすることをおすすめします。
今回は、position:fixedで要素を固定配置する方法を記載してみました。
実際のウェブ制作の現場では、頻繁に使用するposition:fixed
スマートフォン用のコーディングの際、コンテンツ内途中のブロック要素で、
背景画像をfixedで固定したい時に、fixedが効かない事なども多々ございます…。
その際は、色々な技術を使い実現するわけですが、現段階では、
headerやnavigationなどをfixedで固定配置できるようになれば良いのではないかと思います。
スマートフォン用CSS、ブロックごとの背景画像で使用するfixedの技術は、
また別記事で、追々記載していこうと思います…。
とりあえず、今回はここまで…。
お仕事のご依頼は↓コチラより…、それではまた次回…。
