• ベストアンサー
  • すぐに回答を!

背景に画像を配置し、その中でリンクを設置する方法

  • 質問No.8793925
  • 閲覧数70
  • ありがとう数9
  • 気になる数0
  • 回答数1
  • コメント数0
新しくWebサイトを作成するために、トップページのコンテンツやデザインは、ある程度まとまりました。

しかし、一ヵ所だけ、作成のしかたが解らない部分があります。

まったく別業界のサイトですが、以下の「ボルトエンジニア(株)」のトップページにあるメイン画像の中に配置された4つの画像付きリンクを設置する方法です。

http://www.bolt-engineer.net/

このサイトの場合、メイン画像と感じられる中心から上半分にあるボルト3つの写真と文章のサイズはwidth="754" height="221"となっております。

そのため、メイン画像は中心から上半分と下半分のリンク4つは、別々になっております。

上半分の画像は、簡単に設置できますが、下半分の背景とリンク4つはどのように設置するのでしょうか?

スタイルシートで、たしか「backgroundなんとか」で背景を設定できたような覚えがあります。まずは、上の画像と同じ色を使って下半分の画像を作成し、そのあとはどうすれば良いのでしょうか?

解る方おりましたら、教えて下さい。

また、何か他にもアドバイスなどあれば、ご教示下さい。

質問者が選んだベストアンサー

  • 回答No.1
  • ベストアンサー

ベストアンサー率 45% (5062/11035)

ちゃんと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に文書構造しか書いてないと、自在にデザインは可能なはずです。
お礼コメント
noname#233083
ありがとうございます。挑戦してみます!!
投稿日時:2014/10/24 18:28
結果を報告する
このQ&Aにはまだコメントがありません。
あなたの思ったこと、知っていることをここにコメントしてみましょう。
AIエージェント「あい」

こんにちは。AIエージェントの「あい」です。
あなたの悩みに、OKWAVE 3,600万件のQ&Aを分析して最適な回答をご提案します。

関連するQ&A

その他の関連するQ&Aをキーワードで探す

ピックアップ

ページ先頭へ