企業HPなどでロゴ画像のすぐ横にメニューボタンが綺麗に並んでいるヘッダースタイルをよく見かけますが、どう設定すれば画像とテキストを水平線上に並べられますか?
web初心者ゆえ参考サイト等色々調べて見よう見まねでやってみたのですが、横には並ぶものの画像の下部、下揃えにテキストが並んでしまいうまくいきません。
画像の中心部から横1列にしたいのですが…
テーブルをはめ込めばよいのでしょうか?
また、ウィンドウを縮めると連動してテキストが勝手に動いて段分かれしてしまうのも気になるのでこの問題も宜しければ教えて頂けないでしょうか。
何卒宜しくお願いします。
No.2ベストアンサー
- 回答日時:
そんな難しいものではありません。
>web初心者ゆえ参考サイト等色々調べて見よう見まねでやってみたのですが、
それでは、時間ばかりかかって、決して上達しません。
この世界、理数系の勉強と似たところがありますね。基礎からきちんと積み上げていけば簡単で、応用が利きます。しかし、問題集をいくらこなしても応用は利きませんね。
HTML/スタイルシートを使用するのは、「構造とプレゼンテーションの分離( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )」でしたね。
HTMLでひたすら文書構造だけをマークアップして、スタイルシートでscreen(パソコンやスマホ)用、handheld(携帯電話、フィーチャホン)用、print(印刷機)用にプレゼンテーションを指定していきます。
すなわち、<h1>ここは見出し</h1><p>ここから一つの段落</p><ul><li>順不同リストの項目</li><li>二つ目の項目</li></ul>とマークアップさえされていれば、
・ロゴ画像のすぐ横にメニューボタンが綺麗にならべようが
・画像の中心部から横1列にしたいのですが
・ウィンドウを縮めると連動してテキストが勝手に動いて段分かれ
も自在に出来るでしょう。
他のくだらないサイトをまねするのではなく
・HTML 4.01 仕様書邦訳( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )
・CSS 2.1仕様(日本語訳)( http://momdo.s35.xrea.com/web-html-test/spec/CSS … )
くらいは、しっかりと読んでおきましょう。
それから始めたほうが断然早いですよ。
回答ありがとうございました。
随分と初歩的な事で申し訳ありませんでした。
参考サイトありがとうございます。
今後の参考にさせて頂きます。
スタイルシートを書き直してみたところ足りていない部分があったようです。
イメージ通りになりました
No.1
- 回答日時:
CSSの記述を学びなおされることが最短では?
Display:inlineを利用するか、floatを利用すれば簡単にできるとおもいますが?・・・
HTMLには、<ul><li>text1</li><li>text2</li><li>text3</li></ul>と文章構造を正しく記述する。
後は<ul>に対しCSSを使って位置及びpadding 等を設定する。
回答ありがとうございます。
その指定をしてもうまくいかなかったので質問させて頂いたのですが、こちらがもう少し詳しく書くべきでした。
すみません、無事反映致しました。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- HTML・CSS トリミングで表示した画像をクリックで元どおりにしたい 3 2022/12/16 18:49
- PHP 掲示板を作成しておりアップロードファイルとメッセージを並べたいので、アドバイスお願い致します 2 2023/07/17 21:01
- YouTube youtubeのTOPページの動画紹介画面の並び方を変えたいです。 1 2023/03/18 09:25
- ヤフオク! デスクトップPCをヤフオクやメルカリに出品している人 1 2022/12/05 07:22
- その他(ブラウザ) Vivaldiの、この部分を消したいのですが、どうしたらよいですか? 1 2023/02/13 18:28
- Visual Basic(VBA) 【VBA】もし、値が0だったら左のセルと合わせて削除したい 3 2023/04/20 10:12
- Excel(エクセル) 簡単なエクセルマクロについて 4 2023/02/20 10:22
- PHP アップロード画像数でCSSを分けることに成功したのですが、画像の横に文字を並べることが出来ません。 3 2023/07/28 17:16
- WordPress(ワードプレス) ワードプレスで、左寄せ画像と文字を横並びにせず、画像の下に文字を表示される方法を教えてください 1 2022/04/24 11:06
- 防犯カメラ・監視カメラ・小型カメラ Windowsのカメラ機能。設定した通りのfpsでの撮影ができず、コマ落ち動画になる。修正するには? 2 2023/01/29 09:50
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
レスポンシブWebデザインでリン...
-
リストを2つに分割して、それぞ...
-
excel vba で ulタグのなかのse...
-
<table>の高さ固定。情報増加時...
-
ドロップダウンメニューが隠れ...
-
リストマーカーをボックス内に...
-
リンク文字同士の間隔を開ける...
-
CSSのみで画像とテキストに同時...
-
cssで、入れ子になったリストに...
-
文法チェックの<A>と</A>の間が...
-
bxsliderの画像が左によってしまう
-
<ul><li></li></ul>にするメリ...
-
CSSでつくったメニューのアニメ...
-
付属画像がwebの表示画像ですが...
-
ul li を inlineにすると、右か...
-
FLASHに替わる機能のソフトは無...
-
HTMLで組織図を作成する方法
-
htmlの文字が縦書きになる
-
HP 画像の一部にリンクでその...
-
htmlのolやulなどlistにtitleや...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
リストマーカーをボックス内に...
-
番号付きリスト(<Ol><Li>・・...
-
liタグの中に<p>タグやら<dl>を...
-
<table>の高さ固定。情報増加時...
-
レスポンシブWebデザインでリン...
-
<ul><li></li></ul>にするメリ...
-
リストの数字のフォントサイズ...
-
HTMLで組織図を作成する方法
-
ulタグやliタグの中でbrタグ...
-
divタグ内のコンテンツが重なっ...
-
画像にリンクを張ると画像がず...
-
複数行にまたがる括弧を表示し...
-
ページを開いているときのリン...
-
html <ul></ul>の並びで一行空...
-
html/cssの、navを2段にする...
-
HTML5のfooterに見出しを付けて...
-
<ul>~</ul>が二つ続くと間に改...
-
htmlの<ol>タグで、数字などを...
-
CSSでつくったメニューのアニメ...
-
リンク文字同士の間隔を開ける...
おすすめ情報