目次

• はじめに
• 基本の 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> の直前に読み込むかというと「ページの表示速度を速くするため」です。

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

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

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

一方 CSS ファイルは早い段階で読み込んでおかないと「スタイルシートが反映されていないページが表示されてから、スタイルシートが反映される」という順番になってしまいます。

最初から CSS が反映されたページが表示されるように 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 について

現在、黄色いメッセージが表示されていると思います。

これは「SourceMap（ソースマップ）ファイルがありません」という Warning（ワーニング）です。

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

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

Warning は「警告・お知らせ」のようなものなので、そのままにしておいても動作に影響はありませんが、以下の方法で表示を消すこともできます。

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

対応策① 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 が消えます。

対応策② CDN

Bootstrap などのファイルをダウンロードではなく CDN（コンテンツ・デリバリー・ネットワーク）経由で読み込むことでも対応できます。

CDN を使う方法は次のステップで紹介しています。

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

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

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

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

次に行うこと

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

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