ヨルフの日記

ヨルフといいます．知ったこと，体験したこと，考えたことなどを発信していきます．英語勉強中．Amazon.co.jpアソシエイト

Bootstrapを使ったホームページ作成、はじめの一歩

f:id:yoruhu:20190601144533j:plain

Bootstrapを使ってホームページを作っていこうと思うので、はじめの一歩として、環境構築とHello Worldを済ませた。環境構築といってもフォルダをダウンロードしただけだけど。


とりあえずHello Worldは済ませたので、あとはどんどん作り込んでいくぞ！…と言いたいところだけど、Hello Worldがシンプルすぎて本当にBootstrapを使えるようになってるのか不明。他の機能使いながら確認していこうかな。

 

以下、詳細。


背景

  • paizaラーニングでBootstrapを使ったホームページの作り方を勉強中
  • Bootstrapについてはなんとなく使い方はわかってきているけど、環境構築はしていない

 

やったこと

  • Bootstrapを使ってホームページを作ってみる（Hello World）

 

実際にやったことの詳細

bootstrapのトップページにいく

Bootstrap · The most popular HTML, CSS, and JS library in the world.

 

コンパイル済みのファイルをダウンロードする

「Download」ボタンを押す→「Compiled CSS and JS」の「Download」ボタンを押す→ bootstrap-4.3.1-dist という名前のフォルダがダウンロードされる

 

フォルダをデスクトップに設置

 「bootstrap-4.3.1-dist」フォルダをコピーして、デスクトップに貼り付け

 

最初のページを作成

Bootstrapの公式のintroductionページ（Introduction · Bootstrap）の「Starter template」に掲載されている、HTMLのテンプレートをコピー（「copy」ボタンを押せば簡単にコピーできる）。テキストエディタを開き、ペースト。index.htmlという名前で保存。

 

作ったページを確認

ブラウザで、index.htmlを開く。こんな感じ。

f:id:yoruhu:20190527192610j:image

というわけでHello World完了。