![](http://oshiete.xgoo.jp/images/v2/pc/qa/question_title.png?e8efa67)
いつも大変お世話になっております。
wordpressのヘッダー個所に、真ん中にロゴ画像、右手にソーシャルメディアの画像を横並びに配置したいのですが、うまくいきません。
Topというdivの中に「logo」と「social」という2つのdivを入れ、下記のcss、htmlで制作すると、ロゴは中央に配置され、ソーシャルメディアの画像は右に寄るのですが、
横の配置がソーシャルメディア画像が右下にきてしまい、うまくいきません。
是非どなたかご教授いただけますと、非常に助かります。
<div id="top">
<div id="logo"></div>
<div id="social">
<div class="fb"></div>
<div class="twitter"></div>
</div>
</div>
#top {
height: 36px;
}
#logo {
background-image: url(images/logo.png);
background-repeat: no-repeat;
margin: 0 auto;
height: 36px;
width: 397px;
}
#social {
float:right;
height: 36px;
width:56px;
}
#social .fb {
background-image: url(images/fb.png);
background-repeat: no-repeat;
padding-right: 3px;
height: 26px;
width: 25px;
float:right;
}
#social .twitter {
background-image: url(images/twitter.png);
background-repeat: no-repeat;
padding-right: 3px;
height: 26px;
width: 25px;
float:right;
}
No.2ベストアンサー
- 回答日時:
HTMLの中身が無いので???なのですが、
>Topというdivの中に「logo」と「social」という2つのdivを入れ、
<div id="top">
<div id="logo">ロゴ</div>
<div id="social">
<div class="fb">ソーシャルメディアの画像</div>
<div class="twitter">ツイッターの画像</div>
</div>
</div>
うーん、これじゃ検索エンジンは無論、画像を読み込まないブラウザ、スタイルシートを読まないブラウザにはチンプンカンプン。
この場合、背景にする必要はありません。きちんと文書構造にしたがってマークアップしましょう。
タブは_に置換してある。
<div class="header" id="Top">
_<h1><img src="images/logo.png" width="397" height="36" alt="タイトル(ページの見出し)"></h1>
_<div class="nav">
__<ul>
___<li><img src="images/fb.png" width="25" height="26" alt="FB"></li>
___<li><img src="images/twitter.png" width="25" height="26" alt="Twitter"></li>
__</ul>
_</div>
<div>
文字がちゃんとあり、その背景なら
<div class="header" id="Top">
_<h1><span>タイトル(ページの見出し)</span></h1>
_<div class="nav">
__<ul>
___<li>FB</li>
___<li>Twitter"</li>
__</ul>
_</div>
<div>
ですかね。HTML的には大差ない。
[CSS]
div.header{
position:relative; /* absoluteの基準になる */
width:453px;margin:0 auto;
}
div.header h1{
margin:0 56px 0 0;
background-image:url(images/logo.png);
text-align:center;
}
div.header h1 span{visibility:hidden;}
div.header div.nav{
width:56px;
position:absolute;
top:0;right:0;
}
div.header div.nav ul,
div.header div.nav ul li{
display:block;list-style:none;
margin:0;padding:0;
}
div.header div.nav ul{
width:100%;height:36px;
}
div.header div.nav ul li{
padding-right:3px;
background:url(images/fb.png) no-repeat;
width:25px;height:26px;
float:left;
}
div.header div.nav ul li+li{
background-image:url(images/twitter.png);
}
デザインは一切考慮せず、HTMLをきちんと書くこと。そうすれば先でどのようにもデザインは変更できます。HTMLさえきちんとしていたら、違うHTMLでも同じになる。
★headerをrelativeにしておいて、それを基準にabsoluteで配置すると、デザインに引っ張らずHTMLがかけます。そして、そのHTMLは、好きにデザインできます。
ORUKA1951様、
ご回答誠にありがとうございました。
<img src=...>を使用してイメージ挿入ができず、イメージを背景として入れておりました。
ご指摘頂きました通り、SEO対策も考慮してimgを背景としてではなく取り込むことにしました!
ご丁寧なご回答で非常によく理解できました。
ありがとうございます
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- JavaScript vertical sliderをautoplayしたい 2 2022/08/25 14:47
- HTML・CSS 書籍を見つつサイト造りの練習をしているのですが、見た目が一致しません 2 2022/11/28 15:00
- HTML・CSS PCサイズで赤い画像2つと、青い画像2つがそれぞれ横に2つずつ並んでいるのですが、これをスマホサイズ 5 2022/04/11 12:01
- HTML・CSS スクロールすると追従する画像のコードを書いているのですが、追従する画像の大きさの調節が上手くいきませ 2 2022/04/18 12:52
- HTML・CSS CSSが効かずどのように指定すれば良いか分からないのでアドバイスお願い致します 2 2023/06/07 12:25
- HTML・CSS ヘッダーの画像にメインエリアがかぶってしまいます 1 2022/11/28 14:06
- JavaScript jQueryでのドラッグアンドドロップについて 1 2022/07/30 09:10
- HTML・CSS img と p を縦中央に配置したいのですがうまくいきません。 2 2023/01/12 14:38
- HTML・CSS 吹き出し 下記の吹き出しのスタイルシートについて 下記のスタイルシートは左側にアイコンがでる使用にな 1 2022/11/12 17:55
- HTML・CSS 【HTML】【CSS】【Swiper】 元の画像は横1200×縦600なのですが、実際のサイト上に反 5 2022/07/16 13:57
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
チェックボックスの背景色って...
-
ウィンドウサイズを無視して、D...
-
画像のスムーズなフェードイン方法
-
css固定したフッターが本文と重...
-
【CSS】floatで左右に並べた...
-
Flickity で画像にリンクを貼る...
-
レイアウトが崩れないようにす...
-
html スクロール要素を下から表...
-
MAX関数を使ってからLEFT JOIN...
-
jQueryで同じクラス名のものを...
-
jspでcssが読み込めない
-
日替わりで画像を変更したい
-
画面が真っ白になるのはどうして?
-
ネストされたチェックボックス...
-
[急ぎ] videoタグで埋め込んだm...
-
読み込んだQRコードをフォーム...
-
外部javascriptの重複を防ぐには
-
文字と数字が混在する要素のsor...
-
createElementで作成した要素を...
-
一定時間ごとにgif画像の切...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
サイトにコンテンツを並べる際...
-
CSS <div>の入れ子が反映さ...
-
スクロール可能なチェックボックス
-
フッター上部に謎の隙間
-
【CSS】floatで左右に並べた...
-
textareaで入力した文字を改行...
-
文字をクリックしたら別の文字...
-
css固定したフッターが本文と重...
-
Flickity で画像にリンクを貼る...
-
Ctrl+F(検索)の窓を出したいの...
-
文字を固定したいのですが…
-
オンマウス時に別画像を上に重...
-
背景の過
-
離れた場所にマウスオーバーで...
-
チェックボックスの背景色って...
-
フッターの下に隙間ができてしまう
-
スタイルシートで画面を上下に...
-
ポップアップのソースの書き方...
-
floatさせたdivタグを折り返さ...
-
TABLEの高さを固定したいのですが…
おすすめ情報