横並びのメニューを表示させるところまでは出来たのですが、ウィンドウを縮小させると画像の通りリストが画面に合わせてズレてしまいます。
CSSはこのように書いています。
ul.menu{
list-style:none;
width:100%;
font-size:25px;
//margin-left:0px;
//margin-top: 642px;
position: relative;
top: 642px;
right: 27px;
padding:3px 0px;
text-align:center;
font-family: 'Gorditas', cursive;
}
ul.menu li{
list-style:none;
display:inline;
margin:0px 15px;
}
ウィンドウを縮小しても横並びのままにはならないのでしょうか?まだまだ勉強途中なのでわかりやすく教えて頂けるとありがたいです。
No.2ベストアンサー
- 回答日時:
>リストが画面に合わせてズレてしまいます。
ユーザービリティを考えると、それがベストだと思います。もし、一列に並んだままだと
・画像の大きさを小さくしてウィンドウ内に納めようとすると、画像が小さくなり判読しづらく、またポインターを合わせづらくなる。
・画像の大きさを保ったままだと横スクロールしなければ、すべてを見づらくなる。
のいずれかの問題を抱えることになります。
また、ulに対してposition:relativeを指定されて、かつtop,rightでずらしていますが、そうすると本来の位置にulがあるように、後続の要素が配置されます。
【引用】____________ここから
relative
ボックスの位置はまず通常フローにて計算され(この計算で得られた位置を通常位置と呼ぼう)、その通常位置から相対的に配置される。 なお、あるボックスBが相対配置される場合、それに後行するボックスの位置は、Bが相対配置されていないかのように計算される。
 ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ここまで[視覚整形モデル( http://www.swlab.it.okayama-u.ac.jp/man/rec-css2 … )]より
なお、現在ウェブ標準とみなされているCSS2.1では、displayの値がCSS2よりも増えています。
[CSS2] [CSS2.1]
inline inline
block block
list-item list-item
run-in 破棄 CSS3で導入?
compact 破棄 CSS3で導入?
----- inline-block
marker 破棄 CSS3で導入?
table table
inline-table inline-table
table-row-group table-row-group
table-header-group table-header-group
table-footer-group table-footer-group
table-row table-row
table-column-group table-column-group
table-column table-column
table-cell table-cell
table-caption table-caption
none none
inherit inherit
よって、もしリストの項目を画像で表示されているなら、display:inline-block;が本来設定すべきプロパティですが、そうすると古いブラウザは対応していません。
ul.menu,ul.menue li{display:block;list-style:none;}
ul.menu,ul{width:100%;position: relative;padding:3px 0px;text-align:center;
font-family: 'Gorditas', cursive;
}
ul.menu li{
display:inline-block;margin:0px 15px;
}
ul.menu li a img{display:block;width:11%;height:auto;}
この回答への補足
質問続きで申し訳ありません。
上記CSSの内容ですが、CSSの方もバージョンの宣言等をしないといけないのでしょうか?
今のところHTMLの方でのバージョン宣言しかしていないもので、もし宣言をした場合バージョンに合わせて破棄されたものは使用してはならないのでしょうか?
前回に続き詳しい回答有難う御座います。
なるほど…ポインタを合わせづらくなるのはちょっとですね…。
現状維持にとりあえずすることにします。
positionもまだまだ勉強途中なので色々と教えて頂きありがとうございました!
No.3
- 回答日時:
>上記CSSの内容ですが、CSSの方もバージョンの宣言等をしないといけないのでしょうか?
必要ありません。スタイルシートはブラウザは可能なものから適時導入して良いことになっています。これは、HTMLとは少し違います。HTML5の文書宣言と同じと考えて良いでしょう。
No.1
- 回答日時:
つまり、ウィンドウサイズを小さくしても途中で改行されないようにすれば良いのですね。
ページ全体の横幅を決めてあげれば解決するとおもいます。
幅が可変になるレイアウトをされているのでしたら、min-widthで最小値を指定すると良いです。
<style>
body{ text-align: center; }
div{ text-align: left; }
#main{
width: 1000px;
margin: auto;
}
</style>
<div id="main">
サイト内容
</div>
回答有難う御座います。
ページ全体の幅を決める宣言があるのですね!勉強になります。
min-widthは知らなかったので、これら調べてみることにします。
有難う御座いました!
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
関連するカテゴリからQ&Aを探す
おすすめ情報
- ・漫画をレンタルでお得に読める!
- ・街中で見かけて「グッときた人」の思い出
- ・「一気に最後まで読んだ」本、教えて下さい!
- ・幼稚園時代「何組」でしたか?
- ・激凹みから立ち直る方法
- ・1つだけ過去を変えられるとしたら?
- ・【あるあるbot連動企画】あるあるbotに投稿したけど採用されなかったあるある募集
- ・【あるあるbot連動企画】フォロワー20万人のアカウントであなたのあるあるを披露してみませんか?
- ・映画のエンドロール観る派?観ない派?
- ・海外旅行から帰ってきたら、まず何を食べる?
- ・誕生日にもらった意外なもの
- ・天使と悪魔選手権
- ・ちょっと先の未来クイズ第2問
- ・【大喜利】【投稿~9/7】 ロボットの住む世界で流行ってる罰ゲームとは?
- ・推しミネラルウォーターはありますか?
- ・都道府県穴埋めゲーム
- ・この人頭いいなと思ったエピソード
- ・準・究極の選択
- ・ゆるやかでぃべーと タイムマシンを破壊すべきか。
- ・歩いた自慢大会
- ・許せない心理テスト
- ・字面がカッコいい英単語
- ・これ何て呼びますか Part2
- ・人生で一番思い出に残ってる靴
- ・ゆるやかでぃべーと すべての高校生はアルバイトをするべきだ。
- ・初めて自分の家と他人の家が違う、と意識した時
- ・単二電池
- ・チョコミントアイス
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
HTML5で、テーブル内tdタグの高...
-
フレームの上下でテーブルの横...
-
HTMLの記号を教えてください。...
-
ブログのカスタマイズで、テー...
-
テーブルからはみ出します
-
cssでテーブルで細い線
-
VBAで作れるかな?
-
【CSS】表に線を入れる
-
画像をかさねて表示させるには?
-
tableタグの枠線について
-
<th>タグを使っても太字にしな...
-
table要素のtrやtdって・・・
-
ホームページを中央に表示する...
-
tableを縦に続けるとtable間の...
-
テーブルの線の幅を一重の線に...
-
画面が縮小しないように表示したい
-
【CSS】縦横スクロールテーブル...
-
html でのテキスト結合について
-
テーブルのスクロール(HTML)
-
tableタグとformタグの組み合わせ
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
テーブルとテーブルの間隔について
-
TABLEのセルの中の文字を行単位...
-
<th>タグを使っても太字にしな...
-
CSSで特定のテーブルだけに...
-
HTML5で、テーブル内tdタグの高...
-
table表を横に並べる際の間隔指定
-
同じ幅指定のつもりなのに、ブ...
-
tableのcellpadding="0" cellsp...
-
html5のテーブル内でdivのタブ...
-
<fieldset>タグについて
-
textareaの外側の文字が下付き...
-
テーブル内のセル間にスペース...
-
画面幅に合わせてテーブルのカ...
-
HTMLのテーブルをExcelにCopy&P...
-
テーブルデータを折り返して表...
-
ホームページのテキストを折り...
-
フォームタグのプルタウンの隙...
-
HTML tableのセルにtextareaを...
-
table 幅固定で、端までいった...
-
(HTML)Tableを任意の位置に置...
おすすめ情報