超現場ブログ

Technique,Design and Events

名古屋栄校 気持ちの悪いHTML・CSS

Twitter Facebook Google+ はてブ

名古屋栄校 気持ちの悪いHTML・CSS

名古屋栄校でございます。

先日とあるバナー広告を見つけました。
その内容は、このCSSを見て気持ち悪いと思った人は転職だ!
みたいなものでした。
うろ覚えですが、大体こんな感じです。

.hoge {
color: #f00;
font-size: 18px;
font-weight: bold;
text-align: center;
color: #000;
}

みなさんはお気づきでしょうか?
気づかなかった方は、ぜひWEB塾で勉強して下さい。

気持ちの悪いHTML

さて、上記のCSSと同様にhtmlでも、たまに気持ちの悪いソースを見かけることがあります。
つい最近もハマったので今回の投稿テーマと致しました。
まずはサンプルのソースコードを見て下さい。
spanタグの中身が無い等、色々気になるところはありますが、ひとつ致命的な欠陥があります。

その前に、ひとつクイズです。このソースコードのhtmlバージョンは何でしょうか?

<div id="content" class="clearfix">
<div id="side">
<ul id="sideNav">
<li class="selected"><a href="http://hoge.net/">TOP<span></span></a></li>
<li><a href="http://hoge.net/Menu1.php">メニュー1<span></span></a></li>
<li><a href="http://hoge.net/Menu2.php">メニュー2<span></span></a></li>
<li><a href="http://hoge.net/Menu3.php">メニュー3<span></span></a></li>
</ul>
<p class="sideBtn"><a href="http://hoge.net/img/hoge.pdf" target="_blank" style="color:#204fa2;">PDFファイル<span></span></a></p>
<p class="sideBtn"><a href="mailto:info@hoge.net">お問い合わせはこちら<span></span></a></p>
<p class="info">インフォメーション</p>
<p class="banner"><a href="http://hogehoge.com/" target="_blank"><img src="img/banner/banner.png" alt="バナー"></a></p>
</div>
<div id="main">
<ul class="pkz">
<li class="home"><a href="http://hoge.net/">トップページ</a></li>
<li>ニュース一覧</li>
<li>記事のタイトル</li>
</ul>
<section id="primary" class="site-content">
<div id="content" role="main">
<h2>記事のタイトル</h2>
<div class="post">
<!--(以下略)-->

htmlバージョン分かりましたでしょうか?
分からない方は、ぜひWEB塾で勉強して下さい。

致命的な欠陥について、このまま見てすぐ分かる人は、お仕事手伝っていただきたいです(笑

ここでヒント

より分かりやすくするために、セクショニング要素だけにしてみます。

<div id="content" class="clearfix">
<div id="side">
</div>
<div id="main">
<section id="primary" class="site-content">
<div id="content" role="main">
<div class="post">
<!--(以下略)-->

どうでしょう、わかりますか?
非常に気持ちの悪いhtmlです。
これにCSSを当てると、レイアウトが崩れたり、意図したデザインになりません。

それでは正解です

欠陥箇所は、contentというid名が2つ存在するところです。
contentという親要素内に、sideとmainがあり、mainの中にまたcontentが出てきます。
例えば、

#content {
width: 600px;
}

とした場合、sideとmainが並ぶとして、親要素が600px、sideが仮に200pxとすると、mainの中身も600pxとなってしまい、親要素からはみ出してしまいます。

id属性は、固有識別子でなくてはならない。
簡単に言うと、html内で1箇所に特定できる名前、つまりhtmlの中に1個しかダメということです。
id属性は、Javascriptで使用されたり、ページ内リンクに使われたりします。

ちなみに・・・

サンプルソースコードのhtmlバージョンはHTML5です。
sectionタグが記述されているので判断できます。

ご質問・ご相談の方はこちら

ご質問・ご相談ですか?

どんなことでもお気軽にご相談ください。

ご質問・ご相談はこちら

Copyright © 超現場主義 All rights reserved.