- ベストアンサー
背景に画像を配置し、その中でリンクを設置する方法
- Webサイト制作時、背景に画像を配置し、その中にリンクを設置する方法について詳しく教えてください。
- 具体的には、「ボルトエンジニア(株)」のトップページのようなメイン画像内に4つの画像付きリンクを設置する方法が知りたいです。
- 上半分の画像の設置は簡単ですが、下半分の背景画像とリンク4つの設置方法についても教えてください。
- 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に文書構造しか書いてないと、自在にデザインは可能なはずです。
お礼
ありがとうございます。挑戦してみます！！