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でやる方法。1行だけ、複数行の字下げも対応

どうもチャーさんです。   あなたは字下げをcssでどうやればいいのか? と疑問に思ってませんか?   この記事では、cssを使い、 1行だけ字下げ、複数行を字下げする方法を、 書 …

no image

cssの書き方で大なりと書くとどうなるか知りたいならこの記事。

どうも、チャーさんです。   あなたはcssの書き方で大なり (例 .class > p )のように書くと、 どう動くのか疑問に思ってませんか?   この記事では、大なりで書 …

no image

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

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

no image

レスポンシブで要素を消す方法「簡単にできます」

どうも、チャーさんです。 あなたは、レスポンシブで要素を消すには、 どうしたらいいのだろう、と思っていませんか?   この記事では、レスポンシブで要素を消す方法を、 コード例付きで書いてます …

no image

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

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

no image

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

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

no image

cssで追随させる方法、スクロールしてもついてくるよ

  どうも、チャーさんです。   あなたは、cssでサイドバーなどを、 追随させる方法を知りたいと思っていませんか?     この記事では、スクロールしても、 …

no image

liタグを横並びにする方法。この方法なら15秒でできますよ。

どうも、チャーさんです。   あなたがliタグを横並びにしたい、 そう思っていませんか?     この記事では、liタグを横並びにする方法を、 書いています。 &nbsp …

no image

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

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

cssの効率的な学習方法を知りたいなら読んでください。

  あなたはcssの学習方法を模索していますか? どうしたらもっと効率よく早く学習し上達できるのか、 その方法を探していますか?   この記事では、cssの学習方法について お話し …

no image

レスポンシブでフォントサイズを可変にする方法「手間いらず」

どうもチャーさんです。   あなたはレスポンシブで、 フォントサイズを可変にする方法を 探していますか?   この記事では、フォントサイズをレスポンシブで 自動調整できる方法を書い …

no image

cssでドロップダウンメニューを作る方法

どうも、チャーさんです。   あなたはcssでドロップダウンメニューを 作りたいと思っていませんか?   この記事ではjavascriptなどを使わずに htmlとcssのみでドロ …

no image

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

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

no image

コーダーがphotoshopを使えた方がいいのかについて書きます。

どうも、チャーさんです。   あなたはコーダーはphotoshopを、 学んだ方がいいのか?   仕事獲得のためには、コーダーも、 photoshopを使えた方がいいのか? と疑問 …

no image

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

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

最新記事

チャーさん

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

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

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