ホームページ作成時のメモ 目次
はじめに
 当ホームページで実際に使用してる、スタールシート、JavaScript、DHTMLのプログラムと設置法を実際の使用した内容を元に記述しています。
 不用のタグや記述謝りの再チェックもかねて作成もしています。文字の大きさは奇数(17px)を基本に作成されていますが 再チェックした結果では 偶数指定が良いようですが 現時点「%」指定しています。(対象ページ)
 当サイトに記述されている内容は 作者 個人の理解の範疇で作成しているため 誤記を含んでいる可能性があります。
 サンプルをご自分で利用になる場合は、出来る限り多くのブラウザで テストしてから公開するようにして下さい。
 また、当サイトで紹介しているサンプルを使用してのトラブルについて 作者は一切の責任を負わないものとしますが、ご意見・ご感想・ご質問に ついては、メール下さい。(@yahoo.co.jpメールの@前は、 abc03728 です)
 記述内容は、JavaScriptのプロパティ、メソッド、イベントハンドラは、殆どが検索で獲た情報を参考にして作成されています。
  • 当ホームページは、JavaScript・スタイルシート を多用ししています。スタイルシートも特殊の方法で使用しています。W3Cによって廃止予定のタグの対応して説明しています。(当ページ関連以外では、W3Cで廃止予定のタグよる減点付エラーは有りません)
  • フリーソフトAnother HTML-lint 5を使用して記述誤りのチェックし減点ゼロを目指して作成しています。
  • 要素に、スタイルシートで定義したクラスの指定は、class 属性を使用しています。
  • ソース表示すると非常に見にく作成されていますが、不要の半角スペースの発生をふせぐためや、作成しやすいように記述しています。
  • 内容は、主に当ホームページで使用タグとJavaScriptを記述しています。
  • 動作確認は、作成者の環境でしかテストしていません。
セキュリテイ保護のため、・・・ と表示されている場合
 ローカルで当HPを参照する場合は、(動作環境が WindowsXP Service Pack2 の場合)アクティブコンテンツの実行を許可していない場合表示されます。  (許可する方法)
使用ソフト
 Photoshop Elements V5.5 (古文書の原文は、当ソフトで形式変換しないとうまくいかない)
 テキストエディタは、秀丸 と フリーソフトウェアのMKEditor for Windows(矩形選択が使用できます)
 e.Typist(スキャナから読み込まれた雑誌や資料等の画像データを文字認識処理し、編集可能なテキストデータに変換しています。)
 Micrsoft Excel・Micrsoft Word (テーブルの作成や漢字コードの取得など 補助的に使用)
 フリーソフトAnother HTML-lint 5 を使用して記述誤りのチェックしています(ルビを使用ページは、Microsoft Internet Explorer 5.5 としてチェックしています)フレーム分割親ファイルは、HTML中のDOCTYPE宣言でのチェックです。
 フリーソフト カスケーディングスタイルシート(CSS)を検証は、CSS レベル 3で誤りのチェックしています
 Another HTML-lint 5・カスケーディングスタイルシート(CSS)の検証でのエラー内容
作成動作環境等について
 Windows7 Home Edition
 Microsoft Internet Explorer 9
 画面の一部は、作成者表示可能の 1024・1152・1280・1440 で作成されていますがチェック漏れもあるようです。(800でも作成されていますが一部のページでは、非常にみにくいです)
 HTML4.01の本来の仕様に従った最も厳密で正確なDTDの指定を試みています。
 フレーム分割をのぞいたファイル数は、1,316有りますがテストで作成した7ファイルのみ移行タイプで作成されています。
 Microsoft Internet Explorer 6では、一部が意味不明でおかしく表示されています。
 FirefoxかSafariのみしかテストしていません。
 Opera では、おかしく表示されます。
ホームページ作成時のメモ内をGoogle.comで検索します
  1. 基本的説明
  2. ヘッダ部の記述内容
  3. 本文記述以前の記述内容
  4. 本文の記述内容(スタイルシート)
     必要により表示
     左側表示・注意書き等・最終更新日等
     左側表示・写真説明一・写真説明二・写真・右側表示
     左側表示・左側写真・右側写真・注意書き表示
     著作権について
     ログ等・Google.comで検索・アクセス表示等
  5. その他注意事項
  1. 表示形態・注意事項
  2. 水平方向の罫線
  3. タイトル(目次)・はじめにお読みください ログ
  4. 文書名と対象文書の古文書 飛び先名 対象文書の参考ページ等
  5. 注意事項等
  1. 龍爪山御本社造営之覚帳
  2. 北沼上村検地帳
  3. 原文の目次
  4. 写真一覧
  1. 枠線つきのセルの連結のテーブル(表)を作る
  2. 全てスタイルシートでテーブル(表)を作る
  3. 横方向のセルの連結の罫線ありを全てスタイルシートでテーブル(表)を作る
  4. 画像表示コントロールフレーム
  5. セル内の表示位置を決める
  6. 枠線をセル単位に引く
  7. 全てスタイルシートで表を作成時の注意事項
  8. テーブル作成時のトラブル
  1. 漢字にルビ(ふりがな)をふる
  2. ルビ(ふりがな)スタイルシートの変更方法
  3. ルビ(ふりがな)をふる(使用例)
  4. ルビ(ふりがな)をふる時のトラブル例
  5. ルビを対応していないブラザーでも表示する
  6. ルビを対応していないブラザーでも表示の問題点
  1. 縦書きで表示1(基本的説明)
  2. 補足説明(ページの右端を表示)
  3. 縦書きで表示2(縦書きを縦スクロールで表示)
  4. 縦書きで表示3(縦書きを縦スクロールで表示)厳密なDTDは表示
  5. 縦書きで表示4(縦書きをサポートしないプラザーでも表示)
  6. 縦書きで表示5(縦書きをサポートしないプラザーでも表示)
  7. 画像解像度800の場合で「ブラザー」により「スタイルシート」の変更必要か
  8. IE6では、おかしく表示する。
  9. 縦書き作成テスト中のトラブル事例
  1. 左のマージン(外側の余白)付いて(Firefox・Safariの場合、記述方法により横スクロールバーが表示される)
  2. 横幅(width)と左のマージン(余白)(margin-left)記述順に付いて
  3. 下のマージン(外側の余白)marginとパディング(内側の余白)padding付いて
  4. ソースコードの表示に付いて
  5. プラウザ表示状態のボーダー(枠線)に付いて
  6. Safari・FirefoxとInternet Explorerでは開始位置が異なる
  7. Internet Explorer5.5と7では表示が異なる
  8. 文字の大きさ奇数と偶数でSfariの場合表示が異なる
  9. オフライン処理でフレーム分割の場合Internet Explorerでは何も表示されない
  1. フォントサイズの指定。(キーワードの指定)
  2. スタイルシートのサイズの単位表
  3. 文字の大きさ(font-size)/行送り(font-height)について(font-family)
  4. フォントの種類を指定
  5. フォントスタイルを指定
  6. フォントに関する属性をまとめて設定
  7. 特殊な文字を表示
  8. 辞書には有るが、エディタでは表示しない文字の手順
  1. マージン(ボックス領域の外側の間隔)
  2. パディング(ボックス領域の内側の間隔)
  3. ページのセンター表示に付いて
  4. マージン・ボーダー何を意味するの(下の余白に付いて)。
  5. ボックス領域の概念図のソース
  1. 枠線の色指定
  2. 枠線のスタイル
  3. 枠線の太さを指定
  4. 枠線の設定をまとめて指定
  5. 上下左右それぞれの枠線を一括設定
  6. テーブルの隣のセルの枠線との重なり指定
  7. 水平方向の罫線に付いて
  8. ボーダー(枠線)に付いて
  1. ポジショニング(位置を指定)
  2. 重なりの順序を指定に付いて
  3. 回り込むように表示
  4. 回り込みを解除するには
  5. サイズ指定
  6. 背景画像を画像で表示
  1. 文字装飾を指定
  2. テキストの高さを指定
  3. 要素の配置(横方向)を指定する
  4. ベースラインを基準にテキストの配置(縦方向)を指定する
  5. 文字の間隔を設定します
  6. 垂直位置を決める
  7. ソースコードの表示に付いて(Sfariの対策)
  8. 禁則文字
  9. 改行されると非常に読みにくくなる場合
  10. より細かくインデント(字下げ)する方法
  11. 文字を重ねて表示
  1. 文字に色を指定
  2. 背景色の指定
  3. テキスト部分に背景色を指定
  4. 背景に画像の指定
  5. 背景画像の固定・貼り込み方法の調整・位置を決める
  6. 背景の設定をまとめて指定
  7. 横罫線・縦罫線を引く
  1. 画像の作成
  2. 画像のサイズを調べる
  3. 画像の貼り付
  4. 画像を隙間無く並べるには
  5. 画像の上に文字を乗せる方法
  1. 現在のファイルとの位置関係より、絶対パスか相対パスを決める
  2. リンクするには
  3. 指定位置へジャンプするには
  4. リンク先のファイルを開くやフレームまたはwindowを指定する方法(ターゲット指定)
  5. jQueryライブラリを使用してリンク先のファイルを開く
  6. メールソフト起動方法
  7. リンクで下線を表示させない方法
  8. リンク指定の注意事項
  1. フレームに分割の問題点
  2. フレームに分割する
  3. 読み込むウィンドウの指定方法
  4. 翻字のコントロー部。(複数のフレームの内容変更)
  5. 擬似フレーム分割1
  6. 擬似フレーム分割2
  7. 擬似フレーム分割3
  1. リストの作成(非序列)
  2. 番号付リストの作成(序列)
  3. 項目リストの位置を設定
  4. リストの各種行頭記号を一括設定
  5. 用語定義リストの作成(横書き)
  6. 用語定義リストの作成(縦書き)
  1. 領域の属性を設定する
  2. 要素中にある空白の表示方法と改行を設定する
その他。(Internet Explorerのみ適用)
  1. スクロール
  2. フィルタ(Internet Explorer 4 以降適用)
  1. HTML4.1で指定基本的な16色の指定
  2. Web Safeカラー(216色)の色見本
  3. ユーザー定義色の色見本
  1. 特殊文字
  2. 半角カタカナフォント
  1. wingdingsフォント
  2. webdingsフォント
  3. Marlettフォント
  4. Symbolフォント
  1. 演算子
  2. 指定したドキュメントに文字列や値を書込
  3. 新しいウィンドの大きさの指定
  4. 動かしてエラーが出たら直す
  1. 実際の使用例記述
  2. t3.htmの内容
  3. t2.htmの内容
  1. JavaScriptの説明
  2. スタイルシートの説明
  1. フレーム分割の場合
  2. 使用Javascriptについて
  1. OS・ブラウザ等の取得方法
  2. 警告メッセージの表示
  1. アドレス情報の取得方法
  2. 別ページに自動ジャンプさせる
  3. ページ中の特定場所へのジャンプさせる
  4. ?以降の指定で何を処理して要るの
  1. キーボード ナビゲーションの起動方法
  2. マウスダウンした時に実行するアドレス等の連絡方法
  1. 画像(古文書)の使用方法に3種類の方法の表示内容
  2. 原文コントロー部
  3. 表示画面の拡大・縮小処理
  4. 古文書と解読(翻字)の連動処理
  1. 使用するメソッド・プロパティ
  2. 横書きのキーボードの数字入力によりスクロール
  3. 縦書き原文分割のキーボードの数字入力によりスクロール
  4. 縦書きのキーボードの数字入力によりスクロール
  5. 原文もキーボードの英字入力によりスクロール
  6. ダブリクリックによりスクロール
  7. 縦書きもホイールでスクロール
  1. ページの指定内容
  2. 再現テスト用に作成した内容
  1. ソースの内容
  2. テスト用に作成した内容