目次

• はじめに
• 基本の HTML
• CSS と JavaScript を読み込む
• コードに問題がないか確認する
• 次に行うこと

はじめに

いきなり PHP でコードを書いていくこともできますが、この講座では HTML を作成してから PHP を実装していきます。

このほうが完成イメージが分かりやすく、ミスも少なくなります。

まずは基本となる HTML を準備して、Bootstrap などの必要なファイルを読み込んでおきましょう

基本のHTML

index.php を開いて、以下のようにコードを書いてください。

コードが表示されない場合はこちら

これが基本となる HTML です。

HTML について簡単に紹介すると、HTML は head タグ部分と body タグ部分に分かれています。

head タグ

head タグは

• 文字コード
• タイトル
• キーワード
• サイトのアイコン
• スタイルシートの読み込み

などページの情報を書く場所です。

先ほど追加したコードでは、最低限必要になる３つのタグを書きました。

4行目では文字コードを UTF-8 に設定しています。

5行目はスマートフォンに対応するための設定です。

6行目の title タグには、ブラウザのタブや Google などの検索結果に表示されるページのタイトルを指定しています。

body タグ

body タグにはテキストや画像など、ユーザーが実際に目にする部分のコードを書きます。

JavaScript のコードを書いたり、ファイルを読み込むこともあります。

この基本構造は HTML を書く時に必ず書くコードなので、サッと書けるようになっておくと便利です。

次は CSS ・ JavaScript ファイルを読み込んでいきましょう。

CSS と JavaScript を読み込む

前回ダウンロードした

• Bootstrap
• Datetimepicker
• jQuery
• Moment
• FontAwesome

のファイルを読み込んでいきましょう。

index.php に9~12・18~22行目を追加します。

コードが表示されない場合はこちら

読み込む場所について

CSS は head タグ内、JavaScript は body タグを閉じる直前で読み込むのが一般的です。

なぜ JavaScript は </body> の直前に読み込むかというと「ページの表示速度を速くするため」です。

JavaScript ファイルは CSS ファイルと比べてファイルサイズが大きいものが多く、読み込みに時間がかかります。

サイズが大きい JavaScript をできる限り後ろで読み込むことで、ページの表示速度を速くすることができます。

ページを表示する前に実行したい JavaScript コードがある場合は head タグ内で読み込むこともあります。

一方 CSS は body タグ内のコードがユーザーに表示される前に読み込みを完了しておかないと、レイアウトの反映に時間差が出てしまいます。

「スタイルシートが反映されていないページが表示されてから、スタイルシートが反映される」という順番になってしまうので、必ず head タグ内で読み込みましょう。

CSS ファイルを読み込む順番について

CSS は読み込む順番でレイアウトが変わってしまうことがあるのでご注意ください。

たとえば

• bootstrap.min.css で p { color:red; }
• style.css で p { color: blue; }

と書いた場合、 p 要素のテキスト色は最後に書いた blue になります。

今回は Bootstrap のスタイルシートを一部カスタマイズしたいので、style.css を一番最後に読み込んでいます。

JavaScript ファイルを読み込む順番について

このカレンダープロジェクトの場合、JavaScript ファイルは必ずこの順番で読み込んでください。

• bootstrap-datetimepicker.min.js は jQuery と Moment が読み込まれていること
• ja.js は Moment が読み込まれていること

が前提となっています。

読み込む順番が間違っていると Datetimepicker が使えなくなってしまうのでご注意ください。

コードに問題がないか確認する

開発者ツールの Console（コンソール）タブを開いて、赤いメッセージが表示されていないことを確認しましょう。

パスやファイル名が間違っていると赤いメッセージが表示されます。

Warning について

現在、黄色いメッセージが表示されていると思いますが、これは Warning（ワーニング）です。（* CDN を使う場合は表示されません。）

ここでは「SourceMap（ソースマップ）ファイルがありません」という Warning が表示されています。

ソースマップは、改行やスペースが全て削除された min ファイルをデバッグしやすくするためのファイルです。

ソースマップを追加すると、開発者ツールから css や js のファイルを調べるときに、min ファイルではなく元のコードを見ることができるようになります。

Warning は「警告・お知らせ」のようなものなので、そのままにしておいても問題はありませんが

1. Source Map ファイルを追加する
2. ブラウザの設定を変更する

のどちらかで Warning を消すことができます。

対応策① Source Map ファイルを追加する

Bootstrap をダウンロードした時に css フォルダにあった bootstrap.min.css.map を my_calendar/css フォルダにおきます。

Bootstrap をダウンロードした時に js フォルダにあった bootstrap.min.js.map を my_calendar/js フォルダにおきます。

Moment.js をダウンロードした時に min フォルダにあった moment.min.js.map を my_calendar/js フォルダにおきます。

ブラウザを再読み込み（リフレッシュ）すると Warning が消えます。

対応策② ブラウザの設定を変更する

Source Map を使わないようにウェブブラウザの設定を変更することができます。

設定の変更方法については以下の記事をお読みください。

参考：DevTools failed to load SourceMap（ソースマップエラー）の対処法

次に行うこと

これで HTML の準備は完了です。

次回からはカレンダー画面の HTML を書いていきましょう。