麒麟浪漫

もっと早く知りたかった。brタグの連打やcenterタグの使用など、HTMLタグの過ち

文章や画像を真ん中寄せにするためにcenterタグを使っていたり、余白を作るためにbrタグの連打をしていたりしませんか?

それ、間違いです。

 

もっと早く知りたかったという思いがあるので、私が犯していた過ちを個人的な備忘録も兼ねつつ紹介します。

 

前提として、私は10年以上前にHTMLのみでサイトを作って運営していたという経緯があり、いまだにその感覚のままだったせいで犯してしまった過ちが多かったです。

 

 

brタグの連打

<br>

brタグを2つ以上連続して使うのはルール違反なのだそうです。

余白をとるためにはpタグを使うか、CSSで padding や margin を指定するのが正解。

 

私は余白をとるためにbrタグをガンガン使ってしまっていました。

現在、300記事以上あるすべての記事を手直しするのは面倒なので、このままのやり方でやってしまおうかとも考えています。

そうすると必然的に、間違った書き方の記事が今後もどんどん増えていくのですけれどね…。

 

いまのところ記事に自動挿入している部分のみ、CSSで余白をとるように修正を加えました。

 

Shift+Enter と Enter の使い分け

そもそも Shift+Enter と Enter の違いを知ったのが一年前のこと。

 

はてなブログでは、Shift+Enter は段落内での改行、Enter は改段落(新たな段落へ)です。

私は Enter で行う改行しか知らなかったので、すべての改行は Enter のみで行っていました。

 

そうすると何が起こるかというと、一文一文がすべて段落を表すpタグで囲われることになります。

CSSにはpタグに関する余白がデフォルトで設定されていたので、文と文の間の余白が自分が想定しているよりも大きく表示されてしまうのです。

 

いまの私は文と文の間を広めにとったデザインでもいいな、と思えるのですが、ブログ設立当時はその大きすぎる余白がイヤでした。

さらにpタグが段落を表すということも知らなかったので、「Enter を押して改行しただけなのに、どうしてこんなに余白ができるのか分からない」という状態で、ググって出てきた以下のソースコードをCSSにコピペしました。

 

.entry-content p { margin:0}

 

このソースコードは、pタグの margin を 0 にする、というものです。

多分これを使っている人の大半は、過去の私のように Shift+Enter と Enter の使い分けができておらず、pタグの意味もよく分かっていない人だと思います。

 

このソースコードを使っているせいで、今さら Shift+Enter メインの書き方に変えるわけにもいきません。

過去に戻れるのなら、Shift+Enter と Enter をしっかり使い分けて記事を書きたいです。

 

 

(持論)文章中での2,3回の改行ならオッケー

どうしても文章中に余白を通常より多くとりたい、ということがあります。

 

これは持論なのですが、その際はpタグ内であればbrタグを2,3回連続で使って余白をとってもかまわないのではないかと思っています。

 

<p>文章1<br>

<br></p>

<p>文章2</p>

余白も雰囲気という名の文章である、という考え方です。

 

人によっては、以下のような余白のとりかたがアリだという人もいます。

<p>文章1</p>

<p>(半角スペース)</p>

<p>文章2</p>

はてなブログでは Enter のみで改行して余白をつくると自動的にこうなるので、はてなブログユーザーはbrタグの連打よりもこちらのほうが多いでしょう。

ただし「段落のなかに何もない状態」になるので、こちらもあまりおすすめはできません。

 

やはりCSSでなんとかできる場合は、CSSでなんとかしましょう。

例えば関連記事用の囲い枠の上下の余白なんかは、記事編集画面で毎回brタグなどを使って余白をつくるよりも、CSSで囲い枠の margin を大きめに指定してしまったほうが簡単だしルールにも則っています。

 

 

centerタグの使用

<center>文章など</center>

centerタグは現行のHTML5では廃止され、現在は使用が推奨されていないようです。

 

  1. <div style="text-align:center">文章など</div>
  2. <p style="text-align:center">文章など</p>

centerタグを使っていた部分は上記のように修正。

 

幸い、いくつかの記事と自動挿入部分でしか使っていなかったので修正作業はラクでした。

 

 

画像にalt属性が入っていない

imgタグにalt属性は必須です。

alt属性は代替テキストを指定するもので、画像が表示されなかった場合に代替テキストを表示させたり、検索エンジンに情報を正しく伝えたりするために必要です。

 

「alt属性」なんて全然入れてない! やばい!

と思いましたが、「HTML編集」で見てみたら自動的に入っていました。

 

ただし、 中身はこんなのですけどね。

alt="f:id:(はてなID):(日付など):plain"

全然画像の内容を説明しておらず代替テキストとしての意味を為していませんが、これでいいのでしょうか。

一応形としてはalt属性が入っているからいいのかな。

 

すべての記事の画像を修正していくのは面倒なので、このalt属性に対しても、記事に自動挿入しているものや、サイドバーの画像などに対してのみ修正を加えました。

 

今後投稿する記事の画像にはalt属性をきちんと記入する予定です。

 

 

おわりに

HTMLは構造を表し、装飾はすべてCSSで行う。

これが基本です。

 

最近HTML&CSSに関する本を読んで、これまでただコピペして使っていたものの意味が理解できるようになりました。

コピペで簡単におしゃれなデザインを作れるのは便利でもありますが、よく分からないままでやってしまうので危険でもありますね。

 

centerタグや alt属性はともかく、過去の全ての記事の改行を修正するのは面倒なので、今後もすべての改行を Enter のみで行って一文一文をpタグで囲わせる方法で書いていくと思います。

余白も Enter で挿入。

SEO的には良くないけれど、人の目で見ると特に問題はないので妥協します。

 

 

▼HTML&CSS初心者に非常におすすめの本です。

HTML5&CSS3デザインブック (ステップバイステップ形式でマスターできる)

HTML5&CSS3デザインブック (ステップバイステップ形式でマスターできる)