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

lessでの便利な記述方法 1 - 入れ子

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
lessの便利な機能、入れ子をクローズアップして紹介します。セレクタが長くてうんざりしていませんか lessだとシンプルになります。
講師:
04:03

字幕

このレッスンでは Less の便利な機能入れ子をクローズアップして紹介します。CSS を書いたことがある人であればこの便利さ、わかってもらえると思います。例えば普通の CSS の場合この jumbotron の中にあるh1 を変更したい場合はこう書いて h1もし h1 の中に link がある場合は a更にその中に span がある場合は spanこういう風に classそしてその中に入っている要素をSpace で繋げて書いてました。これぐらいだったらまだ良いんですが長いファイル名の時とか少しだけ違うのにこの様に span の中のこれがactive でとかこの様になっていて更にその中のimg とか...そうやっていくと非常に長くなって管理がしづらくなってしまうんですよね。CSS でスタイルをあてる時のセレクターは非常に長く大変なものですがLess ファイルだと、ここにあるようにこんな感じで入れ子ができます。ちょっと見づらいですがでは試しに書いてみましょう。jumbotron の中のh1 の中という風に書けるんです。わかりやすく反映させるために一番下に置いて継承を強くしておきます。jumbotron の中のh1 という風に書いてcolor を red に変えます。 保存して Compiler でCompile が終わったらブラウザーを更新します。変わりましたね。こういった入れ子構造でも動くんです。更にこの jumbotron 自体の内容を変えたい時もこのまま書けば OK です。background-color の色を blue にしてみましょう。blue で保存そうすると、また Compile が完了するのでこんな感じになります。今までは先程あったようにjumbotron h1 というのとあと jumbotron 自体にこうしてそれぞれの要素を書かなくてはいけなかったですね。こうです。今までこの様に書いていたのがこうやってひとまとめにでき書き出すと自動的にこの様な形で書いてくれるんです。ですので、例えばここにこの h1 を指定したかったけど他の CSS ファイルですでにこの jumbotron の中に入ってる場合のh1 だけスタイルを上書してた全部変えちゃったらうまくいかないよみたいなことって今までよくあったと思います。でも、この入れ子ができるようになったことでこのスタイルをあてる範囲を限定的にできるようになったんですね。Bootstrap の Less ファイルもそのように書いてあります。 ファイル自体で分けるのはもちろんこの jumbotron というのの中にh1 を入れ更に container 等真ん中に寄せるスタイルやあと media quiryスマートフォンの時の見た目の時など細かく設定してjumbotron の中だけで完結するようなスタイルが書かれています。入れ子は非常に便利ですよ。是非 Less ファイルでこの様な編集をしてみて下さい。このレッスンでは Less ファイルの便利な機能の1つNest、日本語では入れ子ですね。入れ子について紹介いたしました。

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

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

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

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

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

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