THE HAM MEDIA BLOG

ネタ元：最近やったこと - コンピューターおねえちゃん

僕が大学生ブログランキングをしていたころから知っている
亀ちゃん(id:sayakame)のお勉強ブログ(？)を読んでいて、
つっこみしたくなったのでエントリー。

そのHTMLなんかオカシイヨ！！

僕ははてなはほぼ使っていないから、
ここのブログ使ってつっこみさせてもらうよ。

これ読んで、少しはHTMLのお勉強になってもらえたらと思う。

O茶の水女子大生の亀ちゃん

大学生ブログランキングではいつも上位に名を連ねるブロガーの亀ちゃん。
３年ほど前、とある企画で会ったりもしたのですが、
きっと覚えていないだろうなーと思ったり。。。

そんな亀ちゃんが少し前から「コンピューターおねえちゃん」という
PHPとかHTMLなどのお勉強内容を書きはじめた。

僕もPHP勉強しなきゃだから、まけていられない！

亀ちゃんが今回勉強した内容

今回の勉強の内容はこんな感じだ

ここまでの内容ではしっかりとできている。

しかし、この先の作りがまちがっている。

<dl>の中身には<dt><dd>が必要

AAのタグをかいていたようなのだがこれが間違っている部分。

自分でも大丈夫か？って書いているように、
<dl>の中身には<dt><dd>が必要です。

正しくは<p>である。

でもそれだとできなかったって書いてある。
それは、きっとエントリーを書いているときの改行が原因。

改行がpになっている

僕ははてなユーザーではないので、
改行がデフォルトでどうなるのかはわからないが、
今回できなかったと書かれているのは、
改行が<p>になっていたからである。

この<p>が改行になっているために、
行間に隙間が生じてしまっているのである。

<p>のタグはCSSでリセットをしていないと、 もともと隙間ができるタグだからだ。

これじゃバラバラ事件も起こるよね（笑）

ではどうしたらいいか？

解決方法１：改行しない

改行をすると、自動的に<p>が入ってしまうのであれば、
自動的に<p>が入らないように、必要部分は改行しないで書けばいい。

<p>　   　∩<br>(　ﾟ∀ﾟ)彡　<br>　⊂彡</p>

<br />自体が改行を表してくれているので、
文章を書いているときにの改行が必要ない。

これが一つ目の方法。

解決方法２：CSSでpをリセットする。

解決方法のその２として、CSSでpのデフォルトを変更する方法がある。

p {
    margin:0;
    padding:0;
    line-height:1.0;
}

そのサイトのCSSの状況にもよって変化させなければならないので、
この方法は少し面倒かもしれない。

でも、間違ったタグ付けを覚えるよりは、これらのどちらかをしたほうがいい。

一度、出来上がったソース自体を見てみるといい。
<dl>と<br />で作ったのも、<p>が入っているのに気づくはず。

XHTMLで覚えた方がいい

あとHTMLを勉強しているのであれば、
HTMLを覚えるよりも、XHTMLを覚えた方がいい。

今回の亀ちゃんのはてなブログはHTMLで記述されていたけど、
今後勉強をするのであれば、XHTMLを覚えたほうがいい。

「XHTMLの書き方と留意点」

例えを挙げてみよう

画像とかのイメージを入れるときに、imgを使うのだけど、
<img>も、<img ＊＊＊ />になるし、
<br>も<br />と書くようになる。

あとはDOCTYPE宣言の違いとかもあるけど、それはおいおい勉強してください。

HTMLにしろXHTMLにしろ、それぞれタグの付け方にも
ルールが存在するので、今後はそれも合わせて勉強したらいいと思う。

インライン要素とかブロック要素とかもね。