フッターのタイトルと、 第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;/*子…

bodyにposition:absoluteをかけ高さを100%にするとmainの高さも100％が使えるようになります。 通常は、height100%にしても値は取得できませんが、 htmlまたはbody要素にposition:absolute;とheight100%にします。 main100%にして、中身の要素が足りなくて、…

paddingを追加して、幅が増えるのが嫌な場合 box-sizing:border-box; padding:1em;

繰り返しグラデーション 赤い背景に横線を入れます。 background-color:rgb(255,0,0); background-image: repeating-linear-gradient(/*繰り返す*/ to bottom, rgb(255,0,0)0px, /*0~1px赤*/ rgb(255,0,0)1px, rgb(200,0,0)1px,/*1~2px濃い赤*/ rgb(200,0,0)…

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…