CSSデザインヘルプページのレイアウト
Googleのヘルプページ風のレイアウト
unknown
サンプルを見る
<style type="text/css"> #google_help { margin:0 0 1em 0; padding:0; } #google_help a { color:blue; } #google_help div.heading { margin:0; padding:10px 0 10px 32px; background:transparent url(/content/img/css/help.png) no-repeat 0 10px; color:#333; font-size:120%; font-weight:bold; } #google_help div.heading span { margin:0 0 0 10px; border-bottom:1px solid #ccc; display:block; } #google_help ul { margin:0 0 1em 0; padding:0; width:49%; float:left; } #google_help li { margin:0 0 5px 50px; padding:0; } </style> <div id="google_help"> <div class="heading"><span>検索やウェブ閲覧全般に関するヘルプ</span></div> <div class="cf"> <ul> <li><a href="#">ブログ検索</a></li> <li><a href="#">ブック検索</a></li> <li><a href="#">Google Checkout販売者</a></li> <li><a href="#">カスタム検索エンジン</a></li> <li><a href="#">ファイナンス</a></li> <li><a href="#">Google Checkout購入者</a></li> <li><a href="#">Google Patent Search</a></li> <li><a href="#">Google Video</a></li> <li><a href="#">イメージ検索</a></li> </ul> <ul> <li><a href="#">マップ</a></li> <li><a href="#">モバイル</a></li> <li><a href="#">ニュース</a></li> <li><a href="#">ニュース (ソース提供元)</a></li> <li><a href="#">Google Scholar*</a></li> <li><a href="#">ツールバー (Firefox 用)</a></li> <li><a href="#">ツールバー (Internet Explorer 用)</a></li> <li><a href="#">ウェブ検索</a></li> <li><a href="#">YouTube</a></li> </ul> </div> <div class="heading"><span>メール、チャット、コミュニケーションに関するヘルプ</span></div> <div class="cf"> <ul> <li><a href="#">カレンダー</a></li> <li><a href="#">Google Friend Connect</a></li> <li><a href="#">Google トーク</a></li> <li><a href="#">トーク ガジェット</a></li> </ul> <ul> <li><a href="#">Gmail</a></li> <li><a href="#">GrandCentral</a></li> <li><a href="#">グループ</a></li> <li><a href="#">orkut</a></li> </ul> </div> </div>
検索やウェブ閲覧全般に関するヘルプ
メール、チャット、コミュニケーションに関するヘルプ