Oops! It appears that you have disabled your Javascript. In order for you to see this page as it is meant to appear, we ask that you please re-enable your Javascript!

bootstrap css

ブートストラップの使い方を初心者向けに紹介

投稿日:

Pocket

うも、チャーさんです。

 

あなたはブートストラップを使ってみたい、

または使わないといけないけど、

使い方がわからない。

 

導入の仕方も、何したらいいかもわからない。

そんな問題を抱えていませんか?

 

 

この記事では、ブートストラップの使い方を、

ブートストラップが初めてでも、

わかるように説明しております。

 

なので、この記事を読めば、

あなたはすぐにブートストラップを、

使えるようになるでしょう。

 

なので、ブートストラップを使えるように、

なりたいと思っているならば、

このまま下にスクロールして読んでみてください。

 

スポンサードサーチ

ブートストラップの使い方、やることは大きく2つだけ

 

まず、ブートストラップを使うために、

やることは大きく分けて2つだけです。

 

それは、

 

1スターターテンプレートをコピー

2そしてクラスを書く

 

 

この2つだけです。

それでは、それぞれ詳しく説明します。

 

スターターテンプレートをコピー

 

まず1つ目の手順の、

スターターテンプレートをコピペですが、

 

ブートストラップでは、

簡単にブートストラップを使えるように、

セットアップ的なコードが用意されています。

 

そして、このコードをエディターに、

コピペするだけで、もうすでにブートストラップを、

使える状態になります。

 

 

ちなみに、余談ですが、

ブートストラップを使えるようにするための、

セットアップには他の方法もあります。

 

しかし、その方法はファイルをダウンロードして、

プロジェクトごとにアップする方法なので、

それだと少し手間です。

 

なのでコードコピペのやり方がやりやすいでしょう。

 

テンプレコード取得方法

 

で話を戻しまして、

そのコードの取得方法を説明します。

 

ブートストラップのセットアップの、

コードですが、

ブートストラップの公式サイトにコードがあります。

 

ブートストラップ公式のコードのページ

 

(上のリンクは、ブートストラップ公式の

https://getbootstrap.com/docs/4.3/getting-started/introduction/

に飛びます。ここでコードが取得できます。)

 

 

そして上のリンクのページを下にスクロールすると、

 

 

という画像の箇所があるので、

ここのコードをコピーしてテキストエディターに、

ペーストしましょう。

 

ちなみに、

<html lang=”en”>となってますが、英語なので、

<html lang=”ja”>にして日本語にしときましょう。

 

 

これで手順1の、テンプレコードをコピペは終了です。

 

で次にここから下は手順2です。

 

スポンサードサーチ

クラスを書く

 

コードをコピーしたら、

あとは、ブートストラップが用意してくれてる、

クラスをタグに書いていくだけです。

 

 

でこれどういうことか、少し補足しますと、

ブートストラップではcssで使うクラスを、

前もって定義してくれてます。

 

例えば、背景色を青にしたい場合、

cssでは、background-color:blue;

と書きますよね。

 

 

ですがブートストラップでは、

背景色青は、bg-primaryというクラス名で、

もうcssデザインを作ってあるので、

 

そのクラスをつけるだけで、

デザインがきく状態になってるわけです。

 

 

とはいえ文字だけだとわかりづらいので、

実際にコードと実行画面の画像で説明します。

 

例えば、

 

まず先ほどのテンプレコードをコピペすると、

h1タグでhello worldと出ます。

 

 

でこの背景色を青にしたいとします。

 

なのでブートストラップで用意されてる、

bg-primaryのクラスをh1タグにつけると、

 

 

こんな感じで背景が青色になりました。

 

というわけで、ブートストラップでは、

こんな風にもうすでにクラスを定義してくれてます。

 

 

なので、ブートストラップで用意されてる、

クラスをタグに書いていけば、

いい感じのデザインをつけれます。

 

また他のクラスの例もみてみましょう。

 

 

紹介するのはボタンです。

 

ボタンにしても、btn btn-success

とブートストラップで定義してくれてる、

クラスを書くだけで、

 

 

こんないい感じのボタンになります。

 

なので、もうデザインはブートストラップで、

用意されてるので、あとはクラスを書くだけなのです。

 

つまり自分でcssでデザインしなくても、

デザインできちゃうわけですね。

 

ブートストラップのクラス一覧がある場所

 

で、そのブートストラップのクラスですが、

クラス一覧がブートストラップの公式ページにあります。

 

場所としては、

 

ブートストラップ公式サイトの、

ナビゲーションバーにある、

Documentationをクリックし、

 

 

 

この画像のように、画面左に出てる、

メニュー一覧の中にクラスが書いてあります。

 

ちなみに先ほど紹介した、ボタンなどは、

メニューのUtilities > Buttons の中に、

クラスが書いてます。

 

 

とまあ、こんな風に公式サイトに、

クラスが全部のってるので、

それを一通りみて、参照して

 

あなたが表示させたいデザインのクラスを、

タグに書いていきましょう。

 

そうすればブートストラップの、

デザインを使うことができます。

 

スポンサードサーチ

まとめ

 

それではまとめに入ります。

 

 

ブートストラップの使い方ですが、

 

1テンプレコードをコピーする。

2クラスを書いていく。

(クラスは公式サイト参照)

 

主にこの2点です。

 

 

そうすればあなたも、

ブートストラップで用意されている、

様々なデザインを使うことができます。

 

そしてcssで書くと難しいようなデザインも、

クラスを何個か書くだけで実現でき、

かなりの開発時間短縮になるでしょう。

 

 

というわけで、ブートストラップの使いかたは、

なんとなくわかったと思います。

 

そこであなたのプログラミングスキルアップのために、

まずはテンプレートのコードをコピーしてみましょう。

 

 

そしてそのあとは、公式サイトを参照しながら、

クラスを書いて、どんな風になるのか、

実際に試してみていってください。

 

そうすれば、あなたのスキルはどんどん上昇しますよ。

 

 

それでは、読んでもらってありがとうございました。

 

チャーさん

 

 

-bootstrap, css

スポンサードサーチ

関連記事

cssでテーブルの行間を広げる方法

  あなたはcssでテーブルに行間をとりたい、 (セルとセルの間のスペースを広げたい)と思ってませんか?   この記事では、cssでテーブルの行間を 広げる方法を書いてるので、読め …

no image

ブートストラップを使う利点をわかりやすく説明します。習得方法も紹介。

  どうもチャーさんです。   あなたはブートストラップを使う利点は、 何だろうと思っていませんか?   css使えばデザインなんてできる、 何でわざわざブートストラップ …

no image

cssの書き方カンマについての疑問はこの記事で解消

どうも、チャーさんです。   この記事ではcssの書き方の1つである カンマについて書いてます。   なのでこの記事を読めば、あなたは cssのカンマについての疑問が解消され、 さ …

no image

レスポンシブ対応の画像にする方法。1行コードを書くだけでOK

  どうも、チャーさんです。   あなたは画像をレスポンシブ対応にしたい、 そう思っていませんか?   ブレイクポイント毎に、画像の幅を指定するのは、 もう疲れた、何か一 …

no image

レスポンシブデザインを3秒で確認できる方法「各サイズ」

どうも、チャーさんです。   あなたは、レスポンシブデザインの確認方法を、 探していませんか?   この記事では、レスポンシブデザインを、 スマホサイズ、タブレットサイズ、pcサイ …

no image

cssで要素の位置調整をする方法を丁寧に解説コピペもok

どうも、チャーさん(@chaa___san)です。   あなたはcssで画像やdivで作った要素の位置調整を、 したいと思っていませんか?   この記事ではcssでそれらの要素の位 …

no image

cssで文章を省略する方法。コピペでok

どうもチャーさんです。   あなたはcssで文章を省略したいと、 思っていませんか?   この記事では、cssを使い、 文章を省略する方法を書いています。   &nbsp …

no image

position:absoluteがレスポンシブでずれるのを解決する簡単な方法

どうも、チャーさんです。   あなたはposition:absoluteが、 レスポンシブにすると、ずれるということで、 困っていませんか?   画面サイズを変えるだけで、 位置が …

no image

cssで背景画像を回転させる方法。1行書けばok

どうも、チャーさんです。   あなたはcssで背景画像を回転させたい。 そう思っていませんか?   この記事ではcssを使って、 背景画像を回転させる方法を書いています。 &nbs …

no image

cssで文字を回転させる方法「10秒以内にできます」

どうも、チャーさんです。 あなたはcssで文字を回転させたい、 そう思っていませんか?   この記事では、cssで文字を 回転させる方法を書いています。   なので、あなたがこの記 …

no image

cssの背景画像が繰り返しになるのを解決する方法

どうも、チャーさんです。   あなたはcssで背景画像を設置すると、 繰り返しになっていて困っていませんか?   この記事では、cssで表示した背景画像が、 繰り返しにならない方法 …

no image

画像の高さを揃える方法「簡単にできる方法です」

  どうも、チャーさんです。   あなたはサイズの違う画像の高さを、 揃える方法を探していますか?   この記事では、webページ制作で直面する、 画像の高さを揃える方法 …

no image

cssで背景画像を表示するコードと方法「コピペOK」

どうもチャーさん(@chaa___san)です。     あなたはcssで背景画像を表示したいですか?   この記事ではcssで背景画像を表示する方法、 コード、あなた自 …

no image

cssでボタンにhoverした時に色を変える方法

どうもチャーさんです。   あなたは、cssでボタンにhoverして、 色を変える方法を探していますか?   この記事では、ボタンホバーで、 ボタンの色を変える方法について、 お話 …

no image

cssで三角形を作る方法、コピペで一発でできますよ。

どうも、チャーさんです。   あなたはcssで三角を作る方法を、 探していますか?   この記事ではcssで三角を作る方法を、 書いています。     そしてこ …

最新記事

チャーさん

プログラミング・筋トレ・unity系の記事などを書いてます。

大学卒業後→開業→個人事業主7年目ぐらいです。webサイト制作したり、unityでゲーム開発しております。

youtubeもやってまして、主にプログラミング動画とかunity系の動画をあげてるので見てください。