ボックスを縦横に並べる方法 | ホームページ作成初心者質問掲示板

window

この質問記事は解決しています。

トップページ > 記事閲覧

ボックスを縦横に並べる方法

日時： 2009/03/18 15:19
識別： ID:fB1NxBbBWXr.
名前： J.T
参照： http://sukuea.s270.xrea.com/: はじめまして。

テキストボックスを縦横に並べて、ナビゲーションを作りたいと思っております。
どのようにすればよいのでしょうか？
どうかご教授願います。

現在、表にテキストを入力し、「回り込み」で横に並べ、改行して、また表をならべて表示しております。
しかし、Ｗｅｂ上では、なんとか見栄えよくなってますが、ビルダー上では、そこだけ、思いっきり右にずれちゃってます。
そうでもしないと、Ｗｅｂでは、左に片寄って表示されてしまうためです。

それに、表を使ったやり方だと、「データの容量が多くなる」と何かの本に書いてありました。

ＳＥＯ対策のためもあり、そもそもＣＳＳを使った方が、ソースなどもシンプルになるようですので、いろいろ試してみましたが、・・・うまくいきません。

ぐちゃぐちゃになっちゃいます。

ＣＳＳの本を読み漁ってみたところ、なにやら「float」の他に、「position」というプロパティを使ったやりかたもあるようですが・・・。
なかなか、ビルダーに反映させられずにおります。

なんとか、ビルダーのスタイルシートマネージャー機能を使ったやり方をマスターしたかったので、こちらに投稿させていただきました。

【テキストボックスを縦横にならべ、中央に寄せるやり方】

は、ございませんか？

お忙しいところ申し訳ありませんが、どうぞ宜しくお願い致します。

メンテ

Re: ボックスを縦横に並べる方法 ( No.1 )

日時： 2009/03/19 08:44
名前： nn
参照： http://www-06.ibm.com/jp/domino01/swhc/esupport.nsf/keysearch: > 【テキストボックスを縦横にならべ、中央に寄せるやり方】

ブロックを中央寄せするのは、ブロックに幅を与えて左右marginをautoにするのが常套。
※IEのバグのため、DOCTYPE宣言はURL付きにする必要がある。

「テキストボックス」とやらについては、それをどのようにマークアップするのかによると思います。
例えば、見出し語とデータの一覧表なのか、見出しと段落の組み合わせなのか、定義語とその説明なのかなど。
まあいずれにせよ、上で作ったブロックにfloatさせればいいと思いますが。

ちなみに、データの容量がどうだとか、SEOがどうだとかじゃなく、それが表なら堂々と表としてマークアップすればいい。

ビルダーのバージョンによっては、float使うと編集画面ぐちゃぐちゃになるからプレビューで確認。

メンテ

Re: ボックスを縦横に並べる方法 ( No.2 )

日時： 2009/03/20 23:05
名前： J.T
参照： http://sukuea.s270.xrea.com/: ご回答ありがとうございました。

ちなみに、ブロックとは、＜div＞タグのことでよろしいでしょうか？

再度、nnさんの言うとおり、試みてみようと思います。

メンテ

Re: ボックスを縦横に並べる方法 ( No.3 )

日時： 2009/03/21 09:09
名前： nn
参照： http://www-06.ibm.com/jp/domino01/swhc/esupport.nsf/keysearch: > ちなみに、ブロックとは、＜div＞タグのことでよろしいでしょうか？

divに限りませんが、今回のようにいくつかの要素をグループ化したい場合などはdivでまとめたりします。
http://www.kanzaki.com/docs/html/element-level.html
http://www.kanzaki.com/docs/html/htminfo14.html#S13.2

メンテ

Re: ボックスを縦横に並べる方法 ( No.4 )

日時： 2009/03/29 14:12
名前： J.T
状態： 解決!
参照： http://sukuea.s270.xrea.com/: なるほど・・・。

http://www.kanzaki.com/docs/html/element-level.html
http://www.kanzaki.com/docs/html/htminfo14.html#S13.2

を拝見させていただきましたが、やはり専門用語が多くて大変ですね。
凡人には、なかなか難しいところです。

もうちょっと、ビルダーが扱い易ければ良いのですが・・・。

現在、別件で、時間がとれなくなってしまったので、また、時間をつくって取り組んでみたいと思います。

nnさん、ありがとうございました。

メンテ

- ( No.5 )

日時： 2011/12/08 02:14
名前： d2.osa20nn1fm10.vectant.ne.jp: #SPAM

メンテ

返信フォーム　（上記スレッドに返信する場合は以下のフォームから投稿します）
題名	※必須スレッドをトップへソート
名前
E-Mail
URL
パスワード	記事メンテ時に使用します（メンテは該当記事のアイコンをクリック）
返信内容	>>2 > ご回答ありがとうございました。 > > ちなみに、ブロックとは、＜div＞タグのことでよろしいでしょうか？ > > 再度、nnさんの言うとおり、試みてみようと思います。 ※必須エラーメッセージや内容などは省略せず詳細にご記入下さい
状態の設定	・問題が解決したら解決を選択して投稿して下さい HELP(新しいウィンドウが開きます) ・既存記事の状態設定はメンテ（アイコン）から修正する事ができます。
	投稿内容をご確認下さい（記事の削除は出来ません）クッキー保存