BootstrapでスピーディーにレスポンシブWebデザイン

画像に使える便利なclassを見る

全333コースを10日間無料で

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
画像の枠にはポラロイド風や丸く切り抜いたものなどあります。また画像をウィンドウサイズに合わせてぴったり表示させる便利なClassがあります。
講師:
06:15

字幕

Bootstrap にはこのように様々な画像のトリミング方法があります。その他に便利なものがあるのでその方法を見ていきましょう。このコースのアセットをダウンロードしてこのようなページを開いてください。画像が大きく表示されていますね。これにそれぞれの設定をしていきましょう。見ると、少し横スクロールバーが出ていてスマートじゃないですね。できればこちらのように等分にしっかりとレイアウトしていきたいです。テキストエディターで実際に書かれたコードを見るとこのように画像にダミー画像が挿入されています。lorempixel というダミー画像を用意してくれるサービスです。そこにスラッシュで横幅そして高さを記入しているようです。横幅は 400px なのでこのようにはみ出してしまうんですね。これを直していきましょう。Bootstrap にはこういう大きい画像等をきれいに表示させる便利なクラスがあります。まずは Bootstrap のページを開きます。メニューの一番上「CSS」からここの右側の Images をクリックします。そうすると Responsive images というのがあります。どうやらこの .img-responsive というクラスを追加するとその画像は max-width 100% とスタイルで指定されるようですね。 では、これを使ってみましょう。使い方は簡単でここのクラスを指定するだけです。img-responsive これをコピーしてテキストエディターに戻りそれぞれの画像にクラスを付与していきます。class そしてこのような形ですね。これをコピーして貼り付けていきましょう。... 3、4。これで OK です。ファイルを保存します。今はこのようにはみ出ています。更新するとこちらのようにある程度ぴったりここのコンテナの幅に合うようになる筈です。では更新をしてみましょう。ぴったり横幅が合いましたね。非常にきれいです。こちらの image-responsive は横幅をこのグリッドに合わせてきれいに表示させてくれ高さを比率を合わせるようにスタイルしてくれるものなのです。非常にありがたいです。大きい画像などを最初から使わなくて小さいものを用意しておけばいいと思うかもしれませんがレシポンシブの場合、このようにウィンドウ幅を変えて使うことも多いです。その時最初から小さいものを使ってしまうとPC の画面で大きく表示させたい時とか汚くなってしまいます。なので、予め PC などの大きな画面に合わせたものを用意しておきそれをこのように CSS のクラスのimage-responsive を付与して横幅を対応させるようにしているのです。 次にこちらの画像のトリミングを見ていきましょう。3つ、このように用意されています。下のコードを見てみましょう。左から img-roundedimg-circleimg-thumbnail とあります。先程と同様にこれをコピーしてそれぞれの画像に貼り付けていけばよいのです。一番上は元々の形が分かるようにそのままにしますので2番目のものからやっていきましょう。このクラス の後ろ img-responsive の後ろに貼り付けていきます。これで roundedでは一度これを保存して本当にこのようになるのか見てみましょう。レッスンページをクリックして更新をしてみます。きっとこの2番目の猫ここが角丸になるんですね。角丸になりました。非常にありがたいですね。このようなのを CSS でやれると画像で細かい編集をしなくて済むので非常に助かります。次はこちら、丸くしてみましょう。img-circle をコピーしてエディターに行き次の画像、ここにクラスを追加します。同様にファイルを保存してこちらのページを更新してみましょう。3つ目の猫が丸くなりました。では最後のもの、もう簡単ですね。thumbnail の様子これもコピーしてエディターを開き一番最後の画像のクラスを追加します。 ペースト。これを保存してみると更新します。このようになりました。普通に表示させたもの角丸にしたもの丸そしてサムネイルのような見た目これらが用意できました。これも凄く便利ですが一番ポイントとなるのはここResponsive imagesです。このクラスを付与しておくことで多少大きい画像だったとしてもこのようにきれいに枠内に入るようになりました。このレッスンでは画像の様々なトリミング方法そして画像を枠内にぴったり表示させる方法を紹介しました。

BootstrapでスピーディーにレスポンシブWebデザイン

Twitter社が提供するBootstrapは、よく使うテンプレートをまとめてCSSを読み込むだけですてきなスタイルを適用できるとても優れたフレームワークです。このコースではBootstrapについて解説しながら、その簡単な使い方やlessによる便利なスタイルのカスタマイズ方法について紹介します。

2時間22分 (21 ビデオ)
現在、カスタマーレビューはありません…
 
ソフトウェア・トピック
価格: 2,990
発売日:2014年05月12日

このコースは、「オンデマンド」でご利用可能であり、ダウンロードすることもオンラインで見ることもできます。

ダウンロードすると、オフラインでコースを使用し、豊富なインターフェースをフルに活用できます。複数のデバイスを使用したり、 一度に全コースをダウンロードしたくない場合は、アカントにログインして、ストリーミング・ビデオとしてコースのレッスンを視聴してください。

ビデオトレーニングをお楽しみいただけますように! お問い合わせは、cs-jp@lynda.com宛までご連絡ください。