ホームページ制作のガヤワークス

GAYALOG

ガヤログ

アーカイブ

2020/12/05 (Sat)

マークアップ

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タグの画像は
縦のときは横幅いっぱいで表示され横のときは横幅半分で表示されるようになります。

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

アーカイブ

ABOUT

ガヤワークスについて

お客さまの状況に最も適したプランを提案する。
そのために大切にしていること。

ホームページ制作に大切なのは、いかにユーザーにとってわかりやすいサイト構成になっているかどうかだと考えています。
メインメニューの位置はすぐにわかる場所にあるかどうか。文字の大きさは読みやすいかどうか。コンテンツの内容は専門用語を使わずにユーザーにとってすぐに理解できる内容になっているかどうか。
普通にしていると気づかないような、でも手を加えれば格段に使いやすくなるポイントを見つけ出し、地道に改善を重ねていきます。
そうした見えないところでの努力によって本当の意味で反響のある、価値のあるサイトに成長させていくことができるのです。

ミーティング
会社名
ガヤワークス
代表者
小島 令
所在地
長野県上田市中之条384-2 西沢ビル1F
営業時間
平日10時〜19時
電話番号
0268-75-0414
メールアドレス
info@gayas.net
事業内容
ホームページの企画提案・管理・運営・制作
WEBデザイン業務全般
WEB用コンテンツ作成
モバイルサイト制作・スマートフォンサイト制作
SEO対策事業
印刷物作成(ポスター、フライヤー、名刺作成等)
その他楽しいコト全般