More than 3 years have passed since last update.

HTMLの基本テンプレート

HTML

Last updated at 2021-06-15Posted at 2021-04-29

何かしら使いたいときにスグ調べちゃうので、ここに残しておきます。
とりあえず、これだけあれば表示はできます。

index.html

<!DOCTYPE html>
<html lang="ja">
 <head>
  <meta charset="utf-8">
  <title>タイトル</title>
  <meta name="description" content="ディスクリプション">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="style.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script src="main.js"></script>
 </head>
 <body>
  <header>ヘッダー</header>
  <nav>ナビ</nav>
  <section>
  <article>
  ここに内容
  </article>
  </section>
  <footer>フッター</footer>
 </body>
</html>

style.css

@charset "utf-8";
/* CSS Document */

body{
 font: 14px/1.6 "Hiragino Kaku Gothic Pro",Osaka,"メイリオ","ＭＳ Ｐゴシック","MS PGothic",Verdana,Arial,sans-serif;
 margin:0;
 color:#111111;
}

img{
 outline:none;
 border-style:none;
}


header{
    display: block;
    color:#FFFFFF;
    background-color: #7952b3;
    width:100%;
}


nav{
    width: 100%;
    border-top: 1px solid #000000;
    border-bottom: 1px solid #000000;
    margin-bottom: 5px;
}


section{
    display: block;
    width: 100%;
    margin: 20px auto;
    padding: 1%;
    background-color: #d9ffe4;

}
article{
    width: calc(50% - 15px);
    padding: 2%;
    background-color: #94e07f;
}

footer{
    font-size:.8em;
    width: 100%;
    text-align: center;
    padding-top: 10px;
    padding-bottom: 10px;
    background-color: #6f6f6f;
    color:#111111;
}

main.js

$(function(){
  console.log(window);
  console.log(window.location.href);
});

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up