[go: up one dir, main page]
More Web Proxy on the site http://driver.im/

Web

HTMLの雛形 (CSS, JavaScriptも)

※当サイトにはプロモーションが含まれています。

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

コピーして使えます。

HTML

全体パターン１

<!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>

全体パターン２

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

<!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/[email protected]/normalize.css">

圧縮版はこちら。

<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/[email protected]/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 を使いページ全体を中央寄せにするテスト

タイトル部分とフッター：その１

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

<pre><code> にダークテーマな色を付けるCSS

highlight.js などを使わない場合に有用である。

pre code {
    display: block;
    overflow-x: auto;
    padding: 1em;
    line-height: 1.3em;
    font-size: .9rem;
    background: #272822;
    color: #ddd;
}

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);

デバッグ関連 （接続元IPを限定する）

接続元のIPアドレスが ‘127.0.0.1’ でなければ、PHPの処理を終了する。

if ($_SERVER['REMOTE_ADDR'] != '127.0.0.1') {
  exit();
}

プリントデバッグする

配列の値などを表示する。

echo "<pre>\n";
var_export($array);
echo "</pre>\n";

スポンサードリンク

📂-Web
-

執筆者：labo

comment

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

関連記事

Web

Cloudflare の DNSで、DMARCポリシーを追加する

Cloudflare の DNSで、DMARCポリシーを追加する手順について説明します。

Web

Webページ中の特定の文字列をURLで指定する(Text Fragments)

Webページ中の特定の文字列をURLで指定する Text Fragments について説明します。

FirefoxFirefox

自分のWebページをOpenSearchに対応させて、Firefox の検索エンジンとして登録する

目次1. はじめに2. OpenSeach に対応させる2.1. 対象となるWebページの <head> タグに、OpenSearch対応であることを記述する2.2. XMLファイルを作成 …

ICTリテラシー

無料レンタルサーバーとDokuWiki で作る自分用情報サイト

本サイトに パソコン内に自分専用の情報データベースをつくる というページがあります。詳細はリンク先を見て頂くとして、本ページではこれに関連して、「自分専用の情報サイトを作る」ためのオススメの方法につい …

Web

Gmail でよく使うキーボードショートカット

Gmail でよく使うキーボードショートカットを紹介します。 1. Gmail のキーボードショートカットを有効にする手順 まず、Gmail でキーボードショートカットを利用するには、設定で有効にする …

PREV
パソコンや家電製品の不調は、分解して掃除するだけで直ることがあります
NEXT
HTML の基礎
↑