16.スマホ場合に特定の文字を表示しない様にする。bootstrapのhidden-xsが便利

Tweet

Pocket

「モール別ランキング」アプリのソース解説15回目です。前回は「CSSの内容」ついて解説しました。今回は「bootstrap」の「hidden」クラスについて解説します。

前回の記事

15.モール別ランキングのCSS（base.css）のソース内容

アプリURL
モール別ランキング – 大手通販サイトのランキングを比較

見出しや説明文などを表示する際、PCでの表示は問題ないけど、スマホ表示の場合は文字を省略して表示したいことなどよくありますよね。そんな時便利なのが「bootstrap」の「hidden」クラスです。

hidden-（xs/sm/md/lg)を使用すると特定の画面サイズの場合に要素を非表示にする事が可能になります。

spanタグを使用し、スマホの場合のみ特定の文字列を非表示にする

モールランキングでは各モールの以下のタブの様に使用しています。

PC表示の場合

スマホ表示の場合

ソース内容

<ul class="nav nav-tabs mall-tabs">
    <li class="tab text-center <?= empty($_GET['mall'])?'active':'' ?>">
        <a href="/mall-ranking/ranking?q=<?= $search_word.(empty($_GET['y_id'])?'':'&y_id='.$_GET['y_id']) ?>">
            <img src="http://cdn-ak.favicon.st-hatena.com/?url=<?= urlencode('http://shopping.yahoo.co.jp/')?>" />
            <br>Yahoo <span class="hidden-xs">ショッピング<span>
        </a>
    </li>
    <li class="tab text-center <?= $_GET['mall']=='rakuten'?'active':'' ?>">
        <a href="/mall-ranking/ranking?q=<?= $search_word.(empty($_GET['r_id'])?'':'&r_id='.$_GET['r_id']) ?>&mall=rakuten">
            <img src="http://cdn-ak.favicon.st-hatena.com/?url=<?= urlencode('http://www.rakuten.co.jp/')?>" />
            <br><span>楽天市場</span>
        </a>
    </li>
    <li class="tab text-center <?= $_GET['mall']=='amazon'?'active':'' ?>">
        <a href="/mall-ranking/ranking?q=<?= $search_word.(empty($_GET['r_id'])?'':'&r_id='.$_GET['r_id']) ?>&mall=amazon">
            <img src="http://cdn-ak.favicon.st-hatena.com/?url=<?= urlencode('http://www.amazon.co.jp/')?>" />
            <br><span>Amazon</span>
        </a>
    </li>
</ul>

<br>Yahoo <span class="hidden-xs">ショッピング<span>

上記箇所でスマホ表示の場合は”ショッピング”文字列を非表示にしています。

div要素など全体を非表示にするときにも便利ですが、上記のようにすれば特定の文字列を非表示できて便利です。

デバイスごとの非表示クラス一覧

デバイスごとの表示クラス一覧

Tweet

Pocket