Quantcast
Channel: VIVID COLORS + BLOG -福岡で働くWebデザイナーのブログ- » Web制作お役立ちについて書かれた記事 | VIVID COLORS + BLOG -福岡で働くWebデザイナーのブログ-
Viewing all articles
Browse latest Browse all 5

Bootstrap3を使ってアイコンフォントのダウンロードサイトを作ったのでまとめ

0
0

この記事は 約 5 分 で読めます。

イラストフォント配布サイト作りました!

Bootstrapを使って新しいサイトを作ってみました!

案件で検討する前に一度テストしておきたかったので
今回Bootstrapを使ってサイトを作成してみました。

22ebe080bd07b64664538edaf8848aed 640x488 Bootstrap3を使ってアイコンフォントのダウンロードサイトを作ったのでまとめ

スタンプフォント! -スタンプみたいに使えるかわいいイラストのフリーフォント-

イラストをフォント化したTTFフォントの配布サイトです。

Windows、Mac OS X以降で使えます。
Webフォント用のファイルも準備予定です。

個人、商用ともにフリーです。
ご自由にお使いください^^

自分で好きなものだけWebフォント化していただいても大丈夫◎

デザインの一部や、ワイヤーフレーム作成時などにお役立ていただけると嬉しいです。

こういうのがあると便利ー!などのご意見もお待ちしています!!

Font用のSVGファイルはFireworksで

ちなみにサイトのデザイン、アニメーションGIFの作成、フォントの元になったSVGファイルの作成はFireworksで。

詳しい手順などは以下のサイトがとっても参考になりますのでぜひ見てみてください♪

Bootstrap下調べ

bootstrap 640x403 Bootstrap3を使ってアイコンフォントのダウンロードサイトを作ったのでまとめ

というわけで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-*にする。

引用:Bootstrap移行ガイド レスポンシブの無効化

英語ですが、公式サイトにも手順がのっています。

公式:http://getbootstrap.com/examples/non-responsive/

段組はどういう仕組み?

bootstrapでは12カラムのグリッドシステムが採用されています。
トップページは4:4:4、下層ページは8:4で割って使うことにしました。

画像はどのサイズで作る?

%で指定されているグリッドシステムなので、このときこのカラムが○pxというのがいまいちわかりにくいです。なので全体的に画像は大きめに作って、グリッドに対してwidth:100%で貼り付ける必要があるのかなー?という印象。

フォームのスタイリング

classを適切に指定してあげれば、使いやすいフォームに簡単にスタイリングできます。
Contact Form 7だったらこんな感じ。

 Bootstrap3を使ってアイコンフォントのダウンロードサイトを作ったのでまとめ

デザインの調整

以前、2系をさわろうとしたとき、なかなか複雑すぎて
必要な物だけ自分で書いたほうが早そう…と思ってしまって挫折したことがあったのですが
3系は見た目もすごくシンプルになっていて、その分CSSの装飾もシンプルなので追加のCSSで上書きがしやすい感じでした。

その他参考にしたサイトなど

全体的な感想

どっちかというと画像少なめなティザーサイトとか、管理画面とかそういうものをさくさくっと作るのによいのかなーという印象を受けました。

いろんな仕様があって、その仕様にすべて対応できるのか?とかを調べて使うにはちょっと大変かもしれませんが自分に決定権のあるこういう個人サイトをパパっと作るにはものすごく便利です!

なんとなく勝手がわかってきたので、今度はレスポンシブで作ってみたいと思います☆


Viewing all articles
Browse latest Browse all 5

Latest Images

Trending Articles





Latest Images