Comments on: デザインtips – 2．CSSでタブナビゲーションを作る http://www.isa-school.net/map/shibuya/2008/09/24/%e3%83%87%e3%82%b6%e3%82%a4%e3%83%b3tips-%e2%80%93-2%ef%bc%8ecss%e3%81%a7%e3%82%bf%e3%83%96%e3%83%8a%e3%83%93%e3%82%b2%e3%83%bc%e3%82%b7%e3%83%a7%e3%83%b3%e3%82%92%e4%bd%9c%e3%82%8b/ カラダとココロがアクティブになれる街★渋谷がもっと楽しくなれるBLOG Thu, 09 Feb 2012 12:37:43 +0000 http://wordpress.org/?v=ME2.2.3 By: jon http://www.isa-school.net/map/shibuya/2008/09/24/%e3%83%87%e3%82%b6%e3%82%a4%e3%83%b3tips-%e2%80%93-2%ef%bc%8ecss%e3%81%a7%e3%82%bf%e3%83%96%e3%83%8a%e3%83%93%e3%82%b2%e3%83%bc%e3%82%b7%e3%83%a7%e3%83%b3%e3%82%92%e4%bd%9c%e3%82%8b/#comment-970 jon Sat, 27 Nov 2010 14:30:27 +0900 http://www.isa-school.net/map/shibuya/2008/09/24/%e3%83%87%e3%82%b6%e3%82%a4%e3%83%b3tips-%e2%80%93-2%ef%bc%8ecss%e3%81%a7%e3%82%bf%e3%83%96%e3%83%8a%e3%83%93%e3%82%b2%e3%83%bc%e3%82%b7%e3%83%a7%e3%83%b3%e3%82%92%e4%bd%9c%e3%82%8b/#comment-970 ありがとうございました。 初心者でもよくわかりました。 ありがとうございました。
初心者でもよくわかりました。

]]> By: oikawa http://www.isa-school.net/map/shibuya/2008/09/24/%e3%83%87%e3%82%b6%e3%82%a4%e3%83%b3tips-%e2%80%93-2%ef%bc%8ecss%e3%81%a7%e3%82%bf%e3%83%96%e3%83%8a%e3%83%93%e3%82%b2%e3%83%bc%e3%82%b7%e3%83%a7%e3%83%b3%e3%82%92%e4%bd%9c%e3%82%8b/#comment-969 oikawa Mon, 22 Nov 2010 17:53:05 +0900 http://www.isa-school.net/map/shibuya/2008/09/24/%e3%83%87%e3%82%b6%e3%82%a4%e3%83%b3tips-%e2%80%93-2%ef%bc%8ecss%e3%81%a7%e3%82%bf%e3%83%96%e3%83%8a%e3%83%93%e3%82%b2%e3%83%bc%e3%82%b7%e3%83%a7%e3%83%b3%e3%82%92%e4%bd%9c%e3%82%8b/#comment-969 jon様 コメントありがとうございました。 お返事が遅くなりまして、申し訳ございません。 <br /> 早速ですが、お答えしますね。 <br /> <br /> ■liにclass=”active”を設定するとすべて色がグレーに変わってしまう。 <br /> 今回は、「Business」ページを作成すると仮定しましたので、 liのBusinessにのみ、class=”active”を記述しています。 <br /> 各htmlファイル、例えば「Home」ページへは liのHomeにのみ、記述をします。 <br /> ■タブをクリックするとhomeや各メニューの本文の内容がかわるようにするには。 <br /> href="#" ･･･ <br /> 上記の#が仮のリンク先となりますので #部分に「home」ページで使用するファイルのパスを記述すれば 表示出来るようになりますよ。 <br /> 是非、やってみてくださいね♪ <br /> oikawa jon様

コメントありがとうございました。
お返事が遅くなりまして、申し訳ございません。

早速ですが、お答えしますね。

■liにclass=”active”を設定するとすべて色がグレーに変わってしまう。

今回は、「Business」ページを作成すると仮定しましたので、
liのBusinessにのみ、class=”active”を記述しています。

各htmlファイル、例えば「Home」ページへは
liのHomeにのみ、記述をします。

■タブをクリックするとhomeや各メニューの本文の内容がかわるようにするには。

href=”#” ･･･

上記の#が仮のリンク先となりますので
#部分に「home」ページで使用するファイルのパスを記述すれば
表示出来るようになりますよ。

是非、やってみてくださいね♪

oikawa

]]> By: jon http://www.isa-school.net/map/shibuya/2008/09/24/%e3%83%87%e3%82%b6%e3%82%a4%e3%83%b3tips-%e2%80%93-2%ef%bc%8ecss%e3%81%a7%e3%82%bf%e3%83%96%e3%83%8a%e3%83%93%e3%82%b2%e3%83%bc%e3%82%b7%e3%83%a7%e3%83%b3%e3%82%92%e4%bd%9c%e3%82%8b/#comment-968 jon Thu, 18 Nov 2010 02:55:41 +0900 http://www.isa-school.net/map/shibuya/2008/09/24/%e3%83%87%e3%82%b6%e3%82%a4%e3%83%b3tips-%e2%80%93-2%ef%bc%8ecss%e3%81%a7%e3%82%bf%e3%83%96%e3%83%8a%e3%83%93%e3%82%b2%e3%83%bc%e3%82%b7%e3%83%a7%e3%83%b3%e3%82%92%e4%bd%9c%e3%82%8b/#comment-968 いろいろ参考にさせていただいています。質問なのですがタブの作り方はわかったのですがliに class=”active”を設定するとすべて色がグレーに変わってしまいます。そしてタブをクリックするとhomeや各メニューの本文の内容がかわるようにするにはどうしたらよいか分かりません。初歩的な質問ですみませんが教えて下さい。 いろいろ参考にさせていただいています。質問なのですがタブの作り方はわかったのですがliに
class=”active”を設定するとすべて色がグレーに変わってしまいます。そしてタブをクリックするとhomeや各メニューの本文の内容がかわるようにするにはどうしたらよいか分かりません。初歩的な質問ですみませんが教えて下さい。

]]> By: ミヤジマ http://www.isa-school.net/map/shibuya/2008/09/24/%e3%83%87%e3%82%b6%e3%82%a4%e3%83%b3tips-%e2%80%93-2%ef%bc%8ecss%e3%81%a7%e3%82%bf%e3%83%96%e3%83%8a%e3%83%93%e3%82%b2%e3%83%bc%e3%82%b7%e3%83%a7%e3%83%b3%e3%82%92%e4%bd%9c%e3%82%8b/#comment-944 ミヤジマ Thu, 29 Oct 2009 22:26:03 +0900 http://www.isa-school.net/map/shibuya/2008/09/24/%e3%83%87%e3%82%b6%e3%82%a4%e3%83%b3tips-%e2%80%93-2%ef%bc%8ecss%e3%81%a7%e3%82%bf%e3%83%96%e3%83%8a%e3%83%93%e3%82%b2%e3%83%bc%e3%82%b7%e3%83%a7%e3%83%b3%e3%82%92%e4%bd%9c%e3%82%8b/#comment-944 inoue様 なるほど!そのような意図でのfloatなのですね。大変よくわかりました。 通りがかりの見ず知らずの人間にご丁寧にお返事いただき、感謝しております。他のtipsも大変参考になるものばかりでした。どうもありがとうございました! inoue様
なるほど!そのような意図でのfloatなのですね。大変よくわかりました。
通りがかりの見ず知らずの人間にご丁寧にお返事いただき、感謝しております。他のtipsも大変参考になるものばかりでした。どうもありがとうございました!

]]> By: inoue http://www.isa-school.net/map/shibuya/2008/09/24/%e3%83%87%e3%82%b6%e3%82%a4%e3%83%b3tips-%e2%80%93-2%ef%bc%8ecss%e3%81%a7%e3%82%bf%e3%83%96%e3%83%8a%e3%83%93%e3%82%b2%e3%83%bc%e3%82%b7%e3%83%a7%e3%83%b3%e3%82%92%e4%bd%9c%e3%82%8b/#comment-943 inoue Thu, 29 Oct 2009 18:49:06 +0900 http://www.isa-school.net/map/shibuya/2008/09/24/%e3%83%87%e3%82%b6%e3%82%a4%e3%83%b3tips-%e2%80%93-2%ef%bc%8ecss%e3%81%a7%e3%82%bf%e3%83%96%e3%83%8a%e3%83%93%e3%82%b2%e3%83%bc%e3%82%b7%e3%83%a7%e3%83%b3%e3%82%92%e4%bd%9c%e3%82%8b/#comment-943 ミヤジマさん コメントありがとうございました。 floatについてのご質問なのですが実はリスト形式でナビゲーションを作った時に出来る隙間について以前UPした事があります→http://www.isa-school.net/map/shibuya/category/design/ この時触れなかったですが隙間が出来る原因の一つにHTMLソースで改行を入れるとそれがブラウザに反映されてしまう、というのがあります。 今回、display:inline;にしているのでソースの改行が反映されてbgカラーがきれいに反映されない、間が開いてしまいます。それをfloat:leftで左詰め、ぴったりくっ付けているんです。 いかがでしょうか？ ミヤジマさん
コメントありがとうございました。
floatについてのご質問なのですが実はリスト形式でナビゲーションを作った時に出来る隙間について以前UPした事があります→http://www.isa-school.net/map/shibuya/category/design/
この時触れなかったですが隙間が出来る原因の一つにHTMLソースで改行を入れるとそれがブラウザに反映されてしまう、というのがあります。
今回、display:inline;にしているのでソースの改行が反映されてbgカラーがきれいに反映されない、間が開いてしまいます。それをfloat:leftで左詰め、ぴったりくっ付けているんです。
いかがでしょうか？

]]> By: ミヤジマ http://www.isa-school.net/map/shibuya/2008/09/24/%e3%83%87%e3%82%b6%e3%82%a4%e3%83%b3tips-%e2%80%93-2%ef%bc%8ecss%e3%81%a7%e3%82%bf%e3%83%96%e3%83%8a%e3%83%93%e3%82%b2%e3%83%bc%e3%82%b7%e3%83%a7%e3%83%b3%e3%82%92%e4%bd%9c%e3%82%8b/#comment-942 ミヤジマ Tue, 27 Oct 2009 23:29:09 +0900 http://www.isa-school.net/map/shibuya/2008/09/24/%e3%83%87%e3%82%b6%e3%82%a4%e3%83%b3tips-%e2%80%93-2%ef%bc%8ecss%e3%81%a7%e3%82%bf%e3%83%96%e3%83%8a%e3%83%93%e3%82%b2%e3%83%bc%e3%82%b7%e3%83%a7%e3%83%b3%e3%82%92%e4%bd%9c%e3%82%8b/#comment-942 いろいろ考え込んでしまっていた部分がこのページを見て解決しました。ありがとうございます。もし教えていただけると大変ありがたいのですが、、、 ここでの、「float:left」はどのような意図なのでしょうか。外してみれば結果は一目瞭然ではあるのですが（bgカラーがきれいに反映されない）、なぜfloatを指定することで解消されるのかがわからず、、、。 いろいろ考え込んでしまっていた部分がこのページを見て解決しました。ありがとうございます。もし教えていただけると大変ありがたいのですが、、、 ここでの、「float:left」はどのような意図なのでしょうか。外してみれば結果は一目瞭然ではあるのですが（bgカラーがきれいに反映されない）、なぜfloatを指定することで解消されるのかがわからず、、、。

]]>