Ta-kaku.jp Tools
Update 2010/02/06
技術メモ内容
トップページ
ハードやソフトの技術メモです。 ほとんど、個人の備忘録のレベルですので高度なことは書かれていません。 皆様に少しでもお役に立てれば幸いです。
MENU
1.HTMLとCSS
サイト更新情報
2008/10/18
「Ta-kaku Tools 住所検索・郵便番号検索・事業所名検索・駅検索・電話局番検索」を Ver2.202 にリビジョンアップしました。
更新内容は以下の通りです。
・「xxx1丁目」の様に「全角の数字」と「丁目」が続いている文字列が入力されると検索できない事がある不具合を改修しました。
2008/10/01
Ta-kaku Tools Whois検索 Ver1.000をリリースしました。
2008/09/30
「Ta-kaku Tools 住所検索・郵便番号検索・駅検索・電話番号(局番)検索 」を Ver2.201 にリビジョンアップしました。
更新内容は以下の通りです。
・電話番号(局番)検索機能を正式版にしました。 ・無効な数値に対して住所の検索を行っていた処理を改善しました。 ・局番0120指定でGoogleMapがおかしな場所を示していた不具合を修正しました。 ・「東京駅駅」のように入力されると、関係の無いデータが出力される不具合を修正しました。
過去の情報
関連キーワード
技術メモ インデックス
カテゴリーを選択してください。
インストール
プログラミング言語
マークアップ言語
データベース言語
スクリプト言語
MS-Office
その他
Webアプリケーション
の開発方法
1.HTMLとCSS 技術メモ
追加日時の新しい方から掲載しています。
第1章 HTML と CSS について
登録日:2006/09/19   分類:Webシステム
目的
    ここでは、Webアプリケーションの最終的な生成ファイルとなるHTMLについて説明します。
    HTMLとは、通常皆さんが閲覧しているページの描画情報です。
    HTML 4.0以降、見栄えに関する部分は、CSSで記述する事が推奨されています。
    HTML には、「ページの内容と構成」をCSSには、「見栄え」を記述する事で、
    メンテナンスが格段に向上します。

目次
    1.HTML について
    2.CSS について

1.HTML について

    1-1.HTML(Hyper Text Markup Language)とは

        HTMLは、マークアップタグが埋め込まれたテキストファイルです。
        ブラウザーは、マークアップタグを解析して、テキストの内容を構成に合わせて
        出力します。

        HTMLは、HTML 4.01が最終バージョンになります。
        現在は、HTML 4.01をベースにした XHTML に移行しています。
        しかしながら、現時点ではまだHTMLが主流となっていますので、ブラウザー表示の
        基本的概念を押さえる為にも、まずは、HTMLを知るところから始めたいと思います。

    1-2.HTMLファイルの拡張子は、以下の2つが使用できます。

        .htm
        .html

    1-3.マークアップタグ

        テキストをハイパーテキストにする、マークです。
        全て < と > に囲まれた形になっています。

        (1) 開始タグ

            マークアップの開始を示しています。

            <html> や <head> のように、< と > の間に、要素名を指定します。

        (2) 終了タグ

            マークアップの終了を示しています。

            </html> や </head> のように、</ と > の間に、要素名を指定します。

        (3) HTMLのマークアップタグの要素名は、大文字/小文字の区別はありませんが、

            XHTMLからは、区別されます。
            XHTMLでは、小文字が基本となりますので、将来の移植を考慮して、
            小文字を使用する事を推奨します。

        (4) タグ属性

            タグには、属性の値を指定できるものがあります。
            その場合の開始タグは、以下のような書式になります。

                <タグ 属性="値">

            - 例 -

                <font size="文字サイズ">文字列</font>

        マークアップタグは、単にタグとも呼ばれます。
        ここでは、以降 "タグ" と呼ぶ事にします。

        各種タグに関しての詳細については、以下のサイトを参照してください。

            とほほのWWW入門 HTMLリファレンス
            http://www.tohoho-web.com/html/index.htm

            W3Schools HTML 4.01 / XHTML 1.0 Reference
            http://www.w3schools.com/tags/default.asp

    1-4.HTMLの基本構成

        --- sample1_1.html --->
        <html>
            <!-- コメントです -->
            <head>
                <!-- ここに、ヘッダー情報を記述 -->
            </head>
            <body>
                <!-- ここに、コンテンツを記述 -->
            </body>
        </html>
        <--- sample1_1.html ---

        (1) <html> から </html> までの範囲(HTML)

            HTMLの内容の範囲になります。
            ヘッダー部とボディ部の全ての内容を、これらのタグの内側に記述します。

        (2) <head> から </head> までの範囲(ヘッダー部)

            ヘッダー情報を記述します。
            ヘッダー情報は、ブラウザーに表示されません。

        (3) <body> から </body> までの範囲(ボディ部)

            コンテンツを記述します。
            ボディ部に記述された内容が、ブラウザーに表示されます。

    1-5.ドキュメントタイプの宣言

        ドキュメントタイプは、ヘッダー部の前、すなわちHTMLの外側に宣言します。
        これは、HTML が、どの書式で記述されているのかを定義するために必要です。
        今回の講座では、HTML 4.01 を使用しますので、以下のように宣言します。

        (1) フレームを使わない場合

            <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

        (2) フレームを使う場合

            <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN">

    1-6.ヘッダー情報

        (1) メタ情報

            メタ情報とは、HTML自体の情報です。
            プログラムで言う、プロパティに当たります。

            必須のメタ情報

                キャラクターセット

                    HTMLがどの文字コードで記述されているかを示しています。
                    以下の例は、SHIFT_JIS です。

                    <meta http-equiv="Content-Type" content="text/html 
                        ; charset=SHIFT_JIS">

                    SHIFT_JIS
                        主に、Windows や Mac を日本語で使用している閲覧者向けの
                        ページの場合に使用します。
                        JavaScriptとの相性も良いので、この設定をお勧めします。

                    EUC-JP
                        主に、Unix や Linux を日本語で使用している閲覧者向けの
                        ページの場合に使用します。

                    UTF-8
                        世界中の閲覧者を対象にしたページの場合に使用します。
                        ただし、日本語のフォントは、見慣れないものに置き換わり
                        ますので、お勧めできません。

                言語

                    HTMLがどの言語で記述されているかを示しています。
                    以下の例は、日本語です。

                    <meta name="content-language" content="ja">

            スクリプトの為のメタ情報

                スタイルシートスクリプト宣言

                    スタイルシートスクリプト(CSS)を使用する場合に宣言します。

                    <meta http-equiv="Content-Style-Type" content="text/css">

                ジャバスクリプト宣言

                    ジャバスクリプト(JavaScript)を使用する場合に宣言します。

                    <meta http-equiv="Content-Script-Type" content="text/JavaScript">

            検索エンジンロボットの為のメタ情報

                検索エンジンの巡回の制限(特に必要ありません)

                    <meta name="robots" content="index, follow">

                検索エンジンの為のコンテンツ説明(特に必要ありません)

                    <meta name="description" content="ここに、サイトの説明を記入します">

                    検索エンジンによっては、検索結果に表示されるコメントとなります。
                    一般的には、160バイト(漢字80文字)内で記述するのが良いとされています。

                検索エンジンの為のキーワード提示(特に必要ありません)

                    <meta name="keywords" content="キーワード1,キーワード1,キーワード3">

                    検索エンジンによっては、検索時のキーワードとして適用されます。
                    一般的には、最大10個以内のキーワードを設定するのが良いとされています。

                Google関しての詳細については、以下のサイトを参照してください。

                    ウェブマスター向けヘルプ センター
                    http://www.google.com/support/webmasters?hl=ja

            著作の為のメタ情報

                著者(特に必要ありません)

                    <meta name="author" content="著者の名前">

                著作権の持ち主(特に必要ありません)

                    <meta name="copyright" content="k@zu">

                ページ作成日(特に必要ありません)

                    <meta name="build" content="2006.09.19">

        (2) タイトル情報

            <title>タイトル</title>

        (3) スタイルシート情報

            使用するスタイルシートのファイルを指定します。

                <link rel="stylesheet" type="text/css" href="css/sample1_1.css">

        (4) JavaScript情報

            使用するJavaScriptのファイルを指定します。

                <script type="text/javascript" src="js/sample1_1.js"></script>

    1-7.ボディ情報

        ボディ部には、文章とその構造を定義を記述します。
        ここに、タグなしの文字列を記述すると、そのまま表示されます。
        装飾を行ないたい場合は、タグを使用します。

        ただし、ここには「見栄え」に関するタグは使用すべきではありません。

        「見栄え」とは

            背景,色,大きさ,位置などを指します。

            <h1>?<h6>で文字の大きさは変わりますが、CSSを使用しないかぎり文字の大きさを
            コントロールすることはできません。
            また、<p>や<br>などを使用すれば、文字などの位置は変わりますが、
            ページの構成を定めている事に過ぎません。

            はじめは、「見栄え」と「構成」の切り分けが難しいと思いますが、
            後述する、CSSを使いこなしてゆく事で、理解できるようになります。

        「見栄え」は、全てCSSに統合すべきです。
        また、「ロジック」に関する部分も埋め込むべきではありません。
        「ロジック」も、全て外部ファイルにしてヘッダーでインクルードする事を推奨します。

        はじめは、大変ですが、後のメンテナンスを考慮しなければいけませんので、
        ぜひ、この考え方を採用して頂きたいと思います。

        ボディ部で使用しても問題の無いタグ類

            <!--...-->  コメント
            <a>         リンクに使用するアンカー
            <br>        改行
            <form>      フォーム
            <h1>?<h6>  見出し
            <img>       イメージ
            <p>         段落
            <table>     テーブル(表)
            <td>        テーブルセル
            <tr>        テーブル行  など

2.CSS について

    2-1.CSS(Cascading Style Sheet)とは

        CSSは、HTMLのタグに対する「見栄え」の設定を定義するファイルです。
        ブラウザーは、タグに対する設定がCSS内にある場合、テキストの色や大きさなど
        の表示属性を変更します。
        CSSは、XHTMLにも使用されます。

        HTML ... 本来文書の意味だけを定義
        CSS  ... 見栄え

        スタイルシートの目的は、HTML中から「見栄え」の部分を分離する事にあります。
        分離したスタイルシートを外部ファイルにする事で、さらに複数のHTMLに対して
        同じスタイルを適用する事が可能になります。
        例えば、同じ外見を持つ100ページあるサイトの「見栄え」を1つのCSSファイル
        で制御できるようになります。

    2-2.CSSファイルの拡張子は、通常以下の拡張子が使用されます。

        .css

    2-3.使用上の注意

        スタイルシートの効果は、ブラウザーの機能に依存しています。
        以下に説明している内容が全てのブラウザで実現できる訳ではありません。
        効果が現れない場合は、他の方法を適用してください。

    2-4.スタイルシートのコメント

        <style TYPE="text/css">
            /* この間がコメントになります */
        </style>

    2-5.スタイルシートの書式

        (1) 最も単純な書式

            要素セレクタ {属性: 値;}
                          ~~~~~~~~宣言

        (2) 複数の要素セレクタの書式

            要素セレクタ, 要素セレクタ {属性: 値;}
                        ~グルーピングカンマ

        (3) 複数の宣言の書式

            要素セレクタ {属性: 値; 属性: 値;}
                                             ~ここは、無くても良いが、
                                              個人的には付けるのを推奨

        (4) クラスを用いた書式

            要素セレクタ.クラス {属性: 値;}

            - 例 -
            以下は便宜上、HTML中に埋め込んだ例を示しています。
            通常は、外部ファイルにしてください。
            <html>
                <head>
                    <title>クラスを用いた書式</title>
                    <style type="text/css">
                        <!--
                        div.red {color: red;}
                        -->
                    </style>
                </head>
                <body>
                    <div class="red">赤く表示される文字列</div>
                </body>
            </html>

        (5) 要素セレクタを省いたクラスを用いた書式

            .クラス {属性: 値;}

            - 例 -
            以下は便宜上、HTML中に埋め込んだ例を示しています。
            通常は、外部ファイルにしてください。
            <html>
                <head>
                    <title>要素セレクタを省いたクラスを用いた書式</title>
                    <style type="text/css">
                        <!--
                        .red {color: red;}
                        -->
                    </style>
                </head>
                <body>
                    <!-- ↓タグの種類に関係なく使用できます -->
                    <p class="red">赤く表示される文字列</p>
                    <div class="red">赤く表示される文字列</div>
                </body>
            </html>

        (6) クラスの重複指定

            - 例 -
            以下は便宜上、HTML中に埋め込んだ例を示しています。
            通常は、外部ファイルにしてください。
            <html>
                <head>
                    <title>クラスの重複指定</title>
                    <style type="text/css">
                        <!--
                        .red {color: red;}
                        .bold {font-weight: bold;}
                        -->
                    </style>
                </head>
                <body>
                    <p class="red bold">赤い太文字で表示される文字列</p>
                </body>
            </html>

        (7) 定義済みクラス指定

            要素セレクタ:クラス {属性: 値;}
                        ~注意

            よく使用する定義済みクラスの使用例
            a:link    {color: green;}   /* 通常のリンク */
            a:visited {color: blue;}    /* 読み込み済みのリンク */
            a:active  {color: red;}     /* クリックされた瞬間のリンク */

        (8) ID属性指定
            ID属性は、HTML中に1箇所のみ指定可能です。

            要素セレクタ#ID属性 {属性: 値;}
                        ~注意

        (9) 優先順位指定
            要素セレクタ {属性: 値 ! important;}
                                   ~~~~~~~~~~~

    2-6.スタイルシートの記述方法

        スタイルシート定義の適用は、以下の優先順位のうえページへ適用されます。

            外部ファイル < ページHEAD内定義 < タグ内定義

        上記の「2-5 (9) 優先順位指定」 は、この優先順位を変更するためのものです。

        (1) タグの属性として指定(推奨しません)

            <div style="color:red;">赤く表示される文字列</div>

        (2) タグとして指定(推奨しません)

            <html>
                <head>
                    <title>タグとして指定</title>
                    <style TYPE="text/css">
                        <!--
                        div {color: red;}
                        -->
                    </style>
                </head>
                <body>
                    <div>赤く表示される文字列</div>
                </body>
            </html>

        (3) 外部ファイルとして指定(推奨します)

            --- sample.html --->
            <html>
                <head>
                    <title>外部ファイルとして指定</title>
                    <link rel="stylesheet" type="text/css" href="sample.css">
                </head>
                <body>
                    <div>赤く表示される文字列</div>
                </body>
            </html>
            <--- sample.html ---

            --- sample.css --->
            /* <style><!-- や --></style>は不要です */
            div {color: red;}
            <--- sample.css ---

    2-7.長さの単位

        HTMLは単位の指定はしませんが、ピクセル単位になっています。
        HTMLのデフォルトの単位に合わせたい場合は、px を指定してください。
        ただし、アクセシビリティの向上の観点から、pxよりもemを推奨する考えがあります。
        (ブラウザの「文字のサイズ」の変更を機能させる為)

        (1) 相対的な長さの指定
            em ... 文字の長さ
            ex ... 文字の高さ

        (2) 絶対的な長さの指定
            px ... ピクセル
            in ... インチ(1in=2.54cm)
            cm ... センチメートル(1cm=10mm)
            mm ... ミリメートル(10mm=1cm)
            pt ... ポイント(1pt=1/72in)
            pc ... パイカ(1pc=12pt)

    2-8.スタイルシートの詳細に関して

        以下のサイトを参照してください。

            とほほのスタイルシート入門
            http://www.tohoho-web.com/css/index.htm

参考
    とほほのWWW入門
    http://www.tohoho-web.com/www.htm

    W3Schools HTML Tutorial
    http://www.w3schools.com/html/default.asp

---

・本ページの内容は、Ta-kakuが住所検索のページを作成する際に独自で調査した内容を
  講座的にまとめたものです。

・記述に誤りがある場合は、訂正して読み替えてください。

・技術的な内容にはお答えできませんので、予めご了承ください。
PR