bootstrap を使って1ページだけのホームページを作る。
仕様は、以下の通り。
・1つのソースコードでパソコン、タブレット、スマートフォンなど
画面の大きさが異なる端末に対応する。
・お問い合わせやコメントなど、利用者が入力するフォームを設置しない。
・古いブラウザには対応しない。
・ソースコードは、すべてダウンロードして利用する(CDN は使わない。)
・利用するフレームワーク bootstrap
最低限準備するもの
1 ネット接続環境
2 Webサーバ(ホスティング、クラウドどちらでもOK)
3 HTMLを編集するテキストエディタ(サクラエディタなど)
4 ファイル転送ツール(FFFTPなど)
作成手順
1 PC上にページを作成するフォルダ(ディレクトリ)を作成
例:c\:sample_page
2 bootstrap をダウンロード
公式日本語サイトトップページ;
https://getbootstrap.jp/
ダウンロードページ:
https://getbootstrap.jp/docs/5.0/getting-started/download/
3 2 でダウンロードした zip ファイルを解凍し、ページを作成するフォルダの下に設置
例:c\:sample_page
+– bootstrap ※1
+– css
(この下に、スタイルシートファイルがあります)
+– js
(この下に、スクリプトファイルがあります)
※1 zip を解凍すると、フォルダ名は bootstrap-5.0.2-dist のような形式になっています。
bootstrap 以降の文字は、バージョンによって異なります。
フォルダ名は、bootstrap に変更します。
4 ベースになるHTMLを bootstrap の公式サイトからダウンロード
公式サイトは、無料のサンプルが公開されています。
https://getbootstrap.jp/docs/5.0/examples/
0からHTMLを作るより、一番イメージが近いサンプルを改造した方が楽だと考えます。
サンプルのソースコードは、Download exsamples ボタンで一括ダウンロードできます。
5 サンプルの HTML ページを保存
今回は、Album を元にして、HTML を作成します。
ダウンロードしたAlbum サンプルの index.html を、
bootstrap と同じフォルダに保存します。
例:c\:sample_page
+– bootstrap
+– css
(この下に、スタイルシートファイルがあります)
+– js
(この下に、スクリプトファイルがあります)
+– index.html
6 HTML を編集
テキストエディタを起動し、Album のソースを更新します。