WordPressヘッダー画像の横並び方法

2014/06/09 17:35

このQ&Aのポイント

WordPressのテーマStinger3を使用している場合、ヘッダー画像を横に並べる方法について教えてください。
floatを使用することでヘッダー画像を横に並べることはできますが、ウィンドウサイズを小さくするとレイアウトが崩れてしまいます。
理想的なレイアウトは、左側にheader2、右側にheader1を配置し、両者の間に10pxの余白を設けることです。また、ウィンドウサイズを小さくした場合、header1とheader2が左方向に移動していくような挙動が望まれます。

Sorara2013
お礼率83% (44/53)

CSS
回答数2
ありがとう数2

みんなの回答 （2）
専門家の回答

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

ベストアンサー

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

2014/06/10 08:19 回答No.2

header1,header2とは分からないidですが・・『DIV要素とSPAN要素は、id属性及び class属性と併用することで、文書に構造を付加するための一般機構を提供する。( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/struct/global.html#h-7.5.4 )』　勧告(1999)後15年になるのに理解されなくて、HTML5では、この反省からDIVは極力使わないで構造を明確にする新しい要素が追加されました。( http://standards.mitsue.co.jp/resources/w3c/TR/html5-diff/#new-elements ) 　ここをしっかり理解しておかないとデザインをちょっと変えたいとき困りますし、HTMLのメンテナンスも大変になる。・#header1,header2は、本当のところなんでしょう。見出しなら、<h1></h1>で良いです。　「テキストを画像に置き換えて表現する。( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/present/styles.html#h-14.1 )」はちょっとまずいので、実際の内容はなんなのでしょう。・横に並べる方法は、inline-block、でもinlineでもcontent:url()でも、もちろんfloatでも構いません。内容によって選択します。・ディスプレイの最大幅、最小幅の想定は？・画像はウィンドウ幅に合わせて伸縮させるのか？　<----余白---->[-----画像-----]10px[--画像--]<----余白----> 　[--像-]10px[画像] ・それとも画像は伸縮させずに余白で制御するのか　<----余白---->[---画像---]10px[画像]<----余白----> 　　　　<余白>[---画像---]10px[画像]<余白> 　HTMLさえ、きちんとマークアップされていれば、いかようにも出来ます。例えば、標準的な <body> 　<div class="header"> 　　<h1>ページタイトル</h1> 以下省略・・・　だけで良いのですよ。それで画像を２枚並べられる。

質問者