柔軟に働き方を選ぶ時代に必要なこと >>

新しくWebサイトを作成するために、トップページのコンテンツやデザインは、ある程度まとまりました。

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

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

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

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

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

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

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

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

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

このQ&Aに関連する最新のQ&A

A 回答 (1件)

ちゃんとHTMLがマークアップされていれば難しくはないです。


a要素をサイズ指定のブロックにして並べればよいだけです。
★デザインのためにHTML書かれている『構造とプレゼンテーションの分離( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )ができていない』と、悩むことになるかも・・・

<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/HT … )
にて、[表示]→[スタイル]で、「画像の上に配置」が同様な方法が使われています。(Chromeは代替スタイルシートが使えないので他のブラウザで)
 ソースをご覧になると分かるように、HTMLに文書構造しか書いてないと、自在にデザインは可能なはずです。
    • good
    • 0
この回答へのお礼

ありがとうございます。挑戦してみます!!

お礼日時:2014/10/24 18:28

このQ&Aに関連する人気のQ&A

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!


人気Q&Aランキング