U-BOX/うさぎの小箱

FC2ブログのテンプレートを配布しています

  1. スポンサー広告
  2. [ edit ]

スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。


  1. css
  2. tb: 0
  3. cm: 0
  4. [ edit ]

css8.permanent_area と not_permanent_area

< !--permanent_area-->と< !--not_permanent_area-->の違い

【fc2-blogカスタマイズ】 h ttp://amg2009.blog10.fc2.com/blog-entry-1775.html


・個別記事で表示させたくないものを囲む
< !--permanent_area--> ~ < !--/permanent_area-->

・個別記事のみで表示させる場合に囲む
< !--not_permanent_area--> ~ < !--/not_permanent_area-->


トップページでは表示させても
個別記事に移動したときに表示させたくないものは
< !--permanent_area-->< !--/permanent_area-->で囲み、
個別記事だけで表示させたいものについては、
< !--not_permanent_area-->< !--/not_permanent_area-->で囲むと
個別記事以外では表示されない。


あるいは、トップページと,個別記事で扱いを変えたい記事などに対応。
>トップページでは記事の上部に表示され、個別記事では記事の下部に表示されるというように。
以下では、トップページではタイトル部に表示されたプラグイン3が、個別記事では一番下で表示される


< div class="entry_header">

< body id="top">
< div id="center-left">
< div id="center">

< !--not_permanent_area-->

< !--plugin-->
< !--plugin_third-->

-----------プラグイン3のタグ--------------

< !--/plugin_third-->
< !--/plugin-->

< !--/not_permanent_area-->< /span>

< /div>

< div class="entry_body">

< %topentry_body>

< !--permanent_area-->

< !--plugin-->
< !--plugin_third-->

-----------プラグイン3のタグ--------------

< !--/plugin_third-->
< !--/plugin-->

< !--/permanent_area-->

< /div>< !--/ entry body -->



スポンサーサイト

  1. css
  2. tb: 0
  3. cm: 0
  4. [ edit ]

css7.valueの文字列を改行する

燈明日記
http://d.hatena.ne.jp/chaichanPaPa/20100117/1263693373 より、

[WEB] ボタンのvalueで改行するには

input要素のtype属性が"submit"や"button"の場合で、value属性の文字列を改行するには、
実体参照で a「&#13;」、b「&#10;」、c「&#13;&#10;」を入れる。

a:<input type="submit" value="aaaaa&#13;aaaaa&#13;aaaaa&#13;aaaaa">


b:<input type="submit" value="aaaaa&#10;aaaaa&#10;aaaaa&#10;aaaaa">


c:<input type="submit" value="aaaaa&#13;&#10;aaaaa&#13;&#10;aaaaa&#13;&#10;aaaaa">


IE7では、a、b、c、どれも改行されるが、最後の行の先頭にスペースが入ってしまう。
Firefox、chromでは、b、c、のみ改行、a、は改行されない。
Operaでは、a、b、c、どれも改行されない。



  1. css
  2. tb: 0
  3. cm: 0
  4. [ edit ]

css6. max-width

表示部分の画像の最大値を指定

.body img {
max-width: 100%;
}



<div class="body">
   ・
   ・(この部分に表示される画像の最大値を100%に指定。自動的に縮小表示される)
   ・
</div><!--body-->


  1. css
  2. tb: 0
  3. cm: 0
  4. [ edit ]

css5.長さの単位


長さの単位/
相対単位
em :1em = 1文字分の高さ
ex :1ex = 「x」文字の高さ
px :1px = 画面上の1ピクセル

絶対単位
pt :72pt = 1in(1インチ:2.54cm)
pc :1pc = 12pt




  1. css
  2. tb: 0
  3. cm: 0
  4. [ edit ]

css4.position


position : ボックスの配置方法を指定するプロパティ

値/
static :通常の位置に配置 (初期値)
   static を指定した場合は、ボックスの配置位置の指定は無効になる。

relative :通常の位置を基準とした相対的な配置

absolute :ウィンドウまたは親ボックスを基準とした絶対的な配置
   祖先要素に位置決めされた要素がある場合は、その要素の位置を基準にする。
   ない場合は、ウィンドウの枠を基準とした配置。
   位置決めされた要素 : positionで static 以外の値が指定された要素.

fixed :ウィンドウを基準とした絶対的な配置 + 位置の固定
   *IE6以下では非対応。IE7では「互換モード」の場合機能しない。


sample code/
div {

width: 200px;
height: 100px;

position: relative;
position: absolute;
position: fixed;

top: 50px;
left: 50px;
right: 10em;
bottom: 10em;
* 指定 :上から、左から、右から、下からの距離+数値単位,%

}




  1. css
  2. tb: 1
  3. cm: 0
  4. [ edit ]

css3.IEには使えない表記_背景色・背景画像

background: #*** url(xx/x.gif) repeat-y right top fixed;


このような一括表記は、IEではスルーされる、らしい。
従って、以下のように個々に指定するのが確実。


background-color: ***; ページの背景色を指定する
background-image: url(***); ページの背景に画像を使う
background-repeat: ***; 背景画像の並び方を指定する
background-position: ***; 背景画像の表示位置を指定する
background-attachment: fixed;




  1. css
  2. tb: 0
  3. cm: 0
  4. [ edit ]

css2.ブラウザによって表記が違う

ブラウザによってプロパティの頭に付ける ベンダープレフィックス(接頭辞) が違う?!、、だけじゃない!
>>>同じ値の複数表記の必要

-moz- >> Firefox
-webkit- >> Safari、Google Chrome
-o- >> Opera
-ms- >> Internet Explorer

例えば、
プロパティ border-image (画像ボーダーを指定する)では、

border-image: url("img/a.png") 15 round;
-moz-border-image: url("img/a.png") 15 round;
-webkit-border-image: url("img/a.png") 15 round;
-o-border-image: url("img/a.png") 15 round;
-ms-border-image: url("img/a.png") 15 round;

と、各ブラウザ向けの表記をする以外に、

現在、CSS3が審議中で仕様変更・一部機能の廃止・新機能の追加が行われる可能性があることから。
ベンダープレフィックス無しの指定も併記しておく。

すでに、一部がベンダープレフィックス無しで動作するようになっていたり、新しいブラウザではベンダープレフィックスが付いていると、逆に動作しなくなっている機能もあるため。

ただし、IEのシェアが大きい日本では、IE6~8ではほとんどのプロパティに対応していないため、
無効になってしまう。

>>>CSS3は使わないのが無難。
もしくは、IEでは表示されないことを前提に、別のデザインを指定する。


付記:IEで使えるプロパティ

IE6~9 >> CSS FontFace
IE8~9 >> Box Sizing, Display: table, Generated Content, DataURI
IE9 >> RGBA, HSLA, RGBA, Background Size, Multiple Backgrounds, Border Radius, Box Shadow, Opacity, CSS Transforms, , Media Queries


付記2:使えるIE6~9がないプロパティ(FIREFOX,OPERA,CHROMEでは使える)

Border Image, Text Shadow, CSS Animations, CSS Columns, CSS Gradients, CSS Transitions


 




  1. css
  2. tb: 0
  3. cm: 0
  4. [ edit ]

css1.プロパティ・セレクタ とIE

css プロパティ,セレクタ,とは・・・


セレクタ { プロパティ:-----値----- }


css3プロパティを使えば、こんなことができる?!!

border-radius(角丸)
box-shadow(陰影)
border-image(ボーダー画像)
multiple background images(背景画像の複数指定)
linear-gradient( as background image)(グラデーション)



* IEでは適用されない! >>> ケイタイ・スマホで利用(IE はまだ少数派らし??)
* ただし、jsを使えば、IEでもある程度の効果を期待できる、らしい?
 詳しくは以下サイトさま・・・

【Selectivizr】CSS3セレクタをIE(6~8)で使いたーい【万能】

IE6~8でもCSS3セレクタが利用できるツールの決定版「Selectivizr」


* 大ざっぱには、以下二つのjs(javascript)をDL、コピペなどしてjsファイルを作りアプロード、
<head> にtagを記入する、、らし。

1.Selectivizr >>>
2.jsライブラリ・・・これは複数あるので、選択、組み合わせて使う。

jQuery >>> ・・・Google Libraries API が簡単らしい。(以下を< head > に記入するだけ ?!!)
>> < script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript">< / script >

他に、
Dojo >>>
Prototype >>>

ようするに、<head> には以下?!( jQueryの場合 )

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script >
<!--[if (gte IE 6)&(lte IE 8)]>
<script type="text/javascript" src="selectivizr.js"></script>
<![endif]-->


http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js を使うjs にあわせて変える。

** 注意点
CSSは外部ファイルに記述する,
ローカルでは動かない >> サーバにアップして動作確認


*** 結論を言えば、とってもめんどくさい!!!!

こんな言葉がある? プログレッシブ・エンハンスメント
要するにChrome、Safari、Firefox等のモダンブラウザを使っている環境の整ったユーザーに対してはリッチなコンテンツを提供しようという考え方、
平たくいえば、IEなんか使っている人は、まあ、好きにやってください、というか・・・

IEユーザーが減れば、IEも考えるだろう、というか・・・^o^;;;


 




NEW ENTRY  | BLOG TOP |  OLD ENTRY

プロフィール

usagi

Author:usagi
FC2ブログへようこそ!

information

2015.2.8_23:12
管理人のみ閲覧のコメントを下さるみなさまへ

管理ページを見ることを忘れがちな管理人は 返事が遅れがちになることが多いため、ご注意下さい。

お急ぎの返信が必要なかたはカギなしでお願いします。
また、URL を記載していただくと、たすかります。

カレンダー

10 | 2017/11 | 12
- - - 1 2 3 4
5 6 7 8 9 10 11
12 13 14 15 16 17 18
19 20 21 22 23 24 25
26 27 28 29 30 - -

ユーザータグ

* 



上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。