CSS、HTMLをなるべくわかりやすく解説してみる
2006年01月12日15:00
ブログを運営していく上で、初心者にとってわかりにくい事のひとつに、CSSやHTMLがあります。
HTMLはまだ入りやすいのですが、CSSに入っていくのには、私は結構、時間がかかりました。
今回これをめちゃくちゃ噛み砕いて、初心者の頃の自分が理解できるような形に解説したら、どんな解説になるだろうかと、試してみました。

最初にお断りしておきますが、私のCSSやHTMLの知識は完全な独学、自己流です。
この解説を読むと、かえって誤った知識が付いちゃうかもしれませんのでお気をつけ下さい。

なのになぜ解説しようかと思ったかと言いますと、一応私でもCSSやHTMLをちょろちょろっといじることができるからです。まあ、あんまり正しくない知識かもしれませんが、初心者の方を、CSSやHTMLをいじれるレベルに少しでも近づけるお手伝いができたらなあ、と思って解説してみようと思ったわけです。


それと、年末に１件そういうお問い合わせがありまして、遅くなってしまい、その方が見てくださっているかどうかもわかりませんが、まあその方へのお問い合わせの返事として、記事を書きたいと思います。
たぶん３〜４回シリーズで。いずれも長文だと思いますｗ。
すでに前置きだけで長いですがｗ、はじめます。




■各ブログのHTMLとCSSの状況について

えーと、実は白状しますと、私がわりと良くわかっているCSS、HTMLのいじり方は、「ライブドアブログ」だけ、と言っても過言ではありません。ひいき目に見て、Movabletype（ＭＴ)が少しわかる程度です。
そういう私の目で見た各ブログのCSS、HTMLの状況をまとめてみます。


・ライブドアブログ

本とかに載っている、オーソドックスなCSSとHTML構造です。
本とか読むと、結構わかります。
本には載ってないライブドアブログ独特なHTMLタグというのがあって、そこはちょっとわかりにくいので、ライブドアブログ独自タグ一覧にまとめています。
自由度も割りと高いですが、プラグインの中身など、HTMLがいじれない部分があります。


・Movabletype（ＭＴ）

こちらもオーソドックスな感じです。
こちらにもＭＴ独特のHTMLタグがあります。
そこを攻略していけば、最も自由度が高いブログとなります。
オーソドックス同士、ライブドアブログから入りやすい印象です。


・Seesaaブログ、さくらブログ（さくらインターネットで作れるブログ）

CSSはオーソドックスです。
ですが、白状しますと、SeesaaブログのHTMLはちょっと特殊で、マジ全然わかりません（汗）。
日々お勉強中。さまに解説を譲ります（笑）。
さくらブログは、さくらインターネットがSeesaaブログと提携したブログなので、モノは同じです。
「レンタルサーバーを使ってみたいけど、ＭＴは不安、Seesaaブログには慣れてるんだけど」という方は、さくらブログが良いかも。作れるブログ数は、容量が許す限り無制限です。


・FC2ブログ、JUGEM、ロリポブログ

チラッと使っただけで恐縮なんですが、この３つのブログ、ほとんどCSS、HTMLのいじり方同じではないかなと思います。
CSSとHTMLが一緒になっていて、見やすい。かつ再構築が不要、というナイスなシステムだったと思います。
なんでも、「変数」というのがあって、それが独自タグみたいな感じのようです。
FC2ブログでは、（http://blog.fc2.com/template.html）にまとめてあります。
さとみ（ブログ de アフィリエイト）さまに教えて頂きました。
その他のCSS、HTMLは割りとオーソドックスな感じでした。
FC2ブログに慣れた方はロリポップへ移行すると、スムーズにロリポブログが活用できるかも。ロリポブログは３つまで作れます。




■CSS、HTMLの概念

CSS、HTMLを初めて見た時、何じゃこの文字列は！？と思います。
まるで何もわかりません。
大体、存在意義がわかりません。


では、その存在意義から解説いたします。

CSSとは（カスケーディング・スタイル・シート）の頭文字を取った略語ですが、これはブログの各ページなどのデザインなどを決定するものです。
一方、HTMLは各ブログのページなどの構造を決めるモノ、と言えるかもしれません。

HTMLは、ひそかにCSSを呼び出して、CSSを参照することでブログのデザインが変わってきます。


CSS、HTMLともに、結局、命令文の組み合わせでできています。
CSS、HTMLそれぞれで、命令文が違うのです。
本を買ったりして、１個１個の命令文の意味を照らし合わせていけば、徐々にその意味がわかるようになっていきます。

HTMLはブログの本文などで使うケースもあるので比較的入って行きやすいですが、CSSの方がちょっとわかりにくいです。


以上です。



・・・こういう感じでさらっと説明されても、結局何の事か初心者の頃にはたぶん私もわからなかったと思います。

そこで、私流の概念を御紹介したいと思います。



＝CSS親方の指示書と家の設計図＝


ブログという「家」を作るとします。

家にはいろんな部品があります。システムキッチンやら照明やら。そういう部品を「要素」と言います。

部品の配置とか大体の形とかを設定するのが設計図ですが、ブログでこれにあたるのがHTMLです。

部品の色やら形とか、細かい事を口うるさく言ってくるのが、CSS親方の指示書、つまりこれがCSSです。


家＝ブログ
設計図＝HTML
家の部品＝要素
家の部品の細かい指示書＝CSS

という感じです。


図で見てみましょう。




親方の指示書にはこんな感じの指示が。
−−−−−−−−−−−−−
家body｛明るい雰囲気
　　　　　つくりは丁寧に
　　　　　暖色系でまとめる｝
#キッチン｛木目調
　　　　　　明るい色合い
　　　　　　シンクを広く｝
．照明｛とにかく豪華に
　　　　電球はオレンジ系｝
−−−−−−−−−−−−−



一方設計図はこんな感じ。
−−−−−−−−−−−−−
<html>
<家body>
<div id="キッチン">大型システムキッチン</div>
<div class="照明">西洋風シャンデリア</div>
</家body>
</html>
−−−−−−−−−−−−−

HTMLは<html>で始まり、</html>で終わります。
<body>と</body>で囲まれた部分がブログ（家）の本体です。
本当はその上に、<head>と</head>で囲われる部分があります。
<head>と</head>の間にメタタグなどを入れますが、今回はわかりにくくなるので省きました。


設計図であらかたの家の形ができているところに、CSS親方の指示書で最終的な細かいデザインとか決まります。
HTMLで、<div id="キッチン">と指定した部分は、CSSの#キッチンで細かい指示を受けます。
HTMLで、<div class="照明">と指定した部分は、CSSの．照明で細かい指示を受けます。


基本的にどんな設計図を書いていようが、CSS親方の指示書（CSS）は絶対です。
そして、ブログ全体に指示をいきわたらせないといけません。
逆に言うと、CSSを書きかえれば、ブログ全体のデザインを一気に変更できるわけです。
これがCSSの便利なところです。


CSSは実際は日本語では書かれていません。
「明るい雰囲気」「つくりは丁寧に」の部分に、CSSで決まっている命令文を入れていくわけです。



「#キッチン」とか「．照明（目立ちにくいので．は全角にしていますが、実際は半角）」が「要素」です。
慣れてくれば自分でどんどん要素を作って使うことができます。


＃で指定してあるものは、基本的にHTMLの中に１個だけあるものを指定します。
．で指定してあるものは、HTMLの中に何度出現しても構いません。



また、各要素に細かい部分の指示が無い場合もあります。
例えば、ある要素に、文字の大きさの指示はあるけど、色の指示が無い、とか。
こういう場合、先に出ていた要素の指示をそのまま引継ぎます。これを「継承」と言います。

あれ、文字の色とか変な色になってるぞ、という時は、どこかの要素の指示を「継承」している場合があります。




HTMLにはCSSで特に指定が無くても使えるモノも多くあります。
例えば文字を太字にする<b>タグとか。
こういうタグに対する指定は、特にCSSの中にはありません。
いちいちCSS親方が指示しなくても、HTML職人の裁量に任されている部分も多い、という感じでしょうか。



おおむねどのブログも、CSSとHTMLの関係について、概念的な部分はこんな感じです。
独学なので、根本的に間違っているかもしれませんが（笑）、こういう認識でも十分HTML、CSSはいじれます。



HTMLもCSSも、あとは要素や命令文が増えただけです。
一個一個を分解して見ると、そう難しいことは書いてありません。たぶん（笑）。
まだ一度もCSSやHTMLに触れた事の無い初心者の方は、こういうもんなんのかという感じで、一度CSS、HTMLを覗いてみて下さい。

ですが、うかつに触るとデザインが変わったりしますので、注意して下さい。
HTMLも、CSSも単なるテキストなので、ワードパットなどに全文コピぺして保存しておけば、バックアップ完了となりますので、一応いじる場合はバックアップをして下さいね。


暇な時に、私が使っているHTMLやCSSの主な命令文の説明をしたいと思います。

つづく。かな？（笑）


│clip! │HTML・CSS解説 
このBlogのトップへ │前の記事 │次の記事

この記事へのコメント
ににっち
2006年01月12日 17:51
おぉ！こうやれば良いのですねCSS解説
私が書いた記事と天と地の差です(笑)
やっぱり、私にはこの手の才能は無いようなので
今度からafiliateさんの所にリンクを張って
終わりにするかもしれません(笑)
というかSeesaaは地味に難しいですね。

afiliate
2006年01月12日 19:01
ににっちさま〜どおも〜。
いえいえ〜私の恥ずかしい脳内をみなさまの前にさらしてしまい、恥ずかしい思いをしておりました。
それから、自分の知識に自信が無いところがあり、ににっちさまの記事をかなり参考にさせていただきました。
お礼に伺おうかと思っていたら、すでにコメントが（笑）。
この場を借りてお礼申し上げますｍ（＿ ＿）ｍ。

電波な仕上がりになってしまって、わかりやすいのか混乱を招くのか自分では良くわかりませんｗ。初心者の方の感想をうかがいたいなあ、と思ってます。

Seesaaは確かに地味にわかりにくいですね。
それをあれだけ解説してくださっているBerryさまは偉大だと思います〜。

中国・天津情報中心 はらけん
中国・天津情報中心 はらけん
2006年01月12日 19:05
5

afiliateさんすばらしいです！
家と設計図と親方の指示書の概念すごくわかりやすいですね。
ちょっと自分でもCSSをいじってみようと思います。
ありがとうございました。

afiliate
2006年01月12日 23:20
どおも〜中国・天津情報中心 はらけんさま。

お褒めいただきうれしいです！
わかりやすかったですか？自分で、初心者の方向けに･･･と思ってもなかなか最初のころの感覚は思い出せなかったりするので、こういう記事を書くのは意外と難しかったりします。
でも「わかりやすい」と言っていただけると続きも書こうかな♪と思っちゃう単純なヤツですｗ。

がんばっていじってみられてください〜
バックアップをお忘れなく〜(●＾∇＾●)／


カンパネルラ
カンパネルラ
2006年01月13日 01:43
意外かと思われるかもしれませんが、私がHTMLやCSSを使いこなせるようになったのはごく最近です。
8月・・・いや、9月ぐらいかもしれません。
今までソフトに頼っていましたが、ブログの投稿時に手書きで色々なタグを書き始めてからですね。
「習うより慣れろ」とはよくいったもので、なかなか頭で理解しても実際に使ってみないと覚えられないものです。まずは、実際にやってみて雰囲気だけでも掴むことが大切だと思われます。

さて、CSSの知識は直接SEO対策には関わりありませんが、HTML文法に関してはかなり関わってきます。まぁ結果的にCSSも間接的に関わってくるのですね。
よくアクセス数が伸びない。と悩んでいる方が多いですが、「HTMLはわからないから。」ではいつまでたってもアクセス数は伸びないと思います。
まずは実行すること。ですね。

afiliate
2006年01月13日 11:22
おろろ、それはマジ、意外ですよ！カンパネルラさま。

そうですね。私も習うより慣れろが好きです。
でもそれでよく失敗しちゃってます・・・orz。

そうですね。CSSは間接的、という感じに捉えるとわかりやすいですね。
指示書が無くても家はできると。ですが、なるべくシンプルなサイトにするためにはCSSを使った方が良いかなと。

HTML、CSS。知っていた方がサイト運営にプラスになることは間違いありません。それはSEOやアクセスアップにもかかわってきますね。
地味ですが、大事ですよね。
那岐
那岐
2006年01月14日 23:09
afiliateさん、こんばんは〜。

いつもながらafiliateさんの解説、分かりやすくて良いですね（＾＾）
私の場合、（一応コンピュータの）プロであるが故に、かえって初心者に分かりやすく説明するのが、難しいんですよ〜。
自分が知ってるものだから、つい説明を省いちゃったり・・・。

CSS、私もまだまだ勉強中です。

afiliate
2006年01月15日 10:16
どおも〜那岐さま。

お褒め頂きありがとうございます。うれしいです♪

確かに自分がわかっちゃっている事を忘れて、純粋に初心者の方の立場に立つ、ってすごく難しいですよね。私も未だに自分は初心者のつもりなんですが、それでも知らず知らずのうちに知ってることはバンバン説明省いちゃってるなあ、と思うこと良くあります。
なるべく昔を思い出すようにはしているのですが、本当にわかりやすいかは・・・どうなんでしょう（笑）。

私もまだまだ勉強中です。
がんばりたいです〜