Sass入門ガイド

数値の大小を取得

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
min()/max()を使うと、指定した数の中から、最小または最大の数を取得することができます。ここでは、min()/max()の使い方について紹介します。
講師:
04:09

字幕

minimum 関数と max 関数を使うと指定した数の中から最小または最大の数を取得することができます。このレッスンでは minimum 関数max 関数画面では IDE でSass ファイルとCSS ファイルを並べて表示しています。画面左側の Sass ファイルを編集するとIDE の機能を使って自動的に保存、コンパイルが行われ画面右側の CSS ファイルに適用される様になっています。それでは実際にminimum 関数max 関数を使ってみましょう先ず minimum 関数です。既に、ここではマージンプロパティに対して20% という値が指定されています。ここで minimum 関数を使ってみましょうこの様に、ある値とある値を比較し計算する様なことは例えばミックスイン等の中で行われます。通常の CSS を使ったスタイリングではあまり使われませんが覚えておくと良いでしょう。それでは minimum 関数を使ってみます。先ず minimum の省略形であるmin、ミン、と記述して括弧で数値を囲みます。現在は括弧の中の数値が1 つだけですのでその数値が、そのまま CSS に出力されています。ここでは他の数値も入力してみましょう。 カンマで区切って第 2 引数に例えば 40% と入力します。すると 20% と40%では20% の方が小さいのでそのまま 20% という値が出力されています。minimum 関数ではこの引数の数は制限がありませんのでここでは 2 つの値を比較していますが更に値を追加することができます。値は幾つでも追加できます。ここでは 20% よりも小さい値5% を指定してみましょう。すると出力された CSS では値が 5% に代わりました。この様に括弧の中関数の中で指定した引数の中で一番小さい数を返すのが minimum 関数です。逆に max 関数はその中で一番大きい数を返します。この様な関数は例えばマージンやパディングの中でこの様にスペース区切りで複数の値を指定する時に1 つの値だけに関数を使うということもできます。例えばここでは2 つ目のパディングの値5 ピクセルの部分に max 関数を使ってみましょう。max と入力し、数値を括弧で囲みます。数値が 1 つの場合はそのままその数値が出力されます。2 つ目の数値を入力してみましょう。ここでは 20 ピクセルと入力します。出力された CSS を見ると先ほど 5 ピクセルだったものが20 ピクセルになっています。 これは 5 ピクセルと 20 ピクセルを比較して大きい方 20 ピクセルの値が返されているためです。更に大きな値を指定するとやはり、その大きな値が出力されていることが分かります。このレッスンでは指定した数の中から最小又は最大の数を取得することができるminimum 関数max 関数の使い方について学びました。

Sass入門ガイド

SassはCSSを効率的に書くための拡張言語です。Sassにはセレクタの入れ子、変数の利用や条件分岐などCSSだけでは実現できないパワフルな機能が数多く用意されています。これらの機能を使うことでCSSを記述するのに割く時間を大幅に減らすことが可能です。このコースではSassの導入方法からひと通りの機能を使いこなせるところまで順を追って解説します。

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

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

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

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