tech memo in.: html5を簡単に作成

前回と前々回の流れで何かやりたいことがあった分けでもないけれども、
面白そうだったので、HTML5について触ってみた。
といってもテンプレート的な物までしかできなかったのだが。

htmlソース

以下が作成したhtmlのソースである。

index.html

<!DOCTYPE html>
<html lang="ja"><head>
    <meta name="description" content="site_description">
    <meta name="keywords" content="site_keywords"> 
    <meta charaset="UTF-8">
    <title>test webpage</title>
    <link rel="stylesheet" href="import.css">
    <!--    <script src="pass"></script> -->
    <!--[if lte IE 8]>
    <script type="text/javascript" src="<?php bloginfo('template_url'); ?>/js/html5.js"></script>
    <![endif]--> 
</head><body>
    <header>head
        <hgroup>
            hgroup1
            hgroup2
        </hgroup>
    </header>
    <section>section</section>
    <nav>nav
    <ul>
        <li>1th</li>
        <li>2th</li>
        <li>3th</li>
        <li>4th</li>
    </ul>
    </nav>
    <footer>footer</footer>
</body></html>

HTML5は使いやすいようにに作られているという感じで、サクサク作れた。

htmlはよくある、2colomにheaderとfooterが付いている形なのだが、
cssを作っている時にpxやら%やらの大きさで悩んでいた結果、文字を基準にしたemにして落ち着いた。

import.cssを読み込むとbase.cssとlayout.cssの2つのcssファイルを読み込むことができる。

import.css

@charset "UTF-8";

@import url(base.css);
@import url(layout.css);

layout.cssはhtmlのスタイルを変更している。

layout.css

body{
    width:74em;
    margin:0 auto;
    text-align:center;
    background:#000;
    -webkit-box-sizing: border-box;　/* Safari,Google Chrome用 */  
    -moz-box-sizing: border-box;　/* Firefox用 */  
    -ms-box-sizing: border-box;　/* Internet Explorer 8用 */  
    box-sizing: border-box;　/* Opera用 */  
}
header,section,nav,footer{
    display:block;
    background:#FFF;
    padding:2em;
    margin:1em;
}
header{
    min-height:6em;
}
section,nav{
    min-height:30em;
}
section{
    float:right;
    width:40em;
}
nav{
    float:right;
    width:20em;
}
footer{
    clear:both !important;
    min-height:3em;
}

あと肝心のcss3は
-webkit-box-sizing: border-box;　/* Safari,Google Chrome用 */
-moz-box-sizing: border-box;　/* Firefox用 */
-ms-box-sizing: border-box;　/* Internet Explorer 8用 */
box-sizing: border-box;　/* Opera用 */
ここだけで、padding、borderの値の適用方法が変わるものである。
あと、ここまでやって気づいたが,
css3にはbox系プロパティ？正確な名前は分からないが、簡単に2colomや3colomのliquidな物が作れるように
なっているらしく良さそうな感じ、使うかもしれない。

いちようHTML5のテンプレはできたし問題はないはず。
がHTML5の動的な感じのタグはまったく使ってないため、そのうち使いたい。

参考リンク
Web標準仕様日本語訳一覧

CSS3 でのレイアウトで使える box 系プロパティのまとめ

多摩美 - メディアリテラシー 2010::HTML5+CSS3 入門

tech memo in.

ページ

2011-05-27

html5を簡単に作成

htmlソース

0 件のコメント:

コメントを投稿

ラベル