CSS3 - Web徒然なるままに

■文字間隔の均等揃え

text-justify:inter-word;
/*日本語はtext-justify:distributeディストリビュートを使うときれいに揃う。*/

/*text-justify:newspaper;*/ /*均等揃えCSS3では無くなった。
IE系で使用されていたinter-ideographは無くなった。
テキスト関連は、縦書きができるものも出てきてはいる。
IE、クロムは採用されているが、fairefoxは対応していない。
writing-mode:vartical-rl 文字を送る方向ライトtoLeft右から左へ
IE11までは、上下右左という記述を書くので、書き方が異なる。
-webkit-
組数字はIEエッジは対応。この辺は、IEは配慮してくれているようです。
*/

text-justify:inter-word;

/*仕様としては正しいのですが、値が対応していないので2015年12月現在では利きません。*/

■画像

background-image:url("../images/top.gif"),
　　　　　　　　 url("../images/bg.gif");

/*画像が複数カンマ区切りで入れられるようになりました。最初に書いたものは前面に入り、後に入れたものが背面に表示されます。
ひとつのboxの中で上下に配置し、下記のように1つ目のポジション、2つ目のポジションと指定します。
SVGが表示できない場合ののコールバックとしても使えると思います。*/

■text-shadow

background-position:center top,
　　　　　　　　center bottom;
　　　　　　　　text-shadow:4px 4px 4px rgba(0,0,0,0.5);
　　　　　　　　/*文字の影：　垂平右、垂直下、影のぼかし、影の色。*/

/*文字に影をつける。
・高さのあるものimg要素等は、box-shadow
・インラインのものにはtext-shadow
h1にbox-shadowをつけると、四角く周りにつく
SVGなら影がつけられるが、基本画像にはtext-shadowつかない。
値は基本３つ。スプレットが入っていると利かなくなる。
IEだけは、白で縁取りした文字ができる。なので基本スプレッとは使わない。
rgbaのaは、アルファーチャンネルのアルファの事。透明度0〜1を指定する。
hslaも使える。色相(h)、彩度(s)、明度（1）＝赤は、０、100％、50％
※透明度を下げれば薄くなる。0.3〜0.5くらいがきれいだと思います。
*/

■box-shadow　と角丸

	box-shadow:4px 4px 8px rgba(0,0,0,0.6)inset;

/*スプレッと部は省略。影のぼかしを8px。 insetは内側に影がつく
続けて書けば、内外両方に影をつけられる。*/

	border-radius:0px 0px 8px 0px;/*右下だけ角丸*/
　　　　box-shadow:0px 0px 24px 6px rgb(0,0,0);
　　　　/*垂平右、垂直下、影のぼかし、影を拡張、影の色*/

/*IE9以上対応。IE8以下は対応していない。
影のぼかし0にして、影を拡張（スプレット）の距離すると黒い線になる。
なので、縁をつけるのにも使えるかもしれない。
box-shadow:0px 0px 24px 6px rgb(0,0,0),0px 0px 12px rgb(0,0,0)などして
2重線や縁を作ることが可能。連続して書ける。*/

	border-radius:4px;

/*角丸にする。縁ぎりぎりに書かれている文字は見えなくなるが、リンクできる状態で残っている。
10×10の画像に5をかけると丸になる。高さの範囲を超えても丸以上にはならない。
%ですると不思議なことがおきるのでやらないほうが良い。
拡大した時の事を考えて、大きな1億などの数字を入れておいてもよい。

	border-radius:4px 4px 4px 4px;　左上、右上、左下、右下、
	border-radius:4px 4px;値が2つの場合、左上、対角線上の右下。右上、対角線上の左下が適用される。
	border-radius:4px 4px 4px3つの場合も左上、右上、対角線上の左下、右下*/

- - - - -

/*横一列に並んだナビゲーションの内、最初の画像と最後の画像のみを角丸にします。*/
/*first-of-type、last-of-type　はdivの中に複数の要素があった場合便利です。
　最初のPとh3などがあった場合もp:first-of-typeなどでpの最初が特定できます。　*/

　<ul><li><a></li><li><a></li></ul>　の中のaは li:first-of-type a　と書きます。


#top_link a:first-of-type{
	/*一番左端を特定する。CSS2ではfast-childがあったが。こちらでも可能。*/
	border-radius:8px 0px 0px 0px;
}
#top_link a:last-of-type{
	border-radius:0px 8px 0px 0px;
	/*CSS3ではlast-chaildも追加されました。一番右端を特定する。*/
}

/*奇数版目にあるナビゲーションボタンに色をつける。oddがセレクタ上が白っぽく光沢のある赤、下も白っぽくしてプラスティックぽくしています。
要素：nth-of-type()　引き数にoddを入れると兄弟の中の奇数を特定できます。evenを入れると偶数を特定できます。
引き数にはan+b　という式も入れられます。他に数字だけをいれても動きます。nth-of-type(5)と書けば、5番目の要素になります。
nが0から1ずつ増えていきます。　答えが0個目はjavascript等と違い存在しません。
例）3n+1;