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

thumbnailを挿入

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
サムネイル画像を挿入します。サンプルコードには画像が用意されていないので忘れずに画像を入れておきましょう。
講師:
07:14

字幕

このレッスンでは Bootstrap で用意されているサムネールを使ってこの様に写真を並べる方法を紹介していきたいと思います。まずはアセットから、こちらの「レッスンページ」を開いて下さい。ここで作業をしていきます。この様なページです。それが確認できたら Bootstrap の一番上のメニューからComponents そして、右側のメニューからThumbnailsこれをクリックします。そうすると、この様な画面が開きました。ここに写真がこうやって並ぶんですね。まずはこれをコピーしてエディターに貼り付けていきます。エディターを開きました。入れる場所はこちらjumbotronこの下に一行開けてここに入れていきます。ペーストをしてまずは準備をしましょう。インデントを揃えます。揃えましたね。そして上から見ていくと何やら class がありますがこの中を注目して下さい。class="thumbnails"そして img が入ってますね。ここでこの様なサムネールの見た目が作れるということがわかります。img には src を使うべきなのにdata-src となっています。これは holder.jsというものによって画像のサムネールをこうやって作ってるんですね。 今回はせっかくですので先程のこちらのようにちゃんとした画像を入れてみたいと思います。画像をダミーで用意する場合に便利な Web サービスがあります。lorempixel というサービスです。このサービスはこの様にlorempixel.com というのをimg タグに挿入して後は必要なサイズを書き出せばそのサイズぴったり画像を作ってくれます。これをコピーしてそして貼り付けてみましょう。エディターを開きimg の所これを選択して、丸々差し替えてしまいます。この後ろの / これは HTML5 では不要なので削除して下さい。これで1個目を挿入することができました。そしてこれここの div までをまるっとコピーします。後ろにドットが付いてます。この「...」これは同じものを繰り返して下さいということでサンプルとして入っているものです。削除してから、この div から divをコピーして貼り付けていきます。1個、これで今2個になりました。次が3個4個まずは4個にしてみましょう。これで保存をしてみます。「レッスンページ」を更新するとここにこちらのページと同じように何かの写真が入るはずです。更新をしてみます。 写真が入りましたね、同じ写真です。400 200 と先程入力したこの数字はここのサイズになります。たとえばこれを 300 に変えたい場合この様に変更すると高さが 300 になります。ファイルを保存して更新してみます。ここの高さがちょっと伸びるはずですよ。伸びましたね。lorempizel では写真をリロードするたびに様々なものに変わります。犬とか、さっきは花でしたね。ゴリラとか。具体的にカテゴリーを指定することもできます。ここを見ると、ここここに sportsというのがありますね。では sports の他にはここを見ましょう。abstract animals businesscats などがありますのでcats というものにしてみましょう。エディターから、この後ろにcats というのを入れてみます。他のものにもコピーして貼り付けていきましょう。これで準備は OK です。保存して「レッスンページ」を更新します。今はゴリラですが、猫になるはずですね。猫になりました。これは何度も更新してもなるべく猫の写真が出るように限定することができました。また、写真をそれぞれ変えたい場合はこの様に後ろに / と数字を付けていけば OK です。 エディターに戻って上から /1 /2 /3そして 4 と入力してファイルを保存し、もう1度更新してみましょう。更新ボタンを押します。4つとも違う写真になりました。これでどのような写真を入れるか、などイメージを付きやすくさせます。ダミーイメージを用意するのは大変ですが自分だけで見る時などこうやってサンプルで入れられるのは非常に便利ですね。lorempixel には他にこの様にダミーテキストを入れることもできるようです。後ろにダミーテキストなど入れてみましょう。まず/ を付けてDummy-TextCopy してPastePastePasteこれで準備が OK です。ファイルを保存してそれでここを更新してみましょう。Dummy-Text と入りました。これでお客さんにもサンプルですよと言えます。画像をこう、毎回この様に入れるのは面倒ですがlorempixel を使うとそういった写真の制御もできるのでこういったサンプルのページを作る時には是非活用したいですね。このレッスンではこの様に画像を入れる方法そしてそのサンプル画像の活用方法等を紹介しました。

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

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

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

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

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

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