ベストアンサー

HPデザインについて

2012/11/27 20:16

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

yn7007
お礼率62% (5/8)

CSS
回答数6
ありがとう数5

みんなの回答 （6）
専門家の回答

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

ベストアンサー

ORUKA1951
ベストアンサー率45% (5062/11036)

2012/11/28 19:11 回答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">  ＿</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>© ORUKA1951 2012 - 2016 All Rights Reserved mailto:*****</address> ＿</div> </body> </html>

質問者

お礼 2012/11/28 23:44

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

その他の回答 (5)

nanaka2222
ベストアンサー率29% (8/27)

2012/11/28 22:00 回答No.6

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

質問者

お礼 2012/11/28 23:47

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

nanaka2222
ベストアンサー率29% (8/27)

2012/11/28 21:04 回答No.5

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

ORUKA1951
ベストアンサー率45% (5062/11036)

2012/11/28 16:28 回答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;は、現時点ではどのブラウザも対応できていないようです。　★お勧めは、縦ではなく、横に並べるほうが絶対に良いです。

質問者

お礼 2012/11/28 17:29

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

nanaka2222
ベストアンサー率29% (8/27)

2012/11/28 13:20 回答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 を使って強制的に配置をどこどこに表示する事も必要になってきますこんな感じですね説明が分かりづらかったらごめんなさいね

質問者

お礼 2012/11/28 17:24

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

ORUKA1951
ベストアンサー率45% (5062/11036)

2012/11/27 23:17 回答No.1

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

質問者

お礼 2012/11/28 08:21

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

HPデザインについて