Swift実践ブログ

ド文系アラサー社会人が独学でプログラミングを学ぶ記録

【Bootstrap】Bootstrap4のテンプレートを試してみる

■はじめに

CSSフレームワークまわりに興味があったこともあり、Bootstrapを利用したテンプレートを触ってみました。

 

■環境

MAMP 4.4.1

・Bootstrap4

 

■試す手順

1.Start Bootstrapのサイトへアクセスしテンプレートを選ぶ

今回は「Creative」のテーマで試します。

Start Bootstrap - Free Bootstrap Themes and Templates

f:id:hfoasi8fje3:20180731001220p:plain

 

2.詳細画面からダウンロード

Creative - One Page Bootstrap Theme - Start Bootstrap

f:id:hfoasi8fje3:20180731001347p:plain

 

3.ダウンロードしたファイルをMAMP環境で実行する

f:id:hfoasi8fje3:20180731002343p:plain

 

4.テンプレートの内容が表示される!

完成されてますね、、ちなみに、文字の変更や画像の変更はテンプレートファイル内にあるHTMLファイルやCSSファイルを書き換えるだけで簡単に変更できます。

f:id:hfoasi8fje3:20180731003054p:plain

 

■おわりに

細かいデザインの変更等はHTML/CSSJavaScript、Bootstrapの知識が必要ですが、これだけテンプレート化されているのは本当にすごいですね。CSSフレームワークは次々と新しいものが出てくるので、最近流行っているものを使ってみることにも興味が出てきました。

 

■関連リンク

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

Start Bootstrap - Free Bootstrap Themes and Templates

無料テンプレートで爆速WEB制作!Start Bootstrapを使ってみよう! | 札幌・東京のホームページ制作・ウェブ制作会社monomode

Bootstrap 対応!2017年最新の無料HTMLテンプレート上半期まとめ - PhotoshopVIP

【Boostrap入門】オシャレでレスポンシブなポートフォリオサイトの作り方 | creive【クリーブ】