simplecoreな毎日

アラフォー既婚男性の日々、子育て、その他雑記

2017.10.11

bootstrap4の個人的なスターターテンプレート

WEB

この記事は2017年10月25日に内容を更新しました。

レスポンシブサイトを作成するのに便利なフレームワークは色々ありますが、個人的によくつかうのはやはりbootstrapです。

これまではbootstrap3をつかっていましたが、久々に公式サイトを見てみたらbootstrap4の方もかなり仕上がってきたようなので、そろそろこちらを使い始めようかと思っています。

Bootstrap
The most popular HTML, CSS, and JS framework in the world.

今までと比べて、デフォルトでも大分スッキリしたデザインになっていますが、恐らくそのままつかうことは無いと思うので、今後のことを考えてスタート用のテンプレートを作りました。一々準備するのも面倒なので。ただ、あくまで個人的につかうものとして用意しているものなのであしからず。

僕がbootstrapに求めるもの

僕がbootstrapに頼る部分は、ナビゲーションのトグルボタンとグリッドシステムくらいでしょうか。なので、その部分をデザインに合わせてすぐにカスタマイズできるようなテンプレートにしたつもりです。恐らくちょくちょく更新していきます。

HTML部分

<!DOCTYPE html>
<html lang="ja">
<head>
  <!-- Required meta tags -->
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <title></title>
  <!-- Bootstrap CSS -->
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
  <!--add CSS-->
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
  <link rel="stylesheet" href="assets/css/style.css">
</head>
<body>

  <nav class="navbar navbar-toggleable-md navbar-inverse bg-inverse fixed-top">
    <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarsExampleDefault" aria-controls="navbarsExampleDefault" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <a class="navbar-brand" href="#">Navbar</a>

    <div class="collapse navbar-collapse" id="navbarsExampleDefault">
      <ul class="navbar-nav mr-auto">
        <li class="nav-item active">
          <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Link</a>
        </li>
        <li class="nav-item">
          <a class="nav-link disabled" href="#">Disabled</a>
        </li>
        <li class="nav-item dropdown">
          <a class="nav-link dropdown-toggle" href="http://example.com" id="dropdown01" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown</a>
          <div class="dropdown-menu" aria-labelledby="dropdown01">
            <a class="dropdown-item" href="#">Action</a>
            <a class="dropdown-item" href="#">Another action</a>
            <a class="dropdown-item" href="#">Something else here</a>
          </div>
        </li>
      </ul>
      <form class="form-inline my-2 my-lg-0">
        <input class="form-control mr-sm-2" type="text" placeholder="Search">
        <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
      </form>
    </div>
  </nav>

  <div class="container">
    <div class="row">
      <div class="col-md-9">
        メインカラム
      </div>
      <div class="col-md-3">
        サイドカラム
      </div>
    </div>
  </div><!-- /.container -->

  <!-- jQuery first, then Tether, then Bootstrap JS. -->
  <script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>
</body>
</html>

CSS部分

@charset "utf-8";

/*******************
starter.css
*******************/
body {
	padding-top: 5rem;
}
.starter-template {
	padding: 3rem 1.5rem;
	text-align: center;
}
/*******************
navbar
*******************/
.navbar{
	padding: 0 1rem;
}
@media screen and (max-width: 768px){
	.navbar{
		padding: 0.5rem 1rem;
	}
}
.bg-inverse {
	background-color: #ddd!important; /*ナビゲーション部分の背景色*/
}
.navbar-inverse .navbar-brand {
	color: #333; /*サイトタイトルの文字色*/
}
.navbar-inverse .navbar-brand:hover {
	color: #000; /*サイトタイトルの文字色(hover時)*/
}
.navbar-inverse .navbar-nav .active>.nav-link, .navbar-inverse .navbar-nav .nav-link.active, .navbar-inverse .navbar-nav .nav-link.open, .navbar-inverse .navbar-nav .open>.nav-link {
	color: #000; /*ナビゲーションメニューのアクティブ時の文字色*/
}
.navbar-inverse .navbar-nav .nav-link {
	color: #666; /*ナビゲーションメニューの文字色(クリック可能)*/
	padding: 1rem 0.5rem; /*ナビゲーションメニューのボタンの高さ(paddingで調整)*/
}
.navbar-inverse .navbar-nav .nav-link:hover {
	color: #000; /*ナビゲーションメニューの文字色(クリック可能)(hover時)*/
}
.navbar-inverse .navbar-nav .nav-link.disabled {
	color: #999; /*ナビゲーションメニューの文字色(クリック禁止)*/
}
.navbar-inverse .navbar-nav .nav-link:focus{
	color: #000 /*ドロップダウンメニューオープン時の親メニューの文字色*/;
}
.dropdown-menu {
	/*ドロップダウンメニューの位置、パディング、枠線色、角丸の調整*/
	margin: 0;
	padding: 0;
	border: none;
	border-radius: 0;
}
.dropdown-item {
	color: #666; /*ドロップダウンメニューの文字色*/
	background: #ddd; /*ドロップダウンメニューの背景色*/
	padding-top: 0.5rem; /*ドロップダウンメニューの大きさ*/
	padding-bottom: 0.5rem; /*ドロップダウンメニューの大きさ*/
}
.dropdown-item:hover {
	color: #333; /*ドロップダウンメニューの文字色(hover時)*/
	background: #eee; /*ドロップダウンメニューの背景色(hover時)*/
}
@media screen and (max-width: 991px){
	/*ウインドウサイズが991px以下のときのドロップダウンメニューの大きさ(パディング)*/
	.dropdown-item {
		padding-top: 0.7rem;
		padding-bottom: 0.7rem;
	}
}
.form-control {
	border:#999 solid 1px; /*フォームの枠線色*/
	border-radius: 0px; /*フォームの角丸*/
}
.btn-outline-success {
	color: #fff; /*ボタンの文字色*/
	background-color: #aaa; /*ボタンの背景色*/
	border: #aaa solid 1px; /*ボタンの枠線*/
	border-radius: 0px; /*ボタンの角丸*/
}
.btn-outline-success:hover {
	color: #fff; /*ボタンの文字色(hover時)*/
	background-color: #999; /*ボタンの背景色(hover時)*/
	border: #999 solid 1px; /*ボタンの枠線(hover時)*/
}
.navbar-inverse .navbar-toggler {
	border:#666 solid 1px; /*トグルボタンの枠線*/
	border-radius: 0px; /*トグルボタンの角丸*/
	background: #666; /*トグルボタンの背景色*/
}

/***
以下はデフォルトのアイコンを変更する際につかう(デフォルトのままなら記述しない)
***/
.navbar-inverse .navbar-toggler {
	padding: 3px; /*トグルボタンの大きさ(パディング)*/
}
.navbar-inverse .navbar-toggler-icon {
	background-image: none; /*デフォルトのアイコンを削除*/
}
.navbar-inverse .navbar-toggler-icon:before{
	color:#fff; /*アイコンの色*/
	position: absolute;
	content:'\f0c9'; /*fontawesomeのunicode*/
	font-family: FontAwesome;
	top: 8px; /*アイコン、好みに応じて適宜調整*/
	left: 10px; /*アイコン、好みに応じて適宜調整*/
}

こんな感じのシンプルなテンプレートになります。といってもナビゲーション部分だけですが。

デモページ

bootstrapもjQueryもfontawesomeもCDNから読み込んでいるので、特にファイルをダウンロードする必要はありません。

注意点

デフォルトでは、ウィンドウを縮めたときに出てくるトグルボタンの中のアイコンが画像になっているようです。

CSSだけで簡単に色を変えたり出来るように、fontawesomeのWEBフォントをつかうようにしました。これでCSSだけで色を変えたりサイズを変えたり出来ます。もちろん、他のWEBフォントをつかうこともできます。

レスポンシブに対応したグリッドデザインがすぐに作れるGrid—A—Licious

WEB

レスポンシブに対応したグリッドデザインがすぐに作れるGrid—A—Licious

【WordPress】記事IDをつかったループ外での記事情報の取得と表示

WordPress

【WordPress】記事IDをつかったループ外での記事情報の取得と表示

好きが決まっているだけでミニマリストではない

THOUGHT

好きが決まっているだけでミニマリストではない

WordPressカスタマイズでよくつかうコードやタグ、その他色々

WordPress

WordPressカスタマイズでよくつかうコードやタグ、その他色々

超簡単!GIFアニメとCSS3アニメーションで目立つボタンを作る

WEB

超簡単!GIFアニメとCSS3アニメーションで目立つボタンを作る

シンプルで実用的なドロワーメニューが実装できるjQueryプラグインDrawer

WEB

シンプルで実用的なドロワーメニューが実装できるjQueryプラグインDrawer

楽天マガジンをつかってみた

LIFE

楽天マガジンをつかってみた

まさに青春狂走曲な一冊

BOOK

まさに青春狂走曲な一冊