HTML5 と CSS3 で Web 制作 : Step00 – ベースとなるマークアップ

phiary に引っ越しました. 毎日プログラミングやWebに関する情報を発信しています! RSS 登録してたまに覗いたり, tweet やハテブして拡散してもらえると幸いです.

Pocket

ここでは HTML5 でベース部分をマークアップします. 以前書いた, 「HTML5 でコーディングしてみよう!」にちょっと手を加えた形になっています.

SAMPLE

サンプルはこちら.

何もスタイルアップしていないので, ブラウザによるデフォルトのスタイルが適応されています.

CODE

この html は全ての step 共通で使用します.

<!DOCTYPE html>

<html>
    <head>
        <meta charset=UTF-8>
        <title>HTML5 Lecture</title>
        
        <style>
            @import url("style.css");
        
        </style>
    </head>
    
    <body>
        <header id="header">
            <hgroup>
                <h1>HTML5 Lecture</h1>
                <h2>
                    HTML5 Lecture, HTML5 Lecture, HTML5 Lecture, HTML5 Lecture
                </h2>
            </hgroup>
            <nav id="nav">
                <div class="inner">
                    <ul>
                        <li><a href="../step00">Base</a></li>
                        <li><a href="../step01">Reset</a></li>
                        <li><a href="../step02">Header</a></li>
                        <li><a href="../step03">Nav</a></li>
                        <li><a href="../step04">Contents</a></li>
                        <li><a href="../step05">Main Section</a></li>
                        <li><a href="../step06">Aside</a></li>
                        <li><a href="../step07">Footer</a></li>
                        <li><a href="#">WordPress</a></li>
                    </ul>
                </div>
            </nav>
        </header>
        
        <div id="contents">
            
            <section id="main">
                
                
                <article class="entry">
                    <h1>Elements</h1>
                    <div>
                        <p>
                            The purpose of this HTML is to help determine what default settings are with CSS and to make sure that all possible HTML Elements are included in this HTML so as to not miss any possible Elements when designing a site.
                        </p>
                    </div>
                </article>
                
                <article class="entry">
                    <h1>Paragraph</h1>
                    <div>
                        <p>
                            Lorem ipsum dolor sit amet, test link adipiscing elit. Nullam dignissim convallis est. Quisque aliquam. Donec faucibus. Nunc iaculis suscipit dui. Nam sit amet sem. Aliquam libero nisi, imperdiet at, tincidunt nec, gravida vehicula, nisl. Praesent mattis, massa quis luctus fermentum, turpis mi volutpat justo, eu volutpat enim diam eget metus. Maecenas ornare tortor. Donec sed tellus eget sapien fringilla nonummy. Mauris a ante. Suspendisse quam sem, consequat at, commodo vitae, feugiat in, nunc. Morbi imperdiet augue quis tellus.
                        </p>
                        
                        <p>
                            Lorem ipsum dolor sit amet, emphasis consectetuer adipiscing elit. Nullam dignissim convallis est. Quisque aliquam. Donec faucibus. Nunc iaculis suscipit dui. Nam sit amet sem. Aliquam libero nisi, imperdiet at, tincidunt nec, gravida vehicula, nisl. Praesent mattis, massa quis luctus fermentum, turpis mi volutpat justo, eu volutpat enim diam eget metus. Maecenas ornare tortor. Donec sed tellus eget sapien fringilla nonummy. Mauris a ante. Suspendisse quam sem, consequat at, commodo vitae, feugiat in, nunc. Morbi imperdiet augue quis tellus.
                        </p>
                    </div>
                </article>
                                
                
                <article class="entry">
                    <h1>Links</h1>
                    <div>
                        <p>
                            A few well known WordPress links: WordPress.org, the Codex and the download page.
                        </p>
                    </div>
                </article>
                
                <article class="entry">
                    <h1>
                        Category Hierarchy
                    </h1>
                    <div>
                        <p>
                            This post has 4 categories, part of a hierarchy that is 3 deep.
                        </p>
                        <p>
                            Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Fusce euismod commodo ante. Suspendisse potenti. Nunc pellentesque quam vel pede. Ut a lorem non urna molestie euismod. Fusce consequat tortor eu urna. Pellentesque aliquam, pede eget tincidunt feugiat, nunc massa hendrerit magna, non ultricies neque lectus nec dui. In hac habitasse platea dictumst. Sed feugiat quam eget lectus. Fusce at pede. Morbi sagittis tristique tortor. Sed erat justo, blandit ac, dignissim in, pretium ut, urna.
                        </p>
                    </div>
                </article>
                
                
                
                <article class="entry">
                    <h1>Hello world!</h1>
                    <div>
                        <p>
                            Welcome to WordPress. This is your first post. Edit or delete it, then start blogging!
                        </p>
                    </div>
                </article>
                
            </section>
            
            <aside id="side">
                <section class="side-box">
                    <h1>About</h1>
                    <div class="contents">
                        <p>
                            HTML5 CSS3 Lecture.
                        </p>
                        <p>
                            Text Text Text Text Text Text Text Text
                            Text Text Text Text Text Text Text Text
                            Text Text Text Text Text Text Text Text
                            Text Text Text Text Text Text Text Text.
                        </p>
                    </div>
                </section>
                <section class="side-box">
                    <h1>Side Title</h1>
                    <div class="contents">
                        <ul>
                            <li><a href="../step00/index.html">Base</a></li>
                            <li><a href="../step01/index.html">Reset</a></li>
                        </ul>
                    </div>
                </section>
                <section class="side-box">
                    <h1>Side Title</h1>
                    <div class="contents">
                        <ul>
                            <li><a href="../step02/index.html">Header</a></li>
                            <li><a href="../step03/index.html">Nav</a></li>
                            <li><a href="../step04/index.html">Contents</a></li>
                            <li><a href="../step05/index.html">Main Section</a></li>
                            <li><a href="../step06/index.html">Aside</a></li>
                            <li><a href="../step07/index.html">Footer</a></li>
                            <li><a href="#">WordPress</a></li>
                        </ul>
                    </div>
                </section>
                <section class="side-box">
                    <h1>Side Title</h1>
                    <div class="contents">
                        <ul>
                            <li><a href="#">Item00</a></li>
                            <li><a href="#">Item01</a></li>
                            <li><a href="#">Item02</a></li>
                            <li><a href="#">Item03</a></li>
                        </ul>
                    </div>
                </section>
            </aside>
            
        </div>
        
        <footer id="footer">
            <div class="footer-links">
                <ul>
                    <li><a href="http://tmlife.net">Home</a></li>
                    <li><a href="#">About</a></li>
                    <li><a href="#">Links</a></li>
                </ul>
            </div>
            <address>Copyright © 2011 phi. All Rights Reserved.</address>
        </footer>

    </body>
</html>

この head 部分で import している style.css を修正していきます.

次回は, ブラウザで勝手に割り当てられるスタイルをリセットします,.

TRACK BACK URL

POST COMMENT

メールアドレスが公開されることはありません。

COMMENT