画像の横にメニューボタンを並べたい

質問

企業HPなどでロゴ画像のすぐ横にメニューボタンが綺麗に並んでいるヘッダースタイルをよく見かけますが、どう設定すれば画像とテキストを水平線上に並べられますか？

web初心者ゆえ参考サイト等色々調べて見よう見まねでやってみたのですが、横には並ぶものの画像の下部、下揃えにテキストが並んでしまいうまくいきません。
画像の中心部から横１列にしたいのですが…
テーブルをはめ込めばよいのでしょうか？

また、ウィンドウを縮めると連動してテキストが勝手に動いて段分かれしてしまうのも気になるのでこの問題も宜しければ教えて頂けないでしょうか。
何卒宜しくお願いします。

回答No.2

ORUKA1951 · ベストアンサー

そんな難しいものではありません。
＞web初心者ゆえ参考サイト等色々調べて見よう見まねでやってみたのですが、
　それでは、時間ばかりかかって、決して上達しません。
　この世界、理数系の勉強と似たところがありますね。基礎からきちんと積み上げていけば簡単で、応用が利きます。しかし、問題集をいくらこなしても応用は利きませんね。

　HTML/スタイルシートを使用するのは、「構造とプレゼンテーションの分離( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/intro/intro.html#h-2.4.1 )」でしたね。
　HTMLでひたすら文書構造だけをマークアップして、スタイルシートでscreen(パソコンやスマホ)用、handheld(携帯電話、フィーチャホン)用、print(印刷機)用にプレゼンテーションを指定していきます。
　すなわち、<h1>ここは見出し</h1><p>ここから一つの段落</p><ul><li>順不同リストの項目</li><li>二つ目の項目</li></ul>とマークアップさえされていれば、
・ロゴ画像のすぐ横にメニューボタンが綺麗にならべようが
・画像の中心部から横１列にしたいのですが
・ウィンドウを縮めると連動してテキストが勝手に動いて段分かれ
　も自在に出来るでしょう。

他のくだらないサイトをまねするのではなく
・HTML 4.01 仕様書邦訳( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/cover.html )
・CSS 2.1仕様（日本語訳）( http://momdo.s35.xrea.com/web-html-test/spec/CSS21/cover.html )
　くらいは、しっかりと読んでおきましょう。
　それから始めたほうが断然早いですよ。

お礼

回答ありがとうございました。
随分と初歩的な事で申し訳ありませんでした。
参考サイトありがとうございます。
今後の参考にさせて頂きます。
スタイルシートを書き直してみたところ足りていない部分があったようです。
イメージ通りになりました

回答No.1

noname#206842

CSSの記述を学びなおされることが最短では？
Display:inlineを利用するか、floatを利用すれば簡単にできるとおもいますが？・・・

HTMLには、<ul><li>text1</li><li>text2</li><li>text3</li></ul>と文章構造を正しく記述する。
後は<ul>に対しＣＳＳを使って位置及びpadding 等を設定する。

お礼

回答ありがとうございます。
その指定をしてもうまくいかなかったので質問させて頂いたのですが、こちらがもう少し詳しく書くべきでした。
すみません、無事反映致しました。