ポートフォリオ・実績はこちら!!▶︎▶︎▶︎

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

CSS
この記事を書いた人
HikoPro

大学生フリーランスエンジニア|ライター|Webディレクター

【海外経験0の普通の大学生→世界を旅する→GoPro Awards受賞→バンコク不動産でインターン(売り上げ100万達成)→インドでIT留学(PHP,Laravel)→ベトナムでWebディレクター兼エンジニア】

HikoProをフォローする
スポンサーリンク

HikoPro
HikoPro

こんにちは!大学生フリーランスエンジニアのHikoProです!

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 Cheet Sheet(チートシート)の使い方

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

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

例えば、、、

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

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

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

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

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

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

チートシートはこのようになっており、約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.チートシートをコピペしてサイトを作る

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

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

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

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

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

Bootstrapチートシートまとめ

ネコ君
ネコ君

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

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

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

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

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

HikoPro
HikoPro

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

Twitterで記事の更新、フリーランスに関する情報を発信しているので、ぜひフォローお願いします!

スポンサーリンク
スポンサーリンク
この記事を書いた人
HikoPro

大学生フリーランスエンジニア|ライター|Webディレクター

【海外経験0の普通の大学生→世界を旅する→GoPro Awards受賞→バンコク不動産でインターン(売り上げ100万達成)→インドでIT留学(PHP,Laravel)→ベトナムでWebディレクター兼エンジニア】

HikoProをフォローする
CSS
HikoPro Blog

コメント

タイトルとURLをコピーしました