menu
書いてる野郎
orebike@gmail.com
WordPress / 2020年版 企業サイトを作る / 開発 / 020 トップページ HTMLでページを作る
WordPress / 2020年版 企業サイトを作る / 開発 / 020 トップページ HTMLでページを作る
トップページのデザインと内容ができあがったのでこれを HTML で実装する。 結局マークアップ、その構成、スタイル、HTML で作る必要があるので
HTML / ページの雛形 このへんの知識を使って作る。
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" /> <title>ほげほげのトップページ</title> <meta name="description" content="説明文" /> <!-- 一部のブラウザで電話番号っぽいところが自動リンクになることを抑止 --> <meta name="format-detection" content="telephone=no" /> <link href="favicon.ico" rel="shortcut icon" /> <link rel="stylesheet" type="text/css" href="reset.css" /> <link rel="stylesheet" type="text/css" href="top.css" /> <script> document.addEventListener("DOMContentLoaded", function(e){ }); </script> </head> <body> <header>this is header.</header> <div class="content"> <section> <h1>トップページ</h1> <img src="top.png" /> <p> ここにテキストが入ります。 ここにテキストが入ります。 ここにテキストが入ります。 ここにテキストが入ります。 ここにテキストが入ります。 ここにテキストが入ります。 </p> </section> </div> <footer>this is footer.</footer> </body> </html>
これに合わせてスタイルシートも作る
reset.css は http://html5doctor.com/html-5-reset-stylesheet/ このへんがわかりやすそうであるのでこれを使えばいいだろう。
単純に取り去るだけで、デフォルトの挙動を変えたりしないので楽である。
html{ /* このように指定することで 1rem が 10px となる相対指定が可能になる */ font-size: 62.5%; } body{ font-size: 1.6rem; } body header{ height: 50px; background-color: red; } body div.content section{ max-width: 1000px; width: 100%; margin: 0 auto; box-sizing: border-box; background-color: green; } body footer{ height: 50px; background-color: blue; }
