ピックアップ記事

はじめての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. 整骨院, 求人, 治療, 高松 事故通院, 高松 整骨院, 高松市 ムチウチ, 高松市 整骨院

    あったかいスープの適温

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

    骨盤矯正勉強会

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

    寒い日はシバリング

  6. 小顔 顔 小顔 小顔サロン 小顔 トレーニング 小顔 美容 顔 小さく 小顔カイロ 小顔 鍼 鍼 小顔 美容鍼 小顔 顔 鍼 小顔 小顔矯正 鍼 小顔美容鍼 マッサージ 小顔 小顔マッサージ 効果 小顔マッサージ方法 小顔マッサージ 東京 顔 マッサージ 小顔 小顔マッサージ 動画 小顔ダイエット マッサージ 小顔矯正 マッサージ 小顔にするマッサージ 小顔美人マッサージ 小顔のマッサージ 顔筋小顔マッサージ 小顔効果 マッサージ 小顔 エステ 名古屋 小顔 エステ 東京 小顔エステ 効果 小顔 エステ 大阪 小顔エステランキング 顔 ゆがみ 顔のゆがみ 顔 ゆがみ 矯正 顔 ゆがみ 治す 顔のゆがみ 矯正 顔 ゆがみ 整体 顔 ゆがみ 割り箸 顔 骨格 ゆがみ 顔ゆがみ 治療 顔 ゆがみ 体操 顔 矯正 ゆがみ 顔 ゆがみ 解消 顔 ゆがみ マッサージ 顔 ゆがみ 矯正 エクササイズ 顔 ゆがみ 矯正 大阪 顔のゆがみ 治療

    小顔矯正テスト 受付さん

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

    歪みがでると??

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

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

  9. 鍼灸マッサージ、鍼灸科の学生さん集まれ!!

人気記事

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

PV解析

  • 143現在の記事:
  • 110188総閲覧数:
  • 7今日の閲覧数:
  • 107昨日の閲覧数:
  • 592先週の閲覧数:
  • 1530月別閲覧数:
  • 77134総訪問者数:
  • 7今日の訪問者数:
  • 59昨日の訪問者数:
  • 475先週の訪問者数:
  • 1360月別訪問者数:
  • 67一日あたりの訪問者数:
  • 1現在オンライン中の人数:
  • 2013年9月21日カウント開始日:
PAGE TOP