テンプレ†

  • HTML宣言
    • HTML 4.01 Strict DTD 
      <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
      • 一番正しい(?)HTML 4.01
    • HTML 4.01 Transitional DTD 
      <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
      • 一部の非推奨属性を認めるHTML 4.01
    • HTML 4.01 Frameset DTD 
      <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
      • フレームを認めたHTML 4.01
    • 違い
  • HTML開始 
    <html lang="ja"> ... </html>
  • header 
    <head> ... </head>
    • 文字コード 
      <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
      • UTF-8, EUC-JP, Shift_JIS
      • JISはWindowsでは使用できなくなりました。
    • CSS（外部スタイルシート）推奨 
      <meta http-equiv="Content-Style-Type" content="text/css">
<link rel="stylesheet" href="http://example.com/example.css" type="text/css">
    • CSS（内部スタイルシート） 
      <style type="text/css">
<!--
（スタイルシートの記述）
//-->
</style>
    • JavaScript 
      <meta http-equiv="Content-Script-Type" content="text/javascript">
<script type="text/javascript" src="http://www.example.com/example.js"></script>
    • Refresh（自動再読み込み秒数）
      • 無効 
        <meta http-equiv="refresh" content="0">
      • 3秒後にhttp://example.com/hoge/へジャンプする 
        <meta http-equiv="refresh" content="3;URL=http://example.com/hoge/">
      • ブラウザの履歴に残る（戻るボタンでこのページに戻れる）ので、1秒にするとさらにその前のページに戻れないこともある。
      • 恒久的・永続的にジャンプさせるのであれば.htaccessのジャンプも検討すること。
      • 秒数で指定
      • 0秒で無効
    • ページ情報 
      <meta name="author" content="SUNAGAWA Hiroyuki / すながわひろゆき">
<meta name="description" content="HTML4.01のテンプレやTips">
<meta name="keywords" content="HTML4.01,テンプレ,Tips">
    • 検索エンジン制御 
      <meta name="robots" content="noindex,nofollow">
    • favicon（お気に入りやアドレスバーのアイコン） 
      <link rel="icon" href="http://www.example.com/icon.png" type="image/png">
<link rel="icon" href="http://www.example.com/icon.ico" type="image/vnd.microsoft.icon">
<link rel="shortcut icon" href="http://www.example.com/icon.ico" type="image/vnd.microsoft.icon">
    • ページタイトル 
      <title>HTMLテンプレート</title>
  • body 
    <body> ... </body>
    • onload="" にJavaScriptを含めるとページを表示したと同時にそのコードが走る。
↑

HTML に関する Tips†

  • 全画面表示を開く 
    <A href="http://www.google.co.jp/"
   onclick="window.open('http://www.google.co.jp/','subwin','fullscreen=yes');return false;">
全画面
</A>
  • TABLEの罫線を実線にし、印刷させる。 
    <STYLE type="text/css">
<!--
TABLE{
  border-color: #3399ff;
  border-collapse: collapse;
}
TD   {
  border-width: 1;
  border-color: #3399ff;
  border-style: solid;
}
TH   {
  border-width: 1;
  background-color: #3399ff;
  border-color: #3399ff;
  border-style: solid;
-->
</STYLE>
↑

Google Chromeに関するTips†

  • Google Chrome Frame - IEの中でChromeエンジンを使ってレンダリングをする
    • 妙なソフトをインストールしたくない
    • でも、特定のページでHTML5を無理矢理動かしたい（Windows XP EmbeddedのIE7とか）
    • そんなときはGoogle Chrome Frame
  • 強制レンダリング
    • Chrome Frameをインストールしても通常はIEエンジンで動作する
    • 特定のページだけChrome Frameでレンダリングさせるには 
      <meta http-equiv="X-UA-Compatible" content="chrome=1">
↑

Javascriptに関するTips†

  • ページを表示したら自動的にテキストボックスにフォーカスがあたるようにする。
    • googleとか、表示したらすぐに検索キーワードの入力ができる状況とか。 
      <body onload="document.focusform.keyword.focus()">
  <form action="test.cgi" method="post" name="focusform">
    <input type="text" name="keyword" value="">
    <input type="submit" name="" value="送信">
  </form>
</body>
    • formにnameを定義
    • フォーカスを当てたいオブジェクトにnameを定義
    • body onloadにdocument.(formのname).(オブジェクトのname).focus()
↑

IEの互換モード（レンダリングモード）を強制する†

  • IEのバージョンによって動いたり動かなかったりするサイトやスクリプトを仕込んでしまったときの付け焼き刃対応方法
    • 付け焼き刃だから、これで根本的な対応ではないと何度言えば。。。
  • HTML metaタグ 
    <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE10">
    • 他のmetaタグやscriptタグよりも先に書かないと有効にならないことがある。
  • php 
    <?php
header('X-UA-Compatible: IE=EmulateIE10');
?>
  • htaccess 
    Header add X-UA-Compatible "IE=EmulateIE10"
  • 互換モードではなくそのブラウザ自身のバージョンで動作させる場合は 
    IE=Edge
↑

httpのURLでアクセスしてきたらhttpsにジャンプさせる > modrewrite†

  • 対象のディレクトリの.htaccessに 
    <IfModule mod_rewrite.c>
RewriteEngine on
RewriteCond %{HTTPS} off
RewriteRule ^(.*)$ https://%{HTTP_HOST}%{REQUEST_URI} [R,L]
</IfModule>
  • 参考
↑

画面の上下中央にdivを置くCSS†

html {
  height: 100%;
}
body {
  margin: 0;
  padding: 0;
  height: 100%;
  position: relative;
  min-wigth: 600px;
  min-height: 400px;
  background-color: WHITE;
}
div.centerbox {
  margin: -240px 0 0 -325px; //divの大きさの半分をマイナスで指定
  width: 650px; //divの大きさ
  height: 480px; //divの大きさ
  top: 50%;
  left: 50%;
  position: absolute;
  background-color: transparent;
}
↑

スマホなどでそこそこ見栄え良く幅を設定する†

  • headセクションに 
    <meta name="viewport" content="width=device-width,initial-scale=1">