人力検索はてな
モバイル版を表示しています。PC版はこちら
i-mobile

グローバルメニューを記事幅に合わせるやり方を教えていただきたいです。
現在デザインCSSが
#top-editarea {
width: 980px !important; /**記事とサイドバーの幅**/
margin:0 auto;
}
#global ul{
list-style: none;
width: 980px;
margin: 0 auto;
text-align: center;
font-family: 'Futura', 'Arial Black', sans-serif;
letter-spacing: 0.1em;
background-color: #535353;
}
#global ul li{
display: inline-block;
}
#global ul li a{
display: inline-block;
padding: 0.6em 1.2em;
color: #fff;
text-decoration: none;
transition: color .3s ease-out;
}
#global ul li a:hover{
color: #fc9d9d; /**触れた時の色**/
}

以上を入力しています。
PCから見た時の図もそうなのですがデザインをレスポンシブした際に
大幅にずれているのでその直し方を教えていただきたいです(;_;)
なんとか携帯画面に収めたいのですが可能でしょうか?

よろしくお願いいたします。

http://www.hutaeninaritai.com/

●質問者: 一重人間
●カテゴリ:ウェブ制作
○ 状態 :終了
└ 回答数 : 1/1件

▽最新の回答へ

1 ● のま
●500ポイント ベストアンサー

これでどうでしょうか。
#top-editarea {
max-width: 900px !important; /**記事とサイドバーの幅**/
width:100%;
margin:0 auto;
}
#global ul{
list-style: none;
width:100%;
max-width: 1000px;
padding:0 !important;
margin: 0 auto;
text-align: center;
font-family: 'Futura', 'Arial Black', sans-serif;
letter-spacing: 0.1em;
background-color: #00000000;
}

widthを100%、max-widthで最大幅を追加でレスポンシブになると思います。


一重人間さんのコメント
!!!!!!!!!!すごいです!! 出来ました本当に本当にありがとうございます(;;)! 後もう一点可能なら教えていただきたいのですがこちらで設定しますと 携帯から見るとメニューバーが2段になるのですがそれを1段にすることは どこの部分を修正、または追加したらいいのでしょうか;;

のまさんのコメント
1段の場合は、スマホのみの場合の処理をしたほうがいいかもしれません。 #global ul li{ display: inline-block; } @media screen and (max-width:570px) { /* 画面横幅が570px以下の時の処理 */ #global ul li{ width:23%; /* メニューの個数によって変わる(4個の場合、100÷4-2くらい) */ font-size:0.9em; /* ※文字がはみ出た時はここを変更 */ } } 最良解ではない気もしますが…これだとhtmlを変更しなくていいのでいいかもしれません。

一重人間さんのコメント
ご丁寧にありがとうございます>< 無知で申し訳ないのですが↑で記入していただいたものはどこの間に入力したらいいのでしょうか;;

のまさんのコメント
どこでも大丈夫ですよ(^^) 強いていうなら、わかりやすいように、#global ul{....}の真下に入れるのがいいですね。

一重人間さんのコメント
ありがとうございました(*´▽`*)参考にさせていただきます!
関連質問

●質問をもっと探す●



0.人力検索はてなトップ
8.このページを友達に紹介
9.このページの先頭へ
対応機種一覧
お問い合わせ
ヘルプ/お知らせ
ログイン
無料ユーザー登録
はてなトップ