- ベストアンサー
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; } まあ、すきにデザインすればよいでしょう。
お礼
早速のお応え、ありがとうございました。 自分には少々難しい内容ではありましたが、 ホームページを作る上でそのソフト独自の表現等はあまりよろしくない… と言う事でしょうか？ 自分も以前に他のページでもそのような事を読んだ記憶があるので やはりタグやソースと言ったものを勉強した方がいいのでしょうね～ 教えて頂いたもので試作させて頂いて、また勉強してみます！ ありがとうございました。
関連するQ&A
- ボタンの配置がうまくいきません
CSSでサイトのデザインをしているのですがうまくいかないので、教えて下さい。 ボタンをfloatで並べているのですが、現在いるページのボタンはでかく、いないページは小さく表示をしたく、思い通りのサイズの画像を作って並べているのですが、思い通りに配置されません。 -------------以下ソース------------------ 【CSS】 * {margin:0; padding:0;} body {font-size:14px;} a {color: #0077B0; text-decoration:none;} a:hover {text-decoration:underline;} #menu {overflow:auto !important; overflow /**/:hidden; width:100%; border-bottom:double #009933;} #menu li {float:left; width:59px; line-height:2.3em; list-style:none; height:29px;} #menu li a {display:block; width:100%; height:29px;} #menu li.Navi01 {background:url(../img/btn1.gif) no-repeat;} #menu li.Navi01 a:hover {background:url(../img/btn.gif) no-repeat} #menu li.Navi01_v {background:url(../img/btn_v.gif) no-repeat; width:67px; height:35px;} #menu li.Navi02 {background:url(../img/btn1.gif) no-repeat;} #menu li.Navi02 a:hover {background:url(../img/btn.gif) no-repeat} #menu li.Navi02_v {background:url(../img/btn_v.gif) no-repeat;} #menu li.Navi03 {background:url(../img/btn1.gif) no-repeat;} #menu li.Navi03 a:hover {background:url(../img/btn.gif) no-repeat;} #menu li.Navi03_v {background:url(../img/btn_v.gif) no-repeat;} #body {width:100%; clear:left; border-top:#009933 double medium; margin-top:auto;} 【HTML】 <body> <ul id="menu"> <li class="Navi01_v"><a href="hoge1.html"></a></li> <li class="Navi02"><a href="hoge2.html"></a></li> <li class="Navi03"><a href="hoge3.html"></a></li> </ul> <div id="body">aaaa</div> -------------ここまで------------------ 配置したい場所 1.#menu li.Navi01_vのボタン画像を#menuで指定しているborder-bottomの二重線の下の線に隣接させたい。 2.Navi02とNavi03は#menuで指定しているborder-bottomの二重線の上の線に隣接させたい。 いろいろと試してみたのですが、今の所どちらもうまくいきません。 どうすればよいでしょうか？ アドバイス御願いします。
- 締切済み
- HTML
- VC++2013 ボタンの配置
今までBCCを使用しており、VCに乗り換えることになりお勉強中なのですが、 VS2013のC++でプログラムによるボタン配置はどのように行えばいいのでしょうか？ 以下のような感じをやりたいのですが。。。 #define btn_cnt 10 //ボタンの数 int i; for (i = 0; i < btn_cnt; i++) { ボタン作成 (ボタン位置縦,横 ボタンサイズ縦,横) } ボタン[0]の色を変える ボタン[1]を見えなくする
- 締切済み
- C・C++・C#
- auの携帯サイトで画像と画像の間に隙間ができる
現在、auの携帯サイトを作成しています。 ３枚の画像を縦に隙間無く並べたいのですが、 どうしても画像と画像の間に隙間ができてしまいます。 隙間をなくす方法は無いのでしょうか？？ ドコモとソフトバンクでは隙間はできず、 綺麗に３枚の画像が縦に並びました。 auでは無理なんでしょうか・・・？？ <img src="xxx.gif"><img src="xxx.gif"><img src="xxx.gif"><br /> のようにimgタグの間にスペースやBRタグを無くしても、 隙間は開いてしまいました。 ご教授、宜しくお願いいたします。
- 締切済み
- HTML
- WORDでオートシェイブの中の文字の配置について
WORDでオートシェイブを使って縦長の四角（文字縦１行分の巾）を作り,その中に縦に文字列を入力します。 その際,文字列がとその四角の巾とほぼ同じにしたい。 つまり、文字とその両脇の線の間に隙間がないように配置したい。 なかなかうまく行かないので教えてください。
- 締切済み
- オフィス系ソフト
- gif 画像上の ボタンに リンクを張るには？
HP 上の gif画像ファイル にいくつか小さなボタンを配置して それぞれの ボタンに リンクを張りたく思います。 gif 画像上の ボタンに リンクを張るには？どのようにすればいいのでしょうか？
- ベストアンサー
- HTML
- ボタンクリックでスライドするメニューについて
質問させていただきます。 --------- ■制御ボタン：2つ △配置ボタン：4つ（幅各130px） 画像：ボタンとリンクした画像4枚を配置ボタンクリックで切り替え --------- 左右に制御ボタンを配置し、 その間を、130pxずつ右または左にスライドして移動する ボタンメニューを作成したいと考えております。 ↓イメージです。（■：制御ボタン △：画像表示用ボタン 左の■ボタンを押すと△が左に130px分移動 右も同様に右に130px分移動する） ■△△△△■ 各△ボタンを押すと、メニューの上の領域に ボタンに対応した画像が表示されます。 Flash初心者のため、一からスクリプトを書くことが出来ず 同じ動きをするサンプル、またはカスタマイズ前提の参考サイトを 探しておりますが カーソルで△が動くものはあるものの、ボタンで動くものを見つけることが出来ずにいます。 参考サイトをご存知の方、または作成方法をご教示頂ける方が居られましたら何卒よろしくお願いします。 《環境 WinXP Flash8》
- ベストアンサー
- Flash
- CSSでのテキストの下に画像などを配置したい。
CSSでレイアウトしたページを作っています。 画面左のナビをテキストで作成しました。 （ヘッダーの下に、左のナビと右のメインエリアという構造） テキストの周囲をボーダーで囲んであります。 （TABLEは使っていません） テキストでの一覧のメニューの下に、画像のボタン等を配置したいのですが、メニューのテキストのテキストサイズを固定していないため、ブラウザの文字サイズを大きくしたりすると、メニューが縦に伸びたりします。 この時、メニューの下に配置する画像を、上のメニューの大きさ（縦幅）が変わってもそれに合わせて配置を上下させたいのですが、どうすればいいのでしょうか？ とりあえずposition:absoluteでは絶対位置で指定されてしまうので、うまくいかないってことは分かっているのですが・・・ CSS自体まともに使うのは初めてなので、本等で調べながらやっているのですが、この部分が解決できません。
- 締切済み
- その他([技術者向] コンピューター)
- テーブルの隙間を無くしたい
DreamWeaverCS4を使いホームページを作成しております。そこでテーブルについて、狙い通りに上手く表示が出来なくて困っております。どなたかご指導アドバイスをお願い致します。具体的な内容は下記のとおりです。 ・テーブルを「７列２行（全体の大きさは横700px×縦100px）」で作成し、内訳は１行目は、一枠横100px×縦50pxの大きさで７枠作成。２行目は横700px×50pxで作成。 上記内容のテーブル１行目に横100px×縦50pxのサイズの画像を７つ挿入。そして２行目には横700px×縦50pxの画像を１つ挿入しました。 そしてテーブルの設定は「ボーダーは0」です。 しかし、画像挿入後には２行目の画像横700px×縦50pxが入っているテーブルに隙間が出来て背景が見えてしまいます。１行目を見ると…微妙に各画像間の間に隙間が空いていて、この隙間が全体的に700pxを超えているようなんです。それで、２行目の画像に対して背景が見えて（テーブルの幅が広がってしまっています）いるのです。 そこでですが、画像を配置後にテーブルの隙間をきっちりと無くして背景が見えなくする方法ってあるのでしょうか？ 解る方がいましたら…ご指導…アドバイスをお願い致します…。よろしくお願い致します…。
- ベストアンサー
- HTML
- オプションボタンを矢印キーで順序を決めて移動するには？
AccessVBAでの開発をしています。（Access2003） フォーム上にフレームを配置し、フレーム内にオプションボタン（ラジオボタン）を配置しています。 通常の動作として、オプションボタンはキーボードの矢印キーで移動できますが、 この順序を設定することは可能なのでしょうか？ オプションボタンは、縦５列、横５列の計２５個配置しており、 一番左の縦方向に移動後、その隣の列の縦方向・・・といった具合に 移動させたいのです。 縦１列で２５個並べたところ、上から下へ配置順に移動できるのですが、 列が複数で行も複数となると、意図した順に移動できなくなります。 何か良い方法をご存知の方、教えて下さい。 宜しくお願いします。
- ベストアンサー
- オフィス系ソフト
お礼
早速のお応え、ありがとうございました。 ホームページを趣味の一部に利用させて頂いてるだけの自分には 少々難しく見えましたが(苦笑) imgとimgの間に透明な(?)部品を入れるようなものでしょうか？ とりあえず教えて頂いた通りのソースで試作してみます。 丁寧なお答えをありがとうございました！