背景に画像を配置し、その中でリンクを設置する方法
- Webサイト制作時、背景に画像を配置し、その中にリンクを設置する方法について詳しく教えてください。
- 具体的には、「ボルトエンジニア(株)」のトップページのようなメイン画像内に4つの画像付きリンクを設置する方法が知りたいです。
- 上半分の画像の設置は簡単ですが、下半分の背景画像とリンク4つの設置方法についても教えてください。
- ベストアンサー
背景に画像を配置し、その中でリンクを設置する方法
新しくWebサイトを作成するために、トップページのコンテンツやデザインは、ある程度まとまりました。 しかし、一ヵ所だけ、作成のしかたが解らない部分があります。 まったく別業界のサイトですが、以下の「ボルトエンジニア(株)」のトップページにあるメイン画像の中に配置された4つの画像付きリンクを設置する方法です。 http://www.bolt-engineer.net/ このサイトの場合、メイン画像と感じられる中心から上半分にあるボルト3つの写真と文章のサイズはwidth="754" height="221"となっております。 そのため、メイン画像は中心から上半分と下半分のリンク4つは、別々になっております。 上半分の画像は、簡単に設置できますが、下半分の背景とリンク4つはどのように設置するのでしょうか？ スタイルシートで、たしか「backgroundなんとか」で背景を設定できたような覚えがあります。まずは、上の画像と同じ色を使って下半分の画像を作成し、そのあとはどうすれば良いのでしょうか？ 解る方おりましたら、教えて下さい。 また、何か他にもアドバイスなどあれば、ご教示下さい。
- CSS
- 回答数1
- ありがとう数9
- みんなの回答 （1）
- 専門家の回答
質問者が選んだベストアンサー
ちゃんとHTMLがマークアップされていれば難しくはないです。 a要素をサイズ指定のブロックにして並べればよいだけです。 ★デザインのためにHTML書かれている『構造とプレゼンテーションの分離( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/intro/intro.html#h-2.4.1 )ができていない』と、悩むことになるかも・・・ <body> ＿<div class="header"> ＿＿<h1>タイトル</h1> ＿＿<p>このページでは・・・・</p> ＿＿<div class="nav"> ＿＿＿<ol> ＿＿＿＿<li><a href="/Products/1">製品1</a> ＿＿＿＿＿<p>新製品です。</p> ＿＿＿＿</li> ＿＿＿＿<li><a href="/Products/2">製品2</a> ＿＿＿＿＿<p>この製品は当社のベストセラー・・</p> ＿＿＿＿</li> ＿＿＿＿<li><a href="/Products/3">製品3</a> ＿＿＿＿＿<p>ロングセラー商品で当社の基礎をつくった製品</p> ＿＿＿＿</li> ＿＿＿＿<li><a href="/Products/4">製品4</a> ＿＿＿＿＿<p>説明するまでもなく・・</p> ＿＿＿＿</li> ＿＿＿</ol> ＿＿</div> ＿</div> だとして、 div.header div.nav{サイズを指定して} div.header div.nav ol{位置を上の50%にしてtext-align:center;} div.header div.nav ol li{display:inline-block、幅を20%程度} div.header div.nav ol li a{display:block;にして背景画像をつけて} div.header div.nav ol li a p{その下に置く} ★リンクを ＿＿＿＿<li><a href="/Products/2"><img src="" width="" height="" alt=""></a> ＿＿＿＿＿<p>この製品は当社のベストセラー・・</p> ＿＿＿＿</li> のように書かれていたら、完全なリキッドに出来ますから、幅広ディスプレイでもスマホ縦置きでもデザインは崩れないでしょう。 ナビゲーションリストを様々にデザインしてみよう。( http://www.ichiya.com/WebService/Howto/sample/HTML/nav/navigation1.html ) にて、[表示]→[スタイル]で、「画像の上に配置」が同様な方法が使われています。(Chromeは代替スタイルシートが使えないので他のブラウザで) ソースをご覧になると分かるように、HTMLに文書構造しか書いてないと、自在にデザインは可能なはずです。
関連するQ&A
- 背景画像をリンクにする？
タイトルの通りなのですが、よくブログなどにある、headerの部分を画像にしてtopへのリンクを張る方法が分かりません。 例えば森永卓郎さんのブログだと、タイトルの「つながるモリタクBLOG」の部分にリンクが張ってあり ブログのトップページに移動するようになっていますが、このクリックできる範囲を広げて、 緑色の背景画像の部分をクリックしても同じく移動できるように指定することはできませんでしょうか？ 単に画像にリンクを張るだけならできますが、背景にしてみたところ詰まってしまいました…。 よろしくお願いいたします。
- ベストアンサー
- CSS
- TOK２での背景画像設置法
僕はTOK2でホームページを作成しているのですが、背景画像の設置方法がいまいち分かりません。どうすればよいのでしょか？ 背景画像にする画像は決まっています。 お願いします。
- ベストアンサー
- ホームページ作成ソフト
- 背景画像上にテキストを配置したボタンについて
今晩は。 いつもお世話になっています。 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
- カーソルが乗ったときリンクの背景色が変わるようにしたい
こんばんは、いまホームページを作っているのですがメニュー項目でカーソルが乗ったときに項目の背景色が変わるようにしたいです。下のサイトのようにです。 http://www.oxfordcity.co.uk/ リンク全部の色を一括で変えるのではなくて、上のサイトのように個別に変わる色を設定したいです。 ソフトはホームページ・ビルダー10を持っています。そして表を使ってメニュー項目を作成しました。そして表の枠を消して、見た感じは上のリンク先のサイトと同じようになっています。この表は使えますか？ あっ、あとリンクにアンダーラインが付いているのですがそれもも消したいです。 よろしくお願いいたしますm(_ _)m
- ベストアンサー
- HTML
- 背景画像
こんにちは。背景画像を探しています。イメージとしては、シンプルで 以下のリンク先にある、指輪画像の背景のような感じです。 http://jp.bulgari.com/productBrdDetail.jsp?prod=AN854631 いろいろとネットで調べたのですが、なかなかこのようなシンプルな感じで 上の方に行くにしたがって、色が薄くなっていくような背景画像に行きつきません。 調べ方としては、Googleで、背景画像、シンプル とかで検索していっているのですが。 なにか、アドバイスなり、このようなサンプル画像を購入できるサイトをおしりでしたら、 教えてください。お願いします。
- ベストアンサー
- 画像・動画・音楽編集
- JavaScriptでリンクの背景にある画像をOnMouseOver時
JavaScriptでリンクの背景にある画像をOnMouseOver時に変更する方法がわからなくて困っています。 webページを作っているのですが、OKWaveのサイトの上のタブのように画像を背景とするリンク上にマーカーが来たときにその画像の下部50％を表示するようにしたいのですがうまくいきません。 マーカーがリンク上に無い時には画像の上部50％を表示するようなものにしたいと思っています。 スタイルシートでリンクに指定したidなどで処理したいと思っています。 説明が下手かと思いますが、サンプルコード等を教えてください。
- ベストアンサー
- JavaScript
- サファリで背景画像が１ピクセルぐらいずれる
サファリで背景画像が１ピクセルぐらいずれることで困っています。 以下のサイトのメインのコンテンツ部分、上と下の部分を見てください。 http://www.seiho-minaoshi.net/ 1ピクセルぐらいずれているのがわかると思います。 IEとFFは背景画像がずれないのですが、サファリではずれるのです。 なぜでしょう。サファリのハックを使っても解決しないのです。
- ベストアンサー
- HTML
- FLASHに配置した画像からのリンク。
FLASH初心者であることから、初歩的な事をお尋ねします。 現在ADOBE Flash Professional CCを使ってFLASHを作成しています。 ステージに読み込んだ自作のjpg画像に、他のページ（同一サイト内または、他サイト等）へのリンクを設置したいのですが、方法が分かりません。どなたか教えて頂けないでしょうか？ 環境はWin 8.1、ActionScriptは3.0です。 よろしくお願い致します。
- ベストアンサー
- Flash
- CSSで指定した背景画像にリンクエリアを設定する方法。
メインビジュアルとしてCSSで背景画像として指定したものの中にリンクエリアを作って、そこの部分だけにマウスをもってきた時に、リンク先に飛ぶようにしたいのですが、毎回firefox, IE7,IE6でのmargin, padding,の違いに四苦八苦してます。 大抵は、margin-topを違うブラウザ用にpadding-topにして、*htmlや、*:first-child+html等のハックでカバーしてたりするのですが、今回はそれでもうまくいかず、どなたか教えて頂けたらと質問させて頂きました。 以下CSSのソースです。 #main_visual { background:url(../img/main_visual.jpg) no-repeat; width:666px; height:418px; text-indent:-9999px; } #main_visual a{ display:block; width:338px; height:43px; position:relative; top:324px; left:308px; } 上のように、666 X 418の画像の中に、 上から324px 左から308pxの位置に大きさ338 X 43のリンクエリアをつくリたいのですが、、上記だと、IE7 IE6ではうまくいくみたいですが、 firefoxとsafariだと、positionが全くきかず左上の位置(top:0 left:0)にリンクエリアがきてしまってます。。 どのようにリンクエリアを指定するのが最もスマートな方法なのでしょうか？ 毎回悩んでます。。ちなみに、*:first-child+html このIE7用のハックってまだ使えたりするんでしょうか？^^;
- ベストアンサー
- CSS
お礼
ありがとうございます。挑戦してみます！！