2006年10月30日

リスト化1

ナビゲーションボタンを<ul>タグでリスト化すると、CSSの設定でより自由なナビゲーションボタンを作成することが出来ます。

以下はHTMLへの記述です

ビートルズ
<ul>
<li>ジョン・レノン</li>
<li>ポール・マッカートニー</li>
<li>ジョージ・ハリスン</li>
<li>リンゴ・スター</li>



以下はブラウザで確認した状態です。

ビートルズ
  • ジョン・レノン
  • ポール・マッカートニー
  • ジョージ・ハリスン
  • リンゴ・スター




<ul>でマークアップされた部分は、InternetExplorer(以下、IE)やFirefoxを始めとするブラウザではリストの各項目の先頭に「・」が付きます。
また<ul>タグが持っている領域が、スペースとして表示されてしまいます。
これはブラウザがデフォルトで持っているスタイルのためですが、ナビゲーションに「・」やスペースは必要ありません。

そこで<ul>に対してlist-style-typeプロパティでnoneを定義することで「・」を消すことが出来ます。

以下はCSSへの記述です

ul{
list-style-type:none;
}



以下はブラウザで確認した状態です

ビートルズ
  • ジョン・レノン
  • ポール・マッカートニー
  • ジョージ・ハリスン
  • リンゴ・スター



各項目の先頭の「・」が消えましたね。
しかし領域のスペースは残っています。
リスト化2では、このスペースを設定しましょう。



posted by ひろりん at 15:30 | Comment(0) | ナビゲーションのアイディア

2006年10月31日

リスト化2

リスト化1では、リストの行頭にある「・」を消すことができました。

以下はブラウザで確認した状態です

ビートルズ
  • ジョン・レノン
  • ポール・マッカートニー
  • ジョージ・ハリスン
  • リンゴ・スター


リスト化1でしている<ul>タグが持っている領域のおかげで、スペースが取られています。
それを設定してみましょう。

以下はCSSへの記述です

ul{
list-style-type:none;
margin-left:0px; ← これを書き足します。
padding-left:0px; ← これを書き足します。
}


「margin-left:0px;」はIEで字下げされないための設定
「padding-left:0px;」はFirefoxをはじめとするMozilla系ブラウザやSafari、Operaで字下げをしないようにする設定です。
ブラウザの解釈の違いで、このように2つのソースを書き足さなければいけません。
ちょっと面倒です、早く統一されるといいですね。

以下はブラウザで確認した状態です

ビートルズ
  • ジョン・レノン
  • ポール・マッカートニー
  • ジョージ・ハリスン
  • リンゴ・スター


字下げされないように設定したので、各項目の左余白がなくなりました。

次回「リスト化3」では、リスト化された項目にリンクの設定を行います。





posted by ひろりん at 17:43 | Comment(1) | ナビゲーションのアイディア

2006年12月18日

文字列にリンクタグを設定する



ホームページの作成でリンクを貼る技術は必須です。
ここでしっかりリンクを貼ることを理解して下さい。


リスト化した文字列にリンクを貼るタグの設定をします。

赤文字で表示されている部分です。
#の部分は、作成されてリンクページのファイル名が入るのですが、作成されていないので仮に#を入力しておきます。
そうしないと、設定が出来ないのです。
簡単ですね!

ビートルズ
<ul>
<li><a href="#">ジョン・レノン</a></li>
<li><a href="#">ポール・マッカートニー</a></li>
<li><a href="#">ジョージ・ハリスン</a></li>
<li><a href="#">リンゴ・スター</a></li>
</ul>

posted by ひろりん at 15:40 | Comment(1) | TrackBack(0) | ナビゲーションのアイディア

2007年10月09日

ナビゲーション徹底研究1

縦型のナビゲーションバー1
リスト要素でマークアップした項目を用意します。

今回はこれです。
htmlファイル

<div id="menu">

<ul>

 <li><ahref="#">トップページ</a></li>
 <li><ahref="#">新着情報</a></li>
 <li><ahref="#">ダイエット関連</a></li>
 <li><ahref="#">スタッフ紹介</a></li>
 <li><ahref="#">お問い合わせ</a></li>

</ul>

</div>


次にCSSの指定です。
メニューの横幅は200pxで高さはautoに設定します。
ulとliのリスト要素のマージンとパディングを0pxに指定し、リストマーカーを非表示にします。

cssファイル

#menu{
width:200px;
height:suto;
}

#menu ul,#menu li{
margin:0px;
padding:0px;
list-style:none;
}

li要素の横幅と高さはピクセルで指定も出来ますが今回はautoの設定にし、パディングの上下を5px 左右を10pxと指定します。

#menu li{
width:auto;
height:auto;
padding:5px 10px;
}

今回はここまでです。
posted by ひろりん at 14:29 | Comment(0) | TrackBack(0) | ナビゲーションのアイディア

2007年10月15日

ナビゲーション徹底研究2

申しわけありません。前回のhtmlに記述ミスがありました。
訂正させていただきます。m(__)m

<ahref="#">

の部分ですが a と href の間に半角のスペースがありませんでした。

正しくは
<a href="#">

↑ 

a と href の間に半角のスペースが入ります。

正しいソースは以下です。

<div id="menu">

<ul>

 <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>

</div>

申しわけありませんでした。
posted by ひろりん at 18:10 | Comment(0) | TrackBack(0) | ナビゲーションのアイディア

2007年10月16日

ナビゲーション徹底研究3

前回の#menu liに以下の赤文字の部分を追加します。
リストのli部分のborder-bottomを表示させたということです。
なお左右のpaddingは10pxから15pxに変更してあります。

#menu li{
width:auto;
height:auto;
padding:5px 15px;
border-bottom-style:solid;
border-bottom-width:1px;
border-bottom-color:#333333;

}

こうなっていれば正解です。
  ↓  ↓  ↓

WS000000.JPG

Google


posted by ひろりん at 17:58 | Comment(0) | TrackBack(0) | ナビゲーションのアイディア

2007年10月18日

ナビゲーション徹底研究4

li 要素のborder-bottom に線を表示したのが前回までです。

今回はすべてのli要素に線を表示してみましょう。
ついでに、liの背景色も指定し、リンクが張られている文字列のリンク線を消し訪問済みでも文字色が変わらないようにします。

cssのソースは以下です。赤文字が追記した分です。

#menu li{
width:auto;
height:auto;
padding:5px 15px;
border-bottom-style:solid;
border-bottom-width:1px;
border-bottom-color:#333333;
border-left-style:solid;
border-left-width:1px;
border-left-color:#333333;
border-right-style:solid;
border-right-width:1px;
border-right-color:#333333;
border-top-style:solid;
border-top-width:1px;
border-top-color:#333333;
background-color:#CC0000;
}

ずいぶんと表記が長くなりました。
以下のように記述しなおしても同じです。

#menu li{
width:auto;
height:auto;
padding:5px 15px;
border-bottom:solid 1px #333333;
border-left:solid 1px #333333;
border-right:solid 1px #333333;
border-top:solid 1px #333333;
background-color:#CC0000;
}

次に文字列です。
リンクの線(デコレーション)を表示しないようにしてあります。
ソースは以下です。

#menu a,#menu a:link,#menu a:visited{
text-decoration:none;
color:#FFFFFF;
background-color:transparent;
}

以下の図のように表示されましたか。

WS000001.JPG

ローカル環境で表示されていれば問題ないとは思いますが私の場合はサーバーの環境でも確認するようにしています。

「Bフレッツ」がだいぶ浸透してきましたがまだまだ「ISDN」の環境の方もいらっしゃいます。

画像を使用していないのでナローバンドの方でもストレスなく表示されると思いますがやはり安くてもいいのでサーバーにUPして確認された方が良いと思います。

Google



posted by ひろりん at 16:51 | Comment(1) | TrackBack(0) | ナビゲーションのアイディア

広告


この広告は60日以上更新がないブログに表示がされております。

以下のいずれかの方法で非表示にすることが可能です。

・記事の投稿、編集をおこなう
・マイブログの【設定】 > 【広告設定】 より、「60日間更新が無い場合」 の 「広告を表示しない」にチェックを入れて保存する。


×

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