>スマホ用サイト、縦向きと横向きでCSSの指定を切り替える記述方法2014年11月2日スマホ用サイト、縦向きと横向きでCSSの指定を切り替える記述方法FacebookTwitterhatenaLINE2014年現在、あるのが当たり前になりつつあるスマートフォン用サイト。PC用サイトとの大きな違いの一つに「縦向きと横向きで画面サイズが変わる」という点があります。スマホ用サイトを制作する際は、同じ縦向きでも機種ごとに画面サイズが多少異なるため、元々ある程度横幅が変動しても対応できるように組はしますが、「この場所だけは、横向きの場合はwidth:460px、縦向きの場合はwidth:300pxにしたい」という時があります。300px;}}このように記述することで「#main_visual」は、横向きの場合はwidth:460px、縦向きの場合はwidth:300pxになります。portrait』として、{}の中にそれぞれCSSを記述することで縦向きと横向きそれぞれのCSSを適用できます。Queries(メディアクエリ)」についてでした。画像の下に数ピクセルの謎の余白が出来てしまう時に解決できるCSSサイトに画像を表示するならimgタグ、divなどで囲ってレイアウトを調整、よくある日常の作業なのですが、たまに悩まされる時があります。今や当然のように記述するようになったHTML5で追加されたタグ。<header>や<footer>、<nav>など、これまで...便利なcalc()関数でwidthやfont-sizeの値を計算式で指定レイアウトを組む時、特に横幅可変やレスポンシブ対応の際に横幅や余白の計算は不可欠ですね。横幅いっぱいに伸ばしたいけど50pxだけ余白を残したい時。偶数や奇数ごと、3つごとや5つごと、といった指定や、n番目のみ、という指定。CSSを指定した要素にだけ適用したい場面はよくありますが、そんな時に便利な疑似クラス...IE8対応!opacityの書き方についてオンマウス時などに透明度を変更できる「opacity」。便利なのですが、IE8に対応させようとした時にうまくいかない時があったので、その時の対処法を掲載します。コメントをキャンセルメールアドレスが公開されることはありません。