- ベストアンサー
Dreamwever：ボタン配置について困っています
よろしくお願いします。 DreamweverMX2004を使用しています。 サイトメニューを作成しようと思い、 ボタン(gif画像)を7つ程，縦１列に配置しました。 すると ボタンとボタンの間が狭過ぎたので， 間にプリフォーマットで改行を入れてみました。 すると今度はボタンとボタンの間が開き過ぎてしまい不格好に見えます。 上記の状態の「中間程度の隙間」と言うのは作り出せないものでしょうか？ ご存知の方、どうぞよろしくお願い致します。
- bin777
- お礼率70% (97/137)
- ホームページ作成ソフト
- 回答数2
- ありがとう数2
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
> 間にプリフォーマットで改行を入れてみました。 というと、現状は、 <pre> <img src="hoge1.gif"(以下属性省略）> （省略） <img src="hoge7.gif"(以下属性省略）> </pre> という記述ですか？ これが、「メニュー」の意味を持つものなら、画像を直でただ並べる、というマークアップは好ましくありません。 ナビゲーションはulでマークアップするのが論理構造上より望ましい方法として一般的になっています。 また、 > 上記の状態の「中間程度の隙間」と言うのは作り出せないものでしょうか？ 要素と要素の間の余白を任意で調節したいのであれば、やはりimgをブロック要素の子要素として配置し、親要素の上下方向のマージンで調節するのが理にかなっているでしょう。 以下は、ごく大雑把なサンプルです。各プロパティの意味や性質については説明を省きますので、ご自分でググるなどして把握して下さい。 【HTML】 <ul class="hoge"> <li><img src="hoge1.gif"(以下属性省略）></li> （省略） <li><img src="hoge7.gif"(以下属性省略）></li> </ul> 【CSS】 ul.hoge { list-style: none; line-height: 0; padding: 0; margin: 0; } ul.hoge li { margin-bottom: 1px;←任意の値（pxであれば整数）を入れて調整。この値を大きくすれば下方向への余白が広くなり、小さくすれば狭くなります。 } ul.hoge li img { vertical-align: bottom; }
その他の回答 (1)
- ORUKA1951
- ベストアンサー率45% (5062/11036)
文書構造に従ったマークアップを行いましょう。プレゼンテーション(見栄え)のために、本来の意味を超えたマークアップは非推奨です。 HTML4.01仕様書(14.1 スタイルシートの概説) http://www.asahi-net.or.jp/~sd5a-ucd/rec-html401j/present/styles.html#h-14.1 より引用 ・略 ・ テキストを画像に置き換えて表現する。 ・ 余白制御のために画像を用いる。 ・ ページレイアウトの目的で表を用いる。 略 サイとメニューの一覧ですから、通常はol(番号付きリスト)ないしul(順不同リスト)でしょう。 <ol id="SiteList"> <li><img src="images/NEW" alt="トップページ" title="トップページに戻る"></li> <li><img src="***" alt="日記" title="日記のページへ進む"</li> <li>略</li> <li>略</li> </ol> がHTMLになります。 次にプレゼンテーション(見栄え)のためのスタイルシートの記述です。そのページだけなら<head></head>内に、他のページにも適用するなら外部スタイルシートへ ol#siteList{ display: block; position: relative; width: 200px; margin-right: 10px; line-height: 0px; border: 1px solid black; } ol#siteList li{ list-style-type: none; margin: 0px; } まあ、すきにデザインすればよいでしょう。
お礼
早速のお応え、ありがとうございました。 自分には少々難しい内容ではありましたが、 ホームページを作る上でそのソフト独自の表現等はあまりよろしくない… と言う事でしょうか？ 自分も以前に他のページでもそのような事を読んだ記憶があるので やはりタグやソースと言ったものを勉強した方がいいのでしょうね～ 教えて頂いたもので試作させて頂いて、また勉強してみます！ ありがとうございました。
![その他([技術者向] コンピューター) イメージ](https://gazo.okwave.jp/okwave/spn/images/related_qa/c205_1_thumbnail_img_sm.png)
お礼
早速のお応え、ありがとうございました。 ホームページを趣味の一部に利用させて頂いてるだけの自分には 少々難しく見えましたが(苦笑) imgとimgの間に透明な(?)部品を入れるようなものでしょうか？ とりあえず教えて頂いた通りのソースで試作してみます。 丁寧なお答えをありがとうございました！