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

スポンサードサーチ

関連記事

no image

cssで背景色を背景画像の上に重ねる方法「コードつき」

どうも、チャーさんです。   cssで背景色を背景画像に重ねる方法が、 知りたい。そう思っていませんか?   この記事では、cssで背景色を 背景画像の上に重ねる方法を書いています …

no image

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

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

no image

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

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

no image

cssで背景色を二色表示させる方法「コードつき」

どうも、チャーさんです。   あなたはcssで背景色を二色表示するには、 どうしたらいいんだろう? と思っていませんか。   この記事では、cssで背景色を二色 表示させる方法とコ …

no image

cssのborderを初学者でもわかりやすいよう説明します

どうも、チャーさん(@chaa___san)です。   あなたはcssのborderとは何か? と疑問に思っていませんか?   この記事ではcssのborderについて、 初学者で …

no image

cssの書き方をまとめました「よく使う内容を網羅」

どうも、チャーさんです。 あなたはcssの書き方について、 網羅的に知りたいですか?   この記事ではcssの書き方について、 よく使われるものについてまとめてみました。   なの …

no image

インライン要素にmarginの上下が効かない時の解決方法「簡単です」

  どうもチャーさんです。   あなたはインライン要素にmarginの上下を、 効かせたいのに効かなくて困ってませんか?   この記事では、そんな状態の解決方法を、 書い …

ワードプレスで文字の周りを線で囲う方法(コピペで一発でできます)

  どうもchamです。   あなたはワードプレスで記事を書いていて 囲いをつけたいと思ったことはありませんか?   ここに文字を入れる   こんな風に囲いをつ …

no image

cssで文字色をつける方法とコードを紹介

どうも、チャーさん(@chaa___san)です。   あなたはcssで文字色を変えたい。 そう思っていませんか?   この記事では、cssで文字色をつける方法を、 まとめましたの …

no image

cssで背景色をつける方法とコードの書き方

  どうも、チャーさん(@chaa___san)です。   あなたはcssで背景色をつけたいんだけど、 どうすればいいかわからない。   そう思っていませんか? &nbs …

no image

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

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

no image

z-indexが効かない場合の解決法(relativeつけたのに効かない場合)

   どうもチャーさんです。   あなたはz-indexが効かないと困っていませんか? ちゃんとrelativeもつけてるのに、 なぜ効かないんだと悩んでいませんか?   この記事 …

no image

見出しに横線をつける方法「webページ制作に便利」

どうも、チャーさんです。   あなたは見出しの横に、横線を表示させたい。 そう思っていませんか?   この記事では、見出しに横線をつける方法を、 書いています。(以下のようなのがで …

no image

コーダーの仕事内容をわかりやすく紹介します。

どうもチャーさんです。   あなたはコーダーの仕事内容って、 どんなだろう? と思っていませんか。   またコーダーって具体的にどんなことをやってるんだろう? と疑問に思っていませ …

no image

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

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

最新記事

チャーさん

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

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

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