webdesignkeys

CSSやjavascriptなどを利用した動的なサイト作りやwebデザインに関するネタを紹介!

Subscribe by RSS RSS Icon
Follow me Twitter Twitter Icon
 
 

スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

Comment

早々のご回答やサイトへの書き込みなど、わざわざご親切にありがとうございます!!
すごぃ嬉しかったです。

さっそく、上記の方法でやってみたのですが、
これですと上が5、下が6になってしまいます。
お手数をかけたくなくて
width: ーーーpx;
のところで色々変化をつけていじってみましたが、
調度いいものが出来ないのでたびたび質問失礼します;
width: の数字はtop画像などの横幅÷メニューの数の数値なのでしょうか?
今後メニューの数を変えていくかもわからないので、
自分でカスタムできたらと思っております。
ただ上記のwidthの求め方ですと横幅の数値がわからずで;
どうぞよろしくお願いします。

2009.12.22 | URL | 遥 #- [ edit ]

Re: メニューバーの件

質問ありがとうございます!!
私が勘違いをしてしまいまして、上5下6で作ってましたww
時間をとらせてしまってすみませんでした^^

早速ですが、上4下5で作成しましたので、やってみてください。

では、まず上のメニューを書き換えてみましょう。

■CSSセレクタ書き換え前(上メニュー)

.menu li a {

color: #FFFFFF;
text-decoration: none;
font-size: 13px;
width: 137px;
display: block;
text-align: center;
line-height: 32px;
padding-right: 2px;
padding-left: 2px;

}

.menu li.endmenu {

border-right:1px solid #000 ;

}

■CSSセレクタ書き換え後(上メニュー)


.menu li a {

color: #FFFFFF;
text-decoration: none;
font-size: 13px;
width: 172px;
display: block;
text-align: center;
line-height: 32px;
padding-right: 2px;
padding-left: 2px;

}

.menu li.endmenu {

border-right:3px solid #000 ;

}

次に下メニューを編集してみましょう。


■CSSセレクタ書き換え前(下メニュー)

.menu2 li a {

color: #FFFFFF;
text-decoration: none;
font-size: 13px;
width: 113px;
display: block;
text-align: center;
line-height: 32px;
padding-right: 2px;
padding-left: 2px;

}

.menu2 li.endmenu {

border-right:3px solid #000 ;

}


■CSSセレクタ書き換え後(下メニュー)


.menu2 li a {

color: #FFFFFF;
text-decoration: none;
font-size: 13px;
width: 137px;
display: block;
text-align: center;
line-height: 32px;
padding-right: 2px;
padding-left: 2px;

}

.menu2 li.endmenu {

border-right:1px solid #000 ;

}


■カスタム方法

ご自分でカスタムできるように簡単に説明しておこうと思います。

ここのメニューバーの幅は710pxで作成しました。

メニュー数が4だとした場合に割り当てられるピクセルについて説明すると

白い点線が3本できるので、ここで3px使います。
次に、リンクテキストに対して左右に空白を2pxずつ振っていますので、
(padding-right: 2px; padding-left: 2px; の部分)
4×(2+2)で16pxです。
合計で19pxなので、黒いメニュー本体に利用できるピクセルは、
710-19 = 691px ということになります。
では、この691を4で割ると、
172余り3となります。

なので、メニュー数を4にしたい場合には、
以下のようにしてください。
また、HTML中にある、クラス名「endmenu」は消さないで下さい。
実は、endmenuで、余りの微調整を行っているので、
このクラスがないと微調整ができないです。
全く変な記述してすみませんw

.menu li a {

color: #FFFFFF;
text-decoration: none;
font-size: 13px;
width: 172px;
display: block;
text-align: center;
line-height: 32px;
padding-right: 2px;
padding-left: 2px;

}

.menu li.endmenu {

border-right:3px solid #000 ;

}


一応メニュー数5の場合のケースも例を載せます。


白い線:4px
テキスト内側の空白:5×4 = 20px
合計:24px

710 - 24 = 686
686/5 = 137 余り 1

よって


.menu2 li a {

color: #FFFFFF;
text-decoration: none;
font-size: 13px;
width: 137px;
display: block;
text-align: center;
line-height: 32px;
padding-right: 2px;
padding-left: 2px;

}

.menu2 li.endmenu {

border-right:1px solid #000 ;

}

2009.12.22 | URL | 管理人 #- [ edit ]

コメントの投稿













管理者にだけ表示を許可する
 

「blackcool_proj02」 メニューバーのメニュー数を変更する

「メニューを上4、下5にメニュー数を書き換える」

2段になっているメニューバーのメニュー数を変更したいと思います。

今のままのテンプレートでは、CSSセレクタ1つで、メニューを表示しているので、
上4つ、下5つのようにメニュー数を分けることができません

また、今回はセレクタを追加する形で記述しようと思うので、
HTMLも少しだけいじろうと思います。

では、以下の部分のHTMLを書き換えてください。

■HTML編集前
<div class="menu">
<ul>
<li><a href="<%url>">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
<li><a href="#">links</a></li>
<li><a href="#">entry</a></li>
<li class="endmenu"><a href="#">rss</a></li>
</ul>

<div class="clear"></div>
<a href="http://webdesignkeys.blog61.fc2.com/"><div id="top_banner"></div></a>

<ul>
<li><a href="#">Service</a></li>
<li><a href="#">Gallery</a></li>
<li><a href="#">News</a></li>
<li><a href="#">Support</a></li>
<li><a href="#">Project</a></li>
<li class="endmenu"><a href="#">Category</a></li>
</ul>
</div><!-- /menu -->

■HTML編集後

<div class="menu">
<ul>

<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
<li><a href="#">links</a></li>
<li><a href="#">entry</a></li>
<li class="endmenu"><a href="#">rss</a></li>
</ul>
</div><!-- /menu -->

<div class="clear"></div>
<a href="http://webdesignkeys.blog61.fc2.com/"><div id="top_banner"></div></a>

<div class="menu2">
<ul>
<li><a href="#">Service</a></li>
<li><a href="#">Gallery</a></li>
<li><a href="#">News</a></li>
<li><a href="#">Support</a></li>
<li><a href="#">Project</a></li>
<li class="endmenu"><a href="#">Category</a></li>
</ul>
</div><!-- /menu -->

次にスタイルシートの編集を行います。
まず以下の記述を探し出して、書き換えてください。

■CSS書き換え前

   
.menu li a {
	
  color: #FFFFFF;
  text-decoration: none;
  font-size: 13px;
  width: 113px;
  display: block;
  text-align: center;
  line-height: 32px;
  padding-right: 2px;
  padding-left: 2px;

}	

.menu li.endmenu {  

  border-right:3px solid #000 ;  

}

■CSS書き換え後

   
.menu li a {
	
  color: #FFFFFF;
  text-decoration: none;
  font-size: 13px;
  width: 137px;
  display: block;
  text-align: center;
  line-height: 32px;
  padding-right: 2px;
  padding-left: 2px;

}	

.menu li.endmenu {  

  border-right:1px solid #000 ;  

}

最後にCSSセレクタの追加を行います。
以下をスタイルシートのどこでもいいので貼り付けてください。

■追加CSSセレクタ

   
.menu2{

  color:#fff;
 
}

.menu2 ul{ 

  margin: 0; padding:0; 

}

.menu2 li{

display:inline;

}

.menu2 li {
	
  background: url("http://blog-imgs-29.fc2.com/w/e/b/webdesignkeys/p02-menu_bg.jpg") repeat-x ;
  height: 32px;
  float: left;
  border-right:1px dotted #fff ;
	
}

.menu2 li a {
	
  color: #FFFFFF;
  text-decoration: none;
  font-size: 13px;
  width: 113px;
  display: block;
  text-align: center;
  line-height: 32px;
  padding-right: 2px;
  padding-left: 2px;

}	

.menu2 li.endmenu {  

  border-right:3px solid #000 ;  

}




もっと省略したやり方があると思いますが、今回はわかりやすくシンプルな方法で
やりました。今回は、上4下5でメニューを作成しましたが、CSSセレクタを分けた状態であれば、
簡単にメニュー数を増減させることができると思います。
質問があればコメントからどうぞ

Comment

早々のご回答やサイトへの書き込みなど、わざわざご親切にありがとうございます!!
すごぃ嬉しかったです。

さっそく、上記の方法でやってみたのですが、
これですと上が5、下が6になってしまいます。
お手数をかけたくなくて
width: ーーーpx;
のところで色々変化をつけていじってみましたが、
調度いいものが出来ないのでたびたび質問失礼します;
width: の数字はtop画像などの横幅÷メニューの数の数値なのでしょうか?
今後メニューの数を変えていくかもわからないので、
自分でカスタムできたらと思っております。
ただ上記のwidthの求め方ですと横幅の数値がわからずで;
どうぞよろしくお願いします。

2009.12.22 | URL | 遥 #- [ edit ]

Re: メニューバーの件

質問ありがとうございます!!
私が勘違いをしてしまいまして、上5下6で作ってましたww
時間をとらせてしまってすみませんでした^^

早速ですが、上4下5で作成しましたので、やってみてください。

では、まず上のメニューを書き換えてみましょう。

■CSSセレクタ書き換え前(上メニュー)

.menu li a {

color: #FFFFFF;
text-decoration: none;
font-size: 13px;
width: 137px;
display: block;
text-align: center;
line-height: 32px;
padding-right: 2px;
padding-left: 2px;

}

.menu li.endmenu {

border-right:1px solid #000 ;

}

■CSSセレクタ書き換え後(上メニュー)


.menu li a {

color: #FFFFFF;
text-decoration: none;
font-size: 13px;
width: 172px;
display: block;
text-align: center;
line-height: 32px;
padding-right: 2px;
padding-left: 2px;

}

.menu li.endmenu {

border-right:3px solid #000 ;

}

次に下メニューを編集してみましょう。


■CSSセレクタ書き換え前(下メニュー)

.menu2 li a {

color: #FFFFFF;
text-decoration: none;
font-size: 13px;
width: 113px;
display: block;
text-align: center;
line-height: 32px;
padding-right: 2px;
padding-left: 2px;

}

.menu2 li.endmenu {

border-right:3px solid #000 ;

}


■CSSセレクタ書き換え後(下メニュー)


.menu2 li a {

color: #FFFFFF;
text-decoration: none;
font-size: 13px;
width: 137px;
display: block;
text-align: center;
line-height: 32px;
padding-right: 2px;
padding-left: 2px;

}

.menu2 li.endmenu {

border-right:1px solid #000 ;

}


■カスタム方法

ご自分でカスタムできるように簡単に説明しておこうと思います。

ここのメニューバーの幅は710pxで作成しました。

メニュー数が4だとした場合に割り当てられるピクセルについて説明すると

白い点線が3本できるので、ここで3px使います。
次に、リンクテキストに対して左右に空白を2pxずつ振っていますので、
(padding-right: 2px; padding-left: 2px; の部分)
4×(2+2)で16pxです。
合計で19pxなので、黒いメニュー本体に利用できるピクセルは、
710-19 = 691px ということになります。
では、この691を4で割ると、
172余り3となります。

なので、メニュー数を4にしたい場合には、
以下のようにしてください。
また、HTML中にある、クラス名「endmenu」は消さないで下さい。
実は、endmenuで、余りの微調整を行っているので、
このクラスがないと微調整ができないです。
全く変な記述してすみませんw

.menu li a {

color: #FFFFFF;
text-decoration: none;
font-size: 13px;
width: 172px;
display: block;
text-align: center;
line-height: 32px;
padding-right: 2px;
padding-left: 2px;

}

.menu li.endmenu {

border-right:3px solid #000 ;

}


一応メニュー数5の場合のケースも例を載せます。


白い線:4px
テキスト内側の空白:5×4 = 20px
合計:24px

710 - 24 = 686
686/5 = 137 余り 1

よって


.menu2 li a {

color: #FFFFFF;
text-decoration: none;
font-size: 13px;
width: 137px;
display: block;
text-align: center;
line-height: 32px;
padding-right: 2px;
padding-left: 2px;

}

.menu2 li.endmenu {

border-right:1px solid #000 ;

}

2009.12.22 | URL | 管理人 #- [ edit ]

コメントの投稿













管理者にだけ表示を許可する
 
<< PREV | HOME | NEXT >>

FC2 template
fc2_template_question.jpg

Category

NEWS
 

Comment

Archives

Favorite
125x125 banner 1
125x125 banner 2
125x125 banner 3
125x125 banner 4

Object
CoRich word of mouth information
Web service is developed through word of mouth information. ⇒CoRich
web design keys fc2 blog ranking!!
It challenges the ranking on my site. Please click this links. ⇒FC2 Blog Ranking
Proin magna amet fermentum dignissim
Nulla gravida, lacus molestie convallis dolor sem suscipit nisl, ut pharetra erat leo in elit.
Fusce pulvinar euismod urna vel viverra
Quisque malesuada laoreet tellus vel iaculis. Morbi nulla leo euismod pulvinar erat.
Class aptent taciti sociosqu ad litora
Curabitur vestibulum est eu purus bibendum eu eleifend diam tempor. Fusce metus eros, faucibus ut hendrerit ac.

Links

 
 
 
 
 
 
Copyright Info.

Nulla enim nibh, conse ctetuer sed, vesti bulum eleme ntum, sagittis nec, diam. Mauris blan dit vehi cula neque. Read More

 
Other Links
 
 
 
 
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。