初心者でも使いやすいCSS入門『テーブルのセルごとにカラーを変える』サンプル
・CSS適応前(これが)
・CSS適応後(こうなる)
早速使い方からいきましょう。
テーブルのセルごとにスタイルを
メニュー
はじめてのひとはこちらから 内容の表示
WEBデザイナー全員がホームページビルダーを使わないわけではありません。
また、ビルダーを使っている方を批判するわけでもありません。
ただ、ネット上で知り合ったホームページ作成業者や、SOHOでホームページの作成に営む友人と、私のお話です。
まず、みな口をそろえて『ホームページビルダー』は絶対使わないといいます。
これはWEBデザイナーのプライドの一つなのでしょうか?
中には非常に批判的、攻撃的な人も多く、ビルダーを使っている=ホームページの初心者だという意見が多いですね。
そのほか6つほど使わない、使いたくない理由がありましたのでご紹介しておきます。ニュアンス的な表現ですがご了承ください。
これを適当に、ファイル名test1.htmlとなずけて保存します。
shift_jisで作っていますので、メモ帳にでも貼り付けて、名前をtest1.htmlに変更すればOKです。
続いてCSSも作ってしまいましょう。
今回HTML側はtest1.cssを呼び出すようにしていますので、ファイル名を変えたい場合はHTMLの方もいじってください。
まずは実行してみる場合はtest1.cssと名づけて保存してくださいね。
test1.css
@charset "shift_jis";
.side1 {
font-size: 16px;
line-height: 140%;
padding: 4px;
border-right-width: 1px;
border-right-style: inset;
border-right-color: #CCCCCC;
list-style-position: outside;
color: #336699;
font-weight: bold;
}
.side1 a {
color:#FF6600;
font-size: 12px;
text-decoration:underline;
text-transform: none;
font-weight: bold;
border: none;
padding: 3px;
}
.side1 a:hover {
color:#006666;
text-decoration: underline;
background-color: #E4FFCA;
}
.main {
font-size: 14px;
line-height: 160%;
color: #996600;
padding: 7px;
}
.side2 {
border-left-width: 1px;
border-left-style: solid;
border-left-color: #CCCCCC;
font-size: 12px;
line-height: 130%;
padding-top: 5px;
padding-bottom: 5px;
padding-left: 7px;
background-color: #E6E6E6;
padding-right: 7px;
}
.side2 a {color:#006699;
font-size: 12px;
text-decoration:none}
.side2 a:hover {
color:#FF0000;
text-decoration: underline;
}
.mdiv {
border-bottom-width: 1px;
border-bottom-style: dotted;
border-bottom-color: #CC0000;
border-left-width: 6px;
border-left-style: solid;
border-left-color: #CC0000;
padding-left: 10px;
}
解説

構成は↑のような感じ。
ちょこちょこっといじってみるとわかると思います。
test1.cssとtest1.htmlは同じフォルダの中にあるものとします。

とりあえずテーブルやセルごとにリンクの色を変えたり、文字幅を変えたりという事が結構多いと思います。
そんな時はこのサンプルをお試しください。
サイト内関連エントリー