名古屋栄校でございます。
先日とあるバナー広告を見つけました。
その内容は、このCSSを見て気持ち悪いと思った人は転職だ！
みたいなものでした。
うろ覚えですが、大体こんな感じです。
color: #f00;
font-size: 18px;
font-weight: bold;
text-align: center;
color: #000;
}
[/css]
みなさんはお気づきでしょうか？
気づかなかった方は、ぜひAkrosで勉強して下さい。
気持ちの悪いHTML
さて、上記のCSSと同様にhtmlでも、たまに気持ちの悪いソースを見かけることがあります。
つい最近もハマったので今回の投稿テーマと致しました。
まずはサンプルのソースコードを見て下さい。
spanタグの中身が無い等、色々気になるところはありますが、ひとつ致命的な欠陥があります。
その前に、ひとつクイズです。このソースコードのhtmlバージョンは何でしょうか？
[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]
htmlバージョン分かりましたでしょうか？
分からない方は、ぜひAkrosで勉強して下さい。
致命的な欠陥について、このまま見てすぐ分かる人は、お仕事手伝っていただきたいです（笑
ここでヒント
より分かりやすくするために、セクショニング要素だけにしてみます。
[html] <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]
どうでしょう、わかりますか？
非常に気持ちの悪いhtmlです。
これにCSSを当てると、レイアウトが崩れたり、意図したデザインになりません。
それでは正解です
欠陥箇所は、contentというid名が２つ存在するところです。
contentという親要素内に、sideとmainがあり、mainの中にまたcontentが出てきます。
例えば、
width: 600px;
}
[/css]
とした場合、sideとmainが並ぶとして、親要素が600px、sideが仮に200pxとすると、mainの中身も600pxとなってしまい、親要素からはみ出してしまいます。
id属性は、固有識別子でなくてはならない。
簡単に言うと、html内で1箇所に特定できる名前、つまりhtmlの中に1個しかダメということです。
id属性は、Javascriptで使用されたり、ページ内リンクに使われたりします。
ちなみに・・・
サンプルソースコードのhtmlバージョンはHTML5です。
sectionタグが記述されているので判断できます。
