MENU

pagetop

お問い合わせ

新型コロナウイルス感染拡大に伴い、
ビデオ会議や電話打合せにも対応しております。

ガヤログ

なんか色々気になったことを書いてます。
休業予定はBLOGとFacebookにてお知らせしております。

2020.12.05

iPad にて縦横で適用するCSSを切り替える

今回は小ネタ

スマホで見る用のWebページを縦横でレイアウトを変えたいことがありました。
やり方を調べていると、いくつかの方法がヒットしましたが、縦横で適用するCSSを切り替えるという方法がシンプルで良さそうでしたので、それを使うことにしました。

例えば、画像を表示するとして
縦の場合は横幅いっぱい。
横の場合は横幅は半分。
という事をしたいと思います。

まずはHTML

<div align="center">
 <img class="top" src="img/sample.png">
</div>

このように、対象の画像を表示するためのimgタグにはクラスを指定しておきます。
今回は sample というクラスにしました。

この sample クラスに対して、縦と横で異なるスタイルを適用するためのCSSを書きます。
縦のときは横幅いっぱい(100%)
横のときは横幅半分(50%) とします。

media screen and (orientation: portrait) {
   /* 縦向きの場合のスタイル */
   img.sample { width: 100%; height: auto; }
}
@media screen and (orientation: landscape) {
    /* 横向きの場合のスタイル */
    img.sample { width: 50%; height: auto; }
}

このCSSを使うことで、sampleクラスが設定されているimgタグの画像は
縦のときは横幅いっぱいで表示され横のときは横幅半分で表示されるようになります。

てことはこの記述で縦横で表示を変更することもお手のものですね!
ではでは〜

お問い合わせ

WEBからお問い合わせ

お電話でのお問い合わせ

TEL.0268-75-0414

受付時間:9:00〜18:00
(土日祝、年末年始を除く)