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-->で囲むと
個別記事以外では表示されない。


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

< div class="entry_header">

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

< !--not_permanent_area-->

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

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

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

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

< /div>

< div class="entry_body">

< %topentry_body>

< !--permanent_area-->

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

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

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

< !--/permanent_area-->

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

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">


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

css6. max-width

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

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

↓

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

css5.長さの単位

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

絶対単位
pt ：72pt = 1in（1インチ：2.54cm）
pc ：1pc = 12pt

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;
* 指定 ：上から、左から、右から、下からの距離＋数値単位,%

}

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; 

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

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

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

>>>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

　

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)をＤＬ、コピペなどして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^;;;