cssの楽〜な考え方。
2005年12月25日
HTMLとCSS
ブログが検索エンジンで、上位表示されやすい要因のひとつに
HTMLとCSSを完全に分けている
ことも影響しています。
なんでか?といいますと。
HTMLは、そもそも構造の言語です。
本で考えるとわかりやすいです。
本自体の題(タイトル)があり。
ページのタイトルがあり、見出しがあり、段落がある。
コレを記述するだけです。
CSSは、デザイン(見た目)担当。
デザインといっても、
かしこまって考える必要は、ぜんぜん無いんですね。
この文字は何色で、どの大きさか?
この枠の背景は何色で、大きさは・・・。
左側に、どれくらい余白を入れようか?
この程度で、充分なわけです。
で、
CSSがわかってくると、
今は、左側にナビゲーションがあるとします。
ちょっと飽きたんで、右側に変えたい、と思ったら
CSSをちょこっと、いじくるだけで、すぐに変わります。
これを、HTML内で、テーブル組していると、
変更が、大変です。
SEO対策にも、ページ変更にも役に立つCSSを
使わない手は、ありませんよね。
ということで、
気が向いたら、ペコッとクリックしてちょ〜だい。
2005年12月24日
ホームページの外観の種類。
見覚えがあると思います。
CSSをドバッっと見ると何が何やら・・・。
って、なります。
でも、ひとつひとつ、バラバラに見ていくと、簡単です。
ブログが、検索エンジンの上位に
表示される、要因のひとつでもあります。
A B B’ C このパターンしかないと覚えてOKです。
ちなみに、ライブドア・ヤフーもB’のパターンです。
Aは、1番シンプルなタイプです。
Bは、シンプルで見る側が操作性のいいタイプです。
Cは、一時期流行りましたが(今でも、流行ってます)、
なんか、ゴチャゴチャした感じ。
アフィリエイトブログに多いパターンです。
パッと見た瞬間、アフィリエイトってわかりますよね。
まあ、どうでもいい話ですが。
では、Bタイプを、バラバラにしてみます。
題して。バラバラ大作戦
って、そのままやんけ〜・・・(笑)
a b c d の4個のパーツが入っています。
abcd の呼び名。
呼び名は、あなたが、自由に、
なんでもつければいいんです。
ここでは、下のような呼び名に決めます。・・・わたしが勝手に。
a は、ヘッダー(ヘッド)head・・・top・・・あたま・先頭。
ここでは、ヘッドhead と呼ぶことに決めます。
b は、サイドナビゲーション。横の道先案内。・・・saido-navi
c は、本文。コンテンツ。 ・・・content
d は、足元にあるんで。フッター。フット ・・・ foot
a b d は、1度作れば、それを使いまわします。
ようは、本文。コンテンツ content を書き換えるだけです。
・
・
・
寝むいですか?・・・伝わってますかね? けっこう重要ですよ。ここ。
おっとっと、言い忘れました。
箱自体を、コンテナー・・・・・container と、決めます。
ブログサイトによっては、呼び名がちがっていると思います。
でも、そんなのおかまいなし。
自分が覚えやすいように変更すればOKです。
コーヒーブレイク。
バラバラ大作戦が理解できれば、
ブログも自由自在に、見た目を変更できますよ。
専門用語で、「カスタマイズ」な〜んて呼ばれています。
なんせ、CSS。スタイルシートのはなしをしてますんで。
ということで、
気が向いたら、ペコッとクリックしてちょ〜だい。
ご参考まで。基本12色パレット
色相が、モニター画面で、多少違ってきますが
だいたいこれくらいあれば、いいとは思うんです。ハイ。
よかったら、コピペして使ってちょ〜だい。
■ 000000 (Black)《R0 G0 B0》 ■ 808080 (Gray )《R128 G128 B128》 ■ C0C0C0 (Silver )《R192 G192 B192》 □ FFFFFF (White)《R255 G255 B255》 |
■ FF0000 (Red)《R255 G0 B0》 ■ FFFF00 (Yellow)《R255 G255 B0》 ■ 00FF00 (Lime)《R0 G255 B0》 ■ 00FFFF (Aqua)《R0 G255 B0》 ■ 0000FF (Blue)《R0 G0 B255》 ■ FF00FF (Fuchsia)《R255 G0 B255》 |
■ 800000 (Maroon)《R128 G0 B0》 ■ 808000 (Olive)《R128 G128 B0》 ■ 008000 (Green)《R0 G128 B0》 ■ 008080 (Teal)《R0 G128 B128》 ■ 000080 (Navy)《R0 G0 B128》 ■ 800080 (Purple)《R128 G0 B128》 |
足りない方は、
216色パレット
■000000 ■000033 ■000066 ■000099 ■0000CC ■0000FF |
■003300 ■003333 ■003366 ■003399 ■0033CC ■0033FF |
■006600 ■006633 ■006666 ■006699 ■0066CC ■0066FF |
■009900 ■009933 ■009966 ■009999 ■0099CC ■0099FF |
■00CC00 ■00CC33 ■00CC66 ■00CC99 ■00CCCC ■00CCFF |
■00FF00 ■00FF33 ■00FF66 ■00FF99 ■00FFCC ■00FFFF |
■330000 ■330033 ■330066 ■330099 ■3300CC ■3300FF |
■333300 ■333333 ■333366 ■333399 ■3333CC ■3333FF |
■336600 ■336633 ■336666 ■336699 ■3366CC ■3366FF |
■339900 ■339933 ■339966 ■339999 ■3399CC ■3399FF |
■33CC00 ■33CC33 ■33CC66 ■33CC99 ■33CCCC ■33CCFF |
■33FF00 ■33FF33 ■33FF66 ■33FF99 ■33FFCC ■33FFFF |
■660000 ■660033 ■660066 ■660099 ■6600CC ■6600FF |
■663300 ■663333 ■663366 ■663399 ■6633CC ■6633FF |
■666600 ■666633 ■666666 ■666699 ■6666CC ■6666FF |
■669900 ■669933 ■669966 ■669999 ■6699CC ■6699FF |
■66CC00 ■66CC33 ■66CC66 ■66CC99 ■66CCCC ■66CCFF |
■66FF00 ■66FF33 ■66FF66 ■66FF99 ■66FFCC ■66FFFF |
■990000 ■990033 ■990066 ■990099 ■9900CC ■9900FF |
■993300 ■993333 ■993366 ■993399 ■9933CC ■9933FF |
■996600 ■996633 ■996666 ■996699 ■9966CC ■9966FF |
■999900 ■999933 ■999966 ■999999 ■9999CC ■9999FF |
■99CC00 ■99CC33 ■99CC66 ■99CC99 ■99CCCC ■99CCFF |
■99FF00 ■99FF33 ■99FF66 ■99FF99 ■99FFCC ■99FFFF |
■CC0000 ■CC0033 ■CC0066 ■CC0099 ■CC00CC ■CC00FF |
■CC3300 ■CC3333 ■CC3366 ■CC3399 ■CC33CC ■CC33FF |
■CC6600 ■CC6633 ■CC6666 ■CC6699 ■CC66CC ■CC66FF |
■CC9900 ■CC9933 ■CC9966 ■CC9999 ■CC99CC ■CC99FF |
■CCCC00 ■CCCC33 ■CCCC66 ■CCCC99 ■CCCCCC ■CCCCFF |
■CCFF00 ■CCFF33 ■CCFF66 ■CCFF99 ■CCFFCC ■CCFFFF |
■FF0000 ■FF0033 ■FF0066 ■FF0099 ■FF00CC ■FF00FF |
■FF3300 ■FF3333 ■FF3366 ■FF3399 ■FF33CC ■FF33FF |
■FF6600 ■FF6633 ■FF6666 ■FF6699 ■FF66CC ■FF66FF |
■FF9900 ■FF9933 ■FF9966 ■FF9999 ■FF99CC ■FF99FF |
■FFCC00 ■FFCC33 ■FFCC66 ■FFCC99 ■FFCCCC ■FFCCFF |
■FFFF00 ■FFFF33 ■FFFF66 ■FFFF99 ■FFFFCC ■FFFFFF |
ほんじゃ、また。。