- 締切済み
ｃｓｓの段組レイアウトについての質問です
かなり初歩的なことだと思うのですがこのことばかりがひっかかっています ブックオフの立ち読みでｃｓｓの本を読んでいたら 段組レイアウトというのを目にしました。 それはまず下敷きにマージン次にパディング、その上に内容を書く・・・というものでした。 一方ネットで調べてみたら、段組レイアウトのやり方のサイトをよんでみると 「ボックスを左と右にわけたり、上と下にわけたりする」だけで、マージン、パディングのことは書かれてなかったんですよね。（そもそも書くまでもないのかもしれませんが） よく３段組レイアウト２段組レイアウトと聞きますがそれは、立体的にとらえて領域をミルフィーユみたいに入れ子させて乗っけてくからなのでしょうか？ それともボックスを平面的に並べることが段組レイアウトなのでしょうか？ 理解力が足りずどうもよくわからなくて へんな質問ですいません。回答お願いします。
- jakusyain41414
- お礼率9% (2/22)
- レンタルサーバ・ASP
- 回答数2
- ありがとう数10
- みんなの回答 （2）
- 専門家の回答
みんなの回答
- DrFell
- ベストアンサー率55% (305/551)
方法は１つではありません。 少なくなったとはいえtableによるものの他に、floatによるもの、positionによるものが、よく使われました。それぞれの手法にもまた、複数の手法があります。将来的には、display:boxによるものが、普及するでしょう。 平面的か立体的かといわれると組み方により両方になるかと思います。答えは１つではありません。 これからはじめるなら、css3からのdisplay:boxによる手法が、一番楽だと思いますよ。
- ORUKA1951
- ベストアンサー率45% (5062/11036)
一般的には、新聞の紙面で記事が読みやすいように１０数文字で組まれていることを段組と言います。 路 ろ 寝 行 り 寿 パ や る 末 切 限 イ ぶ と 雲 れ 無 ポ ら こ 来 海 寿 パ 小 ろ 末 砂 限 イ 路 に 風 利 無 ポ の 住 来 水 五 パ ぶ む 末 魚 劫 イ ら と 食 の の ポ 小 こ う 水 擦 -------------------------------------------------- ポ の ン ュ の コ ポ ダ ㄧ シ ナ ン イ リ ュ ㄧ ポ 、 ン ㄧ の コ グ ガ リ 長 ピ ㄧ ン ン 久 ㄧ リ の ガ 命 の ン グ ン の ポ ダ ㄧ 、 長 ン イ リ シ 助 ★ウェブの場合は横書きですので、これが横になる。 ★[ブロックの段組]記事の一つの内容ブロックを、ブロックとして配置することをさすことが多い。 ・・・あなたの読まれているものは、たぶんこれ↑ ★[文章の段組]本来の段組は、新聞記事のように文字数や段数に自動的に分割することを言う。 CSS3のスタイルシートでは、Multi-column Layout( http://www.w3.org/TR/css3-multicol/ )といいます。 段組と言う場合、この二つが混同されて使用されていますので注意が必要です。 (注意) いずれにしても、HTML自体にはプレゼンテーションは含みません。あくまで文章の内容・構造をマークアップして、それをどのように（プレゼンテーション)表現するかはスタイルシートの分担です。
関連するQ&A
- CSSでのページ作成＜こまかなレイアウト＞
CSSを勉強しながらページ作成をしています。 今まではテーブルをつかって組立てをしていました。 初歩的な質問かもしれないのですが、どのたかお教えください。 テーブルを使って細かいレイアウトを設定する際には、<table>を入れ子にして、spacer.gifで空白の部分を構成しますが、 CSSを使っての場合は、どのような方法がありますか？マージンなどを駆使するのでしょうか？ それとも、spacer.gifを使うのでしょうか？ それと、<table>の入れ子のように、<div>も入れ子にしていいのですか？あまり多用しない方がいいですよね？ 本を見たのですが、そのような実践上の細かい説明が載っていなく、困っています。 慣れている方には初歩的な質問で大変申し訳ないのですが、やさしく教えて頂けると有難いたいです。 どうぞ宜しくお願い致します。
- 締切済み
- ホームページ作成ソフト
- CSSのフロートを使ったレイアウト割
CSSのフロートを使ったレイアウト割で質問です。 あるボックス（仮に100px）を真横に並べる時の事ですが、 いつもは<p>なり<div>なりにCSSでフロートleftで詰めていました。 間隔を空けるためにマージンで10pxとったとして 100px+10pxで110pxのものが5つ 550pxの幅になります。 ただ、最後のボックスにはマージンを付けたくありません。 ■がボックス、□が間隔の10pxだとして ｜ バナー ｜ ■□■□■□■□■ ■□■□■□■□■ ■□■□■□■□■ ｜他のコンテンツ｜ こういう風にしたいんです。（この例でいうと540pxにおさめたい） 左と右が端にあって等間隔でそろっている。 どんどん下にも追加していったり消したり、つめていくので 一番右の最後にだけ別のCSSを付けるわけにはいきません。 どんどん左詰めで詰まって行く コンテンツを作りたいのですが、このやり方だと出来ないですよね。 あまり使わないんですが こういう場合って <ul>とか<il>とか使うんですか？ やり方があったら教えて下さい。
- ベストアンサー
- HTML
- XHTML+CSSレイアウトについて
段組レイアウトで画像を配置しているのですが、画像の上側部分に空白が出来て しまいます。（IE6で確認すると） 他のブラウザ（Opera+mozila+News)ではきちんと空白が詰めております。 現状で空白を詰めるにはどのようにしたら良いでしょうか？ 「具体的なソース」 http://www.geocities.jp/travelxstory/test/test.html http://www.geocities.jp/travelxstory/test/css001.css 真中のabout画像と上の赤い線の間に空白が出来てしまいます。 勿論、マージン等も設定してIE以外のブラウザではきちんと詰まって表示されます。なぜか上部のaboutだけは正常に空白なしで詰まっております。 現状のXTHML+CSSで画像の空白を詰めるにはどのようにしたら良いでしょうか？
- 締切済み
- HTML
- CSSの三段組みレイアウトについて教えて下さい。。
CSSレイアウト初心者ですが、CSSの作成段組みを作る時に <div id="container"> <div id="header"> </div><!--/header--> <div id="contents"> <div id="left_bar"> </div><!--/left_bar--> <div id="main"> </div><!--/main--> </div><!--/contents--> <div id="right_bar"> </div><!--/right_bar--> <div id="footer"> </div><!--/footer--> </div><!--/container--> と三段組固定レイアウトを作成したいのですが、 一度目は何回やり直してもfloatの設定でleft_bar,mainの横並びが上手くいかずに、 contentsの中でleft_bar,mainが縦並びになってしまい何回何が原因か様々なサイトで考えを模索してソースを直しても何故かleft_bar,main がcontentsの中で何回書き直しても縦並びになりもう一度一からCSSを組み直してみると、 どうした訳かようやくcontentsの中でleft_bar,mainが横並びになってくれました。 これは一体根本的に何が原因で横並びにさせるつもりが、縦にボックスが並んでしまうのでしょうか？ CSSのfloatの概念からハックかなと思いハック親ボックスにハックをかけてみてでも全く関係ないみたいでしたし、親ボックスにピクセルを指定していないからかと思い親ボックスにピクセルで指定しても何故か縦並び？！ CSSをもう一度書きなすことで意図したレイアウトになると言う事は一番は何が原因していると見られるのでしょうか？
- 締切済み
- CSS
- ２段組レイアウトの空白の処理
２段組レイアウトの下に<address>タグの一文を置きました。すると空いている段の方に、その一文が回り込んでしまいました。 http://makoji.web.fc2.com/test/test_10/index.html http://makoji.web.fc2.com/test/test_10/source.html 他のサイトを見ると表組で対応しているケースが多いようです。しかしながら、HTML 4.01 仕様書によると、本来ページレイアウトのために表を用いるのは好ましいことではないようです。 だとするとこの場合、どのような手段で対応すべきでしょう。 空いている段の一番下のボックスの下マージンを無茶苦茶大きくとって、両段の下を揃える方法もありますが、この方法ではあまりきれいには揃いませんし、視聴者のコンピュータ環境次第ではその不揃いが結構大きいものになってしまうのではないかと不安です。知らぬところでまたも回り込みが起きてしまいように思えるのです。
- ベストアンサー
- HTML
- CSSでの幅、長さなどの指定
CSSのソースをみると、 ボーダーの幅、ボックスの幅、マージン、パディングと いった大きさをピクセルではなくemや、％で指定している のをよく見かけますがデザイン上は、どちらを使うのが 正しいですか？ 原則としてはピクセルを使うのが正しいと Webサイトや書籍でも書いてあるのですが、それがなぜなのかも よく分かりません。 この疑問について教えていただけたら幸いです。
- ベストアンサー
- その他([技術者向] コンピューター)
- スタイルシートで三段組を作りたいのですが
私はテキスト主体のサイトを持っているのですが、今まではテーブルを使ってレイアウトを構成してきました。 上下左右のマージンをパーセントやピクセルで指定してメインであるテキストがあるテーブルは可変というスタイルです。 数年前まではディスプレイの解像度がそれほど多様ではなかったので、これでも大丈夫だったのですが、最近の横長ディスプレイの普及のため、この方法では環境によっては横に長く表示されてしまうため、divタグを使っての段組に変えて行こうと思いました。 そこで段組のスタイルシートについて説明しているサイトなどを見てみたのですが、私がやりたいと思っているレイアウトが見つからなくて困っています。 ようは三段の段組を作りたいのですが、ボーダー壁紙を使うことが多いので左部分を空けたいのです。 A、B、Cの三段組で右に寄っているレイアウト、つまりBに720ピクセル、Cに80ピクセルの幅を持たせ、一番左のAの部分を可変にしたいのですが、これは可能ですか？ 私の調べたところ、AとBを指定してCを可変にするレイアウトはあったのですが、上記のようなものは見当たりませんでした。 それともう一つ、Bの720ピクセルのボックスをページの中央にレイアウトする場合は、左右のボックスはどういう指定をすればいいのでしょうか？ 上記のような段組の作り方、あるいは説明しているサイト等ありましたら、教えて下さい。 よろしくお願いします。
- ベストアンサー
- HTML
- ＣＳＳレイアウトについて
今まで参考書を見ながら参考書どおりにＨＰを作っていましたが、 それでは自分どおりのＨＰが作ることができないと思い、 タグ辞典などを見ながら自分でＨＰ作成を行うことにしたのですが、 ＣＳＳにて５個のボックスを作成して５個それぞれで 色分けしたあとにpositionにて位置を指定しましたが うまくいきません。 自分が考えているレイアウトは １個目のボックスはタイトルで一番上にあり ２個目のボックスは左メニューで左側にあります。 ３個目のボックスはメインスペースで中央にあります。 ４個目のボックスは右メニューで右側にあります。 ５個目のボックスはコピーライトで一番下にあります。 どなたか解決できる方のご回答をお待ちしております。 またこの場にて簡単なタグを記載していただければ幸いです。
- ベストアンサー
- HTML
- CSSのブロックのマージンやパディングを見やすく表示するソフト
CSSでデザインしたブロック（BOX？）がIE6以前でよくずれてしまいます。 そこで設定しなおす事が多いのですが、設定されたパディングやマージンを視覚的にわかりやすく表示できるツールをどこかで見かけたことを思い出しました。 そのときは必要がなかったので、それが何だったのか、 忘れてしまいました。 FireFoxのアドオンだったような気がしたのですが、探しても見つかりません。そのようなツールを知っている人がいたら教えてもらえますか？ よろしくお願いします。
- ベストアンサー
- CSS
- 同一ページ内で異なる段組をしたい
一ページの、上半分は一段組み、下半分は３段組というレイアウトは、ワードではできるのでしょうか。 ちなみに、罫線でボックスを作って文字を入れてから、罫線の色を白（無色）にするという方法を編み出したのですが、もっと簡単にできればと思います。
- ベストアンサー
- オフィス系ソフト
