2007年06月29日

ボックスの背景をそろえたい


今回は、サイドメニューがあるページで、メニュー部分背景の高さとコンテンツ部分背景の高さ、ボックスの背景をそろえるためのコーディングをご紹介します。

サイドメニュー部分、メインコンテンツ部分が枠で囲まれているようなデザイン(右図参照)でその枠の高さを揃えたい場合、みなさんはどのようにコーディングされますか?
テーブルで実現するのは簡単ですが、cssコーディングで実現するのは意外に難しいものです。

mainとsidemenuに背景を設定し、高さの指定なしに表示 すると、表示内容によってボックスの高さが決まってしまいま す。図2では、sidemenuの表示内容が少なく、contentsよりも ボックスの高さが小さくなり、ボックスの下がそろいません。



(htmlコーディング)
<div id="contents00">
<div id="main00">
テキストテキストテキスト・・・・
</div>
<div id="submenu00">
テキストテキストテキスト・・・・
</div>
<div class="clear">&nbsp;</div>
</div>
(cssサンプル)
#contents00 {
width:700px;
}
#main00 {
float:left;
width:400px;
padding:10px;
border:2px solid #000000;
}
#submenu00 {
float:right;
width:230px;
padding:10px;
border:2px solid #000000;
}
.clear {
clear:both;
height:0;
font-size:1px;/* ←↓ ブラウザで文字サイズ拡大した際に崩れないように。*/
line-height:0;
}
※ このサンプルでは解説のため、わかりやすいように、ソースが長くならないようborderでボックスを表現しています。この記事の最後に背景指定によるサンプルをご用意しておりますので、必要な方はそちらをご参考ください。

まず、思いつくのはmainとsubmenuのheightに同じ値を設定してしまう方法でしょう。main、submenu内のテキストをほとんど変更しない場合は有効と言えるかもしれませんが、汎用性がありません。もし、内部のテキストの高さがmain、submenuに設定した高さを超えてしまった場合はfirefoxでは、テキストがボックスをはみ出して表示されるという深刻な表示崩れを起こしてしまいます。(overflow:hiddenを指定すれば、はみ出したテキストの表示を消すことができます。また、IEではボックスの高さが自動で広がるため、main、submenuのボックスの高さがそろわなくなります。)
(htmlコーディング)
<div id="contents01">
<div id="main01">
テキストテキストテキスト・・・・
</div>
<div id="submenu01">
テキストテキストテキスト・・・・
</div>
<div class="clear">&nbsp;</div>
</div>
(cssサンプル)
#contents01 {
width:700px;
}
#main01 {
float:left;
width:400px;
height:200px;
padding:10px;
border:2px solid #000000;
}
#submenu01 {
float:right;
width:230px;
height:200px;
padding:10px;
border:2px solid #000000;
}
.clear {
clear:both;
height:0;
font-size:1px;/* ←↓ ブラウザで文字サイズ拡大した際に崩れないように。*/
line-height:0;
}

では、どうすればいいのでしょうか? 少し発想を変えてみてください。main、submenuに背景を設定してうまくいかないのであれば、別の場所に設定してしまえば良いのです。mainとsubmenuの親要素であるcontentsの背景にmainとsubmenuの背景を指定してしまうのです。言葉だけでは解からないと思いますのでサンプルをごらんください。
(htmlコーディング)
<div id="contents02">
<div id="main02">
テキストテキストテキスト・・・・
</div>
<div id="submenu02">
テキストテキストテキスト・・・・
</div>
<div class="bottom">&nbsp;</div>
</div>
(cssサンプル)
#contents02 {
width:700px;
background:url(images/back.gif) repeat-y left top;
}
#main02 {
float:left;
width:400px;
margin-left:2px;
padding:10px;
border-top:2px solid #000000;
}
#submenu02 {
float:right;
width:230px;
margin-right:2px;
padding:10px;
border-top:2px solid #000000;
}
#contents02 .bottom {
clear:both;
height:2px;
background:url(images/bottom.gif) no-repeat left bottom;
font-size:1px;/* ←↓ ブラウザで文字サイズ拡大した際に崩れないように。*/
line-height:0;
}


いかがでしょうか? デザインを実現させるためには、見た目に忠実にコーディングするだけではなく、ときには違った見方、上からページ全体をとらえる目線が必要となります。
このテクニックはさまざまな局面に応用できます。使いこなせれば、コーディングの幅が広がり、より多くのデザインパターンに対応できるようになります。
(htmlコーディング)
<div id="head03">
ヘッダ
</div>
<div id="contents03">
<div id="main03">
テキストテキストテキスト・・・・
</div>
<div id="submenu03">
テキストテキストテキスト・・・・
</div>
<div class="bottom">&nbsp;</div>
</div>
(cssサンプル)
#contents03 {
width:700px;
background:url(images/back03.gif) repeat-y left top;
}
#main03 {
float:left;
width:404px;
padding:18px 10px 10px 10px;
background:url(images/main_head.gif) no-repeat left top;
}
#submenu03 {
float:right;
width:234px;
padding:18px 10px 10px 10px;
background:url(images/submenu_head.gif) no-repeat left top;
}
#contents03 .bottom {
clear:both;
height:8px;
background:url(images/bottom03.gif) no-repeat left bottom;
font-size:1px;/* ←↓ ブラウザで文字サイズ拡大した際に崩れないように。*/
line-height:0;
}
posted by baba at 17:51 | テクニック

2007年06月15日

背景画像の表示方法-基本編

今回は、「角が丸い背景(角丸)の実現方法」をご紹介していきます。

サイドメニューや、コンテンツをグループ毎に表示する際など、
角が丸くなっている枠で囲まれているページを見たことがあるかと思います。

この角が丸くなっているボックスのことを通称「角丸」といいますが、
みなさんはこの角丸をどのようにコーディングされていますか?

css3では、角を丸くするスタイルや
1つの要素に複数背景画像を設定することができますが、
まだ策定段階(対応していないブラウザがほとんど)
のため、今回は触れません。

角丸の実現方法はいくつかあると思いますが、
私からは下記の3パターンご紹介します。

 
「分割なしのパターン」
これは、普通に背景に設定するだけのパターンです。
(htmlコーディング例)
<div class="entry1">
テキスト<br />
テキスト<br />
テキスト
</div>
(cssサンプル)
.entry1 {
padding:10px;
background:url(images/back.jpg) no-repeat left top;
}
このパターンは、例えば、見出しの背景など、
枠内の内容が増えたりしない、
ボックスの大きさが完全に決まっているデザインの場合のみ使用できます。
 
「2分割のパターン」
まずは、ソースをごらんください。
(htmlコーディング例)
<div class="entry2">
<div class="body">
テキスト<br />
テキスト<br />
テキスト
</div>
</div>
(cssサンプル)
.entry2 {
background:url(images/bottom2.jpg) no-repeat left bottom;
}
.entry2 .body {
padding:10px;
background:url(images/top.jpg) no-repeat left top;
}

このパターンはボックスの下の画像の高さを余計に高くとり、
上の画像で押さえつけるようなイメージです。(上図参照)

下の画像、bottom2.jpgの高さの分だけ
ボックスがタテに伸びることができます。

bottom2.jpgのポジションをbottomにしないと
下が切れたような表示になってしまいますのでご注意ください。
 
「3分割のパターン」
このパターンは他の2パターンと違い、ボックスがどれだけ長くなっても対応することができます。特にコーディングに制限がなければ、このパターンを使うと無難ですが、コーディングが少し複雑になってしまうのが難点です。
 
(htmlコーディング)
<div class="entry3">
<div class="body">
テキスト<br />
テキスト<br />
テキスト
</div>
<div class="bottom">&nbsp;</div>
</div>
(cssサンプル)
.entry3 {
padding-top:4px;/* ←top.jpgの高さ*/
background:url(images/top.jpg) no-repeat left top;
}
.entry3 .body {
padding:6px 10px 6px 10px;
background:url(images/body.jpg) repeat-y left top;
}
.entry3 .bottom {
height:4px;/* ←bottom.jpgの高さ*/
background:url(images/bottom.jpg) no-repeat left bottom;
font-size:1px;/* ←↓ ブラウザで文字サイズ拡大した際に崩れないように。*/
line-height:1px;
}
entry3クラスで左右のpaddingを設定したり、
bodyクラスで左右のmarginを設定したりすると、
崩れてしまいますのでご注意ください。

もし、グラデーションやドロップシャドゥの無い、
枠組みだけの角丸の場合は、bodyクラスに背景画像ではなく、
左右のボーダーをつけることでも対応可能です。
 
補足) さらにスタイリッシュにキメるなら
3分割パターンのhtmlのソースをごらんください。

<div class="bottom">&nbsp;</div>

という部分があります。
この行はボックスを閉じるためのものですが、
htmlのソースのみで見た場合、全く意味のないソースです。

もし、このボックス内にタイトル表示部分があれば、
この意味のないソースを取り除くことができます。

以下にコーディング例を表記します。
(htmlコーディング)
<div class="entry4">
<div class="title">タイトル</div>
<div class="body">
テキスト<br />
テキスト<br />
テキスト
</div>
</div>
(cssサンプル)
.entry4 {
background:url(images/body.jpg) repeat-y left top;
}
.entry4 .title {
padding-top:4px;
background:url(images/top4.jpg) no-repeat left top;
}
.entry4 .body {
padding:6px 10px 10px 10px;
background:url(images/bottom.jpg) no-repeat left bottom;
}
posted by baba at 19:05 | Comment(0) | TrackBack(0) | テクニック

2007年06月04日

フッタ部分リンクメニューのリストタグによる実現方法

第1回目は「フッタ部分リンクメニューのリストタグによる実現方法」について、お話します。

まずは弊社のホームページ、フッタ部分をごらんください。


| 会社概要 | お問い合わせ | 個人情報保護方針 | 採用情報 | サイトマップ |

というような、リンクがあるかと思います。
このようなリンクメニューは
さまざまなサイトのヘッダ部分、フッタ部分に使用されています。
 
みなさんがこのようなリンクメニューを表現する場合、
どのようにコーディングされますか?

「どのようにコーディングする? そのままコーディングするに決まってるじゃん。」

と、ほとんどの方が考えると思います。
具体的には下記のようになるわけですね。

htmlコーディング例
<div>
|会社概要 | お問い合わせ | 個人情報保護方針 | 採用情報 | サイトマップ |
</div>

※アンカータグは省略
 
これでも問題はありませんが、あまりスマートではないように思います。

私がこのソースをスマートではないと考える要因は3つ

・ メニューの区切りである“|”を直接書いている。
・ それぞれのリンクの間隔をスペースでとっている。
・ 個々のリンクをひとまとめに書いている。

ではどのように作ればスマートなのか?
私はリストタグを使用するとよりスマートであると考えます。

htmlコーディング例
<div id="footerMenu">
<ul>
<li><a href="https://www.evol-ni.com/company/index.html">会社概要</a></li>
<li><a href="https://secure.evol-ni.com/contact/">お問い合わせ</a></li>
<li><a href="https://secure.evol-ni.com/policy/index.html">個人情報保護方針</a></li>
<li><a href="https://www.evol-ni.com/recruit/index.html">採用情報</a></li>
<li><a href="https://www.evol-ni.com/sitemap/index.html">サイトマップ</a></li>
</ul>
</div>
cssサンプル
* {
margin:0;
padding:0;
}
#footerMenu {
text-align:center;
}
#footerMenu ul {
display:inline;
border-left:1px solid #000000;
}
#footerMenu li {
display:inline;
padding-left:10px;
padding-right:10px;
border-right:1px solid #000000;
}
 
メニューの区切りである“|”は、<li>にborder-rightを付け、
<ul id="footerMenu">にborder-leftを付けることで表現、
それぞれのリンクの間隔はpaddingで開けています。

もし、メニュー両端の“|”がいらない場合は、
<ul id="footLink">のborder-leftを取り、
最後の<li>のborder-rightを0にすればよいのです。
htmlコーディング例
<div id="footerMenu">
<ul>
<li><a href="https://www.evol-ni.com/company/index.html">会社概要</a></li>
<li><a href="https://secure.evol-ni.com/contact/">お問い合わせ</a></li>
<li><a href="https://secure.evol-ni.com/policy/index.html">個人情報保護方針</a></li>
<li><a href="https://www.evol-ni.com/recruit/index.html">採用情報</a></li>
<li class="last"><a href="https://www.evol-ni.com/sitemap/index.html">サイトマップ</a></li>
</ul>
</div>
cssサンプル
* {
margin:0;
padding:0;
}
#footerMenu {
text-align:center;
}
#footerMenu li {
display:inline;
padding-left:10px;
padding-right:10px;
border-right:1px solid #000000;
}
#footerMenu li.last {
border-right:0;
}
posted by baba at 15:04 | Comment(0) | TrackBack(0) | テクニック

初めのあいさつ

はじめまして、新入社員の馬場です。
これからどうぞよろしくお願いします。

このブログでは弊社、株式会社エボルニが
これまでのホームページ制作により培ってきた
CSSコーディングの技術をご紹介いたします。

CSSコーディングについて、
先輩社員から教えてもらったコアなことから
私の観点から見た少し初歩的なことまで、
さまざまなものを載せ、
熟練者の方から初心者の方まで
楽しめる内容にしていきたいと思います。

このブログがCSSのリファレンス代わりに利用され、
少しでもあなたの役に立つことができれば幸いです。
posted by baba at 12:33 | Comment(0) | TrackBack(0) | その他
 
×

この広告は1年以上新しい記事の投稿がないブログに表示されております。