メニューリストを横並びさせてボーダーで区切る

リスト要素をfloatで横並びにした際、「|」などで区切るケースも多いと思います。ただし、テキストで|を入れてしまうと、装飾のための文字としての扱いのため、なんとなく気持ち悪い感じ。こんな時はborderプロパティを使用し実現します。

実現したいレイアウト

今回のポイントとしては、ホームの左側にはボーダーを表示させたくない。2種類のテクニックを紹介します。

Case1

liに左ボーダーを指定して、さらにulの左にネガティブマージン指定。そしてはみ出す部分をdivのoverflowで隠す。

ulをdivで囲み、divにoverflow:hiddenを指定。ulをborder+padding分marginで左にマイナスする。結果、一番左のボーダーは見切れ状態にしてはみ出す部分はoverflow:hiddenで隠します。

Case2

li全てにに左ボーダーを指定して、classを使っていちばん左のボーダーを消す。

とりあえずliは全部左のボーダーを付けます。最後にborderとpaddingが0のclassを作成し、一番左のliの線を打ち消します。

サンプルファイルをダウンロード

CSS

ul {
margin: 0;
padding: 0;
list-style: none;
}
ul li {
margin: 0;
padding: 0;
}

#navi {
overflow: hidden;
_height: 1.5em; /*IE6*/
}
#navi ul {
margin-left: -6px;
}
#navi ul li {
display: inline;
border-left: 1px solid #999;
padding: 0 5px;
}

ul#list li {
display: inline;
border-left: 1px solid #999;
padding: 0 5px;
}
ul#list li.noborder {
border-left: none;
padding-left: 0;
}

HTML Case1

<div id="navi">
<ul>
<li><a href="index.html">ホーム</a></li>
<li><a href="index.html">サイトマップ</a></li>
<li><a href="index.html">お問い合わせ</a></li>
<li><a href="index.html">プライバシーポリシー</a></li>
</ul>
<!--//navi--></div>

HTML Case2

<ul id="list">
<li class="noborder"><a href="index.html">ホーム</a></li>
<li><a href="index.html">サイトマップ</a></li>
<li><a href="index.html">お問い合わせ</a></li>
<li><a href="index.html">プライバシーポリシー</a></li>
</ul>


Jimdo

オススメ書籍

10日でSEO&アクセスアップ Jimdoデザインブック

かっこいいだけではなく、人が集まるホームページを作る!

「Jimdo」(ジンドゥー)でのホームページの作成方法と運用方法を解説した書籍。解説記事を順番に読み進めて行くことで、Jimdoを使ったホームページの作成・運用・宣伝・集客の基本を、10日間で習得するのが本書のコンセプトです。12章構成の解説の中で、Jimdoの基本操作とホームページの作成、デザインとコンテンツ(内容)のレベルアップ、そしてSEOやリスティング広告を含む宣伝・集客の基本を解説しています。

コメントを残す

メールアドレスが公開されることはありません。

CAPTCHA


ABOUTこの記事をかいた人

株式会社マジカルリミックス 代表取締役CEO/JimdoExpert 宮城県出身。コンピューター系の専門学校を卒業後、仙台のデザイン会社に入社。 Webサイトのデザイン・コーディングをはじめとし、各種デジタルメディアのデザインに従事。2002年退職後すぐにマジカルリミックスを創業。2007年に法人化で株式会社マジカルリミックスを設立。Webサイト運用に関するコンサルティング、社内向けITトレーニング、セミナー出演、執筆など。2005年から仙台の専門学校で、非常勤講師としてWeb制作講義を担当。 主な著書に『10日で作るかっこいいホームページ Jimdo(ジンドゥー)デザインブック』(エムディエヌコーポレーション)『HTML5+CSS3の新しい教科書 基礎から覚える、深く理解できる。』(共著、同)『基礎から覚える、深く理解できる。Webデザインの新しい教科書』(同)。