- 締切済み
大きな画像の上にメニューを画像ボタンで配置
http://www.amupurin.com/ の下の方にある『ようこそ アムプリンの冒険へ』の箇所のように 大きな画像の上に 小さな画像ボタンが配置されています。 コレはどのようにすれば実現できるのでしょうか? バックグランド画像(大きな画像)を指定し、 <table>や<div>で<button>は配置するのでしょうか? 大変申し訳ありませんが 簡単な例でソースの記述 をお示しいただけますと助かります。 日本地図の画像(大きな画像)に各都道府県が各都道府県の名産の画像で クリックできるようなページをつくりたいのです。
- みんなの回答 （2）
- 専門家の回答
関連するQ&A
- 文字の両側に画像を配置するCSSのやり方
●AAAAA● ●BBBBB● ●CCCCC● 上記のように文字の両側に●画像をCSSにて配置したいのですが。 HTML <div class=R> <a href=".html">AAAAA</a> <a href=".html">BBBBB</a> <a href=".html">CCCCC</a> </div> CSS div.R a { background-image: url("●.gif"); background-repeat: no-repeat; background-position: left center; margin-right: 12px; padding-left: 7px } この状態では、左に●は表示されるます。 もうひとつ重ねればとおもい <div class=R>の中に<div class=R2>なるものを配置し、 div.R2 a { background-image: url("●.gif"); background-repeat: no-repeat; background-position: right center; margin-left: 12px; } を重ねてみたんですが、うまくいきません。 右にも表示させてい場合は、どのような記述にすれば表示されるのでしょうか？
- ベストアンサー
- CSS
- メニューの正しい配置の仕方
現在、テーブルを使ってページを左右に二分し、左側にサイトの目次を、右側に本文を記述しています。 <table> <tr> <td>目次部分</td> <td>本文</td> </tr> </table> しかし、この方法は良くないと聞き、CSSを使って配置をしようと考えています。 Wikipediaみたいな感じに、HTMLでは本文を先に記述し、その下にメニューの部分を記述、そしてその部分をCSSで本文の右側に配置しようと思い、Wikipediaのソースを見てみたのですが、複雑でよくわかりませんでした。 Wikipediaの方法でなくても構いませんので、どなたか、アクセシビリティを考慮したメニューの作り方をご存知の方がいらっしゃいましたら、教えていただけないでしょうか。
- ベストアンサー
- HTML
- 背景画像上に複数枚の画像配置について
お世話になります。 まだまだcss勉強中なので教えて頂きたいことがございます。 １枚の背景画像に対し、別箇所にマウスオーバー時のみ表示されるように複数枚画像を配置し、そのマウスオーバー用の複数枚の画像にリンクタグをつけて、別ページへのリンクを貼りたいのです。 しかし、ネットで調べた方法ですと、うまくマウスオーバーが反映されず 余計な画像も出てきてしまいます。 おそらく間違ったcssを記述していると思うので ご指摘いただけると助かります。 -------------------------------------------------------------- 【html】 <div class="demo"> <div class="demo1"><a href="#"></a></div> <div class="demo2"><a href="#"></a></div> <div class="demo3"><a href="#"></a></div> <div class="demo4"><a href="#"></a></div> <div class="demo5"><a href="#"></a></div> </div> 【css】 .demo { background: url("../img/imgbg.jpg") no-repeat; display: block; width: 800px; height: 1108px; } .demo1 a { width: 800px; height: 1108px; background: url("../img/imgbg.jpg") no-repeat; display: block; position:absolute; } .demo1 a:hover { background-image: url("../img/img1.png"); position:relative; top:475px; left:635px; display:block; } .demo2 a { width: 800px; height: 1108px; background: url("../img/imgbg.jpg") no-repeat; display: block; position:absolute; /*text-indent: -9999px;*/ } .demo2 a:hover { background-image: url("../img/img2.png"); position:relative; top:469px; left:480px; display:block; } .demo3 a { width: 800px; height: 1108px; background: url("../img/imgbg.jpg") no-repeat; display: block; position:absolute; } .demo3 a:hover { background-image: url("../img/img3.png"); position:relative; top:477px; left:322px; display:block; } .demo4 a { width: 800px; height: 1108px; background: url("../img/imgbg.jpg") no-repeat; display: block; position:absolute; /*text-indent: -9999px;*/ } .demo4 a:hover { background-image: url("../img/im4.png"); position:relative; top:477px; left:167px; display:block; } .demo5 a { width: 800px; height: 1108px; background: url("../img/imgbg.jpg") no-repeat; display: block; position:absolute; /*text-indent: -9999px;*/ } .demo5 a:hover { background-image: url("../img/img5.png"); position:relative; top:477px; left:10px; display:block; } -------------------------------------------------------------- a のクラスの時に背景画像を指定しなくても良いんじゃないかと思い 消してみたら画像が表示されなくなってしまったので そのまま記載しています。 上記の記述のままですと、マウスオーバーが正しく反応しないですし マウスオーバー時に別箇所に背景画像が表示されてしまいます。 やりたいことは画像にしましたのでご確認ください 黒○は背景画像内にある形で、その上に同じ形の赤○を マウスオーバー時の画像として表示したいです。 （図が下手ですみません） わかる方、ご教示をお願いします。
- 締切済み
- CSS
- ボックス内中央配置特殊版
<div><img src="sss.jpg"></div> でdivの中央に画像を配置したいとき cssで実現しようと思ったら div{ width:100px; height:100px; display:table-cell; text-align:center; vertical-align:middle; } あたりでできそうですが、画像がボックスより小さい場合はこれでいいのですが、 今回やりたいのはボックスより大きな画像の中央をボックスの中央に配置し、 ボックスからはみ出したものはover-flow:hiddenで見切りたいのです。 cssだけで実現可能でしょうか？ js使って画像をposition:ablosute にして位置計算する手は頭に浮かんでますが、もっとシンプルにできそうな気がして質問してみました。
- ベストアンサー
- HTML
- 背景画像上にテキストを配置したボタンについて
今晩は。 いつもお世話になっています。 CSSで次のようなボタンを作りたいと思っています。 ・背景画像の上にテキストを乗せたボタン。 1)ボタン上のテキストを書き換えられるようにしたい。 2)ボタンはページによって同じ背景画像でサイズを変えたい。（指定した縦横幅に合わせて背景画像がリサイズされるようにしたい） 3)背景画像ごとリンクにしたい。 参考サイトを見て、現在以下のようなボタンを作ってみました。 1、2はクリアできたのですが、ボタン上のテキストではなく、背景画像自体をリンクにするにはどうすればいいでしょうか？ また、色々方法はあると思うのですが、今回のようなボタンを作る上でもっと効率の良いCSSがあれば、参考サイト等教えて頂けると幸いです。 -------------CSS-------------- div.photo{ width:100px; height:50px; background-image:url("xxxx.png"); background-repeat:no-repeat; position:relative; background-size:contain; float:right; } .text{ width:100px; position:absolute; top:8px;left:10px; color:#ffffff; line-height: 1.2; font-size:15px; } ------------HTML------------- <div class="photo"> <div class="text"><a href="#">テキスト</a></div> </div> 以上になります。 よろしくお願い致します。
- ベストアンサー
- HTML
- ホームページのブロック配置 Float
Float left のブロックの右に別のブロックを配置したいのですが float right 指定しても回り込んでくれません。一度は上手くいったようにみえたのですが。 原因と注意点をお教え下さい。 --------------------------------------------------------------------------- | header | |--------------------------------------------------------------------------- | dspbody (menuとtopを含む) | | ------------------------------------------------------------------------- | | menu | top | |--------------------------------------------------------------------------- | footer | ---------------------------------------------------------------------------- 【テスト中のスタイルシート】 * { margin:0; padding:0; } body { /* background-color:#ffffff; *//*内容全体の背景色*/ text-align:left; /*テキストの配置を左揃えにする*/ } div#pagebody { width:1000px; margin:0 auto; /*内容全体をセンタリング*/ text-align:left; /*テキストの配置を左揃えにする*/ } div#header { height:136px; /*背景画像のサイズに合わせてボックスの高さを指定*/ text-align:center; /*テキスト・画像の配置を中央揃えにする*/ background-image: url(img/FF054_change.png); background-repeat: repeat-x; } div#dspbody { width:1000px; height:800px; background-color: #999999; } div#menu { width:152px; height:800px; margin:0; float:left; /*内容全体を左に配置*/ text-align:left; /*テキストの配置を左揃えにする*/ /* background-color: "saddlebrown"; */ background-image: url(img/FF085_change.png); /* background-repeat: repeat-y; */ } div#top { /* width:700px; height:600px; */ float:right; text-align:center; /*テキストの配置を中央揃えにする*/ font-size: 9pt; background-color: #ccffcc; } div#top table { margin: auto; /*テーブルの配置を中央揃えにする*/ } div#footer { clear:both; text-align:center; /*テキストの配置を中央揃えにする*/ } a:link { color: yellow} a:visited { color: yellowgreen}
- ベストアンサー
- その他([技術者向] コンピューター)
- 見出しや左メニューのhtmlを後ろに置く時のスタイルシートの指定方法に
見出しや左メニューのhtmlを後ろに置く時のスタイルシートの指定方法について 見出しや左メニューの部分のhtmlをページ全体の後ろのほうに配置したいと考えています。 添付の画像のソースが以下のとおりです ----------------------------------------------------------------------- <div style="position:relative;margin:auto;width:800px;"> <div style="height:20px;width:100%;background-color:#ff0000;"> </div> <div style="margin:0px 0px 0px 150px;width:650px;background-color:#00ff00;"> ああああああ<br /> ああああああ<br /> ああああああ<br /> ああああああ<br /> </div> <div style="position:absolute;top:20px;left:0px;width:150px;background-color:#0000ff;"> いいいいい<br /> いいいいい<br /> いいいいい<br /> いいいいい<br /> いいいいい<br /> いいいいい<br /> いいいいい<br /> </div> <div style="height:20px;width:100%;background-color:#ffff00;"> </div> </div> ----------------------------------------------------------------------- 一応、左メニューについて実現できていて、見出しも同様にやれるのですが、 この方法では、absoluteで配置しているため、フッターの部分を重ならない ようにするためには、見出しとフッターの間のブロックについて高さを指定する しか方法を思いつきません。 ・absoluteで配置する以外の方法があるでしょうか。 ・absoluteで配置したとしても、高さを指定しない方法があるでしょうか。 よろしくお願いします。
- ベストアンサー
- HTML
- 画像を中心に配置したい
画像の上下にも背景色を表示したいですが、うまくできません。 横幅は<align="center">で指定できたのですが、上下は・・・。 HTML、CSS、画像ファイル（gazou1.jpg）全て同じ階層にあります。 ・HTML <div class="gazou" align="center"><img src="gazou1.jpg"></div> ・CSS div.main { width: 100%; background-color: green }
- ベストアンサー
- CSS
- 画像配置のimgタグとbackgroundの違い
画像をHTMLでimgタグで指定するタイプとCSSでbackgroundで指定するタイプの二つありますが、 何のときにimgタグを、何のときにbackgroundを指定するか、知りたいのです。 例えばコンテンツ内ならimgタグ、背景に配置するならbackgroundってのは分るのですが、 タイトルの画像はimgタグとbackgroundのどちらでしょうか？ 他のサイトで拝見してみましたら、どっちも使いますが… 宜しくお願いします。
- ベストアンサー
- HTML
お礼
早速のご回答頂きありがとうございました。ソースも示して頂き 非常に勉強になります。