レスポンシブなサイトがうまくいかない

2023/09/05 23:19

このQ&Aのポイント

レスポンシブなサイトを作っている際に、navを小さくした際に二行になるようにしたいが、スペースを入れる方法がわからない。
質問者はレスポンシブなサイトを作成中で、navを小さくした場合に二行にしたいが、スペースを入れる方法がうまくいかない。
レスポンシブなサイトを作っているが、navの二行目にスペースを入れる方法がわからず、うまくいかない。

ベストアンサー

レスポンシブなサイトがうまくいかない

2014/09/07 23:15

レスポンシブなサイトを作っているのですが、 navを小さくした時のみ二行にして、押しやすくする為に二行の間にスペースを入れたいのですがうまくいきません。 <ul class="futtnavi"> <li><img src="img/base/sitemap.png" alt="サイトマップ" width="101" height="18" /></li> <li><img src="img/base/fuitshine.png" alt="敷居の画像" width="16" height="20" /></li> <li><img src="img/base/yourinfo.png" alt="個人情報の取り扱い" width="146" height="17" /></li> <li><img src="img/base/fuitshine.png" alt="敷居の画像" width="16" height="20" /></li> <span> <li><img src="img/base/aboutus.png" alt="観光協会について" width="129" height="19" /></li> </span> <li><img src="img/base/fuitshine.png" alt="敷居の画像" width="16" height="20" /></li> <li><img src="img/base/faq.png" alt="FAQ" width="40" height="17" /></li> </ul> CSS /*Responsive /br*/ td.copyright span:before { content: "\A"; white-space: pre; } ul.futtnavi+li+li+li+li+span li,ul.futtnavi+li+li+li+li+span+li,ul.futtnavi+li+li+li+li+span+li+li { display: inline-block; margin-top: 1em; } どのようにしたら出来るでしょうか？もちろん@media screen and (max-width: 320px)などは入れています。そちらの問題では有りません。

noname#226032

CSS
回答数2
ありがとう数11

みんなの回答 （2）
専門家の回答

質問者が選んだベストアンサー

ベストアンサー

ORUKA1951
ベストアンサー率45% (5062/11036)

2014/09/08 20:05 回答No.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> でしたね。

質問者

お礼 2014/09/11 13:16

ulを二つにしないと実現できないのですね。

その他の回答 (1)

ORUKA1951
ベストアンサー率45% (5062/11036)

2014/09/08 19:47 回答No.1

メモ: 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>

質問者

お礼 2014/09/08 19:56

<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の指定方法もあったのですか？開始と終了のタグは絶対に同一で無いといけないと思っていました。

関連するQ&A

imgタグとレスポンシブについて
imgタグとレスポンシブについて imgタグなどのようなインライン要素は、ブロック要素で囲まないといけないと聞いたのですが、下記のような形でナイトいけないのですよね下記のように直前にブロック要素で囲まれていないといけないのでしょうか？ <div class="copyright"> <img src="img/base/copyright.png" alt="のコピーライト" width="382" height="24" /> </div> 下記のように直前にブロック要素で囲まれていないといけないのでしょうか？それとも直接ブロック要素で囲まれていなくてもずっと先にブロック要素があってそこから入れ子になっていればいいのでしょうか？～ <td class="copyright"> <address> 〒***-***　**県**市**町 1-5-10　<span>TEL.0977-84-****</span> </address> <ul class="futtnavi"> <li><a href="http://index.html"><img src="img/base/sitemap.png" alt="サイトマップ" width="101" height="18" /></a></li> <li><a href="http://index.html"><img src="img/base/sitemap.png" alt="サイトマップ" width="101" height="18" /></a></li> </ul> <img src="img/base/copyright.png" alt="会のコピーライト" width="382" height="24" /> </td> ～下記はだめですよね。 <H2>画像</H2> <IMG src="img/img0.jpg" width="120" height="90" alt="写真" border="0" align="top"> 文字が上揃えになります<BR> <BR> <IMG src="img/img1.jpg" width="120" height="90" alt="写真" border="2"> 枠の太さを２にしています<BR> <BR> <IMG src="img/img2.jpg" w また、もうひとつになってしまうのですが、下記のimg をフルイドイメージにしたい場合は画像のたて、横はば割る直前のブロック要素のtdのwidthと縦幅（クロームのf12で出てくるpx）で出した％を ul.futtnavi+img { width: 67.3%; height: 18%; } のように入れれば良いのですよね。 tdのサイズは567px,133px imgは382、24です。うまくぴったりのサイズになりません。スマホでは消えます。またtdの中の内容が増えた場合毎回計算しなおさないといけないのでしょうか？～ <td class="copyright"> <address> 〒***-***　**県**市**町 1-5-10　<span>TEL.0977-84-****</span> </address> <ul class="futtnavi"> <ul class="futtnavi"> <li><a href="http://index.html"><img src="img/base/sitemap.png" alt="サイトマップ" width="101" height="18" /></a></li> <li><a href="http://index.html"><img src="img/base/sitemap.png" alt="サイトマップ" width="101" height="18" /></a></li> </ul> <img src="img/base/copyright.png" alt="会のコピーライト" width="382" height="24" /> </td>
- ベストアンサー
- CSS
画像を右下から詰めて表示したい
画像を、テーブルを使わずに右下から詰めて表示したいのですが方法がわかりません。少し歪ですが、下のようにしたいのです。中抜きの四角（□）の方向に随時増えていく予定です。　　　　　　←□■■ ■■■■■■■■ ■■■■■■■■ ■■■■■■■■　←ここからスタート htmlとcssは次のように書いてみたのですが、そうすると上から詰めているようなかんじになってしまいました。あまり詳しくないのですが、そもそもリストで表示しようとするのがいけないのでしょうか…？どなたかよろしくお願いいたします。 <ul> <li><img src="icon.png" width="15px" height="13px" alt=""></li> <li><img src="icon.png" width="15px" height="13px" alt=""></li> <li><img src="icon.png" width="15px" height="13px" alt=""></li> <li><img src="icon.png" width="15px" height="13px" alt=""></li> <li><img src="icon.png" width="15px" height="13px" alt=""></li> </ul> ul{ list-style:none; text-align:center; } li{ width:21px; height:17px; float:right; }
- ベストアンサー
- HTML
IE7で表示すると画像に隙間があきます。
WEBサイトを作っているのですがIE７で表示すると画像と画像の間にスペースが出来てしまいます。他のブラウザだとスペースが出来ないのですが原因は何なんでしょうか？ HTML <div id="sidebar"> <div id="sidebar-bg"> </div> <div id="image-navigation"> <div class="navi"> <ul> <li><a href="#.html" title="○○"><img src="images/○○.png" width="200" height="39" alt="○○" /></a></li> <li><a href="#.html" title="○○"><img src="images/○○.png" width="200" height="35" alt="○○" /></a></li> <li><a href="#.html" title="○○"><img src="images/○○.png" width="200" height="35" alt="○○" /></a></li> <li><a href="#.html" title="○○"><img src="images/○○.png" width="200" height="35" alt="○○" /></a></li> <li><a href="#.html" title="○○"><img src="images/○○.png" width="200" height="35" alt="○○" /></a></li> <li><a href="#.html" title="○○"><img src="images/○○.png" width="200" height="35" alt="○○" /></a></li> </ul> </div> </div> </div> CSS #sidebar{ width: 200px; float: left; } #sidebar-bg{ background-color: #FFF; filter:alpha(opacity=50); -moz-opacity: 0.5; opacity:0.5; position:absolute; left:0; top:42px; z-index:-1; width: 200px; height:100%; } ul, li { margin:0; padding:0; list-style:none; } #image-navigation ul li a { display:block; width:200px; }
- ベストアンサー
- HTML
IE６だと動かない　マウスオーバーで画像の入れ替え
以下のように書いてみました。 IE6以外では期待した動作が得られます。 ※imgファイルは適当です。実際に動かす場合は、適当に直して下さい。 <html> <head> <meta http-equiv='Content-Type' content='text/html; charset=utf-8'/> <meta http-equiv='Content-Style-Type' content='text/css'> <style> img{ border: 0px; } #itmImg{ width: 240px; float: left; position: relative; } #itmImg img{ display:block; } #itmImg a span{ display: none; } #itmImg a:hover span{ display:block; position:absolute; top:0; left:0; } #itmImg ul { margin: 0; padding: 0; } #itmImg li{ float:left; list-style:none; } </style> </head> <body> <div id="itmImg"> <img src="hoge1.jpg" width="240" height="240" alt=""> <ul> <li> <a href="javascript:void(0);"> <img src="hoge2.jpg" width="80" height="80" alt=""> <span><img src="hoge2.jpg" width="240" height="240" alt=""></span> </a> </li> <li> <a href="javascript:void(0);"> <img src="hoge3.jpg" width="80" height="80" alt=""> <span><img src="hoge3.jpg" width="240" height="240" alt=""></span> </a> </li> <li> <a href="javascript:void(0);"> <img src="hoge4.jpg" width="80" height="80" alt=""> <span><img src="hoge4.jpg" width="240" height="240" alt=""></span> </a> </li> </ul> </div> </body> </html> IE6でも動くようにするにはどうしたら良いでしょうか？ご指導の程、宜しくお願いいたします。
- 締切済み
- CSS
CSSのリストタグについて
下記のソースのようにリストタグに画像を並べます。ここまではいいのですが、firefoxなどブラウ上で文字サイズを大きくすると画像の上下に余白が出来てしまうのは何ででしょうか。。 <ul> <li><a href="/"><img src="/" width="125" height="50" alt="" title="" /></a></li> <li><a href="/"><img src="/" width="125" height="50" alt="" title="" /></a></li> <li><a href="/"><img src="/" width="125" height="50" alt="" title="" /></a></li> <li><a href="/"><img src="/" width="125" height="50" alt="" title="" /></a></li> <li><a href="/"><img src="/" width="125" height="50" alt="" title="" /></a></li> </ul> あるサイトのソースを見るとliタグににfont-size:1px;を指定されていました。コレでも解決するのですがこのやり方は良いのでしょうかね。。質問の内容がわかりにくい時は「わかりにくい！」と言ってください。。
- ベストアンサー
- HTML
<a>の中のimgの一部分だけを見せたい
imgの拡大切り取りを以下の様にしました。 <div style="position: relative; width: 240; height: 240; overflow: hidden;"> <img src="imgA.jpg" style="width: 3600; height: 4800; margin-left: -2936; margin-top: -3272;"> </div> この要領で、<a>の中に入れるjpgを切り取り拡大した物にしたいです。しかし、<a>の中に<div>を入れるとIEは動作が変になります。どうしたらよいでしょうか？具体的には以下のようなソースでして、 <html> <head> <meta http-equiv='Content-Type' content='text/html; charset=utf-8'/> <meta http-equiv='Content-Style-Type' content='text/css'> <style> img{ border: 0px; } #itmImg{ width: 240px; float: left; position: relative; } #itmImg img{ display:block; } #itmImg a span{ display: none; } #itmImg ul li a:hover{ position: static; } #itmImg a:hover span{ display:block; position:absolute; top:0; left:0; cursor: default; } #itmImg ul { margin: 0; padding: 0; } #itmImg li{ float:left; list-style:none; } </style> </head> <body> <div id="itmImg"> <div style="position: relative; width: 240; height: 240; overflow: hidden;"><img src="imgA.jpg" style="width: 3600; height: 4800; margin-left: -2936; margin-top: -3272;"></div> <ul> <li><a href="javascript:void(0);"><img src="imgB.jpg" width="80" height="80" alt=""><span><img src="imgB.jpg" width="240" height="240" alt=""></span></a></li> <li><a href="javascript:void(0);"><img src="imgC.jpg" width="80" height="80" alt=""><span><img src="imgC.jpg" width="240" height="240" alt=""></span></a></li> <li><a href="javascript:void(0);"><img src="imgD.jpg" width="80" height="80" alt=""><span><img src="imgD.jpg" width="240" height="240" alt=""></span></a></li> </ul> </div> </body> </html> ３つの<li>の中の<a>の中のimgを拡大縮小したいのです。以上、宜しくお願いいたします。
- ベストアンサー
- CSS
cssスプライト　positionが効かない
現在サイトを制作中で、グローバルナビのcssスプライトでつまずいてしまいました。 background-positionがなぜか効きません、、、、。 htmlとcssのチェックをしていただけないでしょうか？？どなたか親切なかた宜しくお願い致します！！ <div id="gnav"> <ul> <li class="gnav_1"><a href="#"><img src="images/gnav_home.png" width="164" height="60" alt="ホーム" /></a></li> <li class="gnav_2"><a href="#"><img src="images/gnav_intro.png" width="164" height="60" alt="初めての方へ" /></a></li> <li class="gnav_3"><a href="#"><img src="images/gnav_staff.png" width="164" height="60" alt="スタッフ紹介" /></a></li> <li class="gnav_4"><a href="#"><img src="images/gnav_price.png" width="164" height="60" alt="料金" /></a></li> <li class="gnav_5"><a href="#"><img src="images/gnav_access.png" width="164" height="60" alt="アクセス" /></a></li> <li class="gnav_6"><a href="#"><img src="images/gnav_q&a.png" width="164" height="60" alt="よくあるご質問" /></a></li> </ul> </div> --------------------------------css------------------------------ #gnav { overflow: hidden; } #gnav ul { margin: 24px 0 0 7px ; } #gnav ul li { float: left; width: 164px; height:60px; background: url(images/gnav_on.png) 0 0 no-repeat; } #gnav ul li a { display:block; } .gnav_2 { background-position: -164px 0; } .gnav_3 { background-position: -328px 0; } .gnav_4 { background-position: -492px 0; } .gnav_5 { background-position: -656px 0; } .gnav_6 { background-position: -820px 0 ; } #gnav ul li a:hover img{ visibility:hidden; }
- ベストアンサー
- CSS
同じjqueryを２つ並べて動かしたいけど動かない
いつもお世話になっています。 http://39kn.com/2011/06/05/5528/ のものを横に並べて動かしたいのですが下のソースの書き方をすると手前だけ動いて、２つめは動きません。どうすれば動きますか？？理想は■が１つのスライダーデモの部分だとすると、■■と横に並ぶ形で使いたいです。 <body> <div class="1"> <div id="scroller"> <div class="scroller-title"> <span class="left">ドメイン＆レンタルサーバー</span> <span class="right"> <div id="controller"> <div id="stop_scroll_cont"><a id="stop_scroll"><img src="images/stop.png" align="absmiddle" /></a> Stop Scroll</div> <div id="play_scroll_cont"><a id="play_scroll"><img src="images/play.png" align="absmiddle"/></a> Play Scroll</div> </span> </div> </div> <div id="Vertical"> <ul id="TickerVertical"> <li><img src="photo" width="450" height="150" /></li> <li><img src="photo" width="450" height="150" /></li> <li><img src="photo" width="450" height="150" /></li> <li><img src="photo" width="450" height="150" /></li> </ul> </div> </div> <div class="2"> <div id="scroller"> <div class="scroller-title"> <span class="left">ドメイン＆レンタルサーバー</span> <span class="right"> <div id="controller"> <div id="stop_scroll_cont"><a id="stop_scroll"><img src="images/stop.png" align="absmiddle" /></a> Stop Scroll</div> <div id="play_scroll_cont"><a id="play_scroll"><img src="images/play.png" align="absmiddle"/></a> Play Scroll</div> </span> </div> </div> <div id="Vertical"> <ul id="TickerVertical"> <li><img src="photo" width="450" height="150" /></li> <li><img src="photo" width="450" height="150" /></li> <li><img src="photo" width="450" height="150" /></li> <li><img src="photo" width="450" height="150" /></li> </ul> </div> </div> </body> </html>
- ベストアンサー
- JavaScript
リストを一行にせずに横並びにする方法
リストタグを一行にすると横並びにはなりますが、ソースが見ずらいです…。コメントを使わないで横並びにする方法はありますか？ ■html <ul><li><a href="#"><img src="images01.gif" alt="" width="130" height="47" /></a></li><li><a href="#"><img src="images02.gif" alt="" width="130" height="47" /></a></li></ul> ■css li { display: inline; } ↓のようにをとっても表示を一行にする方法があれば教えてください。 <li><a href="#"><img src="images01.gif" alt="" width="130" height="47" /></a></li> <li><a href="#"><img src="images02.gif" alt="" width="130" height="47" /></a></li>
- 締切済み
- HTML
画像横のテキストをセンターに配置したい
HTML5, CSS3をベースに、添付画像(2)のような状態で作成したいなと思っております。 <ul> <li><a href="#"><img src="XXX.gif" alt="#" width="60" height="60">○○○○○</a></li> <li><a href="#"><img src="XXX.gif" alt="#" width="60" height="60">○○○○○○○○○○</a></li> <li><a href="#"><img src="XXX.gif" alt="#" width="60" height="60">○○○○○</a></li> </ul> HTMLはこんな感じでシンプルに。特に何もしなければ、 (1)のように画像のベースラインとテキストのベースラインが同じ位置に配置されます。テキストが2行になると画像の下にずれ込みます。しかし(2)のようにテキストをセンターに配置したいなと。テキストは多くても2行でとどめるつもりなので、 1行でも2行でもセンターになるようにしたい。ではと思ってまず思い浮かんだのが画像を「float: left」すること。でもそうするとテキストがベースラインから回避できますが、センターにはいかず、画像のトップと同じ位置に配置されます。テキストが1行なら、反強制でPタグでくくって「margin: top」で調整することもできるかと思いましたが、 2行分は設定したいのです。ちなみに画像のサイズは指定しておりますが、 li自体には横幅の設定はしていますが高さ設定はしていません。実質画像の高さが高さになることになります。簡単にできることかと思っていたのですが、思いのほか苦戦しております。ご存知の方いらっしゃいましたら、ご教授いただければ幸いです。よろしくお願いいたします。
- ベストアンサー
- CSS