【HTMLやCSS】についてよく忘れることをメモ

DL　DD　DT　：　リンクの色を指定

Font Size

px ÷ 16

4.0px =0.25rem
5.0px =0.3125rem
6.0px =0.375rem
7.0px =0.4375rem
8.0px =0.5rem
9.0px =0.5625rem
10.0px =0.625rem
11.0px =0.6875rem
12.0px =0.75rem
13.0px =0.8125rem
14.0px =0.875rem
15.0px =0.9375rem
16.0px =1.0rem
17.0px =1.0625rem
18.0px =1.125rem
19.0px =1.1875rem
20.0px =1.25rem
21.0px =1.3125rem
22.0px =1.375rem
23.0px =1.4375rem
24.0px =1.5rem
25.0px =1.5625rem
26.0px =1.625rem
27.0px =1.6875rem
28.0px =1.75rem
29.0px =1.8125rem

box-shadow

box-shadow: 2px 3px 3px #333;
box-shadow: 横方向(左)　縦方向(下)　ぼかし　色

色はアルファ指定ができる　rgba(0,0,0,0.4)

注意

IE9以上 ベンダープリフィックスが必要

-webkit-box-shadow
-moz-box-shadow

position

固定配置をしたい時に、

position: absolute;

にするけど、z-indexを併用することが多い。

z-index　を使うとき、position: relative; が必要！

backgroundを複数指定する

一応表示されます。

background:
url(images/top.gif) top no-repeat,
url(images/bottom.gif) bottom no-repeat,
url(images/middle.gif);

上に top.gif 下に bottom.gif 真中に middle.gif

DL　DD　DT　横に並べるメモ

毎回毎回、dl dd dt の順番を忘れてしまうので、ここにメモします。

例　日付　：　記事のタイトル

と表示したい時には、以下のように設定する。

dt　に　float : left

dd　に　padding-left : (dt の width)

ちなみに

dl=definition list ＝ 用語と説明のリスト

dt=definition term =　「用語」

dd=definition description = 「説明」

つまり・・・term が「用語」であることを覚えておけば、OK。

補足

• 「用語」：「説明」か、「説明」：「用語」なのかで表示の順番が決まります。
• コーディングの時、dt　と　dd　の間には、何も記述しない方がよいです。

リンクの色

見ていない　a:link {color: ;}
見た　　　　　a:visited { }
マウスオーバー　a:hoer { }
選択したとき 　a:active{ }

再度下線を表示　a:hover {text-decoration :underline;}

CSSを指定
クラス名　a:hover { }