◇HTML雛形：メモ
個人的メモです
HTMLの雛形
HTMLの雛形です。（すぐ忘れるのでメモ）
<!DOCTYPE html> <!-- saved from url=(0014)about:internet --> <html> <head> <meta http-equiv="Content-Type" content="text/html;charset=utf-8"> <title>雛形</title> <!-- === 外部css参照 === --> <link rel="Stylesheet" href="./style.css" type="text/css"> <!-- === 外部javascript参照 === --> <script type="text/javascript" src="./JStool.js" charset="UTF-8"></script> <!-- === css定義 === --> <style type="text/css"> /* 罫線のある単純テーブル;注意！コメントは//不可 */ table.simple {border:1px solid black;border-collapse:collapse;font-size:12pt} table.simple td{border:1px solid black} table.simple th{border:1px solid black} /* 行間が空きすぎないカラム並びリスト */ table.list {line-height:100%;border-collapse:collapse;font-size:10pt;} table.list td{vertical-align:top;} </style> <!-- === javascript定義 === --> <script type="text/javascript"> // アンチジュゲム関数;コメントは/*～*/または//～行端 function $E(id){return document.getElementById(id);} </script> </head> <body> <!-- css,javascriptはbody内も可 --> <p>hello</p> </body> </html>
次の記述が入れてあります。
| ・ | IE用おまじない | <!-- saved from url=(0014)about:internet --> これがないとIE9ではローカルでJavascriptが動きません |
|
| ・ | 文字コード定義 | <meta http-equiv="Content-Type" content="text/html;charset=utf-8"> <:head>の次の行に入れます。titleより前 |
|
| ・ | 外部CSSの参照 | <link rel="Stylesheet" href="./style.css" type="text/css"> ファイル名を必要に応じて書き換えてください |
|
| ・ | 外部Javascriptの参照 | <script type="text/javascript" src="./JStool.js" charset="UTF-8"></script> ファイル名を必要に応じて書き換えてください |
|
| ・ | CSS定義 | <style type="text/css">...</style> | |
| ・ | Javascript定義 | <script type="text/javascript">...</script> |
なお、CSS定義に入れてあるのは単罫線を持つ単純テーブルと 行のあかないリストのためのテーブルで、Javascript定義に 入れてあるのはアンチジュゲム関数です。
コメントなどを外したものを載せます。
抽象雛形の重要性
決まりきったものの作成が繰り返される場合、既存の実働例を 雛形として取り込むことが行われます。
これを繰り返すと徐々に特定目的の不要な記述がゴミのように張り付いたもの が出来上がっていきます。
特定目的でない雛形を作成しておくことは重要なことです。
| 固定リンク