CSSメモ

感想おまちしてます!

CSSとはCascading Style Sheetの略。

スポンサーリンク

便利サイト

CSSのレイアウト作成に役立つ便利なリソースいろいろ by GIGAZINE

使用方法

直に要素に書いちゃう

タグに直に書くことができる。しかし、これだとあんまりうれしくないので、できればやめておいたほうがいい。

<div style="color:#000;border:1px solid #000">
直に書いてみました。
</div>

headerに書いちゃう

Javascriptと同じように、headerに書くこともできる。が!やめといたほうがいい。

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<title>タイトル</title>
<meta http-equiv="Content-Style-Type" content="text/css">
<style type="text/css">
div.title{background-color:red;color:white}
</style>
</head>
<body />
</html>

外部ファイルに書いちゃう

こうしておきましょう。

// test.css
body{
background:#fff;
}
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"> 
<html>
<head>
<meta http-equiv="Content-Style-Type" content="text/css">
<link rel="stylesheet" type="text/css" href="test.css">
</head>
<body>
</body>
</html>

外部ファイルで他の外部ファイルを参照することができる。

// test.css内
@import "another.css";
@import "ananother.css";

ただ、IEで@importを大量に行うと、CSSがうまく読み込めないことがあるので注意。

CSS適用の優先順位

優先順位は以下のとおり。(上のほうが優先順位高)

  1. タグに直に書いたとき
  2. head要素に書いたとき
  3. @import
  4. 外部スタイルシート

ボタンの背景を透明にする

background: transparent;

Divの中をCenterにしたい

margin-left: auto; margin-right: auto

IE6ではうごかないので、text-align:centerしかない

参考リンク