フッターのタイトルと、 第1子と著作権表示（末子）を真ん中によせます。 footer p:first-of-type,footer p:last-of-type{ text-align:center; } テキストを文字盤が刻まれたようにへこます 文字をずらして表現する。 text-shadow:-1px -1px 0px rgb(0,0,0),…

フレキシブルボックスにして、liの隙間を調整します。 nav ul { margin-top:16px; list-style:none; display:flex; justify-content:space-around;/*子供たちの間に均等に余白を分けていれる。（両脇にも隙間をいれる） justify-content:space-between;/*子…

CSS3で真ん中にする方法が2つ増えました。 フレキシブルボックスとcalcです。 座標を指定したものも、真ん中に指定できるようになりました。フレキシブルボックスを使用した上で、position:fixedでfooterなどを固定した場合 left:calc((100% - 960px) / 2);f…

今回は、screenは画面にかかわることだけ。印刷には影響したくないので、@media screenを指定します。 () and ()のandの後の半角スペースをくっつけちゃうと動かなくなります。 ↓400pxより小さくした時にfooterが消えます。 @media screen and (max-height:4…

/*マルチカラムレイアウト*/ /*親に設定する、これが真の段組です。文書が入りきれなくなったら次につながる段組。*/ #main{ padding-top:8px; padding-bottom:16px; /*段組 段数*/ -moz-column-count:2; -webkit-column-count:2; column-count:2;/*msは必要…

※フレキシブルレイアウトの良い点： ボックスが2段の場合、高さが高いほうに揃うように延びてくれます。 ※幅に入りきらなくなったら、初期値では横幅が狭くなります。これがfloatと違います。 折れ曲がって下に行くには別にプロパティを書きます。 フレキシ…

■文字間隔の均等揃え text-justify:inter-word; /*日本語はtext-justify:distributeディストリビュートを使うときれいに揃う。*/ /*text-justify:newspaper;*/ /*均等揃えCSS3では無くなった。 IE系で使用されていたinter-ideographは無くなった。 テキスト…

モジュール単位で開発が進んでいて、まとまったものでCSS3というものはない。 ほとんどのブラウザ（IE9以上） 新しいものは1.0になっているし、作業草案にはLevel4まで進んでいるものもある。ドロップシャドウ ブロック系 box-shadow ・・・画像などのインラ…