- ベストアンサー
レスポンシブなサイトがうまくいかない
- レスポンシブなサイトを作っている際に、navを小さくした際に二行になるようにしたいが、スペースを入れる方法がわからない。
- 質問者はレスポンシブなサイトを作成中で、navを小さくした場合に二行にしたいが、スペースを入れる方法がうまくいかない。
- レスポンシブなサイトを作っているが、navの二行目にスペースを入れる方法がわからず、うまくいかない。
- CSS
- 回答数2
- ありがとう数11
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
はは、いくつかミス ＞<div class="sevtion"> 訂正 →<div class="section"> ＞<sevtion> 訂正→ <section> <body> <div class="header"><!- タブは (全角スペース)に置換してある --> <div class="nav"> <ul> <li><a href="/siteMap.html">サイトマップ</a></li> <li><a href="/privacy/">プライバシーポリシー</a></li> </ul> <ul><!-- 抜けてる。 --> <li><a href="/contactUs/">観光協会について</a></li> <li><a href="/FAQ">FAQ</a></li> </ul> </div> </div> でしたね。
その他の回答 (1)
- ORUKA1951
- ベストアンサー率45% (5062/11036)
メモ: CSSスタイルシートを意図した通りに機能させるには、正しい文書解析木が必要です。つまり、正当なHTMLを用いるべきです。( http://jigsaw.w3.org/css-validator/#validate_by_input ) ol要素に入るのは、 <!ELEMENT OL - - (LI)+ -- ordered list -->( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/struct/lists.html#h-10.2 ) (LI)+ とある様に「LI要素一個以上(+)」だけです。当然SPANはありえません。不正なHTMLですから、意図したとおりに機能しません。 他にも色々あるので、まずその説明を 1) 単なるスペーサー画像の場合alt=""とする。スクリーンリーダーや点字端末、画像を読み込まないシステム（検索エンジンも）ではaltの内容が表示されてしまいます。 2) 画像自体がコンテンツそのものでないときは背景にします。 3) 「navを小さくした時のみ二行にして、押しやすくする為に二行の間にスペースを入れたいのですが」というこでしたら、前後ふたつのリストは、文書構造上は異なるリストになりますから、率直に文書構造に従ってマークアップする。 よって、HTMLは多分こういうことだと思います。これだとどうにでもな。SEO的にも最高!!将来リンクやリンク画像のデザインを変更する時にHTMLは触らなくてすむ。 なお、今時、必要なければXHTMLの必要はないでしょう。(^^) <body> <div class="header"><!- タブは (全角スペース)に置換してある --> <div class="nav"> <ul> <li><a href="/siteMap.html">サイトマップ</a></li> <li><a href="/privacy/">プライバシーポリシー</a></li> </ul> <li><a href="/contactUs/">観光協会について</a></li> <li><a href="/FAQ">FAQ</a></li> </ul> </div> </div> <div class="sevtion"> ・・・以下省略、HTML5の場合は ※文書構造だけしか書いてないので、だれでも書ける、とっても楽だと思います。 いちおう文書のヘッダ内にあるグローバルナビゲーションとして レスポンシブでデザインしますが、そのために、まずリキッドにするのが基本です。 レスポンシブはそれでカバーしきれない時に使用する。 div.header{ width:90%;/* リキッド */ margin:0 auto;position:relative;min-width:330px;padding:5px; } div.header div.nav{ margin:0;width:100%;text-align:center;position:relative; font-size:0;/* 余白をあけないため */ } div.header div.nav ul,div.header div.nav ul li{ line-height:20px;margin:0;padding:0; display:inline-block;/* 横並びさせる */ list-style:none; } div.header div.nav ul li{font-size:16px;}/* 本来の文字サイズに */ div.header div.nav ul li+li:before,div.header div.nav ul+ul:before{ content:url(img/base/fuitshine.png);/* スペーサー画像 */ } div.header div.nav ul li a{ display:inline-block; text-align:left;text-indent:100em;overflow:hidden;/* 背景画像のために文字は隠す */ height:18px;/* 高さは一定に */ } div.header div.nav ul li a[href="/siteMap.html"]{ width:101px;background-image:url(img/base/sitemap.png); } div.header div.nav ul li a[href="/privacy/"]{ width:146px;background-image:url(img/base/yourinfo.png); } div.header div.nav ul li a[href="/contactUs/"]{ width:129px;background-image:url(img/base/aboutus.png); } div.header div.nav ul li a[href="/FAQ/"]{ width:40px;background-image:url(img/base/faq.png); } @media screen and (max-width: 600px){/* ediaquery */ div.header{min-width:0;} div.header div.nav ul+ul{display:block;} div.header div.nav ul+ul:before{content:none;} } ※ ちなみにHTML5の場合は <body> <header> <nav> <ul> <li><a href="/siteMap.html">サイトマップ</a></li> <li><a href="/privacy/">プライバシーポリシー</a></li> </ul> <li><a href="/contactUs/">観光協会について</a></li> <li><a href="/FAQ">FAQ</a></li> </ul> </nav> </header> <sevtion>
お礼
<ul> <li><a href="/siteMap.html">サイトマップ</a></li> <li><a href="/privacy/">プライバシーポリシー</a></li> </ul> <li><a href="/contactUs/">観光協会について</a></li> <li><a href="/FAQ">FAQ</a></li> </ul> 上記のようなulの指定方法もあったのですか？ 開始と終了のタグは絶対に同一で無いといけないと思っていました。
お礼
ulを二つにしないと実現できないのですね。