GattsCOM

ブログ

BLOG

  1. Home
  2. Blog
  3. #Bootstrap

Bootstrap、Font Awesomeの導入方法

こんにちわ！研修員の佐藤です。僕が課題で使ったBootstrapとFont Awesomeの簡単な説明をします。BootstrapはPC、タブレット、スマートフォンに対応したレスポンシブなサイトを作れ、スタイリッシュなページを作るのに便利なツールです。Font Awesomeはいろいろな種類のアイコンを使うのに便利なツールです。ではさっそく紹介していきます！まずは準備で<head>～</head>の間に下記の「<link rel="～」から始まる二行を入れます。● Bootstrap　・入力フォームの変え方　inputタグに「class="form-control"」を追加してみました。　コードの「<div class="container">」「<div class="row">」「<div class="col-xs-2">」はbootstrapのグリッドシステムというもので、同じページをスマホや大画面のPCで見た時にそれぞれの画面に対応したレイアウトにしてくれる便利な機能です。　「class="form-control"」を追加してやるだけだと、画面いっぱいに入力フォームが伸びてしまうので、今回は幅を指定してやるために使いました。　・テーブルの変え方　tableタグに 「class="table table-bordered" 」を追加してみます。　デフォルトのテーブルは比較しやすいようbootstrapのテーブルと同じにするためwidthとheightを入れていますが、bootstrapは先程のグリッドシステムでその幅にあったテーブルのwidthを自動で設定してくれます。　widthとheightを入れてやれば違いはパッとしませんがbootstrapにはデフォルトにはない機能が存在します！　・ストライプ　　tableタグに「class="table table-bordered table-striped"」を追加してやります。　　行毎に背景の色を自動で変えてくれて横を間違えず見ることが出来ます！　・ホバー　　tableタグに「class="table table-bordered table-hover"」を追加してやります。　　カーソルをあわせた行のみ背景の色を自動で変えてくれます！・ボタンの変え方　buttonタグに 「class="btn"」 を追加します。後ろに「btn-primary」を追加してやることでボタンの色を青色に変えることができます。　他の色の種類は　青：btn-primary　白：btn-default　赤：btn-danger　緑：btn-success　水色：btn-info　橙：btn-warning　があります。●Font Awesomeここ（http://fontawesome.io/icons/）で使いたいアイコンをクリックして、赤い矢印の一行をコピーして自分のコードに張り付ければ完成です！このようにいつものコードにちょっと手を加えるだけで見栄えが断然変わります！これらを使ってより見やすいウェブページを作ってみてはいかがでしょうか？
記事をもっと見る