Programing beginner by koala

【Bootstrap】の使い方①初心者向けの画像&動画付き「過保護説明」

レスポンシブ対応のかっこいいサイトが手軽に作れるフレームワークと言えば「Bootstrap」ですね!

【英語版】
https://getbootstrap.com/

【日本語版】
https://getbootstrap.jp/
※ただ単に翻訳された感じです。

例えば、レスポンシブデザインを作るには、PC用、タブレット用、スマホ用のCSSが必要ですが、Bootstrapを使うと、すでに用意されているコードのコピペで、ある程度のデザインが出来ちゃいます!

そんなBootstrapの使い方、基礎の基礎を説明していきたいと思います。

Contents

Bootstrapを30秒で説明!

まずは簡単にサービス内容から紹介していきますね(^^)

Bootstrapとは?

簡単にレスポンシブデザイン(↑)が出来る「フレームワーク」です。「フレームワーク」というのは「これ一つですべてが完了するキット(セット)」、テンプレートみたいな感じです。

例えば、wordで履歴書のテンプレートを検索すると、すでに出来上がったものがたくさん出てきて、コピペするだけで使えます。必要であれば、少しデザインをいじることも可能!

こんな感じで、すべてがすでに作られて「セット」になっているものを、無料で、コピペだけで使用できるサービスです。

Bootstrapのメリットとは?

やはり最大のメリットは、コードのコピペで、ある程度のデザインが出来てしまうところですね。しかも、レスポンシブ対応!!

また、サイトの横幅をpxではなく、均等に分けて(12等分)デザインしていくという考え方も、シンプルで画期的。このシステムを「グリッドシステム」と言いますが、このおかげで、簡単にレスポンシブ化出来るのです。

Bootstrapのデメリットとは?

すべてコミコミプランのため、デザインをちょこっと変えたい場合は、もちろんのことコードをいじる必要があります。

htmlやCSSが分からない人でもOKと紹介しているサイトもありますが、個人的には、多少の知識がないと、使いこなせないのかなと思います。。

また、コミコミプランをそのままコピペで使うと、見る人によっては「Bootstrapだな」って分かってしまうかもしれませんね。私みたいなド素人は分かりませんけど笑

Bootstrapの使い方

使い方は、FontAwesome同様、2ステップです!

ただ、FontAwesome同様、サイトが英語ですし、初心者は、どのコードをどこにコピペするの?っていうところだと思うので、その辺を詳しくみていきますね(^^)

ステップ1:Bootstrapを使えるようにする(導入)

Bootstrapを導入する方法は2種類あります。CDNを利用する方法と、ファイルをダウンロードする方法です。

ほとんどの方が、CDNにて導入しているようですので、こちらでもその方法でご紹介します。CDNって何?については、下記にまとめました!

CDNって何?初心者でも分かる画像多めの「過保護解説」

まずは「これを読み込んでね」っていうリンクコードをhtmlにコピペします。

コピーするコードは、Bootstrapのトップ画面から「Get started」をクリック!

そうすると、下記のようなコードが出てくるので、コピーします!

htmlコードを一から全て書くのが面倒な方は「Starter template」もあります。シンプルなhtmlコードに、上記のコードがすでに入った状態の「スーターターキット」のようなものです笑

これを見れば、上記のタグを、どこにコピペするか、もうお分かりですね(^^)

CSSコードは、<head>タグの中に、そしてJSコード(Javascript)は、<body>タグの中に貼り付けます。分からない場合は、動画を参考にしてください。

これで、準備完了です!

ステップ2:早速好きな部品を選んで使う(コードのコピペ)

本当にいろいろあるのですが、一番Bootstrapっぽいものをご紹介しておきますね!たぶん皆さんが使って、「おぉ!」ってなるのは、Componentsになるかなって思います。

※その他に関しては、動画をご覧くださいm(_ _)m

まずは、上記の「Documentation」をクリック!

そうすると、横にいろいろ出てくるのですが、その中で「Components」を選択。

Componentsとは、直訳すると「部品」という意味です。つまり、ここには、サイトを構成する「部品」がたくさんあるのです(^o^)

例えば、その中でFormsを選択し、

上記のようなフォームをサイトに設置したい!と思ったとします。そしたら、そのフォームのコードが、用意されているので、コピーして、設置したいところに貼り付けるだけ!!

すべてがコミコミのソースコードなので、これをコピペするだけで、同じ表示がされるようになってます。なんと、簡単!!

今回は、「Starter template」の<h1>タグの真下に貼ってみました笑

マージンなど指定していないので、見にくいですが、コピペだけで、こんなのが出来ました(^^)

細かいところは、CSSなどでデザインしていってもいいですし、htmlでデザインする場合は、その方法がサイトの方に紹介されているので(主にContents、Utilities)、参考にしてみてください。

この辺の説明も、動画の方で軽く触れているので、見てみてくださいね(^^)

まとめ!

ただでさえ、初心者には何かと複雑に感じる上に、英語なので思いっきり萎えますが、基礎だけ覚えてしまえば、かなり便利なツールだと思いますっ!

以上です!

About me

IT業界6年目にして、プログラミングの勉強を始めたkoalaです。

プログラミング用語が難しすぎる!ということで、初心者が初心者に解説するという型破りなブログを開設してみました。

専門用語少な目、分かりやすくをモットーにしています。

>>続きはこちら

今日の名言

クリックすると、あなたの心に響く誰かの名言が表示されます♪

 

今日の名言

 
※あなたの名言募集しています!詳細はこちら