日々の反省

学んだことをつらつらと書いていきます。

今さらながらBootstrapを学んで見る① はじめの一歩

Bootstrap

スポンサードリング

はじめに

ちょこちょこ覗く程度にしか開発技術に触れなくなってから早数年。マネジメント職としてお客様や仲間のために力を使うのが仕事であり、それに飽き飽きしている自分がいます。請負開発は喜んでもらえるととてもうれしいけど、結局自分のものではないし、そろそろ自分がやりたいことのために全力を尽くしたいと思い始めています。なんか作ってみるかと思ったところ、やっぱりレスポンシブデザインだよね！となるとBootstrapだよね！の流れで今ここ。

ゴール設定

今回いろいろやってみるにあたって一旦のゴールを決めておこうかと思う。やりきる意味でも目標あった方が張り合いあるので。そこでECサイトのUXを意識してモックアップしてみようかと思います。AmazonさんやZOZOTOWNさんなどよくお世話になります。使いやすさを最大限に高めようとするとどうなるかやってみようかなと思っています。

はじめの一歩

インストール

今回は自分でダウンロードしてきて使うことにしました。実際には構成管理ツールを利用してインストールするほうがみんなで開発するときとかには絶対向いてます。

Bower

bower install bootstrap#v4.0.0-alpha.2

npm

npm install bootstrap@4.0.0-alpha.2

便利な時代になったものです。自分が現役の頃はJava使いだったのでMavenが主流でした。というか他無かった気がする。いまはJavaならGradleでしょうかねぇ。

最小限のテンプレート

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>■ここにタイトル入れてね</title>

    <link href="css/bootstrap.min.css" rel="stylesheet">
    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>
    ■ここに本文いれてね
    <script src="js/jquery-2.2.1.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
  </body>

バージョン情報とかは書き換えてくださいね。metaタグもSEO意識したやつとか必要に応じて足さなきゃダメですね。今後はこの最小限のテンプレートにいろいろ足しつつ少しずつ形を作ってみたいと思います。

書籍も出てはいるんですね。基本を捉えるには読んでみたほうがよいかもですね。 他にも何冊か見かけましたがどれが良いかは不明です笑

UIまで手の回らないプログラマのためのBootstrap 3実用ガイド