目的
効率よくレスポンシブデザインのサイトを作るために、ここではBootstrapの使い方について研究していきたいと思います。
設定環境
- OS
- Mac OS X
- 10.12.6
- Mac OS X
- Software
- PostgreSQL
- 10.1
- Ruby
- 2.5.0
- Rails
- 5.1.5
- PostgreSQL
ウェブデザインを始めるにあたって
ウェブデザインをするにあたっては、CSSを学び、コーディングしていく必要があります。
CSSを習得するには時間が必要です。
これを効率よく他の人が作ったCSSをコピペしてデザイン完了するというコンセプトを持った、CSSのフレームワーク（テンプレート）がBootstrapと呼ばれるものです。
以下の内容で試したことを記述していきたいと思います。
共有しながら一緒に学んでいけたらと思いますので、アドバイス等いただければ嬉しいです。
ウェブデザインとは?
サイトやアプリの表面となるユーザーが見える部分でのウェブサイトのデザインをすることをウェブデザインと言います。
レスポンシブデザイン、レスポンシブサイトとは?
レスポンシブデザインとは利用される端末に合わせて、デザインを柔軟に対応させるという要素を含むデザイン方法です。 レスポンシブサイトとはレスポンシブデザインを導入しているウェブサイトになります。
Bootstrapとは?
CSS導入が簡易的に初心者でも完結でき、かつデザイン性に優れているフレームワークがBootstrapです。
一定のコードをコピーし、貼り付けるだけでデザインができてしまうことを想像してもらってもいいです。
まずはこの公式サイトにアクセスしてみましょう。
http://getbootstrap.com/
このサイト自体もBootstrapで作られているみたいです。
それではBootstrapの基礎について研究していきましょう。
Bootstrapの基礎
Bootstrapを勉強する上で今のところ効率よく学べてるのはドットインストールです。
Bootstrap 4入門
こちらのhackerthemeというサイトを使えば、
目的毎のコードサンプルが出てきます。
https://hackerthemes.com/bootstrap-cheatsheet/
こちらにもチートシーとがあるらしいです。
http://programming-study.com/technology/bootstrap-cheatsheet/
Bootstrap公式サイトからのサンプル活用方法
まずはこの公式サイトにアクセスしてDocumentをクリックしてみてください。
http://getbootstrap.com/
そこにStarter Templateがあり、さくっとTemplateのコードをコピーして自分のエディターなどにPasteしてみてください。これで遊ぶところから始めていきましょう。
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous">
<title>Hello, world!</title>
</head>
<body>
<h1>Hello, world!</h1>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<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.0/umd/popper.min.js" integrity="sha384-cs/chFZiN24E4KMATLdqdvsezGxaGsi4hLGOzlXwp5UZB1LY//20VyM2taTB4QvJ" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js" integrity="sha384-uefMccjFJAIv6A+rW+L4AHf99KvxDjWSu1z9VI8SKNVmz4sk7buKt/6v9KI65qnm" crossorigin="anonymous"></script>
</body>
</html>
この続きは研究中です。。
RailsアプリとBootstrap
Railsアプリ作成時点からBootstrapを導入していけるとのうわさがネット上で流れていたので調べてみました。 効率よくRailsアプリを作り、Bootstrapを活用しデザインを整えらるのであれば使ってみたいと思います。
以下でやり方を書いてあるので近々やってみます。
Ruby on Rails のWebアプリに Bootstrap を適用する