【Boostrap Cheet Sheet】チートシートを使ってさらにwebサイトを爆速で作る方法

HikoPro

こんにちは！大学生クリエイターでWebライター｜エンジニア｜YouTuberとして活動していますHikoProです！最近は「若者のチャレンジを後押しするメディア」Z大学の編集長をしています！

Bootstrapを使ってwebサイトを作っているが、便利だけどサイトが英語だしなかなか思うように扱いこなせてない。。。
Bootstrapをもっと効率よく扱えるCheet Sheet（チートシート）的なものはないの？

今回の記事ではプログラミング初心者向けに、ほぼコピペでかっこいいサイトをサクッと作れる方法をご紹介します！

CSSを書く事なく、HTMLタグの中にコードをちょろっと書くだけでサクッとかっこいいサイトが作れるCSSのフレームワークBootstrapですが、サイトの見方がよく分からなかったり、扱いきれていない方がいるかと思います。

今回は便利なBootstrapをさらに便利にしたチートシート（Bootstrap Cheet Sheet）の使い方をご紹介します！

✔︎こんな方にオススメ

Bootstrapを扱いきれていない方
Bootstrapのコードをまとめたチートシート的な物が欲しい方
サイトの見た目をサクッと作ってPHPやJavaScriptの学習をしたい方

Bootstrapとは？

Bootstrap（読み方：ブートストラップ）はTwitter社が開発したCSSのフレームワークです。フレームワークとは簡単にいうとその言語をより使いやすく便利にしたものです。

フレームワークとは、アプリケーションソフトを開発する際によく必要をされる汎用的な機能をまとめて提供し、アプリケーションの土台として機能するソフトウェアのことです。元々は枠組み、下部構想、構造、組織という意味の英単語です。アプリケーションのひな形であり、これを開発に利用することで、大幅な効率の向上が見込めます。
ferret（https://ferret-plus.com/996）

ネコ君

Bootstrapを使うと効率よくCSSがコーディングできるってことだね！

Bootstrapを使って作られた有名なサイトを一つあげるとAirbnbがあげられます。

Bootstrapを使うメリット・デメリット

HTMLタグにBootstrap（CSS）を書くことができる
効率よくコーディングができる
簡単にカッコいいページができる
レスポンシブデザインに対応している
ネット上にテンプレートが沢山ある（コピペでOK）

メリットをざっくりと上げるとこんな感じです、HTML,CSSでサイトを作る際は良いことしかないので、ぜひマスターして使いこなせる様になることをオススメします！

良いことしかありませんが、一つデメリットを上げるとすると、便利すぎてBootstrapを使っているユーザーがかなり多いのでデザインが被ってしまい独自性の高いサイトは作りにくいと言った点です。

このことを業界ではBootstrap臭のするサイトと言います

↓Bootstrapの基本的な使い方についてはこちらの記事を参考に↓

【入門 Bootstrap 使い方】初心者でも爆速でカッコいいサイトを作れる

Bootstrap Cheet Sheet（チートシート）の使い方

まずそもそも、チートシートとは何なのか？と言うと、

１枚のページや資料でその情報や使い方がまとめられたシートのことです。

例えば、、、

このように、ブロガーの方や情報発信者の方が、よく使うコードまとめシート的な物を配布しています。

プログラミングでは実際に使わないコードが結構あったりするので、初心者の方は実際に経験豊富な方が作ったチートシートを見ながらコーディングすると効率よく学習する事ができます。

✔︎チートシートのメリット

よく使うコードが集約されていて初心者にオススメ
ググる事なくサクッと欲しい情報が得れる
コードの暗記教材としてもオススメ

1.Bootstrap Cheet Sheet のサイトにアクセス

では早速Bootstrapをより便利に使えるチートシートのサイトをご紹介します。

Bootstrap 4 Cheat Sheet はhackerthemesが作ったBootstrapのコードをまとめたサイトで、基本的にコピペするだけで、カード型のボックスや、ページネイション、モーダル表示など、初心者が１からコーディングすると手間のかかる物をコピペで再現できるシートです。

チートシートはこのようになっており、約400以上のテンプレートコードがあり、

コードと、表示結果が同時に見れて、自分が求めているデザインが一目でわかります。

400以上のテンプレートがある
コードと表示結果を同時に見れる
デザインがシンプルでどんなサイトにも合う
コピペで使用可能

2.Bootstrapを有効化にする

まずこのシートを使うにはBootstrapを使う為のコードをHTMLファイルのheadタグに書く必要があります。

<head>

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>

</head>

こちらのコードを<head></head>の間にコピペしてください。

これでBootstrapは有効になりました。

Bootstrapとは？基本的な使い方はこちらの記事をご覧ください！

3.チートシートをコピペしてサイトを作る

もう後はコピペするだけで簡単にシンプルなサイトが作れてしまいます。

作りたい物をクリック
実行結果を確認
コードをコピー
エディタに貼り付け
テキストを変更する
場所や間隔などをCSSで微調整

たったのこれだけでOKです。

初心者の方はチートシートに頼り過ぎないようにしましょう！

PHPやJavaScriptの学習をする際に、サイトの見た目をサクッと作りたい時に利用するといいです！

Bootstrapチートシートまとめ

ネコ君

チートシートとっても便利だけど、初心者の方はある程度勉強した後に使った方がいいね！

いかがでしたでしょうか！

チートシートを使えば、サクッと簡単にサイトを構築できるので、PHPの学習ベースを作ったりするにはオススメのツールです！

この記事を参考にぜひ、Bootstrapチートシートを活用して見てはいかがでしょうか！

最後までご覧頂きありがとうございました！

IT・テクノロジーで生活と仕事をもっと豊かに