というわけで、始まったMovable Typeデザインカスタマイズレッスン。
Movable Typeデザインカスタマイズレッスン準備編・１ではどんなふうなデザインにしていくかをまとめてみました。
準備編２では最低限のHTMLとスタイルシートの知識について触れます。
これはHTMLやCSSを理解せずにブログデザインカスタマイズするのは、無免許で車を運転するようなものです（少し違うか）。
とりあえず基本的なことをほんのちょっとおさらいしておきましょう。
HTMLについて
分厚い本を買って読みこめば、なんとかなりますが、ちょっとは知っていることを前提にカスタマイズするのに最低限抑えておきたいことを押さえましょう。
「カスタマイズにチャレンジして崩れちゃう」
の原因の多くはHTMLのタグが不足or余分に入っている状況だったり開始タグと終了タグの位置が間違えていることが多いのでは？と思われます。（もちろんCSSでのサイズ指定に失敗していることも挙げられます。）
“HTMLのタグが不足or余分"というのは、HTMLタグの中には必ず対になっているものがあるのです。
例えばHTML文書の中に<html>（開始タグ）は必ず頭（の方に）にあって、一番下に</html>（終了タグ）があります。
同じように<head>（開始タグ）に対しては</head>（終了タグ）。<p>（開始タグ）に対しては</p>（終了タグ）。<div align="center">（開始タグ）には</div>（終了タグ）。
といった感じで対になっています。
さらに実際のHTMLを書き始めてややこしくしていることは入れ子になっていることです。
例えば
<html>
<head>
<title>アホのサカタ</title>
</head>
<body>ここに本文。これがブラウザに表示されます
</body>
</html>
といった感じに対になっているものでも親子関係（血縁関係は知らんが）があるのです。
htmlの開始タグと終了タグの間にheadの開始タグと終了タグがあるし、さらにheadの中にはtitleの開始タグと終了タグがあります。これを入れ子といいます。
必ず一体一対応しています。
これを仮に
<html>
<head><title>アホのサカタ</title>
<body>
</head>ここに本文。これがブラウザに表示されます
</body></html>
といった感じで入れ替えてみると（なんと表現したらいいのかわからんが）終了タグと開始タグがクロスしたような形になります。これは文法的にNGです。
ちなみに最初のタグの例をコピーしてメモ帳に書き写して、（半角アルファベット）.htmlという名前で保存してサーバーにアップするとブラウザで表示できます。
今さら、こんな話なんて、と思いますが、僕もHTMLを始めたころ成長過程でタグの入れ子をミスってハマったことが多々あります。
でも、少し複雑なHTMLを手書きで書いて、サーバーにアップしてブラウザで表示できたときの成功体験は非常にうれしいものです。
どんなに簡単なHTMLでも良いので（上記の例ぐらいでもいいから）、まずはやってみて、表示できて、「出来た！」という感覚をつかんでもらうことから始めてもらったほうがいいかもしれません。
これから毎日、「できた！」が言えるように（僕も）、一緒にデザインカスタマイズできれば、と思います。
コメント