• ベストアンサー

HPデザインについて

テーブル作成なのかボックス作成なのかわからないのですが、４列並べたのを数段作っていきたいです。 列幅は均一ですが、列高さはバラバラです。 その列に枠線も入れたいです。 イメージ的には、Yahoo!ショッピングみたいな陳列な感じです。 うまく説明できないですけど・・・。 余白も指定していれていきたいです。

画像を拡大する
  • CSS
  • 回答数6
  • ありがとう数5
回答 全件
ベストアンサー
No.1です。 DreamWeberですか？？？ それは難しい話ですね…
NO2です ボックスとグリッド上を調べました 両方使い分けることは可能…
NO2です グリッドが何をさすのか分からないのですがボックスがテキス…

質問者が選んだベストアンサー

  • ベストアンサー
  • ORUKA1951
  • ベストアンサー率45% (5062/11036)
回答No.4

No.1です。 DreamWeberですか？？？ それは難しい話ですね。 　絶対にテキストエディタのほうが早いし、シンプルでメンテナンスが楽です。 ＞イメージ的には、Yahoo!ショッピングみたいな陳列な感じです。 がどのページを指すのかわからないのですが・・・ 　あなたが期待されていることは、CSS3で実装できますから、この回答の最後に、簡単なサンプルを書いておきます。 　画像がどんなサイズでも伸縮されて４段の段組になるはずです。 ・列間の罫線も自由にデザインできます。 ・その余白も調整できます。 ・段組の数もcolumn-count:の値を変更すると自由になります。ベンダーフィックスのためすこし長くなってます。 　ただしIEでは表示できないでしょう。・・・これが最大の難点・・・・よってfloatで横に並べるのが良いでしょう。 　floatのスタイルシートは下記です。<-- -->間を書き換えてみてください。 [CSS] 　div.section ul,div.section ul li{display:block;text-align:center;margin:0;padding:0;} div.section ul{ width: 90%;min-width:480px;max-width:900px;margin:0 auto; } div.section ul:after{content:"";display:block;clear:left;} div.section ul li{ width:20%;max-height:200px;overflow:auto; margin:5px; background-color:silver; display:inline-block; padding:5px; float:left; } div.section ul li p{text-indent:1em;font-size:0.9em;text-align:left;margin:0;} div.section ul li img{display:inline-block;width:80%;height:auto;} いずれの方法でもディスプレイ幅にも柔軟に追随します--ウィンドウ幅や拡大縮小で確認してください。--スマホでも幅広ディスプレイでもＯＫです。 ＩＥ用に別のスタイルシートを読み込ませる手法で対処しても良いでしょう。 [サンプル]画像は任意のものを入れてください。サイズは問いません。 なお、タブは＿に置換してあるので戻すこと!! <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html lang="ja"> <head> ＿<meta http-equiv="content-type" content="text/html; charset=Shift_JIS"> ＿<title>サンプル</title> ＿<meta name="author" content="ORUKA1951"> ＿<meta http-equiv="Content-Style-Type" content="text/css"> ＿<link rev="made" href="mailto:oruka1951@hoge.com" title="send a mail" > ＿<link rel="START" href="../index.html"> ＿<style type="text/css"> <!-- div.section ul,div.section ul li{display:block;text-align:center;margin:0;padding:0;} div.section ul{ width: 90%;min-width:480px;max-width:900px; margin:0 auto; -moz-column-count: 4; -moz-column-rule: 2px dotted gray; -webkit-column-count: 4; -webkit-column-rule: 2px dotted gray; -o-column-count: 4; -o-column-rule: 2px dotted gray; -ms-column-count: 4; -ms-column-rule: 2px dotted gray; } div.section ul li{ margin-top:5px; background-color:silver; display:block; padding:5px; -moz-break-inside: avoid-column; -webkit-break-inside: avoid-column; -o-break-inside: avoid-column; -msbreak-inside: avoid-column; position:relative; } div.section ul li p{text-indent:1em;font-size:0.9em;text-align:left;margin:0;} div.section ul li img{display:inline-block;width:80%;height:auto;} --> ＿</style> </head> <body> ＿<div class="header"> ＿＿<h1>タイトル</h1> ＿＿<p>このページでは・・・・</p> ＿</div> ＿<div class="section"> ＿＿<h2>見出し</h2> ＿＿<ul> ＿＿＿<li><img src="./images/thumbnail/01.jpg" width="80" height="60" alt=""> ＿＿＿＿<p>画像の説明</p> ＿＿＿</li> ＿＿＿<li><img src="./images/thumbnail/02.jpg" width="54" height="72" alt=""> ＿＿＿＿<p>画像の説明画像の説明画像の説明画像の説明画像の説明画像の説明画像の説明画像の説明画像の説明</p> ＿＿＿</li> ＿＿＿<li><img src="./images/thumbnail/03.jpg" width="80" height="80" alt=""> ＿＿＿＿<p>画像の説明画像の説明画像の説明画像の説明画像の説明</p> ＿＿＿＿<p>画像の説明画像の説明画像の説明画像の説明画像の説明</p> ＿＿＿</li> ＿＿＿<li><img src="./images/thumbnail/04.jpg" width="80" height="60" alt=""> ＿＿＿＿<p>画像の説明</p> ＿＿＿</li> ＿＿＿<li><img src="./images/thumbnail/05.jpg" width="80" height="60" alt=""> ＿＿＿＿<p>画像の説明</p> ＿＿＿</li> ＿＿＿<li><img src="./images/thumbnail/06.jpg" width="64" height="48" alt=""> ＿＿＿＿<p>画像の説明</p> ＿＿＿＿<p>画像の説明</p> ＿＿＿＿<p>画像の説明</p> ＿＿＿＿<p>画像の説明</p> ＿＿＿</li> ＿＿＿<li><img src="./images/thumbnail/07.jpg" width="64" height="48" alt=""> ＿＿＿＿<p>画像の説明</p> ＿＿＿</li> ＿＿＿<li><img src="./images/thumbnail/08.jpg" width="64" height="48" alt=""> ＿＿＿＿<p>画像の説明</p> ＿＿＿</li> ＿＿＿<li><img src="./images/thumbnail/09.jpg" width="80" height="80" alt=""> ＿＿＿＿<p></p> ＿＿＿</li> ＿＿＿<li><img src="./images/thumbnail/10.jpg" width="54" height="72" alt=""> ＿＿＿＿<p>画像の説明</p> ＿＿＿</li> ＿＿</ul> ＿</div> ＿<div class="footer"> ＿＿<h2>文書情報</h2> ＿＿<dl class="documentHistry"> ＿＿＿<dt id="FIRST-PUBLISHED">First Published</dt> ＿＿＿<dd>2012-08-10</dd> ＿＿＿<dt id="LAST-MODIFIED">Last Modified</dt> ＿＿＿<dd>2012-08-10 12:00:00 (JST)</dd> ＿＿</dl> ＿＿<address>&copy; ORUKA1951 2012 - 2016 All Rights Reserved mailto:*****</address> ＿</div> </body> </html>

yn7007
質問者

お礼

重ね重ねありがとうございます。 やはり、ドリームウィーバーは難しいんですね・・・。 この書いていただいたものを参考にしながら自分の思ったとおりになるようにやってみます。 本当に有り難うございました。

全文を見る
すると、全ての回答が全文表示されます。

その他の回答 (5)

回答No.6

NO2です ボックスとグリッド上を調べました 両方使い分けることは可能ですよ あれの事ですね グリッドの場合作りたい内容によっては自分が思ったように表示されないため困った事も記憶にありますのでボックスのほうが無難ではありますね もしタブメニューを使いたいのであればJAVASCRIPTを使って高速切り替え機能を、もたせる事も可能です それの見やすい参考サイトがあったのですが探してるうちに今日はもう落ちなければならなくなったので3日～1週間ほどいただければ次にネットをつなげたときに調べますね

yn7007
質問者

お礼

そうなんですか？ 思ったように表示されないのは難点ですね・・・。 まだ、Javaの方がうまくつかいこなせないんですよ・・・。 参考サイトいただけるなら、見てみたいです。 忙しい中、本当にありがとうございます。

全文を見る
すると、全ての回答が全文表示されます。
回答No.5

NO2です グリッドが何をさすのか分からないのですがボックスがテキストボックス<input type=text>のことをさすのであれば可能ですよ ただ範囲の広いテキストボックス見たいなものは<textarea>のほうが妥当だと思います どちらを使うにせよdivで囲って扱うといいです ＜空白部分も列幅と考えて作っていく感じの解釈の仕方でいいですかね？ そうです ただ私が書いたのはパーツの形がばらばらすぎの場合には特に有効ですが縦列が均一になるならmarginを使って縦列の幅をあけるだけでもいいかもしれません

全文を見る
すると、全ての回答が全文表示されます。
  • ORUKA1951
  • ベストアンサー率45% (5062/11036)
回答No.3

＞枠の中には、画像と言葉を入れる予定です。 　と言うことは、HTMLは <body> 　<div class="header"> 　　・・・・ 　</div> 　<div class="section"> 　　<h2>本文</h2> 　　<ul> 　　　<li><img src="" width="" height="" alt=""> 　　　　　<p>画像に関する説明</p> 　　　</li> 　　　<li><img src="" width="" height="" alt=""> 　　　　　<p>画像に関する説明</p> 　　　</li> 　　　<li><img src="" width="" height="" alt=""> 　　　　　<p>画像に関する説明</p> 　　　</li> 　　</ul> 　</div> 　<div class="footer"> 　　・・・・・・・・ 　</div> </div> と言うようなものだということですね。そして、リストの数は増減する。 　この場合、従来のHTMLでは適当な表示方法はありませんでした。横に並べて行くのでしたら、いくらでも方法があります。Yahooショッピングの個別商品ページとか、DMM.com( http://www.dmm.com/digital/cinema/-/list/=/article=keyword/id=67016/sort=date/ )など、ディスプレイの幅が多少異なっても流し込めていくようになっています。 　しかし、縦に分割して配置する、いわゆる段組といわれる配置は、CSS3のcolumnプロパティがありますが、CSS2までにはありません。 　そのため、この場合は古いブラウザ--IE8以前--の場合は、float:leftで横に並べて、新しいブラウザ(IE10以降、firefox,Opera,Chrome,safari用にcolumnで並べるのが良いでしょう。 　ただ、ひとつのコマ内で切り分けて、次の段に行くことを禁止するbreak-inside: avoid-column;は、現時点ではどのブラウザも対応できていないようです。 　★お勧めは、縦ではなく、横に並べるほうが絶対に良いです。

yn7007
質問者

お礼

ORUKA1951さん。 ありがとうございます。 自分が今、CSS2なのかCSS3なのかがあまり分かってないんですよ・・・。 使ってるソフト？はドリームウィーバーのCS５を使っています。 あと、グリッドとボックスを使っての操作方法も可能のなのでしょうか？ あまりに知識不足ですいません。

全文を見る
すると、全ての回答が全文表示されます。
回答No.2

私の場合そういうページを作る場合div を使ってグループ別に別け（縦一列とか横一列とか）てからその中で個別にパーツ単位のdiv を使って別けていきます。 div はちゃんとid やclass　を指定して個別に別けておきましょう（必要がない場合は指定しなくてもいいのですが） グループ別やパーツがすべて整ったらいざ配置をする事になります 配置の仕方は主にfloat:left　とclear:leftを使います。 別段float:right やclear:rightでも工夫すればできると思いますが、floatを使うとdivで囲った部分が下に配置されるのから右に配置されるのに変わっちゃうのですよ イメージとしてはこんな感じ（■がパーツ） ■ ■ ↓ ■■ ですのでfloatを使えばうまくできますがそれだけだとなれないうちはどんな感じになるか分からないと思いますしパーツごとに大きさも変わってくるため処理の仕方がわからないとおもいます とりあえ４ずパーツだけでなく何も書かれていない空白のパーツも用意すると見栄えがよくなっていきます （□が空白パーツ） ■□■□■□ さてグループに別けていなければfloatを使えばどんどん右につながっていくと思いますがここでグループで別けてみます とりあえず上の配置例を参考にしてパーツを横列２つまでの内容が入る用に設定します ここでは一つのパーツを　width:100px height:100px とすると グループは　width:200px　に設定ですね するとこんな感じになります ■□ ■□ ■□ 大体基本的にはこういった方法を使って縦や横に配置する事になりますね そしてヤホーショップの話になりますが縦列がそろっているのでしたら縦列をグループ化してるのですね 列１　列２　列３ と並んでるのでしょう ここで列１　列２　列３ をそれぞれ <div class=retu1><div> <div class=retu2><div> <div class=retu3><div> とぐるーぷにできます 全体でくくります <div class=zentai> <div class=retu1></div> <div class=retu2></div> <div class=retu3></div> </div> <div class=zentai>をCSSでfleatを使うと３列にできます 列の間を離すなら空白用の列を作っておくといいでしょう 続いてパーツを配置 列２と３は省略します。 <div class=zentai> <div class=retu1> <div class=part1></div> <div class=kuuhaku2></div> <div class=part3></div> <div class=kuuhaku2></div> <div class=part3></div> </div> <div class=kuuhaku></div> <div class=retu2>省略</div> <div class=kuuhaku></div> <div class=retu3>省略</div> </div> <div class=retu1>をCSSでfleatを使うと綺麗に整います retu1の大きさを調節しましょう こんな感じでヤフーショップのHPを作っていきます 場合によってはpaddingやmarginを使うと綺麗になる事もあればposision:relative を使って強制的に配置をどこどこに表示する事も必要になってきます こんな感じですね 説明が分かりづらかったらごめんなさいね

yn7007
質問者

お礼

nanaka2222さん。 ありがとうございます。 空白部分も列幅と考えて作っていく感じの解釈の仕方でいいですかね？ いろいろ調べたのですが、グリッドとボックスを使い分けることもできるのでしょうか？ 重ねての質問ですみません。

全文を見る
すると、全ての回答が全文表示されます。
  • ORUKA1951
  • ベストアンサー率45% (5062/11036)
回答No.1

それぞれの枠に入っている内容は何でしょう。 　ウェブページのデザインの最初にそれがあります。言い換えると、そのデザインが適しているということは、文書の(内容)構成からの必然があるはずです。 　それが解ると、HTMLをどう書けばよいかが決まります。 [例] 一列目には、サイトの目玉 二列目には、新着情報 というふうに・・・

yn7007
質問者

お礼

ORUKA1951さん。 枠の中には、画像と言葉を入れる予定です。 ヘッダー的な部分には、JavaScriptかで画像の自動切り替えをしようと思っています。

全文を見る
すると、全ての回答が全文表示されます。
  1. カテゴリ
  2. [技術者向] コンピューター
  3. プログラミング・開発
  4. CSS

関連するQ&A

  • 【Access】リストボックスの列幅設定

    アクセスのリストボックスの列幅設定について教えてください。 リストボックスの列数が34あり、それぞれ、プロパティの「列幅」で 列の幅を設定しています。 33列目までは設定した列幅で表示されるのですが、最後の列だけが 指定した列幅になりません。 20cmくらいの広い列幅になっていて、どう設定しても幅が変わりません。 最終列の幅を設定するにはどうしたらいいのでしょうか。 教えてください。よろしくお願いします。

  • htmlタグについて質問です。

    CSSを無視してhtmlでテーブルを作成しているのですが、 テーブルのスタイル指定がうまく反映されません。 テーブル枠の線と幅などを指定したいのですが、複数指定がうまくいっていないのでしょうか。 ■したい事 テーブル内にテーブル作成。 ・横3列で縦長のテーブルを作成する。（枠線はある） ・各テーブルの枠線を消す ・各テーブルの縦、横のサイズを指定する。 ■できない事 ・各テーブルの縦、横のサイズを指定する。 ■現在のhtml 大枠の中に入る、個々のテーブル毎に以下の設定をしています。 <table style="border-style:none;" style="width:200px;" "height:500px;"> これで枠線は消えますが、サイズが固定されず、オートで切り替わってしまいます。 この条件で、サイズを固定させる方法がありましたら ご教授いただけないでしょうか。

  • HPの両端に余白を入れたいのですが。。。

    HPを作成しています。 まだまだ初心者で分からないことがたくさんあるのですが、 ページの両端に余白を入れる方法がいくら調べてもわかりません。 言葉ではうまく説明できないのですが、 例えると『Yahoo!』のHPのように左右に余白があって 中央に内容を表示するということです。 よろしくお願いいたしますm(__)m

  • ワードでテキストボックスの描画をした場合の余白調整

    ワードで「テキストボックスの描画」から文字を入力後、枠線を表示した状態についてです。 2文字の漢字を縮小してフォント7にして入力していますが、この状態から、「枠線と文字の間の余白」をできるだけ狭めようとすると、文字が欠けたようになったりして調節ができません。「段落ダイアログボックス」の「1ページの行を指定数時に文字をグリッド線に合わせる」のチェックボックスを外したりしても、余白の大きさは調節ができないようです。 これを回避し、「文字と枠線の間の余白」をできるだけ狭める方法、具体的には文字と枠線がくっつくくらいまで狭める方法がありましたら、よろしくお願いします。

  • CSSでの表の作成について

    CSSでの表の作成方法を教えてください。 table要素使わずCSSのみで表の作成は可能でしょうか？ 作成したい表は　2列10行の表で、列幅は　それぞれ違った幅を指定、行の高さも　それぞれの行によって　高さを変えたいと思っています。 背景色の指定、ボーダーの指定もしたいです。 table要素使わずCSSのみで表を作成するには、どうしたらいいのか教えてください。 初心者なので、CSSの内容とHTMLの内容（ソース）を書いたものがあると助かります。 どうかよろしくお願いします。

  • dreamweaver8/テーブルの列幅

    初心者です。よろしくお願いします。 ガイド本を読みながらその中の例題にしたがって勉強しているところです。 画像と文章入りのテーブル作成で、１行５列のテーブルをつくります。 １列目：スペーサーイメージ（横幅２０ピクセル） ２列目：画像 ３列目：スペーサーイメージ（横幅１０ピクセル） ４列目：文章 ５列目：スペーサーイメージ（横幅２０ピクセル） というようなテーブルなのですが、幅がめちゃくちゃです。ガイド本には、「１列目を入れた時点では正しく表示されませんが、他の列にコンテンツを挿入した時点で、正しく表示されます。」とか、「すべての列に入力が終わると、列幅が正しく表示されます。」と書いてあるんですが、全て同じように入力しても本の通りにならず、４列目の文章なんかは５文字ぐらいで次の行に改行されてしまい、長文が次々改行されありえない形のテーブルになってしまってます。 初心者なのでどこか見落としがあるのかもしれませんが、どうすれば列幅が正しく表示されるようになるでしょうか？

  • ワードで表作成するには

    ウィンドウズＸＰ、ワード２００２を使って表作成をしています。 12行、8列の表を作っていますが、列幅を１９．３、５１．５、などと指定されています。表のプロパティを使って列幅を指定してみたのですがうまくいきません。教えてください。

  • colspanで余計な余白

    上段が複数ボックス、colspanで下段が単一ボックスの表を作り、上段ボックスには短い文字列やinputのボタンを入れています。 このcolspanを使った表の上段各ボックス内で、余計なスペースが発生します。 widthで上段ボックス幅を強制させようにも、上段ボックス内のボタンや文字列の後ろには余白があるにもかかわらず、余白を残したまま文字列だけが折り返されてしまいます。 が、colspanをやめて、上段下段を2つのtableに分けると、ボックス内の余計なスペースは消えました。 うまく説明できませんが…このcolspanの弊害？この現象の意味は何でしょう？

    • ベストアンサー
    • CSS
  • 2つのテーブルを左右に表示したい。

    2つのテーブルは列、幅の数が異なります。 ちょうど下記のような感じで表示したいのですが、 どのようにすればよいでしょうか。 単純にテーブルを２つ記述するとくっついてしまいます。 ■■■　　　　　　　　　　　　　　　　　　　　　　　　　　　■■ ■■■　　　　　　　　　　　　　　　　　　　　　　　　　　　■■ ■■■ レイヤー？とかいうものを使う方法もあるようなのですが、 ちょっと説明をみてもよく分かりませんでした。 ２つを別々のテーブルではなく、１つのテーブルにしてできないかと思ったのですが、枠線が 上のようにならなくて断念しました。 いくつかの画面を作成しているのですが、思ったとおりに表示できなくて悪戦苦闘しています。 アドバイス頂けると助かります。

    • ベストアンサー
    • HTML
  • ホームページに表を挿入、列幅の固定方法

    ホームページに表を挿入（列：2　行：2）し、そこへ画像を入れると列幅が広がってしまいます。列幅を指定、挿入した画像が列幅に合わせて縮小表示される方法はあるでしょうか？。 作成にはホームページビルダー15を使っています

EP-976A3でB5サイズの用紙選択ができなくなった原因と解決方法
このQ&Aのポイント
  • EP-976A3でB5サイズの用紙選択ができなくなった原因と解決方法について教えてください。
  • EP-976A3のソフトウェアアップデートを行った際に、B5サイズの用紙選択ができなくなりました。過去にはできていたため、原因がわかりません。また、原稿の半分しか印刷できないという問題も発生しています。ソフトウェアのアップデートが原因であれば、どのように解決すれば良いでしょうか。
  • EP-976A3でB5サイズの用紙選択ができない問題が発生しています。以前は問題なく選択できていたため、原因がわかりません。また、印刷時に原稿の半分しか印刷されないという不具合も発生しています。ソフトウェアのアップデートが原因であれば、解決方法を教えてください。
回答を見る

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

あなたにピッタリな商品が見つかる！ OKWAVEセレクト

質問する