大阪のホームページ制作会社。SEO対策、企画提案ならエボルワン。

  • 株式会社エボルワン
  • 株式会社エボルワン
  • 株式会社エボルワン

ハッシュタグ「#evoluone」でインスタ投稿!

2015.8.12

Bootstrapでレスポンシブルサイト作成

Bootstrapでレスポンシブルサイトを簡単作成

すっかりPC離れし、「WEBサイトはスマートフォンでしか見ない」と言う人もかなり増えてきました。

が、しかし!PC様に作成されたサイトは、スマホで見るとまぁ見事にデザインが崩れているではありませんか。

なら、新しくスマホ用にサイトを作成する?ですが、これでは時間も費用もかかってしまいます。

そこで大活躍するのが、「Bootstrap」というCSSのフレームワークです。

bootstrap

Bootstrapを使用すれば、HTMLファイルにCSSファイルを読み込ませて少しカスタマイズするだけで、レスポンシブデザインのサイトに変化しちゃいます。

 

「Bootstrap」の導入方法

では、どのようにしてBootstrapを使うのか、簡単に説明したいと思います。

とはいえ、さすがに既に作成済みのPCサイトに組み込む方法を説明するのは難しいので、初めて導入する方への説明となります。

ご容赦ください。

1.Bootstrapのサイトにアクセスし、「Download Bootstrap」ボタンを押します。

bootstrap_dl

2.「Download」欄にある「Bootstrap」の下にある「Download Bootstrap」ボタンを押してファイルをダウンロードし、解凍します。

download

3.サイト内にHTMLのテンプレートが用意されているので、コピーしておきます。

 

4.2にて解凍した「bootstrap」フォルダにindex.htmlを作成し、3でコピーしたHTMLコードを貼り付けます。

 

はい、これで準備は完了です。ね、簡単でしょ?

 

現状のサイトに組み込むには当然カスタマイズが必要となりますので、仕組みさえ覚えればとても簡単!

皆さんも、「Bootstrap」でクールなレスポンシブサイトを作成してみてはいかがでしょうか?

WEB制作のご依頼はCLICK!

Facebookで共有する
0
はてなブックマークで共有する
1
twitterで共有する
0
Google+で共有する
0
MENU