初心者でも使いやすいCSS入門『テーブルのセルごとにカラーを変える』サンプル

-0001年11月30日更新

2007年03月11日公開

CSS色々 0 Comments

CSS

今回は初心者さんでも使いやすいテーブルのセルごとにカラーを変えるCSSのサンプルをつくってみました。

・CSS適応前（これが）

・CSS適応後（こうなる）

早速使い方からいきましょう。

HTMLソース

テーブルのセルごとにスタイルを

メニュー

はじめてのひとはこちらから

次のページはここ

サイトマップはここからどうぞ

内容の表示

WEBデザイナー全員がホームページビルダーを使わないわけではありません。

また、ビルダーを使っている方を批判するわけでもありません。

ただ、ネット上で知り合ったホームページ作成業者や、SOHOでホームページの作成に営む友人と、私のお話です。

まず、みな口をそろえて『ホームページビルダー』は絶対使わないといいます。

これはWEBデザイナーのプライドの一つなのでしょうか？

中には非常に批判的、攻撃的な人も多く、ビルダーを使っている＝ホームページの初心者だという意見が多いですね。

そのほか６つほど使わない、使いたくない理由がありましたのでご紹介しておきます。ニュアンス的な表現ですがご了承ください。
リンク1

リンク2

リンク3

リンク4

これを適当に、ファイル名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;
}