iPhoneやAndroidのスマートフォン端末やiPadのタブレット端末の特長を活かしてWebサイトを縦・横でデザイン・レイアウトを切り替えたいときに簡単に実現できる方法を紹介。 javascriptを使わずに縦長なのか横長なのかを判別してスタイルシートで切り替えることができます。 縦で持っている外部スタイルシートの場合 <link rel="stylesheet" media="all and (orientation:portrait)" href="tate.css"> スタイルシート内に記述する場合 @media screen and (orientation:portrait) { body { color: #000; } } 横で持っている外部スタイルシートの場合 <link rel="stylesheet" media="all and (orientation:land
![『CSSのみでスマフォ、タブレットの縦横を判別してデザインを切り替える』](https://cdn-ak-scissors.b.st-hatena.com/image/square/859759dc0696c3cfbce6a692c84e5553dd122d20/height=288;version=1;width=512/https%3A%2F%2Fstat.ameba.jp%2Fuser_images%2F20121011%2F10%2Flinking%2Fec%2F79%2Fj%2Fo0481031912231390606.jpg)