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

lessでの便利な記述方法 4 – mixin

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
良く使うプロパティをまとめておいてmixinにしておけば、利用したいセレクタに対して、プロパティ1行だけで適用することができ、コードが非常にシンプルになります。
講師:
06:52

字幕

LESS には非常に便利な機能があります。Mixin というもので、Bootstrap にもそれが設定されております。例えばこんな感じで float を失敗してしまう時ってありますよね。clearfix をかませれば直るんですが毎回 clearfix を何行も入れるのは非常に面倒臭いです。だってこんなに長いんですよ。こんな感じ。保存してこれで直ったか見てみましょう。更新、直りましたね。行が少なければ良いのですが、clearfix をするためだけに毎回これを入れるのもなんだかヘトヘトです。コードがあまり美しくありません。Mixin というのはそういったよく使うものをまとめて一行で書けるようにしたものです。この clearfix を使ってみましょう。Mixin の使い方は非常に簡単で、ここのクラス部分をそのままコピーして、clearfix を当てたい所、分かりやすいように一回ファイルを保存でコンパイルをして、まだ当たっていない状況にしておきましょうね。こちらでこの one、このクラスです。ここに一行あけて、clearfix というここで指定されているこのクラスを貼り付けるだけです。普通のクラスと違うのは括弧が後ろに付いているところですね。 では保存をしてみましょう。コンパイルができました。更新してみると、直っています。この一行だけで clearfix が書けたということですね。何回も何回もいっぱい書いていたこれ、これがなんとこの一行で済むのです。非常に簡単ですね。Mixin はその他にもすでにあるものがいくつかあります。tab-focus や真ん中に合わせたい時、例えばサイズを指定したい時ここをコピーして使いたい所に貼り付けます。先程の Mixin を見ると、ここに @width @hight とありますね。それに入力した値がここに入るようです。それで width と height をちゃんと設定できるんですね。ではやってみましょう。ここに、では 400px、そして height に 300px。最後のセミコロンを忘れずに。これで保存を押してみます。save、コンパイルができましたね。ちゃんとサイズは変わるでしょうか。更新をします。このようにできました。非常に便利ですね。size など、後は他にも square 真四角にしたい時ですね。色々なものがあるので非常にシンプルにコードを書きやすくなります。角丸の radius のなんかの設定もあるので一通り見ておくと良いでしょう。 結構 Bootstrap は使わないけれどもこの Mixin だけダウンロードして自前の LESS ファイルと一緒に使っているなんていう人も多いくらいです。非常に便利なものが集まっているので目を通しておきたいですね。またこの Mixin、自分で作ることもできます。例えばこのようによく使う見た目があるとします。余計なものを削除して、File で保存をしてコンパイルできました。こうですね。このようによく使うものなどを Mixin としてまとめてみましょう。作り方は非常に簡単です。ここをよく使う場合は、まずよく使うものに名前を付けましょう。sample とかでも構いません。そして後ろに括弧を付け、このようにいつも CSS を書くこの括弧を入れます。そこに先程コピーしてきたこの部分、これを貼り付けます。これで Mixin が完成しました。ここのコードはもう不要ですね。今はこの状況です。まずはファイルを保存してみて、このクラスが何もない状況になることを確認しましょう。ファイル>保存。コンパイルができたことを確認して更新ボタンを押します。今はスタイルの当たっていない形になりましたね。ではテキストエディタに戻り、この sample という Mixin を追加してみます。 ペースト。これでこのコロンを忘れないように。そして保存をします。コンパイルができました。これで更新すると、先程あったような赤い背景で赤い文字のものになっているはずです。変わっているでしょうか。無事変わっていますね。これを使うことで、よく使うもの、例えば色を黒くして文字を真ん中にするみたいなことを4つも5つも6つも書いている場合というのは、このように Mixin とまとめてしまって一行で済ますと非常にシンプルですね。Mixin にしてしまえば、このたった2行でこの見た目を実現することができるんですね。また Mixin は入れ子にすることも可能です。このようになっているケース、毎回 clearfix が付くのであればこの sample、作ったこの Mixin の中にclearfix を含めてしまって、これで一まとめにしちゃいましょう。保存をします。今はこれ sample() しかないですね。更新してみても大丈夫です。こうすることでよく使うものをまとめたり、またよく使うものを誰かがまとめてくれた、こういった便利なものを使ったりすることでCSS のこういった煩雑なコードをよりシンプルに書けるようになります。 Mixin、LESS でもすごく注目される非常に便利な機能です。しっかり覚えておきましょう。このレッスンでは LESS の Mixin の書き方、そしてBootstrap で用意されている Mixin について見てみました。

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

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

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

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

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

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