2009年08月27日

スタイルシート css を使った横並びリストメニュー

スポンサード リンク

floatプロパティでリスト項目を横並びで表示します。

★☆★☆★☆ ナウでヤングなレンタルサーバー!ロリポップ! ☆★☆★☆★
月額263円で容量1GB
Movable TypeやWordpressだって使えるよ。

サンプルソース

<html>
<head>
<title>リスト項目を横並び</title>
<style type="text/css">
<!--

ul.listBox {
  list-style-type: none; /* リストマーク非表示 */
 }

ul.listBox li {
  float: left;
  margin-right: 3px;
  padding: 2px;

  width: 120px; /* li要素の幅 */
  border: 1px #999966 solid; /* ボーダーの幅,色,スタイル */
  text-align: center; /* 文字位置 */
 }

ul.listBox li a{
  display: block;

  color: red; /* リンクの文字色 */
  background-color: #90ee99; /* 背景色 */
  text-decoration: none; /* 文字装飾 なし */
  line-height: 1.5em; /* 行間隔 */
 }

ul.listBox li a:hover{ /* マウスが上に来たとき
  color: #ffffff; /* リンクの文字色 */
  background-color: #6495ed; /* 背景色 */
  text-decoration: underline; /* 文字装飾 下線 */
 }

-->
</style>

</head>
<body>

<ul class="listBox">
<li><a href="#">トップページ</a></li>
<li><a href="#">画像</a></li>
<li><a href="#">スタイルシート</a></li>
</ul>

</body>
</html>


スタイルシートを使わないデフォルトの箇条書きリストです。

番号なしリスト HTML タグ
 <ul>
   <li><a href="#">トップペー</a></li>
   <li><a href="#">画像</a></li>
   <li><a href="#">スタイルシート </a></li>
 </ul>

 <ul>タグにクラス名を付加します。<ul class="listBox">
そしてスタイルシートで文字色や背景色を指定していきます。

ul.listBox li {
  float: left;  //  li 要素を横に並べます。
  margin-right: 3px; //  項目の右余白、下の見本は30pxです。
  padding: 2px;  //  ボーダーと背景色の間の余白、下の画像を 10px にしてみました。


ul.listBox li a{
  display: block; // a 要素をブロックレベル要素のように表示させます。
                                 これを設定することで背景でもリンクすることができます。

範囲でリンクする。サンプル
   ソース
<div style="background-color : #e0ffff;width : 350px;text-align : center;line-height : 2em;">
<a href="http://javascript123.seesaa.net/" style="display:block;">
JavaScript,スタイルシート サンプル集</a></div>

スタイルシート CSS
floatプロパティ float:left; float:right;
メニュー作成
リスト・箇条書き HTMLタグ

posted by javaScript at 15:32 | 大阪 ☁ | スタイルシート CSS | このブログの読者になる | 更新情報をチェックする
×

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