ホームページを作る人のネタ帳

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

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

CSS適応前(これが)

CSS適応後(こうなる)

早速使い方からいきましょう。
HTMLソース




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











メニュー

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

次のページはここ


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



内容の表示



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

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



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



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

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




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



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

リンク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;
}



解説
4.gif
構成は↑のような感じ。
ちょこちょこっといじってみるとわかると思います。

test1.cssとtest1.htmlは同じフォルダの中にあるものとします。
CSSスタイルシート

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

サイト内関連エントリー
  • 文字を見やすくするスタイルシートは100%必要です

  • yamada
    Posted byyamada

    Comments 0

    There are no comments yet.

    Leave a reply