html５＋css3+javascript
今回は自分なりに考えたまず大本となる骨組みのhtml5をまず組んでみました。
時間で２時間半ぐらいかかったからもっと早くうてるようにします。
ソースコード↓↓↓
<!DOCTYPE HTML><!--html5ですと伝えてる--> <html lang="ja"><!--日本語だけどなにか？--> <head><!--ここからヘッダだけど--> <meta charset="UTF-8"><!--え？文字エンコーディング指定しないの？--> <title>HTML5でのレイアウト</title><!--ホームページタイトル。上のやつ--> <link rel="stylesheet" href="css/style.css"><!--これはまだ秘密--> <script src="js/javascript"></script><!--これもまだ早いわ！--> </head><!--ここまでがヘッダだけど？--> <body><!--ボディの中だぜえー--> <hrader><!--headerから始まるぜ--> <hgroup><!--タイトルもまとめちゃう？--> <h1>HTML5でレイアウト</h1><!--一番の大見出し--> <h2>始まる新たな世界へ飛び出そう。。。<h2><!--サブタイトル的な、、、--> </hgroup><!--タイトルまとめ終了--> <nav><!--ヘッダーのナビゲーション部分開始だぜ--> <div class="inner"><!--中箱作ろうか--> <ul><!--順番が無ければ使っていいよ。--> <li><a href="#"></a></li><!--<li>で項目ごとにわかれ--> <li><a href="#"></a></li><!--<a href="">でいろんなとこにいけちゃう。--> <li><a href="#"></a></li><!--"#"はどこにも行かせないよって事--> <li><a href="#"></a></li> <li><a href="#"></a></li> </ul><!--順番なしはここまで--> <div><!--中箱はここまで--> </nav><!--ヘッダーのナビここまで--> </header><!--headerおわるぜー--> <div id="content"><!--コンテントの始まり--> <section id="main"><!--セクションメインここから〜--> <article class="part1"><!--アーティカル1--> <h1>roots</h1> <div> <p> 本文を、、、 </p> </div> </article><!--アーティカル1--> <article class="part2"><!--アーティカル2--> <h1>rock</h1> <div> <p> もしかしてここに、、、 </p> </div> </article><!--アーティカル2--> <article class="part3"><!--アーティカル3--> <h1>reggae</h1> <div> <p> いれちゃうよ。。。 </p> </div> </article><!--アーティカル3--> </section><!--セクションメインここまで〜--> <aside id="side"> <article class="side-box1"><!--side-box1--> <h1>site title</h1> <div class="side-content"> <h3>shop 情報</h3> <p> 本文入れちゃえば。。。 </p> </div> </article><!--side-box1--> <article class="side-box2"><!--side-box2--> <h1>shop addres</h1> <div class="side-content"> <ul> <li><a href="#">link number1</a></li> <li><a href="#">link number2</a></li> </ul> </div> </article><!--side-box2--> <article class="side-box3"><!--side-box3--> <h1>site title</h1> <div class="side-content"> <h3>shop 情報</h3> <p> 本文入れちゃえば。。。 </p> </div> </article><!--side-box3--> <article class="side-box4"><!--side-box4--> <h1>site title</h1> <div class="side-content"> <ul> <li><a href="#"></a>menu</li> <li><a href="#"></a>home</li> <li><a href="#"></a>food</li> <li><a href="#"></a>drink</li> </ul> </div> </article><!--side-box4--> </aside><!--あ、サイド終わり--> </div><!--コンテント終了--> <footer><!--フッターの始まり--> <div class="footer-links"> <ul> <li><a href="#"></a></li> <li><a href="#"></a></li> <li><a href="#"></a></li> </ul> </div> <small>ここはコピーライトだぜ！！</small> </footer><!--フッターの終わり--> </body><!--ボディの終わり--> </html><!--ここですべての終わり-->
今日はここまでです。
この骨組みを使い明日はcssでリセットをしたい思います。
