名古屋栄校でございます。
先日とあるバナー広告を見つけました。
その内容は、このCSSを見て気持ち悪いと思った人は転職だ！
みたいなものでした。
うろ覚えですが、大体こんな感じです。
.hoge {
color: #f00;
font-size: 18px;
font-weight: bold;
text-align: center;
color: #000;
}
みなさんはお気づきでしょうか？
気づかなかった方は、ぜひAkrosで勉強して下さい。
気持ちの悪いHTML
さて、上記のCSSと同様にhtmlでも、たまに気持ちの悪いソースを見かけることがあります。
つい最近もハマったので今回の投稿テーマと致しました。
まずはサンプルのソースコードを見て下さい。
spanタグの中身が無い等、色々気になるところはありますが、ひとつ致命的な欠陥があります。
その前に、ひとつクイズです。このソースコードのhtmlバージョンは何でしょうか？
<div id="content" class="clearfix"> <div id="side"> <ul id="sideNav"> <li class="selected"><a href="http://hoge.net/">ＴＯＰ<span></span></a></li> <li><a href="http://hoge.net/Menu1.php">メニュー１<span></span></a></li> <li><a href="http://hoge.net/Menu2.php">メニュー２<span></span></a></li> <li><a href="http://hoge.net/Menu3.php">メニュー３<span></span></a></li> </ul> <p class="sideBtn"><a href="http://hoge.net/img/hoge.pdf" target="_blank" style="color:#204fa2;">ＰＤＦファイル<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バージョン分かりましたでしょうか？
分からない方は、ぜひAkrosで勉強して下さい。
致命的な欠陥について、このまま見てすぐ分かる人は、お仕事手伝っていただきたいです（笑
ここでヒント
より分かりやすくするために、セクショニング要素だけにしてみます。
<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名が２つ存在するところです。
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タグが記述されているので判断できます。
