NewFence

WordPressテンプレート作成用自分用メモ

html5基本構造

<!DOCTYPE html>
<html lang="ja">
<head prefix="og: http://ogp.me/ns# fb: http://ogp.me/ns/fb# website: http://ogp.me/ns/website#">
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="format-detection" content="telephone=no" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="icon" type="image/png" href="fav.png" />
<link rel="apple-touch-icon" sizes="180x180" href="icon.png" />
<title>タイトル</title>
<!-- リセットcss -->
<link rel="stylesheet" type="text/css" href="css/destyle.css"  />
<!-- html5 for ie9 -->
<script src="js/html5shiv.js"></script>
</head>
<body>


<!-- ヘッダ -->
<header>
    <h1>HTMLリファレンス</h1>
    <nav>
    <ul>
        <li><a href="../index.html">トップページ</a></li>
        <li><a href="../html/">HTMLリファレンス</a></li>
        <li><a href="../css/">CSSリファレンス</a></li>
        <li><a href="../sitemap/">サイトマップ</a></li>
        </ul>
    </nav>
</header>


<!-- メインコンテンツ -->
<article>
    <h2>HTML5とは?</h2>
    <p>HTML5とは、HTMLのバージョン5、改訂第5版です…</p>


    <h3>HTML5の始まりと現状</h3>
    <p>HTMLの開発は、1999年12月24日にHTML 4.01が勧告された時点で中断されていました…</p>
</article>


<!-- サイドメニュー -->
<section>
    <div class="side-con">
        <h2>人気記事ランキング</h2>
        
    </div>
</section>


<!-- フッタ -->
<footer>
    Copyright 2020
</footer>


</body>
</html>

WordPress用

<!DOCTYPE html>
<html lang="ja">
<head prefix="og: http://ogp.me/ns# fb: http://ogp.me/ns/fb# website: http://ogp.me/ns/website#">
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="format-detection" content="telephone=no" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="icon" type="image/png" href="fav.png" />
<link rel="apple-touch-icon" sizes="180x180" href="icon.png" />
<title>タイトル</title>
<!-- リセットcss -->
<link rel="stylesheet" type="text/css" href="<?php echo get_template_directory_uri(); ?>/css/destyle.css"  />
<!-- html5 for ie9 -->
<script src="<?php echo get_template_directory_uri(); ?>/js/html5shiv.js"></script>
<link rel="stylesheet" type="text/css" href="<?php echo get_template_directory_uri(); ?>/css/style.css"  />
<?php wp_head(); ?>
</head>
<body>


<!-- ヘッダ -->
<header>
    
    <h1>HTMLリファレンス</h1>
    <nav>
    <ul>
        <li><a href="../index.html">トップページ</a></li>
        <li><a href="../html/">HTMLリファレンス</a></li>
        <li><a href="../css/">CSSリファレンス</a></li>
        <li><a href="../sitemap/">サイトマップ</a></li>
        </ul>
    </nav>
</header>


<!-- メインコンテンツ -->
<article>
    <h2>HTML5とは?</h2>
    <p>HTML5とは、HTMLのバージョン5、改訂第5版です…</p>


    <h3>HTML5の始まりと現状</h3>
    <p>HTMLの開発は、1999年12月24日にHTML 4.01が勧告された時点で中断されていました…</p>
</article>


<!-- サイドメニュー -->
<section>
    <div class="side-con">
        <h2>人気記事ランキング</h2>
        
    </div>
</section>


<!-- フッタ -->
<footer>
    Copyright  2020
</footer>


<?php wp_footer(); ?>
</body>
</html>