menu
閉じる
  1. IF文マスター!各プログラミング言語での、IF文の書き方。
  2. Photoshopで文字と文字の行間を変える方法
  3. スタートアップに使える!HTML5とCSSのテンプレート
  4. 画面サイズごとにCSSを切り替える!メディアクエリとは?
閉じる
閉じる
  1. PHPで三項演算子「?:」を使うとき
  2. jQueryで、検索する前のオブジェクトに戻る方法
  3. FireFoxでリンクをクリックすると表示される謎の線
  4. IF文マスター!各プログラミング言語での、IF文の書き方。
  5. jQueryで特定のリンクにTargetBlankを付与する方法
  6. ウィンドウサイズによって画像のサイズを変えたい!
  7. スタートアップに使える!HTML5とCSSのテンプレート
  8. jQueryでradio / checkbox / select / …
  9. 「Google Fonts + 日本語 早期アクセス」を使ってみた
  10. 【Access】SQLで値がNULLの時、別の値に置換えるNZ関数
閉じる

なるほど!ちきんぷろぐらまーず

画面サイズごとにCSSを切り替える!メディアクエリとは?

こんにちは、ぴよきちです。

今日は、Media Queriesを使う機会があったので、メモとして残しておきます。

Media Queries(メディアクエリ)とは?


Media Queries(メディアクエリ)とは、スクリーンサイズやデバイスの解像度に応じて、CSSを使い分ける事ができるCSS3の機能です。

スクリプトで対応しなくてもサイトをパソコンやスマホで見るとき、簡単にデザインを切り替える事ができます。

ちょっと小細工したいときや、レスポンシブデザインなんかのサイトを作るときに重宝すると思います。

Link要素で切り替える方法と、CSS内に直接記述する方法がありますので、メモっておきます! 😀 

 

Link要素に記述する例

 

CSS内に直接記述する例

関連記事

  1. スタートアップに使える!HTML5とCSSのテンプレート

  2. IF文マスター!各プログラミング言語での、IF文の書き方。

  3. ウィンドウサイズによって画像のサイズを変えたい!

  4. Windowsフォトビューアーの色がおかしい?

  5. PHPでエラー『unexpected …』が出たとき…

  6. FireFoxでリンクをクリックすると表示される謎の線

おすすめ記事

  1. IF文マスター!各プログラミング言語での、IF文の書き方。
  2. スタートアップに使える!HTML5とCSSのテンプレート
  3. Photoshopで文字と文字の行間を変える方法
  4. 画面サイズごとにCSSを切り替える!メディアクエリとは?

コメント

  1. この記事へのコメントはありません。

  1. この記事へのトラックバックはありません。

ページ上部へ戻る