Comments for パソコン教室・パソコンスクールISA渋谷STAFF BLOG http://www.isa-school.net/map/shibuya カラダとココロがアクティブになれる街★渋谷がもっと楽しくなれるBLOG Thu, 09 Feb 2012 02:37:06 +0000 http://wordpress.org/?v=ME2.2.3 Comment on 星型のピノ（続編） by hosoya http://www.isa-school.net/map/shibuya/2009/08/30/%e6%98%9f%e5%9e%8b%e3%81%ae%e3%83%94%e3%83%8e%ef%bc%88%e7%b6%9a%e7%b7%a8%ef%bc%89/#comment-988 hosoya Mon, 21 Nov 2011 10:27:20 +0900 http://www.isa-school.net/map/shibuya/2009/08/30/%e6%98%9f%e5%9e%8b%e3%81%ae%e3%83%94%e3%83%8e%ef%bc%88%e7%b6%9a%e7%b7%a8%ef%bc%89/#comment-988 未海さん コメントありがとうございます。 何かいいことはありましたか？ (＾＾) 未海さん
コメントありがとうございます。
何かいいことはありましたか？
(＾＾)

]]> Comment on 星型のピノ（続編） by 美海 http://www.isa-school.net/map/shibuya/2009/08/30/%e6%98%9f%e5%9e%8b%e3%81%ae%e3%83%94%e3%83%8e%ef%bc%88%e7%b6%9a%e7%b7%a8%ef%bc%89/#comment-987 美海 Sun, 20 Nov 2011 21:36:29 +0900 http://www.isa-school.net/map/shibuya/2009/08/30/%e6%98%9f%e5%9e%8b%e3%81%ae%e3%83%94%e3%83%8e%ef%bc%88%e7%b6%9a%e7%b7%a8%ef%bc%89/#comment-987 それ 私もありましたよ それ 私もありましたよ

]]> Comment on デザインtips – 2．CSSでタブナビゲーションを作る 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 ありがとうございました。 初心者でもよくわかりました。 ありがとうございました。
初心者でもよくわかりました。

]]> Comment on デザインtips – 2．CSSでタブナビゲーションを作る 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

]]> Comment on デザインtips – 2．CSSでタブナビゲーションを作る 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や各メニューの本文の内容がかわるようにするにはどうしたらよいか分かりません。初歩的な質問ですみませんが教えて下さい。

]]> Comment on デザインtips – 7．display: table-cellを使う by 通行人 http://www.isa-school.net/map/shibuya/2009/11/11/%e3%83%87%e3%82%b6%e3%82%a4%e3%83%b3tips-%e2%80%93-7%ef%bc%8edisplay-table-cell%e3%82%92%e4%bd%bf%e3%81%86/#comment-948 通行人 Fri, 12 Feb 2010 19:17:57 +0900 http://www.isa-school.net/map/shibuya/2009/11/11/%e3%83%87%e3%82%b6%e3%82%a4%e3%83%b3tips-%e2%80%93-7%ef%bc%8edisplay-table-cell%e3%82%92%e4%bd%bf%e3%81%86/#comment-948 旧来のtableレイアウトの方が簡単で早くて、かつブラウザを選ばず、更にトータルのデータ量も少ないと感じました(^_^;) 旧来のtableレイアウトの方が簡単で早くて、かつブラウザを選ばず、更にトータルのデータ量も少ないと感じました(^_^;)

]]> Comment on デザインtips – 7．display: table-cellを使う by こいわい http://www.isa-school.net/map/shibuya/2009/11/11/%e3%83%87%e3%82%b6%e3%82%a4%e3%83%b3tips-%e2%80%93-7%ef%bc%8edisplay-table-cell%e3%82%92%e4%bd%bf%e3%81%86/#comment-947 こいわい Sun, 06 Dec 2009 11:42:20 +0900 http://www.isa-school.net/map/shibuya/2009/11/11/%e3%83%87%e3%82%b6%e3%82%a4%e3%83%b3tips-%e2%80%93-7%ef%bc%8edisplay-table-cell%e3%82%92%e4%bd%bf%e3%81%86/#comment-947 なるほど　width:100%;でfloat出来ない為のネガティブマージン設定とレイアウトが重なってしまう為のmargin: 0 200px;設定という事なんですね。 とても参考になりました。ご丁寧に回答いただきましてありがとうございました。 なるほど　width:100%;でfloat出来ない為のネガティブマージン設定とレイアウトが重なってしまう為のmargin: 0 200px;設定という事なんですね。
とても参考になりました。ご丁寧に回答いただきましてありがとうございました。

]]> Comment on デザインtips – 7．display: table-cellを使う by oikawa http://www.isa-school.net/map/shibuya/2009/11/11/%e3%83%87%e3%82%b6%e3%82%a4%e3%83%b3tips-%e2%80%93-7%ef%bc%8edisplay-table-cell%e3%82%92%e4%bd%bf%e3%81%86/#comment-946 oikawa Tue, 01 Dec 2009 17:37:01 +0900 http://www.isa-school.net/map/shibuya/2009/11/11/%e3%83%87%e3%82%b6%e3%82%a4%e3%83%b3tips-%e2%80%93-7%ef%bc%8edisplay-table-cell%e3%82%92%e4%bd%bf%e3%81%86/#comment-946 こいわいさん コメントありがとうございます。 <br /> まず、width:100%;の設定をしているとただfloatしても、 横並びにはなりません。 簡単に説明をすると、 マイナスの設定（-200px）でwidthとマージンの差をゼロにすることで width:100%;の設定でもfloatすることができます。 <br /> また、マージンで赤と緑のコンテンツを-200px設定しているため、 白のコンテンツが重ならないようにしなければなりません。 そこで、白のコンテンツの左右に200pxのマージンを設定しています。 <br /> 少し難しいですが、 細かく説明をすると、 floatというのは、一つ目のボックス右端の辺と 次のボックスの左端の辺がくっついて続けて表示されるものです。 ただ、この右端の辺の位置はネガティブマージン（マイナス設定のマージン）で変更することができます。 <br /> 今回は、 #l_naviでmargin-right: -200px;にしていることにより、 実際のボックス#l_naviの右側の辺を左側の辺と同じ位置に移動しています。 これにより、#l_naviと#content_innerが重なっている状態になります。 そのため、コンテンツがかぶってしまうので#l_naviの横幅分、#content_innerをずらします。 それが、 #content_innerでmargin: 0 200px; になります。 <br /> #r_sideも同じです。 #r_sideでmargin-left: -200px;を設定することにより floatで並べます。 ただ、重なってしまうので #content_innerでmargin: 0 200px;がされています。 #content_innerが左右にmarginの設定をしている理由です。 <br /> 少し難しくなってしまいましたね。 スクールでは、このようなマージンやfloatの設定について学習できる講座もご用意しています。 詳しくはこちらをご覧ください。 http://www.isa-school.net/web_dtp/index.html こいわいさん
コメントありがとうございます。

まず、width:100%;の設定をしているとただfloatしても、
横並びにはなりません。
簡単に説明をすると、
マイナスの設定（-200px）でwidthとマージンの差をゼロにすることで
width:100%;の設定でもfloatすることができます。

また、マージンで赤と緑のコンテンツを-200px設定しているため、
白のコンテンツが重ならないようにしなければなりません。
そこで、白のコンテンツの左右に200pxのマージンを設定しています。

少し難しいですが、
細かく説明をすると、
floatというのは、一つ目のボックス右端の辺と
次のボックスの左端の辺がくっついて続けて表示されるものです。
ただ、この右端の辺の位置はネガティブマージン（マイナス設定のマージン）で変更することができます。

今回は、
#l_naviでmargin-right: -200px;にしていることにより、
実際のボックス#l_naviの右側の辺を左側の辺と同じ位置に移動しています。
これにより、#l_naviと#content_innerが重なっている状態になります。
そのため、コンテンツがかぶってしまうので#l_naviの横幅分、#content_innerをずらします。
それが、
#content_innerでmargin: 0 200px;
になります。

#r_sideも同じです。
#r_sideでmargin-left: -200px;を設定することにより
floatで並べます。
ただ、重なってしまうので
#content_innerでmargin: 0 200px;がされています。
#content_innerが左右にmarginの設定をしている理由です。

少し難しくなってしまいましたね。
スクールでは、このようなマージンやfloatの設定について学習できる講座もご用意しています。
詳しくはこちらをご覧ください。
http://www.isa-school.net/web_dtp/index.html

]]> Comment on デザインtips – 7．display: table-cellを使う by こいわい http://www.isa-school.net/map/shibuya/2009/11/11/%e3%83%87%e3%82%b6%e3%82%a4%e3%83%b3tips-%e2%80%93-7%ef%bc%8edisplay-table-cell%e3%82%92%e4%bd%bf%e3%81%86/#comment-945 こいわい Sun, 29 Nov 2009 14:01:32 +0900 http://www.isa-school.net/map/shibuya/2009/11/11/%e3%83%87%e3%82%b6%e3%82%a4%e3%83%b3tips-%e2%80%93-7%ef%bc%8edisplay-table-cell%e3%82%92%e4%bd%bf%e3%81%86/#comment-945 このレイアウト方法に興味がありまして投稿させていただきました。 floatを使ったCSS表記の意味についてご質問があります。 #l_naviでmargin-right: -200px;にしていること、 #content_innerでmargin: 0 200px;にしていること、 #r_sideでmargin-left: -200px;にいしていること、 以上3つの意味がどうしても分からないんです。なぜこれで中央が可変に出来るのか・・・。 もし時間がありましたら教えていただいてよろしいでしょうか？ このレイアウト方法に興味がありまして投稿させていただきました。
floatを使ったCSS表記の意味についてご質問があります。
#l_naviでmargin-right: -200px;にしていること、
#content_innerでmargin: 0 200px;にしていること、
#r_sideでmargin-left: -200px;にいしていること、
以上3つの意味がどうしても分からないんです。なぜこれで中央が可変に出来るのか・・・。
もし時間がありましたら教えていただいてよろしいでしょうか？

]]> Comment on デザインtips – 2．CSSでタブナビゲーションを作る 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も大変参考になるものばかりでした。どうもありがとうございました!

]]>