speckyboy Speckyboy is an online magazine for designers with its focus on sharing helpful resources, exploring new techniques, sharing useful tips, and inspiring you to build a better web. Bootstrapは、有名なデザインフレームワークのひとつです。なぜこんなに有名なのかと言うと、モバイルデバイスに最適だからです。それと、グリッドシステムが整理されていて、ウェブデザインのプロトタイプとデザインが楽にできるようになっているからです。 ここでは、１５のBootstrapで使う、無料のUIキットを紹介します。デザインをし始めるときに使ってください。 無料のBootstrapテンプレート、無料のBootstr

はじめに サンプルアプリ等を作成する際、デザインに悩むことは多いかと思います。 (特にデザインセンスに乏しい私のようなプログラマは・・・) このような時に、Bootstrapは強い味方となります。(今更感は強いですが・・・) またBootstrapにはデザインのサンプルが用意されているので、このサンプルをベースとしてアプリを作っていけばデザインについて悩むことを減らすことができそうです。 今回はRuby on Rails 4 にBootstrap3を適用し、サンプルにある「Starter template」と同じページを作る 手順について纏めてみたいと思います。 作業手順 以下に、今回の作業手順を書いていきます。 1.ページ作成 まずはRuby on Railsにて、今回表示するページを作成します。 コントローラ、ビューの作成 今回表示する画面のコントローラは「welcome」、ビューは「

WEBサイト制作 2014.11.12 Ruby on Rails 4 と Bootstrap で管理画面のレイアウトを作成する 典型的な管理画面の実装は、Bootstrapを使うと便利ですよね。 管理画面の実装でよくあるサイドメニュー付きのレイアウトは、公式ページにサンプルがあるのでそれを利用すると素早く実装できます。 この記事では、Railsで管理画面のレイアウトを実装する手順を紹介します。 作成する画面 Bootstrap公式サイトにある、以下のサイドメニューレイアウトをRailsアプリケーションに実装します。 Dashboard Template for Bootstrap 完成する画面は以下のようになります。 Rails アプリ作成 では、作成していきます。 とりあえずコマンドラインを使ってRailsアプリを作成します。 $ rails new bootstrap_sample

新プロジェクト開始！ 新年度を迎えて、思う所もあり新しい挑戦として「新プロジェクト」を立ち上げることに！ まずは、このブログに紐づけて作ってあるWebサービスのリニューアルから。 デザインについては放置してきていたため、今回デザインも「今時に」リニューアルさせる！ 調べてみたところ、Bootstrapという物を使うと手軽にレスポンシブデザインにも対応させることが出来て便利なのが分かりました！ 昨日はこのBootstrapフレームワークを使って、既存のWebサービスを新デザインにしてみました(^-^)v でもですねぇ、適当なBootstrapテンプレートを適用したので、ちぐはぐなデザインになってしまいました(^-^; 生命保険計算サービスなのに、下記の様な海辺の絵に。 このままだとイマイチ過ぎるので、きちんとしたBootstrapのデザインに変えていきたいと思います(^-^)/ Bootst