
レスポンシブデザインサイトを制作中です。
もっと見るボタンを
http://gimmicklog.main.jp/jquery/67/
↑のサイトを参考にして作りました。
480pxまでのスマートフォン版では「もっと見る」を使って、要素を開閉させたいのですが、
それ以上のサイズ(パソコンなど)では「もっと見る」表示させず、一度に全部の画像をみれるようにしたいのですが、どうすればいいのか分かりません。
現在は
<div class="content">
<p><a href="#"><img src="img/common/bnr-map1.jpg" alt="地域検索map1"/></a></p>
<p><a href="#"><img src="img/common/bnr-map2.jpg" alt="地域検索map2"/></a></p>
</div>
<div class="more">もっと見る<i class="fa fa-angle-down fa-fw"></i></div>
<div class="content">
<p><a href="#"><img src="img/common/bnr-map3.jpg" alt="地域検索map3"/></a></p>
</div>
<div class="content-pc">
<p><a href="#"><img src="img/common/bnr-map1.jpg" alt="地域検索map1"/></a></p>
<p><a href="#"><img src="img/common/bnr-map2.jpg" alt="地域検索map2"/></a></p>
<p><a href="#"><img src="img/common/bnr-map3.jpg" alt="地域検索map3"/></a></p>
</div>
"content"と"content-pc"をdisplay: none;とdisplay: block;使って非表示、表示を切り替えているのですが、これだと内容を追加し更新するたびに2箇所の変更が必要になってしまいます。
1つのソースで「もっと見る」を利用したり、しなかったりする方法があれば教えていただきたいです。
よろしくお願いします。
No.5ベストアンサー
- 回答日時:
製作中のものから流用・・・間に合わせなので、もっと良い方法があるけど。
本文のHTMLは
これだけだけ・・・
★タブは_に置換してあるので戻す。
<!doctype html>
<html>
<head>
_<meta charset="utf-8">
_<title>サンプル</title>
_<meta name="description" content="">
_<meta name="author" content="ORUKA">
<style media="screen">
<!--
section{
_position:relative;
}
section nav ul{
_list-style-type:none;
_margin:0;
_text-align:center;
}
section nav ul li ul{
_padding:0em;
_width:100%;
}
section h2,section p,section nav{
_margin-right:210px;
}
section nav ul li{
_display:inline-block;
_width:230px;
_height:230px;
_margin:5px;
}
section nav ul li a{
_display:block;
_width:100%;
_height:100%;
}
section aside{
_position:absolute;
_right:0;top:0;
_width:200px;height:100%;
_background-color:fuchsia;
}
section nav p[title="すべて見る"]{display:none;}
section nav ul li[title="隠す"]{display:none;}
section nav ul li[title="隠す"] a{background-url:none;backgrund-color: silver;text-indent:0;}
section aside p{margin:0;}
@media (max-width :1023px){
_body{background-color:rgb(255,220,220);}
_section h2,section p,section nav{
__margin-right:0;
_}
section nav ul li{
_width:210px;
_height:210px;
}
_section aside{
__display:none;
_}
}
@media (max-width :800px){
_body{background-color:rgb(255,255,220);}
_section nav ul li{
__width:180px;
__height:180px;
_}
_section nav ul.supplement{
__display:none;
_}
_section nav p[title="すべて見る"]{display:block;}
_section nav ul li[title="隠す"]{display:block;height:1.6em;width:auto;}
_section nav ul:target{
__display:block;
_}
}
@media (max-width :480px){
_body{background-color:rgb(220,255,220);}
_header,section,footer{
_width:auto;
_min-width:200px;
}
}
/* リンク画像の指定 */
_section nav ul li a{backgrond:50% 50%;background-size:cover;text-align:left;text-indent:-40em;overflow:hidden;}
_section nav ul li a[title="地域検索map1へ"]{background-image:url(./images/1.jpg);}
_section nav ul li a[title="地域検索map2へ"]{background-image:url(./images/2.jpg);}
_section nav ul li a[title="地域検索map3へ"]{background-image:url(./images/3.jpg);}
_section nav ul li a[title="地域検索map4へ"]{background-image:url(./images/4.jpg);}
_section nav ul li a[title="地域検索map5へ"]{background-image:url(./images/5.jpg);}
_section nav ul li a[title="地域検索map6へ"]{background-image:url(./images/6.jpg);}
_section nav ul li a[title="地域検索map7へ"]{background-image:url(./images/7.jpg);}
_section nav ul li a[title="地域検索map6へ"]{background-image:url(./images/8.jpg);}
_section nav ul li a[title="地域検索map7へ"]{background-image:url(./images/9.jpg);}
-->
</style>
</head>
<body>
_<header>
__<h1 id="title">Your title</h1>
_</header>
_<section>
__<h2>本文</h2>
__<p>ナビゲーションリストのようですから、navでマークアップしておきます。</p>
__<nav>
___<ul>
____<li><a href="" title="地域検索map1へ">地域検索map1へ</a></li>
____<li><a href="" title="地域検索map2へ">地域検索map2へ</a></li>
____<li><a href="" title="地域検索map3へ">地域検索map3へ</a></li>
___</ul>
___<p title="すべて見る"><a href="#view2">すべて見る</a></p>
___<ul id="view2" class="supplement">
____<li><a href="" title="地域検索map4へ">地域検索map4へ</a></li>
____<li><a href="" title="地域検索map5へ">地域検索map5へ</a></li>
____<li><a href="" title="地域検索map6へ">地域検索map6へ</a></li>
____<li><a href="" title="地域検索map7へ">地域検索map7へ</a></li>
____<li><a href="" title="地域検索map6へ">地域検索map6へ</a></li>
____<li><a href="" title="地域検索map7へ">地域検索map7へ</a></li>
____<li title="隠す"><a href="#">隠す</a></li>
___</ul>
__</nav>
__<aside>
___<h3>Something aside</h3>
___<p>本文と関係ない(asideな)記事</p>
__</aside>
_</section>
_<footer>
__<h3>A nice footer</h3>
_</footer>
</body>
</html>
ORUKA1951さん、丁寧に回答していただきありがとうございます!
解決できました!!
本当に助かりました。ありがとうございます。
教えていただ例も参考に、もっと勉強します!
No.4
- 回答日時:
No.2です。
>私の説明が悪くてすみません。
>スマートフォンからアクセスした時(769px以下)だけjQueryを適用させたいです。
こちらこそ、説明が足りなくて。
jquery---すなわちjavascript---は、CSS3が一般的に使えるようになった今、CSSでできることには使いません。一番の理由はSEOとメンテナンス性です。
例えば
アコーディオンパネルの作り方について - HTML | 教えて!goo( https://oshiete.goo.ne.jp/qa/9231343 )
ですが、jqueryを使わずに伸縮させています。
また
CSSについて - Webデザイン・CSS | 教えて!goo( https://oshiete.goo.ne.jp/qa/9227919.html )
では、クリックして開くことをjqueryを使わずに動作させています。
いずれも、極めてシンプルでわかりやすいと思いますし、javascript/CSSのない状態でも利用できますからエンジン対策としてもよいです。
No.3
- 回答日時:
こんにちは。
いろいろありそうな気はしますが、とりあえず、わからないとおっしゃっている部分だけ。
>~~を使って、iPhone/Android/iPadでなければ
>実効するというのは設定できたのですが‥。
ご提示のスクリプトでは
if(~~)
の部分で条件を判定して、条件に合った時に { } 内の処理が実行されるという構文になっています。
( )内の意味は理解なさっている通りで、『ユーザーエージェントが(iPhone又はiPad又はAndroid)ではない時』ということになりますが、『ではない』という否定を示しているのが先頭の『!』です。
ですから、否定をやめて、
if(navigator.userAgent.match(/(iPhone|iPad|Android)/))
とすると、『ユーザーエージェントが(iPhone又はiPad又はAndroid)の時』という意味になります。
No.2
- 回答日時:
とても簡単です。
★ユーザーエージェントごとに複数のページを提供するのは強く否定されていることですから、その方向でよいです。
[参考]
「文書の構造をプレゼンテーションと切り離すことで広汎なプラットフォームや多様なメディアでの文書提供コストを低下でき、文書の改訂も容易になる( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )」
「もし【相互運用性確保の】努力が成されなければ、Webは互換性のないフォーマット毎に分け隔てられた世界に分割され、すべての関係者にとっての商業的可能性が減少することとなるであろう、大きなリスクを負うこととなる。( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )」
そのまえにHTMLの復習をしておきましょう。とても重要なので・・
言いたかないけど、そんなHTMLの初歩も知らないサイト参考にしない。
1) <div class="content"><div class="more"><div class="content">
としてはなりません。divは1999年勧告のHTML4.01の時代にすでに
「id属性及び class属性と併用することで、文書に構造を付加するため( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )」であって、デザインのためではありませんでした。HTML5では、
NOTE: Authors are strongly encouraged to view the div element as an element of last resort, for when no other element is suitable. Use of more appropriate elements instead of the div element leads to better accessibility for readers and easier maintainability for authors.( https://www.w3.org/TR/2014/REC-html5-20141028/gr … )
注意: 他に適切な要素がない時の最後の最後の手段としてdiv要素を使用することを強く推奨する。div要素の代わりにより適切な要素を使用することは、読者にとってはより良いアクセシビリティ性に、著者にとってはより容易なメンテナンス性につながります。
すなわち、HTMLには率直に文書構造だけを記述します。HTML5で示しますが、HTML4.01でしたら、<header></header>,<section></section>は、<div class="header"></div><div class="section"></div>のようにするとよいでしょう。
それだけでずいぶんとメンテナンス性が良くなる。
<header>
<h1>見出し</h1>
</header>
<section>
<h2>本文</h2>
<p>ナビゲーションリストのようですから、navでマークアップしておきます。</p>
<nav>
<ul id="List1">
<li><a href=""><img src="" width="" height="" alt=""></a></li>
<li><a href=""><img src="" width="" height="" alt=""></a></li>
<li><!-- スマホでは見せない -->
<ul>
<li><a href=""><img src="" width="" height="" alt=""></a></li>
<li><a href=""><img src="" width="" height="" alt=""></a></li>
<li><a href=""><img src="" width="" height="" alt=""></a></li>
<li><a href=""><img src="" width="" height="" alt=""></a></li>
</ul>
</li>
</ul>
</nav>
</section>
<footer>
<h2>文書情報</h2>
</footer>
という文書構造でよいですか???
とにかく、HTMLにはデザインに関することは書かない。ひたすら文書構造だけを正確にマークアップするだけでよい。
なお、XHTMLは古臭いので私は今は使わない。HTNL5か後方互換が必要な時はHTML4.01
なお、先日書いた
CSSについて - Webデザイン・CSS | 教えて!goo( https://oshiete.goo.ne.jp/qa/9227919.html )
も参考になると思います。
No.1
- 回答日時:
なぜPCとメディアをわける根拠しだいですね
厳密にわけるならユーザーエージェントで切り分けて
出力自体を変えるのが妥当です。
window幅でわけるならCSSでもいけるかも・・・
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
liタグの中に<p>タグやら<dl>を...
-
リストマーカーをボックス内に...
-
円形の配置にするコーディング...
-
HTML5のfooterに見出しを付けて...
-
リストの数字のフォントサイズ...
-
画像にリンクを張ると画像がず...
-
複数行にまたがる括弧を表示し...
-
文法チェックの<A>と</A>の間が...
-
ページを開いているときのリン...
-
html/cssの、navを2段にする...
-
ol要素の番号とリスト項目の離...
-
<li>で改行する横並びのメニュー
-
ulとliで囲った文字の一部を変...
-
divタグ内のコンテンツが重なっ...
-
list-style-type部分だけ大きく...
-
リスト(ul / li)タグの左イン...
-
html <li>の中の文字一部に色を...
-
横並びのリストで左端がはみ出る
-
htmlの<ol>タグで、数字などを...
-
Tableの1セル内に画像・テキス...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
リストマーカーをボックス内に...
-
liタグの中に<p>タグやら<dl>を...
-
ulタグやliタグの中でbrタグ...
-
divタグ内のコンテンツが重なっ...
-
html/cssの、navを2段にする...
-
list-style-type部分だけ大きく...
-
複数行にまたがる括弧を表示し...
-
html <li>の中の文字一部に色を...
-
ページを開いているときのリン...
-
番号付きリスト(<Ol><Li>・・...
-
リストを2つに分割して、それぞ...
-
リストの左余白の削除方法
-
html <ul></ul>の並びで一行空...
-
<li>タグの数が増えすぎたので...
-
<ul><li></li></ul>にするメリ...
-
css 横並びのナビゲーションバ...
-
htmlの<ol>タグで、数字などを...
-
<li>で改行する横並びのメニュー
-
ページ内リンク!?のしかた
-
イメージマップと画像のスライ...
おすすめ情報
回答ありがとうございます。
スマートフォンではできるだけスクロールを少なく見せたいのですが、パソコンで見る時はデザインの都合上全てを表示させたいです。
window幅で分けたいのですが、cssはどのようにしたらいいのでしょうか?
現在cssは
〜480pxまで、481px~768px 、769px~1023px、 1024px~
の4つに分けて設定しています。
よろしくお願いします。
丁寧に教えてくださってありがとうございます。
私の説明が悪くてすみません。
スマートフォンからアクセスした時(769px以下)だけjQueryを適用させたいです。
いろいろ検索し、
if(!navigator.userAgent.match(/(iPhone|iPad|Android)/)){
//ここから以下へ実行するJavascriptを記述
・・・・・
//ここまで
}
を使って、iPhone/Android/iPadでなければ実効するというのは設定できたのですが‥。
やりたいのは逆で、iPhone/Android/iPad(769px以下)の時だけ実効する方法をしりたいです。
これはナビゲーションリストではないのですが、ORUKA1951さんに教えていただいたように、HTMLはもう一度改めようと思います。