プロが教えるわが家の防犯対策術！

詳しい人求む！

jQuery-もっと見るボタンをスマホのみで表示したい。

解決済

  • 質問者：relax-2
  • 質問日時：
  • 回答数：5件

レスポンシブデザインサイトを制作中です。
もっと見るボタンを
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;使って非表示、表示を切り替えているのですが、これだと内容を追加し更新するたびに２箇所の変更が必要になってしまいます。
１つのソースで「もっと見る」を利用したり、しなかったりする方法があれば教えていただきたいです。
よろしくお願いします。

質問者からの補足コメント

  • 回答ありがとうございます。
    スマートフォンではできるだけスクロールを少なく見せたいのですが、パソコンで見る時はデザインの都合上全てを表示させたいです。
    window幅で分けたいのですが、cssはどのようにしたらいいのでしょうか？
    現在cssは
    〜480pxまで、481px～768px 、769px～1023px、 1024px～
    の４つに分けて設定しています。
    よろしくお願いします。

    No.1の回答に寄せられた補足コメントです。 補足日時：2016/04/04 18:29
    通報する

  • つらい・・・

    丁寧に教えてくださってありがとうございます。
    私の説明が悪くてすみません。

    スマートフォンからアクセスした時（769px以下）だけjQueryを適用させたいです。
    いろいろ検索し、
    if(!navigator.userAgent.match(/(iPhone|iPad|Android)/)){
    //ここから以下へ実行するJavascriptを記述
    ･････
    //ここまで
    }
    を使って、iPhone/Android/iPadでなければ実効するというのは設定できたのですが‥。
    やりたいのは逆で、iPhone/Android/iPad（769px以下）の時だけ実効する方法をしりたいです。

    これはナビゲーションリストではないのですが、ORUKA1951さんに教えていただいたように、HTMLはもう一度改めようと思います。

    No.2の回答に寄せられた補足コメントです。 補足日時：2016/04/05 11:51
    通報する
通報する

この質問への回答は締め切られました。

質問の本文を隠す

A 回答 (5件)

No.5ベストアンサー

  • 回答者： ORUKA1951
  • 回答日時：

製作中のものから流用・・・間に合わせなので、もっと良い方法があるけど。



本文の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>
    • good
    • 0
    • 件
通報する
この回答へのお礼

ORUKA1951さん、丁寧に回答していただきありがとうございます！
解決できました！！
本当に助かりました。ありがとうございます。
教えていただ例も参考に、もっと勉強します！

通報する
お礼日時：2016/04/06 17:53

No.4

  • 回答者： ORUKA1951
  • 回答日時：

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のない状態でも利用できますからエンジン対策としてもよいです。
    • good
    • 0
    • 件
通報する
この回答へのお礼

jqueryを使わないでできるんですね！
とても勉強になります。
ありがとうございます。

通報する
お礼日時：2016/04/06 17:51

参考程度に

No.3

  • 回答者： fujillin
  • 回答日時：

こんにちは。


いろいろありそうな気はしますが、とりあえず、わからないとおっしゃっている部分だけ。

＞～～を使って、iPhone/Android/iPadでなければ
＞実効するというのは設定できたのですが‥。
ご提示のスクリプトでは
　if(～～)
の部分で条件を判定して、条件に合った時に {　} 内の処理が実行されるという構文になっています。

( )内の意味は理解なさっている通りで、『ユーザーエージェントが(iPhone又はiPad又はAndroid)ではない時』ということになりますが、『ではない』という否定を示しているのが先頭の『!』です。
ですから、否定をやめて、
　if(navigator.userAgent.match(/(iPhone|iPad|Android)/))
とすると、『ユーザーエージェントが(iPhone又はiPad又はAndroid)の時』という意味になります。
    • good
    • 0
    • 件
通報する
この回答へのお礼

とても分かりやすく教えてくださって、ありがとうございます。
解決しました！

通報する
お礼日時：2016/04/06 17:48

No.2

  • 回答者： ORUKA1951
  • 回答日時：

とても簡単です。


★ユーザーエージェントごとに複数のページを提供するのは強く否定されていることですから、その方向でよいです。
[参考]
「文書の構造をプレゼンテーションと切り離すことで広汎なプラットフォームや多様なメディアでの文書提供コストを低下でき、文書の改訂も容易になる( 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 )
も参考になると思います。
この回答への補足あり
    • good
    • 0
    • 件
通報する

No.1

  • 回答者： yambejp
  • 回答日時：

なぜPCとメディアをわける根拠しだいですね


厳密にわけるならユーザーエージェントで切り分けて
出力自体を変えるのが妥当です。

window幅でわけるならCSSでもいけるかも・・・
この回答への補足あり
    • good
    • 0
    • 件
通報する

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう！

Q質問する（無料）

ページトップページトップ

Q質問する（無料）

デイリーランキングこのカテゴリの人気デイリーQ&Aランキング

マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング

おすすめ情報