このページの本文へ
ナビゲーション

サンプルダウンロード

トップページ > サンプルダウンロード > 法則77 リストの横並びはインラインとして実現する

法則77 リストの横並びはインラインとして実現する

XHTMLソース

<div id="footer">
 <ul>
  <li class="home"><a href="#">ホーム</a></li>
  <li><a href="#">事業内容</a></li>
  <li><a href="#">製品情報</a></li>
  <li><a href="#">採用情報</a></li>
  <li><a href="#">会社概要</a></li>
  <li><a href="#">お問い合わせ</a></li>
  <li><a href="#">プライバシーポリシー</a></li>
  <li><a href="#">サイトマップ</a></li>
 </ul>
 <p>Copyright © 2007 HTML Love Company. All rights reserved.</p>
<!-- #footer END --></div>

CSSソース

#footer {
     clear: both;
     width: 760px;
     margin: 0 auto;
     padding: 15px 0 50px;
     text-align: center;
     font-size: small;
     background: url(img/bg.gif) repeat-x;
}
#footer ul {
     margin-bottom: 15px;
}
#footer ul li {
     display: inline;
     margin-right: 3px;
     padding-left: 7px;
     border-left: 1px solid #999;
     list-style-type: none;
}
#footer ul li.home {
     padding-left: 0;
     border-left: 0;
}

display: inline;で横に並べた場合の隙間を解消する方法

XHTMLソース

<ul>
<li class="home"><a href="#"> ホーム</a></li><!--
--><li><a href="#">事業内容</a></li><!--
--><li><a href="#">製品情報</a></li><!--
--><li><a href="#">採用情報</a></li><!--
--><li><a href="#">会社概要</a></li><!--
--><li><a href="#">お問い合わせ</a></li><!--
--><li><a href="#">プライバシーポリシー</a></li><!--
--><li><a href="#">サイトマップ</a></li>
</ul>

第5章 実践的なCSSデザインの法則 一覧

  1. 法則71 Webブラウザのデフォルトスタイルをリセットする
  2. 法則72 1行テキストの上下中央配置にはline-heightプロパティを使用する
  3. 法則73 画像の下の余白はvertical-alignプロパティで解消する
  4. 法則74 字下げとぶら下がりはCSSでコントロールする
  5. 法則75 文字サイズを変更してもテキストが重ならないようにする
  6. 法則76 定義リストを横並びにしてスマートに見せる
  7. 法則77 リストの横並びはインラインとして実現する
  8. 法則78 透過gif画像を利用してカラーバリエーションを作る
  9. 法則79 背景画像を指定してimg要素の見栄えをよくする
  10. 法則80 JavaScriptを使わずにロールオーバー時の画像拡大効果を再現する
  11. 法則81 ステッカーを貼ってプロモーション効果を高める
  12. 法則82 スクロールバー領域を常に確保してセンタリング位置のズレを避ける
  13. 法則83 角丸の背景は最低限の要素で実現する
  14. 法則84 未対応セレクタも状況により使用してかまわない
  15. 法則85 CSS3セレクタを使用してスマートなCSS を記述する

このページのトップへ


取り扱いオンラインショップ
  • インプレスダイレクト
  • Amazon
  • 楽天ブックス
  • Kinokuniya BookWeb
  • 7&Y セブンアンドワイ
  • livedoor BOOKS