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

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

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

no image

cssの書き方cssはまとめて書いて楽をしましょう。

どうも、チャーさんです。   この記事ではcssの書き方の1つ まとめて書くについてお話ししてます。   なのであなたがこの記事を読めば、 今までより、「より早く、より効率的に、よ …

no image

htmlのリンクの下線を消す方法「1行書けば消せますよ」

どうも、チャーさんです。   あなたはhtmlのリンクの下線を消す方法を、 探していませんか?   この記事では、リンクの下線を消す方法を 書いています。   &nbsp …

no image

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

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

no image

メニューに下線をだすcss(マウスでホバーした時に)

どうもチャーさんです。 あなたはメニューに下線をだすcssを 探していますか?   この記事では、メニューの上に マウスを持っていくと、メニューに下線が 表示される方法を書いています。 &n …

no image

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

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

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

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

no image

cssの書き方これらのセレクタを知ってればほぼ困りません

どうも、チャーさんです。   あなたはcssの書き方でセレクタに ついて色々な書きかたがあってよくわかってない、 と感じていませんか?   この記事では様々なセレクタの指定方法を …

no image

wordpressで条件分岐でcss(デザイン)を切り替える方法

どうもチャーさんです。 あなたはwordpresで、条件分岐させて、 css(デザイン)を切り替えたいと思っていませんか?   ページごとに違うデザインを施せるように したい、そう思っていま …

no image

cssでメニューに区切り線を表示させる方法

どうもチャーさんです。   あなたは、cssでメニューに区切り線を、 表示させたいと思っていませんか?     この記事では、以下の画像のような、 区切り線を表示させる方 …

no image

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

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

no image

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

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

no image

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

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

no image

cssで平行四辺形を作る方法「1行足せばできますよ」

どうも、チャーさんです。   あなたは、cssで平行四辺形に できないものかと思っていませんか?   この記事では、要素をcssで平行四辺形に する方法を書いています。 &nbsp …

no image

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

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

最新記事

チャーさん

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

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

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