この記事は 約 5 分 で読めます。
イラストフォント配布サイト作りました!
Bootstrapを使って新しいサイトを作ってみました!
案件で検討する前に一度テストしておきたかったので
今回Bootstrapを使ってサイトを作成してみました。
スタンプフォント! -スタンプみたいに使えるかわいいイラストのフリーフォント-
イラストをフォント化したTTFフォントの配布サイトです。
Windows、Mac OS X以降で使えます。
Webフォント用のファイルも準備予定です。
個人、商用ともにフリーです。
ご自由にお使いください^^
自分で好きなものだけWebフォント化していただいても大丈夫◎
デザインの一部や、ワイヤーフレーム作成時などにお役立ていただけると嬉しいです。
こういうのがあると便利ー!などのご意見もお待ちしています!!
Font用のSVGファイルはFireworksで
ちなみにサイトのデザイン、アニメーションGIFの作成、フォントの元になったSVGファイルの作成はFireworksで。
詳しい手順などは以下のサイトがとっても参考になりますのでぜひ見てみてください♪
Bootstrap下調べ
というわけでBootstrapを使うにあたって、いろいろ調べ事をしたのでメモしておきます。
Bootstrap 3でレスポンシブを無効にできるか?
Bootstrap 2系は要素を追加してレスポンシブを実現するようになっていたそうなのですが、3系は標準でレスポンシブ対応とのこと。
今回のサイトはPC用のフォント配布サイトということもあって、レスポンシブである必要もあまりなかったのでレスポンシブを無効にする方法を調べました。
以下の手順で簡単にできました。
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>を削除する。
<link rel=”stylesheet” href=”css/bootstrap.min.css” media=”screen”>の下に、
<link rel=”stylesheet” href=”css/non-responsive.css” media=”screen”>を追加する。
<script src=”js/respond.min.js”></script>を削除する。
グリッドシステムを使用するときはカラムの設定は必ずcol-xs-*
にする。
英語ですが、公式サイトにも手順がのっています。
公式:http://getbootstrap.com/examples/non-responsive/
段組はどういう仕組み?
bootstrapでは12カラムのグリッドシステムが採用されています。
トップページは4:4:4、下層ページは8:4で割って使うことにしました。
画像はどのサイズで作る?
%で指定されているグリッドシステムなので、このときこのカラムが○pxというのがいまいちわかりにくいです。なので全体的に画像は大きめに作って、グリッドに対してwidth:100%で貼り付ける必要があるのかなー?という印象。
フォームのスタイリング
classを適切に指定してあげれば、使いやすいフォームに簡単にスタイリングできます。
Contact Form 7だったらこんな感じ。
デザインの調整
以前、2系をさわろうとしたとき、なかなか複雑すぎて
必要な物だけ自分で書いたほうが早そう…と思ってしまって挫折したことがあったのですが
3系は見た目もすごくシンプルになっていて、その分CSSの装飾もシンプルなので追加のCSSで上書きがしやすい感じでした。
その他参考にしたサイトなど
- Bootstrap公式サイト
- Bootstrap 3 で何が変わるのかをまとめてみた
- Built With Bootstrap Bootstrapで作られたサイトまとめ
- Start Bootstrap Bootstrapで作られた様々なレイアウトのテンプレート集
全体的な感想
どっちかというと画像少なめなティザーサイトとか、管理画面とかそういうものをさくさくっと作るのによいのかなーという印象を受けました。
いろんな仕様があって、その仕様にすべて対応できるのか?とかを調べて使うにはちょっと大変かもしれませんが自分に決定権のあるこういう個人サイトをパパっと作るにはものすごく便利です!
なんとなく勝手がわかってきたので、今度はレスポンシブで作ってみたいと思います☆