スポンサーサイト

  • --/--/--
  • このエントリーをはてなブックマークに追加

スポンサーリンク

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

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

  • 2007/03/11
  • このエントリーをはてなブックマークに追加

スポンサーリンク

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

CSS適応前(これが)

CSS適応後(こうなる)

早速使い方からいきましょう。
IT/Web業界に強い転職サイトGreen

HTMLソース




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











メニュー

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

次のページはここ


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



内容の表示



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

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



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



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

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




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



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

リンク1


リンク2


リンク3


リンク4


上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。



これを適当に、ファイル名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%必要です



  • スポンサーリンク

    トップへ戻る

    Twitter版のネタ帳では毎週月曜~金曜までWeb屋さんに役立つ色んな情報や単なるネタまでをつぶやいています。

    関連するエントリー

    コメント

    この記事にコメントする人はクリック

    コメントポリシーをお読みください
    管理者にだけ表示を許可する

    FC2Ad

    広告


    IT・Web業界の求人なら転職サイトgreen(グリーン) ホームページテンプレート、WordPressテーマ、Facebookページテンプレートならクラウドテンプレート ネットマーケティングとは│ネットマーケティング検定 SEOコンサルティング&SEO対策 無料レスポンシブWebデザインテンプレート 広告主募集

    あわせて読みたい
    フィードメーター - ホームページを作る人のネタ帳

    人気の記事一覧

    あなたのブログの再訪問者を増やす50の方法

    私の経験から感じた事を書き記します。全てが全てその時々で、正しいとは限りませんが、一つの指針としてお使いください。因みに全部リスト化すると230くらいありましたが、それはきっとセミナーとかでやるかなぁと。

    http://e0166.blog89.fc2.com/blog-entry-824.html

    あなたの生活を確実に拘束し時間を浪費させる動画50

    今回は生産性を向上させる事ばかり考えて記事を書いてきたので、逆に年末にかけて忙しい皆さんの時間を出来るだけ拘束し、忙しさを倍増させるものが無いかを考えました。その結果、動画で行こうと言う事になったのが1ヶ月以上前。動画閲覧本数はおそらく600本以上。その中から、おもしろそうなものを50個ベストチョイスいたしました。

    http://e0166.blog89.fc2.com/blog-entry-820.html

    webデザインのセンスを磨く○○系のwebデザインまとめ

    webデザインを学ぶならwebデザインから。と言うわけで、今回は海外のエントリを中心に、○○系のまとめをまとめます。

    http://e0166.blog89.fc2.com/blog-entry-817.html

    jQueryプラグインのベストトレンド総まとめ2010

    もはやこの業界ではかなり浸透しつつあるjQuery。今回はそんなjQueryにスポットを当て、本年度紹介された中でも、ホットなトレンドプラグインをご紹介します。

    http://e0166.blog89.fc2.com/blog-entry-816.html

    ツイッターの日常における35の行動パターン

    私が良く見かける35の行動パターンに名前をつけてみようと思う。年末の誰も見てない時に公開しようと思っていた、ただのネタだったのですが、結構時間がかかりこの時期に・・・。

    http://e0166.blog89.fc2.com/blog-entry-823.html

    ウェブデザイナーのためのウェブアプリ15

    OSがWindowsであろうと、ubuntuであろうと、共通のサービスを受けることができるのがウェブアプリケーションです。ウェブデザイナーの中には、自宅ですでにubuntuを利用している人も多い。また、Mac、Windowsと、各自それぞれの使いやすい物を利用していると思います。

    http://e0166.blog89.fc2.com/blog-entry-784.html

    愛用するGoogleChromeエクステンション12個

    この2年でノートPC2台購入。自他のPCはクラッシュしてリカバリー。会社のPCは新しいのがあたり、再セットアップ。そんなこんなで、会社はまぁともかくとして、とりあえず全PCが比較的3ヶ月に一度リカバリーしてもいいように、自分用にメモとして残しておきます。

    http://e0166.blog89.fc2.com/blog-entry-784.html

    文章や会話のプレゼンテーションを向上させる方法

    文章力がないためにプレゼンに失敗した、会話がうまくできずにプレゼンに失敗した。こういう経験はなかなか無い。なぜなら多くの場合、失敗したことに気がつかないからです。

    http://e0166.blog89.fc2.com/blog-entry-802.html

    サイトの裏側の意識を変え売り上げをアップする方法

    ネットショップ運営者が、あることをちょっとだけ始めてみただけでわずか5ヶ月で売り上げが3倍になりました。はたして、webサイト運営がどのように変わったのでしょうか。。

    http://e0166.blog89.fc2.com/blog-entry-749.html

    webサイトのリピーターを増やすさりげない5つのコツ

    多くのビジネスサイトのアクセス数を支えている大手検索サイト、Yahoo、Googleのアルゴリズムが変わる事で、突然商売がひっくり返る事態を回避する方法。

    http://e0166.blog89.fc2.com/blog-entry-746.html
    上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。