■スマホでだけ非表示にする■
例えば、デスクトップPCで表示させているコンテンツを、全てスマホで表示させていると、場合によっては、ユーザーに不親切になってしまうかもしれません。スマホで1ページに大量に情報があると鬱陶しいですよね…。そういう時は、display: none ;で非表示にさせることができます。
CSS
/* スマホだけに適用するCSS */
@media screen and ( max-width:479px )
{
.new-post
{ display: none ; /* 非表示にする */ }
}
下記は、スマホ幅(479px以下)の場合にだけ、新着記事一覧のコンテンツを非表示にする例です。工夫して、liタグに適用すれば、デスクトップPC幅では10記事まで、スマホ幅では3記事まで、といった調整も可能ですね。
※この場合は、スマホ幅(479px以下)では表示されません。
■スマホでだけ表示させる■
前項とは逆に、デスクトップPC幅では表示させずに、スマホ幅だけで表示させるには、display: block ;を使いましょう。ちなみに、これはブロック要素の場合です。あまり機会はありませんが、spanタグなどのインライン要素の場合はdisplay: inline ;を指定します。
CSS
.new-post
{ display: none ; /* 非表示にする */
}
/* スマホだけに適用するCSS */
@media screen and ( max-width:479px )
{
.new-post
{ display: block ; /* 表示にする */ }
}
下記は、デスクトップPC幅では非表示、スマホ幅では表示にした例です。※この場合は、デスクトップPC幅(480px以上)では表示されません。