俺HTMLテンプレート
Web系の技術をいろいろと勉強し始めてから2週間くらいが立ちました。CSSのセレクタの仕様など、そもそも理解していなかった部分も多かったのですが、ようやくページの構造くらいは理解できそうな程度には、知識が追い付いてきました。最近勉強になったのは以下のような感じです。
- CSSのグループセレクタと子孫セレクタの仕様
- CSSの疑似属性の仕様（呼び名を知らなかった）
- header、footer、sectionといったHTMLのタグが増えてる
前回も書いた通り、知識が10年前のものだったため、headerタグなどは新知識なのですが、CSSの仕様についても何となくこういう時はこうする…といった感じで使っていたため、しっかりと理解していませんでした。ふむ、勉強になった。
さて、表題の通り、ここまで勉強した内容で、HTMLのテンプレートを作っていこうと思います。今のところ、以下のような感じです。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 |
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title> Title </title> <!-- CSSのリンク --> <link href="style.css" rel="stylesheet" media="all"> </head> <body> <header id="gheader"> <h1 id="logo"></h1> <nav id="gnavi"></nav> </header> <div id="contents"> <main id="main"> <section id="content1"> <!-- メインのコンテンツ --> </section> </main> </div> <!-- サイドバーなど --> <footer id="gfooter"> <small>Copyright © </small> <nav></nav> </footer> <!-- javascriptの読み込み --> <script src="https://www.promisejs.org/polyfills/promise-7.0.4.min.js"></script> <script src="javascript.js"></script> </body> </html> |
サイドバーなどは、きっと<main>外に<nav>なり<aside>で入れるのでしょうが、場合のよると思うので、テンプレートとしてはこんな感じです。JavaScriptは</body>直前でがいいらしいとのことなので、ここに入れています。
次は、floatを使ったレイアウトを覚えていこうと思います。