こんにちは！新人脱出かもしれない森田です。
数日前はすごくあったかかったのに、昨日今日とものすごい冷え込みです。はふはふ言いながら鍋焼きうどんとか食べたくなります。

前回Bootstrapの紹介をしましたが、その派生としてBootstrapを使って実際に１からwebサイトを作ってみるという連載企画的なものに挑戦しちゃいます。連載ってなんか良い響きですね。
では始まりますよー

制作環境を整える

webサイトを作るといってもいきなりコーディングをするわけではありません。元弓道部的な説明だと、弓を引く為には道場を掃除したり的や弓具の準備が必要です。何事も土台が大切なのです。

フォルダ作成

web制作の土台って何かというと、フォルダとファイルの整備です。

BootstrapをサイトからDLしてきたら、zipファイルを解凍します。解凍したてのフォルダ名は”dist”となっていますが、制作用に“_sample”に名称変更しました（名前はなんでもいいです）。フォルダの中にはcss、fonts、jsという３つのファイルが入っています。これらをそのまま使用します。

この_sampleフォルダが今後webサイトを作っていく為の基本フォルダです。長い付き合いになると思うのできれいに使いましょう。

index.htmlを作成

記念すべき１ページ目を作ります。

webサイトのメインページのファイル名は“index.html”がお決まりパターン。_sampleフォルダの下に右クリックやテキストエディターでファイルを新規作成して“index.html”と名付けましょう。

index.htmlを作ったついでにベースだけ記述してみました。bootstrap.cssのリンクも貼って、Bootstrap使う気満々アピールです。

動作確認

これは本当にちゃんと動くのか？

さっくりhtml書いてはみたけれど、作ったindex.htmlがちゃんとbootstrap.cssを反映して動いてるかは動作確認しないことには分かりません。index.htmlファイルをブラウザで開いてみましょう。森田はよく記述ミスしまくるため、こまめなブラウザチェックを心がけてます。

…といっても、何か書かないとこのままでは真っ白なのでbodyの中に“test”と書き入れてみます。
ページ上に文字が表示されていたらオッケー。さらに、<h1>を使ってcssを読み込んでいるかをチェック。

なんということでしょう
小さかったtestが大きくなったではありませんか

cssファイルも確認してみると、しっかり設定通りになっていることが分かると思います。これで表示確認が出来ました。さらにプログラム側でもエラーが出ていないか見てみます。

Macの“command+option+i”というショートカットキーでインスペクタを出せます。実行中のプログラムの中身を確認出来るとてもありがたいツールです。いつもいつもお世話になってます。

もしエラーが出ると赤文字でその詳細が表示されます。試しにmoritaと打ってエラー表示させてみたんですが、moritaなんてないよって言われてますね。そりゃそうだ。

プログラムエラーもないことが確認出来たら、これで制作環境がばっちり整いました！
もういつでもwebサイト作れちゃいます。さあ何作りましょうか！（鼻息荒め）

次回予告

制作環境が整ったので、次回からはBootstrapのサイトのTemplateを参考にwebサイトを作っていきたいと思います。

おお、いかにもwebサイトな感じのデザインですね。これにきれいな画像はめこんだら本物っぽくなりそうです。せっかくだから森田好みのおいしそうなサイト作りたいなあという野望を抱きつつ、それがどんな風に実現されるのか？！乞うご期待です。押忍！