私は、携帯とパソコンで表示される部分を変えたいと考えています。特に携帯用でhappyとunhappyという部分を下の矢印のマークに変えて、クリックしたら、この2つが出てくるようにしたいと考えています。そのため、携帯画面の時だけこのようにしたい場合は、どのようにすることができるでしょうか?
気になる質問をクリップする
クリップした質問は、後からいつでもMYページで確認できます。
またクリップした質問に回答があった際、通知やメールを受け取ることができます。
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
回答3件
0
mts10806さんのようにレスポンシブデザインというものの方が良いかと
私からはスマホとパソコンで表示を変えるには実際どうすれば良いのかというお話をHTMLを基軸に一般論でします。
現在一般的に利用されている方法(自分も利用している方法)だとHTMLにviewportを埋め込みCSSで表示非表示を分岐する方法があります。
一応一例を挙げておきます。
HTML
1〜省略〜 2<meta name="viewport" 3content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no"> 4〜省略〜 5<div class="sp"> 6スマホだけ表示 7</div> 8<div class="pc"> 9パソコンだけ表示 10</div> 11〜省略〜
CSS
1.pc { display: block; } 2.sp { display: none; } 3@media only screen and (max-width: 750px) { 4.pc { display: none; } 5.sp { display: block; } 6}
繰り返しますがあくまでも一般論なので質問者さんの環境に合わない場合も十分考えられます。
以上長々と失礼しました。
投稿2019/02/01 00:51
編集2019/02/01 00:53退会済みユーザー
総合スコア0
0
yoshi0819さんの書かれたことを実装したら、できるようになりました。
view
1<div class="pc"> 2 <% if ! (guider_signed_in? or tourist_signed_in?) %> 3 4 <div class="grid-6"> 5 <div class="user_nav grid-6"> 6 <%= link_to "traveller", new_tourist_session_path, class: 'post' %> 7 <%= link_to "guider", new_guider_session_path, class: 'post' %> 8 </div> 9 </div> 10 <% end %> 11 </div> 12 13 <div class="sp"> 14 <% if ! (guider_signed_in? or tourist_signed_in?) %> 15 <div class="grid-6"> 16 <div class="user_nav grid-6"> 17 <span class="samurai" style=" 18 height: 20px; 19 bottom: 5px; 20 margin-bottom: 0px; 21 padding-bottom: 0px; 22 padding-top: 0px; 23 margin-left: 0px; 24 padding-right: 10px;"> 25 <ul class="user__info"> 26 <li> 27 <%= link_to "traveller", new_tourist_session_path, class: 'post' %> 28 <%= link_to "guider", new_guider_session_path, class: 'post' %> 29 </li> 30 </ul> 31 </span> 32 </div> 33 </div> 34 <% end %> 35 </div> 36``` 37 38```css 39@media screen and (max-width: 415px) { 40 .pc { display: none; } 41 .sp { display: block; }
投稿2019/02/07 08:28
編集2019/02/07 16:23総合スコア49
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
あなたの回答
tips
太字
斜体
打ち消し線
見出し
引用テキストの挿入
コードの挿入
リンクの挿入
リストの挿入
番号リストの挿入
表の挿入
水平線の挿入
プレビュー
質問の解決につながる回答をしましょう。 サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。 また、読む側のことを考えた、分かりやすい文章を心がけましょう。