頻繁に使うけど忘れがちなCSS

甘党エンジニアのkanjiです。

カリキュラムもいよいよ最後局面に入り、マークアップ作業も増えてきた。

今回は割と登場機会が多いけど、とっさに出てこないCSSプロパティについてまとめてみた。

display:inline

.content1{
  display:inline;
}

要素を横並びにするプロパティ。
おもに縦並びのブロック要素を横並びにしたい時に使用する。
spanタグやaタグなどは初期値がこのinlineになっている。

他にも
・display :block;や
・display :inline-block;
などがある。

.content1{
  text-decoration:none;
}

テキストに付いている傍線を消す。
おもにaタグに使うことが多い。
逆に下線を付けたい時は
text-decoration: underline;
でそのテキストに下線をつけることができる。

.content1{
  clear:both;
}

左寄せ、または右寄せされた全ての要素に対する回り込みを解除する。
初期値はclear:none;

「border」は対象の要素に枠線を引いてくれるスタイルシート。
使い方は「線の種類」「線の太さ」「線の色」を指定することで使える。
例えば

.content1{
  border : solid 1px #red;
}

とすることで赤色で1pxの枠線が付く。

他にも

border-top　→ 上側の枠線
border-right → 右側の枠線
border-bottom → 下側の枠線
border-left → 左側の枠線

上下左右の枠線を指定することも出来る。

すべての要素に適用。

p*{
  border : solid 1px #red;
}

例えばp*だと、p要素の中にある要素すべてにborder : solidを適用させることができる。