THE HAM MEDIA BLOG

「コンピューターおねえちゃん」の勉強HTMLがまだまだ酷すぎる件について

Clip to Evernote このエントリーをはてなブックマークに追加
カテゴリ:
HTML
タグ:
HTML
blog
はてな
CSS

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

コンピューターおねえちゃん

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

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

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

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

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

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

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

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

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

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

コンピューターおねえちゃん

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

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

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

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

コンピューターおねえちゃん

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

正しくは<p>である。

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

改行がpになっている

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

コンピューターおねえちゃん

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

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

これじゃバラバラ事件も起こるよね(笑)

ではどうしたらいいか?

解決方法1:改行しない

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

   ∩
( ゚∀゚)彡 
 ⊂彡

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

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

これが一つ目の方法。

解決方法2:CSSでpをリセットする。

解決方法のその2として、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にしろ、それぞれタグの付け方にも
ルールが存在するので、今後はそれも合わせて勉強したらいいと思う。

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

この記事へのコメント
あ、ありがとうございます・・・!
なんかいろいろびっくりしました、
まず私のことを覚えてくれてたことに、
お勉強ブログを知っていたことに、
そしてこんな懇切丁寧に教えて頂けたことに!!
しっかり読んで習得させて頂きますー!
Posted by at 2008年06月10日
>亀ちゃん
覚えていますよー。屋形船では近くに居ましたし。
ブログもずっと読み続けていますもの。
お勉強ブログを知ったのは、たまたまですけどね。

僕もまだまだ勉強している身なので、
お互いがんばりましょー!!
Posted by ハム at 2008年06月11日
コメントを書く
お名前: [必須入力]

メールアドレス: [必須入力]

ホームページアドレス:

コメント: [必須入力]

認証コード: [必須入力]


※画像の中の文字を半角で入力してください。

この記事へのトラックバック

トップに戻る

×

この広告は1年以上新しい記事の投稿がないブログに表示されております。