質問: 新しくWebサイトを作成するために、トップページのコンテンツやデザインは、ある程度まとまりました。 しかし、一ヵ所だけ、作成のしかたが解らない部分があります。 まったく別業界のサイトですが、以下の「ボルトエンジニア(株)」のトップページにあるメイン画像の中に配置された4つの画像付きリンクを設置する方法です。 このサイトの場合、メイン画像と感じられる中心から上半分にあるボルト3つの写真と文章のサイズはwidth="754" height="221"となっております。 そのため、メイン画像は中心から上半分と下半分のリンク4つは、別々になっております。 上半分の画像は、簡単に設置できますが、下半分の背景とリンク4つはどのように設置するのでしょうか? スタイルシートで、たしか「backgroundなんとか」で背景を設定できたような覚えがあります。まずは、上の画像と同じ色を使って下半分の画像を作成し、そのあとはどうすれば良いのでしょうか? 解る方おりましたら、教えて下さい。 また、何か他にもアドバイスなどあれば、ご教示下さい。
回答: ちゃんとHTMLがマークアップされていれば難しくはないです。 a要素をサイズ指定のブロックにして並べればよいだけです。 ★デザインのためにHTML書かれている『構造とプレゼンテーションの分離( )ができていない』と、悩むことになるかも・・・ _ __タイトル __このページでは・・・・ __ ___ ____製品1 _____新製品です。 ____ ____製品2 _____この製品は当社のベストセラー・・ ____ ____製品3 _____ロングセラー商品で当社の基礎をつくった製品 ____ ____製品4 _____説明するまでもなく・・ ____ ___ __ _ だとして、 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{その下に置く} ★リンクを ____ _____この製品は当社のベストセラー・・ ____ のように書かれていたら、完全なリキッドに出来ますから、幅広ディスプレイでもスマホ縦置きでもデザインは崩れないでしょう。 ナビゲーションリストを様々にデザインしてみよう。( ) にて、[表示]→[スタイル]で、「画像の上に配置」が同様な方法が使われています。(Chromeは代替スタイルシートが使えないので他のブラウザで) ソースをご覧になると分かるように、HTMLに文書構造しか書いてないと、自在にデザインは可能なはずです。