Comments for ISAパソコンスクール渋谷STAFF BLOG http://www.isa-school.net/map/shibuya カラダとココロがアクティブになれる街★渋谷がもっと楽しくなれるBLOG Fri, 12 Mar 2010 16:03:14 +0000 http://wordpress.org/?v=ME2.2.3 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も大変参考になるものばかりでした。どうもありがとうございました!

]]> Comment on デザインtips – 2．CSSでタブナビゲーションを作る 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で左詰め、ぴったりくっ付けているんです。
いかがでしょうか？

]]> 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-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を指定することで解消されるのかがわからず、、、。

]]> Comment on 今日の夜から天体ショー開始★オリオン座流星群 by takeuchi http://www.isa-school.net/map/shibuya/2009/10/20/%e4%bb%8a%e6%97%a5%e3%81%ae%e5%a4%9c%e3%81%8b%e3%82%89%e5%a4%a9%e4%bd%93%e3%82%b7%e3%83%a7%e3%83%bc%e9%96%8b%e5%a7%8b%e2%98%85%e3%82%aa%e3%83%aa%e3%82%aa%e3%83%b3%e5%ba%a7%e6%b5%81%e6%98%9f%e7%be%a4/#comment-941 takeuchi Sun, 25 Oct 2009 12:07:40 +0900 http://www.isa-school.net/map/shibuya/2009/10/20/%e4%bb%8a%e6%97%a5%e3%81%ae%e5%a4%9c%e3%81%8b%e3%82%89%e5%a4%a9%e4%bd%93%e3%82%b7%e3%83%a7%e3%83%bc%e9%96%8b%e5%a7%8b%e2%98%85%e3%82%aa%e3%83%aa%e3%82%aa%e3%83%b3%e5%ba%a7%e6%b5%81%e6%98%9f%e7%be%a4/#comment-941 コメントありがとうございます。 残念なことにご覧なることできなかったのですね・・・（；_；） 私は30分くらい見ていたのですが2回流れ星を見ることが運よくできました。 ただお願い事できるまではいきませんでした・・・・ またみなさんの読んで下さるような情報があれば掲載していきますのでよろしくお願いいたします。 コメントありがとうございます。

残念なことにご覧なることできなかったのですね・・・（；_；）

私は30分くらい見ていたのですが2回流れ星を見ることが運よくできました。

ただお願い事できるまではいきませんでした・・・・

またみなさんの読んで下さるような情報があれば掲載していきますのでよろしくお願いいたします。

]]> Comment on 今日の夜から天体ショー開始★オリオン座流星群 by オリオン星 http://www.isa-school.net/map/shibuya/2009/10/20/%e4%bb%8a%e6%97%a5%e3%81%ae%e5%a4%9c%e3%81%8b%e3%82%89%e5%a4%a9%e4%bd%93%e3%82%b7%e3%83%a7%e3%83%bc%e9%96%8b%e5%a7%8b%e2%98%85%e3%82%aa%e3%83%aa%e3%82%aa%e3%83%b3%e5%ba%a7%e6%b5%81%e6%98%9f%e7%be%a4/#comment-940 オリオン星 Wed, 21 Oct 2009 17:10:47 +0900 http://www.isa-school.net/map/shibuya/2009/10/20/%e4%bb%8a%e6%97%a5%e3%81%ae%e5%a4%9c%e3%81%8b%e3%82%89%e5%a4%a9%e4%bd%93%e3%82%b7%e3%83%a7%e3%83%bc%e9%96%8b%e5%a7%8b%e2%98%85%e3%82%aa%e3%83%aa%e3%82%aa%e3%83%b3%e5%ba%a7%e6%b5%81%e6%98%9f%e7%be%a4/#comment-940 私も家のベランダから見ましたが、発見できませんでした。流れ星一度も見たことがないのでみてみたいです。 いつも楽しくブログみています。また情報あったら載せてくださいね。 私も家のベランダから見ましたが、発見できませんでした。流れ星一度も見たことがないのでみてみたいです。
いつも楽しくブログみています。また情報あったら載せてくださいね。

]]> Comment on 今日の夜から天体ショー開始★オリオン座流星群 by だびおう http://www.isa-school.net/map/shibuya/2009/10/20/%e4%bb%8a%e6%97%a5%e3%81%ae%e5%a4%9c%e3%81%8b%e3%82%89%e5%a4%a9%e4%bd%93%e3%82%b7%e3%83%a7%e3%83%bc%e9%96%8b%e5%a7%8b%e2%98%85%e3%82%aa%e3%83%aa%e3%82%aa%e3%83%b3%e5%ba%a7%e6%b5%81%e6%98%9f%e7%be%a4/#comment-939 だびおう Tue, 20 Oct 2009 23:42:33 +0900 http://www.isa-school.net/map/shibuya/2009/10/20/%e4%bb%8a%e6%97%a5%e3%81%ae%e5%a4%9c%e3%81%8b%e3%82%89%e5%a4%a9%e4%bd%93%e3%82%b7%e3%83%a7%e3%83%bc%e9%96%8b%e5%a7%8b%e2%98%85%e3%82%aa%e3%83%aa%e3%82%aa%e3%83%b3%e5%ba%a7%e6%b5%81%e6%98%9f%e7%be%a4/#comment-939 オリオン座ははっきり確認できましたが流星は見えず。。。。初お目見えかと思いましたが残念です。 うち、山の高台ですがそれでもやっぱり都内は明るすぎますね。 老夫婦が空見上げに来てました。 オリオン座ははっきり確認できましたが流星は見えず。。。。初お目見えかと思いましたが残念です。
うち、山の高台ですがそれでもやっぱり都内は明るすぎますね。
老夫婦が空見上げに来てました。

]]>