「ひとかじりのりんご」

へっぽこエンジニアの備忘録。こちらは旧ブログ。新しい方はこちら→「http://sbkro.github.io」

Bootstrap3を使ってホームページをリニューアルしてみた。

2度目になりますが、Github Pagesにアップしている自分のホームページをリニューアルしました。前回は、Bootstrap2のカスタマイズテーマを使っていたのですが、今回はBootstrap3を利用して一から作り直しましたので、作業内容をメモ書きしておきます。

Bootstrap

まずはBootstrap。

 Twitter Bootstrapは、米ツイッターが開発・提供しているフロントエンドツールです。オープンソースで公開されており、誰でも無償でダウンロードしてすぐに使えます。

 Twitter Bootstrapは、Webデザインができないエンジニアでも、見た目をすばやく整えられるツールとして位置づけられています。最近では、管理画面などの非公開部分でTwitter Bootstrapを適用しているWebシステムを多く見かけますし、新規Webサービスのリーンスタートアップに使われるケースも多くなってきました。

ASCII.jp:いまさら聞けない「Twitter Bootstrap」とは? (1/2)|Webサービス開発者のためのTwitter Bootstrap入門

実行ファイル及びソースコードのダウンロードは公式サイトから。

Bootstrapの使い方・リファンレスは、公式サイトが一番参考になりました。

公式サイトにはテンプレートが用意されているので、デザインする手間が省けます。今回は、「Jombotron」と「Carousel」を採用しました。

アイコン


フォントデータ「Elusive-Icons」を利用しました。

ダウンロードは、Githubプロジェクトから

css」「fonts」フォルダを任意の場所に格納して、HTMLに以下の記述を行います。

<head>
<link href="./font/elusive-icons/css/elusive-webfont.css" rel="stylesheet">
</head>
....
<body>
<i class="el-icon-file-edit-alt"></i>
</body>

Metroライクなタイル


Bootstrap2のカスタマイズテーマ「Greenmind」から拝借。色・アイコンサイズの調整と最新のElusive-Iconsが使えるよう様に修正をかけています。

修正後のファイルはこちら

HEADタグにて上記CSSを取り込んだ後、以下のような記述を行います。

<div class="tiles row-fluid">
  <div class="col-md-4">
    <a class="tile accent" href="https://github.com/sbkro">
        <div class="icon"><i class="el-icon-github"></i></div>
        <div class="data">
            <h4>Github</h4>
            <p>View on my projects</p>
         </div>
    </a>
  </div>
</div>

Webフォント

今回はフォントの見栄えを良くするために、Webフォントを利用してみました。

WebフォントはWWW上からフォントを表示する技術である。HTMLにおけるフォントのダウンロードはCSS3.0 fonts moduleにて内包された。
http://ja.wikipedia.org/wiki/Web%E3%83%95%E3%82%A9%E3%83%B3%E3%83%88

フォントは、Google Web Fontsから。英字フォントしか無いですが、豊富かつプレビュー出来るところがGoodです。

どのような組み合わせがよいのか分からなかったので、下記サイトを参考にしました。今回はBoldは「Ubuntu」、Normalは「Helvetica」を採用しました。

Webフォントを利用するためには、HTMLとCSSに以下の記述を行います。

<head>
  <link href="http://fonts.googleapis.com/css?family=Ubuntu:bold" rel="stylesheet" type="text/css">
</head>
h1,
...
.h6 {
  font-family: 'Ubuntu', "Helvetica Neue", Helvetica, Arial, sans-serif;
  ... 
}

Favicon

無いよりあった方が良いので作りました。今回は、下記Webサービスを使いました。実際の見え方を確認しながら編集出来る点が非常に良かったです。

Faviconを表示するには、HTMLに以下の記述を行います。

<head>
  <link rel="shortcut icon" href="./img/favicon.ico" type="image/vnd.microsoft.icon" />
  <link rel="icon" href="./img/favicon.ico" type="image/vnd.microsoft.icon" />
</head>

AppStoreのバナー

iOSアプリのダウンロードリンクを作成するために、Appleから提供されている「Link Maker」を利用しました。

検索後に表示されるテキストをそのままHTMLファイルに貼り付けるだけでオッケーです。
f:id:sbkro:20131202235347p:plain

このようなバナーが作られます。全てCSSで実現されているところがGoodです。

Github Pagesの独自ドメインを削除する。

今までは独自ドメインを設定していましたがデフォルトに戻しました。戻す方法は、Github Pagesのリポジトリ直下の「CNAME」を削除するだけです。ただし、Github Pages及びDNSに設定が反映されるまで時間がかかることに注意すること。今回の場合、2時間程かかりました。

ソースコード

Github Pagesなのでソースは見れる状態になっています。こちらから参照してください。

まとめ

今回は、素のBootstrapからホームページを作ってみました。休日の2日間しか使っていないのですが、納得のいく綺麗なWebサイトが作れたかと思います。短期間で質の良いWebページが作れるところがBootstrapの良い点かと思いました。(逆に言うと、しっかり考えないとBootstrapを使っているとバレてしまう。)また、「レシポンシブルデザイン」にも対応しているので、スマートフォンやタブレットのブラウザの解像度に合わせてレイアウトが変わる点も良かったです。できれば業務にも使ってみたいなぁ...