解像度の高い画面にだけ高解像度の画像を表示する方法Retinaディスプレイなどの高精細な画面で閲覧された場合にだけ高解像度の画像を表示させたり、複数の掲載候補からディスプレイの面積に適したサイズの画像を自動選択して表示させる方法を解説。HTML5で追加されたsrcset属性を使うと、解像度の異なる複数の画像を表示候補として指定でき、表示環境に応じてブラウザ自身が適切な画像を選んで表示に使ってくれます。
![解像度の高い画面にだけ高解像度の画像を表示する方法 [ホームページ作成] All About](https://cdn-ak-scissors.b.st-hatena.com/image/square/46dd70f0557bd44f24c399ab0f9c0675e3ae5dbc/height=288;version=1;width=512/https%3A%2F%2Fimgcp.aacdn.jp%2Fimg-a%2F1200%2F900%2Faa%2Fgm%2Farticle%2F4%2F4%2F8%2F0%2F8%2F3%2Ftopimg_original.jpg)
解像度の高い画面にだけ高解像度の画像を表示する方法 [ホームページ作成] All About
解像度の高い画面にだけ高解像度の画像を表示する方法Retinaディスプレイなどの高精細な画面で閲覧された場合にだけ高解像度の画像を表示させたり、複数の掲載候補からディスプレイの面積に適したサイズの画像を自動選択して表示させる方法を解説。HTML5で追加されたsrcset属性を使うと、解像度の異なる複数の画像を表示候補として指定でき、表示環境に応じてブラウザ自身が適切な画像を選んで表示に使ってくれます。
Media Queriesの@mediaを使ってブラウザ幅やデバイス幅に応じたCSSを記述してみる – bl6.jp
CSS3のMedia Queriesのうちの一つ、@mediaを使ってみたのでメモしておきます。一般的によく使いそうなものを簡単にまとめておこうかと思います。今後、おそらく使っていく予定なので、少しずつでも覚えていきたいですね。レスポンシブWebデザインには欠かせないものだと思うので。 [ads_center] @mediaでCSSファイル内に直接記述していく CSSファイル自体を分けるやり方もありますが、個人的には@mediaを使って1つのCSSファイル内に直接記述していく方が合っているのでこちらを使っていこうかと思っています。 min-width ブラウザの横幅が〇〇以上のものを指定していきます。 /* ブラウザ幅が960px以上 */ @media screen and (min-width: 960px) { .sample { background: red; } } max-w
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
