ピックアップ記事

はじめてのHTML5 CSS3

はじめてのhtml5 css3

はじめてのhtml5 css3

次は色のことなのでCSS3ですね。

色の指定形式はCSSの例では、black,white,redのような名前で指定していました。

しかし!!!

CSSにはいくつもの指定形式が存在しています!

 

「#ff0000」形式

記号#に続けてRGBの16進数で指定する形式です。

この形はもっとも一般的と言われていますヽ(´▽`)/

 

「#f00」形式

記号に続けてそれぞれの値を一桁ずつの16進数で指定する形式です、

#123と指定されたら、#112233、#f00と指定されたら、#ff0000と指定されているのと同じです。

いわいる、省略に近いのですかね、たぶん細かい指定は上記のほうがいいのでしょうヽ(*´∀`)ノ

 

「rgb(255,0,0)」形式

RGB値をカンマで区切って順にいれるだけです。

次が、CSS3です。

 

「rgba(255,0,0,0.5)」形式

 

rgb()の形式に透明度を示すalphaの値を追加した形式です。どうですか?

簡単じゃないですか?笑 0~1の実数であわらし、0は完全に透明で、1は完全に不透明です。

なので、半透明の赤ならば、rgba(255,0,0,0.5)となりますね。ちょっとでも作ってみましょうか。

 

 

赤透明

 

 

こんな感じですかね?

CSSでなんでもできますね~文字だけそのままという場合は子要素を作ればいいということですね。

まあけどめんどくさいですね笑

てか、もともとpngデータで半透明にしていたらちょっとしたのもデータで作り直さないとあかんのでだめですねヽ(*´∀`)ノ

そういう意味でいうと細かい場所に手が届くのでいいですね、

 

ここでベンダープレフィックスを紹介していきます

 

ここまではCSS2.1以前の仕様で確定していたものなので、ベンダープレフィックスは必要なかったのですが、

CSS3はなんどか変更されていて、これからも変更されるかも?

という状態なのです、なので、接続詞をつけて実装することになっています。

 

  • GoogleChrome Safari Opera は -webkit-
  • Firefox は  -moz-
  • IE   は   -ms-

という感じになっています。

それでは、この辺で区切りとさせてもらいます。ヽ(*´∀`)ノ

 

次回からは、このベンダープレフィックスを使うCSS3プロパティを書いていきますね~

それではご清聴ありがとうございましたヽ(´▽`)/

 

この記事を書いた人

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

この投稿者の最近の記事

関連記事

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

    交通事故専門士

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

    冷えからくる体の痛み・・・

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

    小顔矯正テスト 受付さん

  4. 盆栽

    はじめてのhtml5 css3 変形とアニメーション

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

    頭痛には、、、鍼!!!!!

  6. 高松市 整骨院

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

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

    皆様、よいお年を!!

  8. jくえり

    WEBデザイナーのための簡単なJQ3

  9. LINEスタンプ ありすちゅあん

    LINEスタンプ作成しました!!ちなみにありすちゃん!(笑)

人気記事

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

PV解析

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