携帯とパソコンでの表示を一部分だけ変えたい場合はどのようにすればいいでしょうか？

Question

私は、携帯とパソコンで表示される部分を変えたいと考えています。特に携帯用でhappyとunhappyという部分を下の矢印のマークに変えて、クリックしたら、この２つが出てくるようにしたいと考えています。そのため、携帯画面の時だけこのようにしたい場合は、どのようにすることができるでしょうか？

Comments

[m.ts10806]

結局どのように解決されたのでしょうか？
単に解決済みだけではあとから見た人がどのように解決したのかわかりませんので、差し支えなければ解決内容を回答にコメントしてもらえたらと

[avicii]

返事おそくなりました。yoshi0819さんの方法を真似したら、できるようになりました。

[m.ts10806]

解決内容を回答にコメントしてもらえたらと

Answer 1

mts10806さんのようにレスポンシブデザインというものの方が良いかと
私からはスマホとパソコンで表示を変えるには実際どうすれば良いのかというお話をHTMLを基軸に一般論でします。
現在一般的に利用されている方法(自分も利用している方法)だとHTMLにviewportを埋め込みCSSで表示非表示を分岐する方法があります。
一応一例を挙げておきます。

〜省略〜
<meta name="viewport"
content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
〜省略〜
<div class="sp">
スマホだけ表示
</div>
<div class="pc">
パソコンだけ表示
</div>
〜省略〜

.pc { display: block; }
.sp { display: none; }
@media only screen and (max-width: 750px) {
.pc { display: none; }
.sp { display: block; }
}

繰り返しますがあくまでも一般論なので質問者さんの環境に合わない場合も十分考えられます。
以上長々と失礼しました。

Comments

[avicii]

ありがとうございました。

Answer 2

「レスポンシブ」で検索

ユーザーエージェントでわけてもいいですが、今はレスポンシブの方が主流と思います。
あとは調べて考え方を理解して試してください。
(ここの回答欄でおさまる内容ではないですし、掲題のものだけ解決しても意味がないので。というか掲題のものですらこれだけでは)

Answer 3

yoshi0819さんの書かれたことを実装したら、できるようになりました。

<div class="pc">
         <% if ! (guider_signed_in? or tourist_signed_in?) %>

          <div class="grid-6">
           <div class="user_nav grid-6">
            <%= link_to "traveller", new_tourist_session_path, class: 'post' %>
            <%= link_to "guider", new_guider_session_path, class: 'post' %>
           </div>
          </div>
         <% end %>
        </div>

 <div class="sp">
          <% if ! (guider_signed_in? or tourist_signed_in?) %>
           <div class="grid-6">
            <div class="user_nav grid-6">
              <span class="samurai" style=" 
                height: 20px;
                bottom: 5px;
                margin-bottom: 0px;
                padding-bottom: 0px;
                padding-top: 0px;
                margin-left: 0px;
                padding-right: 10px;">
                <ul class="user__info">
                 <li>
                  <%= link_to "traveller", new_tourist_session_path, class: 'post' %>
                  <%= link_to "guider", new_guider_session_path, class: 'post' %>
                 </li>
                </ul>
              </span>
            </div>
           </div>
          <% end %>
 </div>
```　

```css
@media  screen and (max-width: 415px) {
  .pc { display: none; }
  .sp { display: block; }