Bootstrapを使ってみよう。画像スライド編（Carousel（カルーセル）） 今回はBootstrapで用意されている、JavaScriptを使ったコンポーネント「Carousel（カルーセル）」を利用してみよう。 「Carousel（カルーセル）」は複数の画像をスライド表示してくれるもの。 インジケーターやコントローラーもセットされていてすぐに使うことができる！ ＊この記事はHTML・CSSの基本知識がある前提での備忘録のため説明に至らない部分があります、あしからず。 Carousel（カルーセル）の利用方法 まずはBootstrapのサイトで用意されているカルーセルをみてみよう。 Bootstrapの上部メニューより「JavaScript」をクリックしてページ移動後、右サイドメニューから「Carousel」をクリック。 すると「Carousel」のExamplesが表示されている

スマホサイトが優勢な昨今、要素をよこ並びにする機会は減ってきているのかもしれないけれど、大きい画面で見るサイトでは、ナビゲーションやタブや、商品一覧など、よこ並びにレイアウトする機会はまだまだあるんじゃないでしょうか。そんな「よこ並びにするためのCSS」も、やり方はさまざま。お馴染みのやつから、新参者まで、順番に見ていくことにします:)。 よこ並び？ そう、よこ並び。 例えばボタンを横一列に並べたり。商品の情報なんかだと、横に3つずつ並べて改行して、多段に並べる場合もありますね。偏（ひとえ）に「よこ並び」と言えど、CSSにはそのやり方がたくさんあるんです:o。 導入 この記事で紹介するよこ並びの方法は以下の通り。 CSSの歴史的な背景から、最初はfloatプロパティを使った方法を紹介します。 float（フロート） 要素を左右へ寄せるためのプロパティ。 後続する文章（テキスト）などのインラ

ブラー（ぼかし）エフェクトの難点 背景画像をぼかして全体に敷いているデザインって素敵ですよね。何の画像なのかハッキリと分からなくても雰囲気が統一されますし、何より上に文字を乗せても読みやすいんです！この「ぼかす」表現を「ブラー（blur）エフェクト」といい、多くのデザインで用いられています。 ただし、このブラーエフェクトはCSSで実装しようとすると結構くせ者で、背景画像だけにブラーを適用させても中の要素までエフェクトが効いてしまうんですよね・・・。 「ぼかした画像を作ってから背面に敷けばいいんじゃないの？」と言われればそれまでですが、そこを諸々の事情でなんとかCSSで実装したいと思いまして。独自で色々と調べた結果、CSSの疑似要素をうまく使うことで解決できたので、その方法をお伝えします！ なお、実装方法はCodePenで以下の例を参考にさせていただきました。ありがとうございました〜！ CS

Bootstrapバージョン 3.3.6 グリッドシステムとは レイアウトを格子状に分解して配置するデザイン手法 Bootstrapでは横幅を12分割したグリッドシステムを採用 基本原則 あくまでも原則であり、これとは違った形で指定することもありますが、大枠はこのようなルールに則って記述します。 class = “container”（固定枠）または”container-fluid”（流動枠）の中に書く class = “row”の中に書く class = “col-{prefix}-{columns}”の形で書く class = {columns}は合計が12になるようにする prefixとブレークポイント 表では「スマホ」「タブレット」などという表記をしていますが、基準はブラウザの表示サイズになります。そのため、タブレットでも機種によってはmd（PC）と同じ挙動をする可能性がありますし

ボタン btn btn-*** <button>ボタン要素や <a>アンカー要素のクラスに.btn .btn-***を指定することでボタンを表示することができます。 基本 <!-- Default --> <button type="button" class="btn btn-default">Default</button> <!-- Primary --> <button type="button" class="btn btn-primary">Primary</button> <!-- Success --> <button type="button" class="btn btn-success">Success</button> <!-- Info --> <button type="button" class="btn btn-info">Info</button> <!-

今回はCSSのbox-shadowを使って影（ドロップシャドウ）をつける方法と、コピペで使えるおしゃれな影のサンプルを10個紹介します。ぜひ参考にしてみてください。 CSSのbox-shadowの使い方 それでは、まずbox-shadowプロパティの使い方を紹介します。何かの要素に影をつけたいときには、例えば以下のように書きます。 ◯◯ { box-shadow: 左右の向きpx 上下の向きpx ぼかしpx 広がりpx 色 内側指定; } 例 .box {box-shadow: 2px 2px 4px -2px gray inset}

Bootstrap Advent Calendar 2015 – Qiita7日目の記事です。Bootstrapは便利で、特にノンデザイナーなエンジニアでもそれなりにしっかりとしたデザインのサイトが作れるということで、利用している方も多いと思います。ただ使っていて思うのは、用意されている色のバリエーションが少ないということです。Bootstrapで作ったサイトはどれも似通っていると言われてしまうのもそこに原因があるのではないかと思っています。そこで、今回ボタンだけではありますが、使える色やスタイルを拡張するBootstrap用のCSSライブラリを作ったので、この機会に紹介させていただきます。 「cb-materialbtn.css」概要「cb-materialbtn.css」は、CSSフレームワーク「Bootstrap」の（主に）ボタンの色やスタイルを拡張するためのCSSライブラリとなりま