サンプルで学ぶTwitter Bootstrapの使い方：前編 (1/3)
Webデザインができないエンジニアでも、見た目をすばやく整えられるフロントエンドツール「Twitter Bootstrap」。前回は、Twitter Bootstrapの概要と特徴、利用事例を紹介し、実際の設置方法までを説明しました。今回は、簡単なサンプルサイトを作りながら、Twitter Bootstrapの基本的なルールと使い方を説明します。 簡単なサンプルサイトで使い方を学ぼう サンプルとして、以下のようなブックカタログのサイトを作ります。書籍の一覧とお問い合せフォームで構成されるシンプルなサイトです。 HTMLの準備 TwitterBootstrapを利用したサイト制作では、いちからからすべてを記述するのではなく、TwitterBootstrapのサイトにあるサンプルをベースに書き換えていくのが簡単です。 index.htmlの作成 まず、テキストエディターなどで空の「index.
いまさら聞けない「Twitter Bootstrap」とは？ (2/2)
Twitter Bootstrapを使用するための必要な知識 実際にTwitter Bootstrapを使ってサービスを立ち上げる場合、エンジニアが身につけるべき知識は大きく分けて2つあります。 HTML5＋CSS3 Twitter BootstrapではレスポンシブWebデザインに対応していることもあり、HTML5の要素やCSS3のプロパティが使われています。すべての仕様に通じている必要はありませんが、基礎的な知識は身につけておきましょう。 jQuery Twitter Bootstrapでは多くのjQueryプラグインが内蔵されており、jQueryの知識がなくてもリッチなUIを実装できます。ただし、プラグインを書き換えたり、新たな機能を追加したりといった本格的なカスタマイズには、jQueryの知識があるとよいでしょう。 本連載ではこれら2つについて、基礎的な知識があることを前提に解説し
Twitter BootstrapをWordPressで使ってみる （プラグイン初期設定と表示サンプル）。意外と簡単かも！
最近、個人的に最も注目のTwitter Bootstrap。 レスポンシブWEBデザイン対応（つまり、スマホサイト対応）、ページレイアウト、ボタンデザイン、UI、ナビｰゲーションメニューの制作、特にデザインに関しては決まったスタイルから設定していけばいいので、開発時間の短縮に大いに役立ってくれています。 これまでは、サイトを一から立ち上げるときに、使っていたのですが、どうやら、Wordpressでも使えるようで、対応プラグイン見つけました。 WordPress Twitter Bootstrap CSS こちらをインストールして、動作確認や使い方を確かめてみました。 インストールと設定１．Wordpressのプラグイン管理メニューで、「Twitter Bootstrap」で検索すると、「WordPress Twitter Bootstrap CSS」がヒットしますので、インストールして、有
Twitter Bootstrapのさまざまなテーマをダウンロードできる『Bootswatch』 | 100SHIKI
個人的にいじっていて便利そうだったのでご紹介。 Bootswatchは、Twitter社が提供するTwitter Bootstrapのさまざまなテーマをダウンロードできるサイトだ。 Twitter Bootstrapといえば簡単に今風デザインのサイトを作れるCSSフレームワークだが、それで作ると「あー、黒いトップバーだし、Twitter Bootstrapね」的になってしまうのが難点だった。 最新版ではテーマをカスタマイズできるツールもついているが、配色などを考えるのが面倒な人もいるだろう。そういう方はBootswatchを利用してみてほしい。 それにしてもどんどんウェブ作りが簡単になっていきますな・・・。
Twitter Bootstrapを使って短時間でWordPressテーマを作る。
Twitter Bootstrapを使って短時間でWordPressテーマを作る。 2012.11.15 | この方法お勧めです！ どうもどうも、こんにちは。WP-Limeです。 Limeって黄緑色らしいです。色決めの時に、Facebookを見ていなかったら、空いている色が無くなっていて黄緑色になってしまったということで、いやぁ、何事もタイミングですなぁと思っている派です。 さて、持ち回りで月に１回書いている、このブログですが、 １回目の記事は、 案件の価格決めをどうしているのよ？ ２回目の記事は、 IT勉強会を自分で主催するメリット・デメリットと、それらを有料or無料で開く判断。 ３回目の記事は、 支払サイト＆入金サイトについて考える。 でした。 今までは、他の執筆者とのタイミングの関係で、Web制作以外のことを書きましたが、今回初めて制作寄りのお話です。 さて、「いやぁ、今日は打ち合わ
TwitterBootstrapベースのWYSIWYGエディタ「bootstrap-wysihtml5」:phpspot開発日誌
bootstrap-wysihtml5 TwitterBootstrapベースのWYSIWYGエディタ「bootstrap-wysihtml5」。 HTML5ベースですが、リッチなエディタをBootstrapのテーマで作成することが可能です。 派生物がどんどん出てきて素晴らしい限りですね。 最近最も流行ったオープンソースプロジェクトではないでしょうか。 関連エントリ Twitter BootStrap に追加できる５つのコンポーネントパック「FuelUX」 Twitter Bootstrapでカッコいいカルーセルを実装するサンプルとチュートリアル Twitter Bootstrap で使えるカラーピッカー＆日付ピッカー Twitter Bootstrapじゃなくfacebook Bootstrap？「Fbootstrapp」 Twitter Bootstrapを使ったイメージギャラリーサン
Bootstrapに追加で使えるjQueryベースのUIライブラリ「w2ui」:phpspot開発日誌
Home | JavaScript UI - w2ui Bootstrapに追加で使えるjQueryベースのUIライブラリ「w2ui」。 グリッド、ツールバー、サイドバー、閉じれるタブ、フォームのウィジェットがBootstrapに追加できそう。 グリッド ツールバー サイドバー 閉じれるタブ フォーム IE8でサポート対象外なのに注意ですが、ますますBootstrapが強化されますね 関連エントリ Google風のBootstrapテーマ「GoogleBootstrap」 Bootstrapで矢印を描くのなら「Bootstrap Arrows」 Bootstrapに270の使えるアイコンを追加できる「Elusive icons」 TwitterBootstrapベースのWYSIWYGエディタ「bootstrap-wysihtml5」 Twitter BootStrap に追加できる５つのコ
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
