ピックアップ記事

はじめてのhtml5 css3 メディアクエリの書き方

メディア特性について

はじめてのhtml5 css3

Good morning!!

may I have Get up Please!!

今日はメディアクエリについて書いていくよ!!

今日も朝から銀行まわり行く前にアウトプットしていきますね!!

まずはメディアクエリとは?

Link要素やmedia要素にmedia属性が指定できるという説明もしました。

で、今回はCSSに直接書いて拡張することができます。

それでは書いて行きますね、

前回のはコピペさせてもらいます。

参照記事はこちら

<link rel=”stylesheet” herf=”ほにゃらら.css” media=”適応対象”>

というところでしょうか?

mediaの使い方は、

all すべての機器 screen パソコン画面 print プリンタ projection プロジェクタ

tv テレビ handheld 携帯用機器(画面小さいもの)speech 音声読み上げソフト

braille 点字ディスプレイ embossed 点字プリンタ

<link rel=”stylesheet” herf=”.css” media=”all”>

何もかかないと、デフォルトではallになっているとは思います。

という感じで、

CSS3では、

「出力媒体」と「メディア属性:値」の式が成り立ちます。

あとは必要なだけ(およびand(メディア特性:値))を指定していくことができます。

これはデモるのは、ちょっとよいしょいりますので、

値を書いていきますね!!

簡単に式でいうと、

media=”出力媒体”
media=”出力媒体,出力媒体”

でCSS3に則ってできることは、

madia=”出力媒体 and (メディア特性: 値)”
media=”出力媒体 and (メディア特性: 値) and (メディア特性: 値), 出力媒体”

CSS3で書けるようになった?メディア特性じゃあがさっと書いていきますね!!

  • width 表示領域の幅
  • min-width これ以上で適応
  • max-width これ以下で適応
  • height 表示領域の高さ
  • min-height これ以上で適応
  • max-height これ以下で適応
  • device-width 出力領域の画面全体の幅
  • これも同じく min max があります。
  • device-height 出力領域の画面全体の高さ

次はちょっと珍しいのいきます。

  • aspect-ratio WとHの比率 これは整数で表します 整数/整数 例 4/3

これもminとmaxでの表記があります。

その頭に「device」をつけて device-aspect-ratio

このあたりは深く掘り下げないと難しいかもですね、、

あとはカラーでのメディア特性があります。

使い勝手としては個人的に、たぶんですが、サーバー側の意図した表現の色の出力ができないときはコレ、

できるときはコレみたいな細かい親切なデザインができるということになりますね。

簡単にデモというか例を載せておきます!!

@media screen and (min-width: 640px;) and (max-width: 800px) {

p{font-size: 12px;}

#sideber{width:80%; height: 300px;}

}

ざっとこんな感じでしょうか?

そしたら画像載せておきます!!

メディア特性について

で、!!

今から銀行行ってきます!!

ちなみに次回はCSS3の醍醐味のアニメーションをこだわってやりたいと思います!!

サランヘヨ!!

 

 

この記事を書いた人

中村 真徳
中村 真徳
(株)アリスプラン 代表取締社長
サービスITソリューションで関わる人を幸せに
平成5年4月1日 髙松市より香川町剛柔流空手道スポーツ少年団 発足
平成22年11月 個人事業主開業
平成24年8月  株式会社アリスプラン 代表取締役
会社理念「サービスITソリューションで関わる人を幸せに」
道徳と利潤の調和を目指し日々奮闘中
趣味…自分がしたいことをするのが趣味です

この投稿者の最近の記事

関連記事

  1. セミナー

    ウェブリッジ香川の勉強会行ってきました!!

  2. 高松市 整骨院

    利用者様といいね!!その⑧

  3. 整骨院, 求人, 治療, 高松 事故通院, 高松 整骨院, 高松市 ムチウチ, 高松市 整骨院

    『Komachi』に掲載されました!!

  4. 整骨院, 求人, 治療, 高松 事故通院, 高松 整骨院, 高松市 ムチウチ, 高松市 整骨院

    低体温に効果的なツボ

  5. ありす, 整骨院, 求人, 高松 事故通院, 高松 整骨院, 高松市 ムチウチ, 高松市 整骨院

    利用者様といいね!!その⑳

  6. 整骨院, 求人, 治療, 高松 事故通院, 高松 整骨院, 高松市 ムチウチ, 高松市 整骨院

    急な手首の痛み

  7. ありす, 整骨院, 求人, 高松 事故通院, 高松 整骨院, 高松市 ムチウチ, 高松市 整骨院

    寝るときの姿勢

  8. さぬきうどん 溜 さんのサイト制作致しましたヽ(´▽`)/

  9. 整骨院, 求人, 治療, 高松 事故通院, 高松 整骨院, 高松市 ムチウチ, 高松市 整骨院

    influenza

人気記事

  1. 整骨院, 求人, 治療, 高松 事故通院, 高松 整骨院, 高松市 ムチウチ, 高松市 整骨院
  2. 予防体操 チラシ
  3. 高松市 猫背
  4. 整骨院, 求人, 治療, 高松 事故通院, 高松 整骨院, 高松市 ムチウチ, 高松市 整骨院

PV解析

  • 140現在の記事:
  • 92693総閲覧数:
  • 45今日の閲覧数:
  • 70昨日の閲覧数:
  • 498先週の閲覧数:
  • 2450月別閲覧数:
  • 62583総訪問者数:
  • 44今日の訪問者数:
  • 65昨日の訪問者数:
  • 448先週の訪問者数:
  • 1342月別訪問者数:
  • 58一日あたりの訪問者数:
  • 0現在オンライン中の人数:
  • 2013年9月21日カウント開始日:
PAGE TOP