vanillaice (Akira)

vanillaice (Akira)

以前にも書いたような気がしますが、いまだにとってもよく見かけますので改めて記しておきます。

私が制作しているテンプレートは全て html5 です。
html4時代の定石は一旦破棄してくださいね (´・ω・`) なにせ 4 と 5 では構文ルールが違います

<strong> は文字を太くしたい時に使う?

トンデモ勘違い (´・ω・`)
strong というのは 文章の意味的強調 に使用します。

決して見た目の強調ではありません
意味的強調、つまり「重要性」を示すものです

strongを利用したテキストは太くなりますが、これはあくまでも二次的な結果。
何故太くなるかと言うと、各社ブラウザがそういう見た目をデフォルトにしているからです。
意味的強調ですから 見た目が太かろうが細かろうが、定義には一切関係ありません
htmlというのは、定義・意味づけ であって、見た目ではないんです (´・ω・`)
細くて小さめの文字であっても <strong></strong> に挟まれた内容は、検索ロボットが「非常に重要な内容である」と判断します。

html4時代からそもそも「太字」ではなく「強調」だったのですが。
見た目に惑わされて
strong = 太字
という感じになっちゃってましたね。
html5では 4時代よりもさらに「本旨となり得る」ほどの強い重要性を意味しますので、
サイドメニューのプラグインのタイトルに利用したり、記事内文章で安易に使用したりするのは避けましょう。
特にアフィリエイトをされている方はstrong乱用要注意です。
もちろんSEOに気を配っている方全員要注意ではあるけれども(笑)

太字にするには

<span style="font-weight: bold;">太くしたいテキスト</span>

あるいは、文字数多くてめんどくせーや (;`ー´)o な方は

<b>太くしたいテキスト</b>

でもOKです。
前者がhtmlのstyle属性を利用し、html要素に直接CSSを指定する インラインCSS
後者はhtmlタグで、strongのように「意味的強調」を持たない「単なる見た目の太字」を意味します。

strongはSEO効果を高めるために正しく使う、というよりも
スパム対象にならない対策
だと思って取り組んだ方が良いと思います。
実際Googleは strongタグをあまり重要視してはいません。

ちなみに html5 では、strong内にstrongを入れ子できるようになりました。

<strong>次回の講義は3月3日に行われます。<strong>欠席した場合は単位の取得が不可となります。</strong></strong>

重要性を示す内容の、さらに重要な部分をマークアップ。
こちらも使い所には注意しましょう。

良くない使い方としては以下のような 見出し内での強調です

<h1>次回の講義は3月3日に行われます。<strong>欠席した場合は単位の取得が不可となります。</strong></h1>

h自体が重要性の高いものですので、過度な強調を行うとスパムではないかと疑われます。
Google botが優秀なのは、いろいろと疑ってかかるからです(笑)

<font> で文字サイズや色を変更?

既に廃止されとりやす (´・ω・`)
ブラウザには「後方互換の原則」というのがありますので、廃止要素であってもいきなり見られなくなる・反映されなくなる、といったことは起こりにくいですが、
いずれ使えなくするから廃止にする わけです。
じゃなきゃわざわざ廃止指定する意味が無い。
ですからもうそろそろ(もういい加減)使わない方が良いですね。

例) ABCDEFG abcdefg

NG

<font face="Impact" size="4" color="purple">ABCDEFG abcdefg</font>

OK

<span style="font-family: 'Impact'; font-size: 18px; color: purple;">ABCDEFG abcdefg</span>

<blockquote> でインデント?

わー ( ̄∀ ̄;)
これはさすがにもう絶滅種だとは思いますけれど。
blockquote(読み方: ぶろっくくおーと)は字下げに使うものではありません。 quoteの英単語が意味する通り 引用 です。
なんで「インデント」という勘違いをする方が居るかというと、strongタグ同様ブラウザの初期値がそうなってるから。
引用ですからテキストをインデントしたいためだけに利用してしまうと、自分の書いた文章なのに「誰かの書いたものを使ってる」という意味に取られてしまいますよ (´・ω・`)

空要素の末尾にはスラッシュ

これもまた勘違いです。

htmlの基本は「開始タグ」と「終了タグ」のワンセットです。

例)

<p>あいうえお</p>

赤い部分が「開始タグ」緑の部分が「終了タグ」です。
ところがhtml要素の中には 空要素 といって、終了タグを持たない ものが存在します。
代表的なのが
画像の img そして 改行の br
で、こうして書く方が多い ↓

画像

<img src="画像アドレス" alt="" />

改行

あいうえお<br />かきくけこ<br />さしすせそ

えっと。緑スラッシュ(手前の半角スペース含む)、これ要らないです (´・ω・`)
空要素末尾のスラッシュが必須なのは xhtml というマークアップ言語であって。
html5はxhtmlではありませんから必要ありません。
xhtmlでは必須ですから書かないとエラーです。
html5では 書くとエラーとまでは言われませんが非推奨 の指摘を受けます。
まぁ、書かない方が良いですね。だってxhtmlじゃないし (´・ω・`)

入れ子のルール

入れ子(ネスティング) というのは、あるhtml要素の「中」に別のhtml要素が挟まれている状態を指します。
こういうの ↓

<div>
  <p>あいうえお</p>
</div>

div が「親」、p が「子」という関係です。
この入れ子にはルールがあります。
よく見かけるルール違反は以下のようなもの。

NG: p要素の中に別のブロックレベル要素

<p>
  <div>あいうえお</div>
</p>

pの開始タグと終了タグの間に div要素。
これはダメです。

NG: p要素の中にさらにp要素

<p>
  <p>あいうえお</p>
</p>

こちらもダメ。

・ p自体は ブロックレベル要素。
・ pの中に入れ子できるのは インライン要素 のみ。ブロックレベル要素を入れてはいけない。

ブロックレベル要素の代表的なもの
div, section, article, p, h など

インライン要素の代表的なもの
a, img, span, strong など

p要素の入れ子ミスは レイアウトに大きな影響を及ぼします ので注意が必要です。

NG: html4テンプレなのに ブロックレベル要素をaで囲っている

<a href="アドレス" target="_blank">
  <div>あいうえお</div>
</a>

・ a自体は インライン要素。
・ aの中に ブロックレベル要素 を入れ子できるのは html5 のみ。

そして a要素のあらゆるミス(閉じ忘れなど含む)もレイアウトに大きな影響を及ぼします のでこちらも要注意。

属性同士の間の半角スペース

これはhtmlのバージョンに限らずよくあるミスなのですが。
html 属性 というのはこういったものです ↓

<a href="遷移先アドレス" target="_blank"><img src="画像アドレス" alt=""></a>

緑の部分を 属性名 と言います。
イコールに続いてダブルクォーテーションに挟まれたものを 属性値 と言います。
属性名+属性値 = 属性
この属性間には必ず半角スペースが必要です。
くっついてる方をよく見かけます。

NG: 属性間にスペースなし

<a href="遷移先アドレス"target="_blank"><img src="画像アドレス" alt=""></a>

NG: 属性間に全角スペース

<a href="遷移先アドレス" target="_blank"><img src="画像アドレス" alt=""></a>

これらも比較的大きなミスですので注意。

まとめ

なんかレイアウトがおかしいな〜
と思った時は以下のページを参考に。

テンプレートのレイアウトが崩れる原因 - カスタマイズ

テンプレートのレイアウトがおかしい時・サイドバーが何故か途中からメインコンテンツの下に回り込んでしまう・コンテンツを分けるアウトライン(外罫)が複数の記事にまたがる(一記事単位にならない)などなどこういった時にまずテンプレートの構造を疑いたくなりますがその多くはテンプレートソースに起因するものではなく記事の書き方 あるいは サイドバーに設置したプラグイン に問題がある場合がほとんどですもとよりレイアウト...

そしてソース全体のバリデート(整合性検査)は以下のサイトで (html, CSSの総本山 W3Cです)

Markup Validation Service

More option > Show source にチェックを入れるとミスコード該当箇所を教えてくれます。

ここから追記 2017.2.12


W3C validateは全文英語ですので、でよく見られるエラー (error) や注意警告 (warning) について記しておきます。
対策についてはスタイルシートに書き込むのではなく、記事内で処理する方法をご紹介します。
査定内容は全て html5 とします。

代表的なエラー

An img element must have an alt attribute, except under certain conditions.

「特定の条件下を除き、img要素にはalt属性を付ける必要があります。」

特定の条件下、というのは画像が <figure> 要素の子要素になっており、かつ、<figcaption> が与えられている場合です。

対策

imgにaltを追加。

X

<img src="画像アドレス">

<img src="画像アドレス" alt="代替テキスト">

FC2の仕様

FC2ブログではサムネイルにaltがつきません。
これはどうしようもありませんので諦める ←
JSでの後付altではダメで、変数出力段階で付加されていなければいけません。
サムネイルはどうしようもありませんので、せめて記事内の画像はしっかりとaltをつけておきたいところです。
検索エンジンは画像の見た目までは理解できませんので、altでもって画像の内容を伝えます。

The align attribute on the div element is obsolete.

「div要素にあるalign属性は廃止されました。」

廃止ですから使わない。

対策

CSSの text-align を使用します。

X

<div aling="center">あいうえお</div>

<div style="text-align: center;">あいうえお</div>

The font element is obsolete.

「font要素は廃止されました。」

廃止ですから使わない。

対策

一概には言えませんが、概ねCSSの span要素 を使用します。

X

<font face="Impact" size="4" color="white">あいうえお</font>

<span style="font-family: 'Impact'; font-size: 18px; color: white;">あいうえお</span>

No space between attributes.

「属性の間に半角スペースがありません。」

属性間には必ず半角スペースが必要です。
初心者に非常によく見られるミスです。
最も多いのが別タブでリンクを開く target blank の前。

対策

半角スペース挿入

X

<a href="遷移先アドレス"target="_blank">あいうえお</a>

<a href="遷移先アドレス" target="_blank">あいうえお</a>

End tag div seen, but there were open elements.

「divの終了タグがありますが、中にまだ開いたままの要素があります。」

これ絶対直さないとレイアウト崩れの原因になります
ある開始タグとその終了タグの中に挟まれている要素は全て完結していなければいけません。
つまり中身の要素も、開始タグ〜終了タグ で結ばれていなければいけません。

対策

各要素の開始タグ・終了タグの位置を確認。

X

<div>あいうえお<div></div>

<div>あいうえお</div>

赤いdiv開始タグは後続要素と繋がっているかもしれませんので、位置の移動なのか削除なのかはケースバイケースです。
このエラーが見られた際、場合によってはここから以降のソース内容全てを精査する必要が生じ、かなり厄介。
なにせ修正しないことには以降の内容全てが狂ってしまいます。
もちろん対象は div とは限りません。
a だったり strong だったり section だったりと色々ですが、ともかく「位置」そして「数」が重要。

End tag for body seen, but there were unclosed elements.

「bodyの終了タグがありますが、中にまだ閉じられていない要素が残っています。」

ひとつ上のエラーが一度発生するとズルズルと後を引いて、最終的にここにたどり着きます。
bodyの終了というのはページ内要素全ての終了を意味しますが、エラー発生地点からこの終点までの間に大量の不整合が発生。
頑張って直します。

対策

各要素の開始タグ・終了タグの位置を確認。

Stray end tag div.

「divの終了タグがはぐれています。」

つまり「終了タグの位置がおかしいよ」という指摘です。
こちらも重大なエラーですので、修正しないとレイアウトが狂います。
単発で発生しているかもしれないし、もしかしたらこれ以前のエラーに引っ張られて発生しているかもしれません。
(一つ上とそのもう一つ上で記したエラーと関わりがあるかもしれません)

対策

各要素の開始タグ・終了タグの位置を確認。

ここまでが「エラー」の代表例。
カスタマイズされる方によく起こり得る内容です。
以降は「エラー (修正必須)」とまではいかないものの、「ウォーニング (注意勧告)」に該当する内容。

代表的なウォーニング

The border attribute is obsolete.

「border属性は廃止されました。」

廃止ですから使わない。

対策

CSSのborderプロパティに変更。
テンプレートによってはリセットCSSで画像(img)の枠(border)を初めから消してあることもあります。

X

<img src="画像アドレス" alt="代替テキスト" border="0">

<img src="画像アドレス" alt="代替テキスト" style="border: 0;">

The language attribute on the script element is obsolete.

「script要素のlanguage属性は廃止されました。」

廃止ですから使わない。

対策

language属性は廃止、そして script要素のtype属性の初期値は text/javascript ですからわざわざ書く必要はありません。

X

<script language="javascript" type="text/javascript">内容</script>

<script>内容</script>
FC2の仕様

FC2ブログサイドで挿入するスクリプトコードは全て警告を受ける形になってます。
FC2はhtml5テンプレートだけを抱えてるわけではなく、html4のテンプレもまだまだありますので敢えて変更していないと思われます。

関連記事

Comments 2

There are no comments yet.
FUKU  
とても参考になります

半独学でHTMLやCSSを身に着けてきた自分だったので、いろいろ誤認識もあり、この記事の内容はとても勉強になりました。ちょくちょく見返して自分のサイトも間違えていないか確認させていただきます。

2017/03/09 (Thu) 13:55 | EDIT | REPLY |   
Akira  
To FUKUさん

こんにちは。
ありがとうございます
その節はご面倒おかけしました(Libertyテンプレ) (*_ _)

html4時代から長くお勉強をされてきた方ほど戸惑いは大きいと思います。
なにせ一旦「セオリー破棄」という工程を踏まなければならず(笑)
1年経つとwebも随分と変わりますね。
私も日々お勉強でございます ^^;

2017/03/09 (Thu) 17:36 | EDIT | REPLY |   

Leave a reply

テンプレートに関するご質問・不具合のご報告の際はご自身のブログアドレス記載必須です
ご質問の前に必ずお読みください ↓
FC2テンプレート ご利用時のお願い
該当テンプレートの専用記事にお願いします。無関係な記事でのコメントはお控えください。
テンプレートカテゴリ