Webサイト開発・運営

Movable Typeデザインカスタマイズレッスン準備編・2

というわけで、始まったMovable Typeデザインカスタマイズレッスン。
Movable Typeデザインカスタマイズレッスン準備編・1ではどんなふうなデザインにしていくかをまとめてみました。
準備編2では最低限の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でも良いので(上記の例ぐらいでもいいから)、まずはやってみて、表示できて、「出来た!」という感覚をつかんでもらうことから始めてもらったほうがいいかもしれません。
これから毎日、「できた!」が言えるように(僕も)、一緒にデザインカスタマイズできれば、と思います。

  • この記事を書いた人
  • 最新記事

wackey

Webディレクター・プロデューサーなどで大手企業サイトの構築に携わった後、インターネット広告営業やWebコンサルティングなどを行う。フリーランスを経て2012年にプラス・ムーブメント合同会社を設立。Webサイト・システムの制作やブロガーツアー・イベントなどの企画・運営を行う。地域ブログをまとめたLocketsというサービスの事業責任者としてビジネスを展開。 2015年にアジャイルメディア・ネットワーク株式会社に入社。 レビューズにてインフルエンサーマーケティング事業の立ち上げに関わり運営。またアンバサダープログラムの運営など多くの企業の支援をバックアップしていた。 現在プラス・ムーブメント合同会社を経営しつつ、新しい働き方について模索している。 主な著書に「アフィリエイターのための Web APIプログラミング入門(ビー・エヌ・エヌ新社)」がある。

-Webサイト開発・運営