Webデザインの知識がなくてもOK！Bootstrapの使い方【入門者向け】| TechAcademyマガジン
目次 本記事では、Bootstrapの基礎をおさえた上で、よく使う、グリッドシステム、テーブル、ボタン、フォームの具体的な使い方を順番に紹介します。 Bootstrapとは Bootstrapを使う準備 グリッドシステムの使い方 テーブルの使い方 ボタンの使い方 フォームの使い方 Bootstrapとは BootstrapはTwitter社が開発したCSSの「フレームワーク」です。通常CSSを書く場合、全てのスタイルを自分で作っていく必要がありますが、このフレームワークにはよく使われるスタイルがあらかじめ定義してあるので、ルールに沿って利用するだけで整ったデザインのページを作成できます。 もともとTwitter社内で作られたもので、以前は「Twitter Bootstrap」と呼ばれていましたが、現在では「Bootstrap」のみで呼ばれるようになっています。 Bootstrapを使うメリ
Bootstrapカラムのマージン（余白・ガター）を好きなサイズに調整するCSSの具体例 | 隣IT
Bootstrap連載、前回はBootstrapカラム間のマージン（余白・ガター）の仕組みについて解説しましたが、今回はデフォルトのマージンを好きなサイズに調整する方法についてご紹介したいと思います。 前回のおさらいになりますが、Bootstrapの余白（ガター）は、以下の様な仕組みでできています。 ● col自体にmarginは指定されていない ● カラム間のマージン（余白・ガター）はpaddingで指定されている。しかも左右のcolのpaddingが合体している ● カラム間のマージンは15px+15pxの30pxである ※マージンと表現するとCSSのmarginと混同してややこしいので、以下カラム間の隙間を「ガター」としますね。 Bootstrapのカラム間のガターはデフォルトで30pxとなりますが、これをサイズ変更したり余白自体をなくしてしまうには、自作のCSSを追加してスタイルを
Bootstrapカラム間のマージン(余白・ガター)の仕組みをマスターする | 隣IT
３カラムレイアウトを枠付きで見てみよう まずはそれぞれの要素の配置をはっきりさせるため、上記の画像３カラムレイアウトのブロック要素(divとpタグ）に枠をつけてみました。 上記部分のコードは以下です。 <div class="container"> <div class="row"> <div class="col-md-4"> <h2>３カラム見出しテキスト</h2> テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト </div> <div class="col-md-4"> <h2>３カラム見出しテキスト</h2> テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト </div> <div class="col-md-4"> <h2>３カラム見出
Bootstrapのグリッドシステムの使い方を初心者に向けておさらいする
実は、bootstrapの知識だけでは足りません（涙） 本気でweb制作を仕事にしたいなら、現場で通用する実践的なスキルを「短期集中」で身につけましょう。 【独学 vs スクール】メリットとデメリットを比べて、おすすめの学習方法もお伝えします。 続きはこちら Bootstrap、使ってますか？ 便利ですよね。その便利さを物語るように、本当にいろいろなサイトで利用されてます。 ネットで配布されてるWordPressのテーマやHTMLテンプレートのベースに使われていることも多いです。気づいてないうちに使ってしまっているひとも、たくさんいることでしょう。 今回は、便利なのだけど、使いこなすには少し理解が難しい「bootstrapのグリッドシステム」について解説します。bootstrapでレスポンシブデザインを作るとき、欠かせないテクニックです。 グリッドシステムは、頭で理解しようとせず、目で見て
Photoshopで1クリックの時代がきた！Webページ用のグリッドも簡単に作成できる便利すぎる無料の機能拡張 -Bootcomp 2.0
Webページやスマホアプリのデザインカンプを作成する時に、大幅な時短になる便利な機能がたくさん詰まったPhotoshop CC2015.5対応の機能拡張を紹介します。 Bootstrapでつくる時はもちろん、それ以外のデザイン作業でも強力な機能を発揮します。 Web制作に携わるすべての人が、入れておいて損はない機能拡張です。 Bootcomp Bootcompの特徴 Bootcompのインストール Bootcompの使い方 Bootcompの特徴 先日当ブログで紹介したBootcompが昨日、CC2015.5にも対応してアップデートされました。1.0でも便利でしたが、2.0で更に便利になっています！ OS X, Win両対応で、日本語にも完全対応の無料の機能拡張です。
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
