Web

HTMLの雛形 (CSS, JavaScriptも)

投稿日:2017年6月16日 更新日:

コピーして使えます。

HTML

全体パターン1

<!DOCTYPE html>
<html lang="ja"> 
<head> 
  <meta charset="UTF-8"> 
  <meta name="viewport" content="width=device-width, initial-scale=1"> 
  <meta name="description" content=""> 
  <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
  <title>このドキュメントのタイトル</title> 
</head> 

<body> 

<p>このドキュメントの内容</p> 

</body> 
</html>

全体パターン2

複数のセクショニング・コンテンツを使ったコード例

<!DOCTYPE html> 
<html lang="ja"> 
<head> 
  <meta charset="UTF-8"> 
  <meta name="viewport" content="width=device-width, initial-scale=1"> 
  <meta name="description" content=""> 
  <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
  <title>このドキュメントのタイトル</title>
</head> 
<body> 
  <header> 
    <h1>このドキュメントのタイトル</h1> 
    <p></p> 
  </header> 

  <nav> 
    <h1></h1> 
    <ul> 
      <li><a href=""></a></li> 
    </ul> 
  </nav> 

  <section>
    <h1></h1> 
    <p></p> 
  </section> 

  <article> 
    <header> 
      <h1></h1> 
      <p></p> 
    </header> 
    <p></p> 
  </article>

  <aside> 
    <h1></h1> 
    <p></p> 
  </aside> 

  <footer> 
    <p><a href=""></a></p>
  </footer> 
</body>
</html>

CSS

normalize

Normalize.css

1. ダウンロードでの利用

2. npm もしくは CDN での利用

CDN の場合は <head> 内に以下を記述する(バージョンのところは最新にすること)。

<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/normalize.css@8.0.1/normalize.css">

圧縮版はこちら。

<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/normalize.css@8.0.1/normalize.min.css">

中央寄せのページ

幅を指定する方法

CSS

body {
  padding: 0 10px 30px;
  max-width: 45em;
  margin: auto;
}

Flexbox を使う方法

幅を指定するのではなく、Flexbox による「中央寄せ」指定です。

HTML

<body>
  <div>
  ...
  </div>
</body>

CSS

body {
  margin: 0 5vw 100px;
  display: flex;
  flex-direction: column;
  align-items: center;
}
body > div {
  max-width: 100%;
}

この場合、body 要素直下ブロック要素(上の例では div 要素を配置 し、その中にコンテンツを書きます。

デモページ: 🔗 Flexbox を使いページ全体を中央寄せにするテスト

タイトル部分とフッター:その1

HTML

  <h1>Title</h1>
  ...
  <footer>
    <span><a href="/">Top</a></span>
    <span>© 2019 <a href="//laboradian.com">Laboradian</a></span>
  </footer>

CSS

h1 {
  padding-bottom: 0.5em;
  border-bottom: 1px solid #444;
}

footer {
  margin-top: 3.0em;
  padding-top: 0.5em;
  border-top: 1px solid #444;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
footer > *:not(:first-child) {
  margin-left: 1em;
}

table タグ用CSS

table {
  border-collapse: collapse;
  border-spacing: 0;
  box-sizing: border-box;
  border: 1px solid #999;
  margin-bottom: 20px;
  /*width: 100%;
  max-width: 100%;*/
}
table tr th {
  color: black;
  background-color: #b6dbf2;
}
table tr th,
table tr td {
  padding: 5px;
  border: 1px solid #999;
  /*font-size: 13px;
  line-height: 18px;*/
}
table tr:nth-child(odd) {
  background-color: #f0f0f0;
}

参考

figure タグ(よく使う)

figure {
  margin: 0 auto;
  text-align: center;
}
  • マージンをなくして、中央寄せにする。

pre code タグ用CSS

複数行のコードを書く場合などに使用する。

pre code {
  display: block;
  overflow-x: auto;
  padding: 1.0em;
  background: #272822;
  color: #ddd;
  font-size: 0.9rem;
  line-height: 1.2em;
}

ボタン

フラットなボタン

.button {
  margin-top: 1em;
  padding: 0.5em 2em;
  border: 0;
  background-color: #3498db;
  border-radius: 0;
  color: white;
  box-shadow: none;
  cursor: pointer;
}

JavaScript

DOMContentLoadedイベント や loadイベントに処理を追加する

イベントの発生タイミングについては、ウェブブラウザがページを取得して表示するまでの流れ を参照

window.addEventListener('DOMContentLoaded', (event) => {
  console.log('DOM fully loaded and parsed');

  document.querySelector('#btn1').addEventListener('click', () => {

  });
});
window.addEventListener("load", (event) => {
  console.log("All resources finished loading!");

  document.querySelector('#btn1').addEventListener('click', () => {

  });
});

highlight.js を導入する(CDN利用)

公式サイト: highlight.js

<link rel="stylesheet"
      href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/X.X.X/styles/monokai.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/X.X.X/highlight.min.js"></script>
<script>hljs.highlightAll();</script>
  • 「X.X.X」にはバージョンが入るが、最新バージョンをチェックすること。→ Getting highlight.js
  • デザインを変更するには、CSS のファイル名を変更する。
  • 上記の highlight.min.js には、基本的なプログラミング言語しか入っていない。
    • 上記 JavaScriptファイルの末尾ファイル部分を「languages/{言語名}.min.js」に変えることで、特定のプログラミング言語用のJavaScriptファイルを指定することができる。
Web

シンタックス・ハイライト・ライブラリ「highlight.js」の使い方

2018.12.22
Web Vitals

highlight.js のハイライト処理を Web Workers で実行する

2021.03.15

Luminous を導入する

<head>

  <link rel="stylesheet" href="path/to/luminous-basic.min.css">

</head>
<body>

  <a href="foo.jpg" data-luminous>
    <img src="foo.jpg" width="200" alt="Foo">
  </a>

(省略)

  <script src="./luminous/Luminous.min.js"></script>
  <script>
  const luminousOpts = {
    caption: (trigger) => {
      return trigger.querySelector("img").getAttribute("alt");
     }
  };

  document.querySelectorAll("a[data-luminous]").forEach((elm) => {
    new Luminous(elm, luminousOpts);
  });
  </script>
</body>

ポイント

  • CSSファイルと JavaScriptファイルを読み込ませる。
  • ポップアップ表示する <a>要素には、data-luminous 属性を指定し、ループ処理によりそれぞれに対して new Luminous() を実行する。
JavaScript

Luminous を使ってみる

2019.10.23

PHP

エスケープ処理

HTMLエスケープ関数

function e($html) {
  return htmlspecialchars($html, ENT_QUOTES);
}

デバッグ関連

開発環境

ini_set('display_errors', '1');
ini_set('display_startup_errors', '1');
error_reporting(-1); // show all errors

本番環境

ini_set('display_errors', '0');
ini_set('display_startup_errors', '0');
error_reporting(E_ALL & ~E_NOTICE & ~E_STRICT & ~E_DEPRECATED);

📂-Web
-

執筆者:labo


comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

関連記事

Web

インターネットの説明に欠けているもの?

 株式会社日本レジストリサービス(以下JPRS、本社:東京都千代田区、代表取締役社長 東田幸樹)は、インターネット教育の支援活動の一環として、全国の中学校・高校・高等専門学校を対象に、マンガ小冊子『ポ …

Chrome

Chrome のローカルオーバーライド機能を使ってWebサイトのファイルをローカルのファイルに置き換える

目次1. Chrome のローカルオーバーライド機能とは?2. 使い方1. この機能で使用するローカル側のフォルダーを指定します2. 置き換えるファイルを指定します3. ファイルを編集します3. Ov …

DokuWiki

DokuWiki のアクセス設定チェックが面白い

目次1. It seems your data directory is not properly secured.2. 対応方法3. 珍しいアクセスチェックの仕組み4. おわりに 1. It see …

Web

【HTML】img 要素の srcset 属性 と sizes 属性について

目次1. デバイスピクセル比2. img 要素の srcset 属性 と sizes 属性3. sizes 属性4. srcset 属性x 単位で画像ファイルのサイズを指定する場合w 単位で画像ファイ …

Chrome

Chrome の通信ログ(TCP/IPも含む)を記録する

Chrome の通信ログ(TCP/IPも含む)を記録する方法を紹介します。