Sass入門ガイド

小数点の処理

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
round()/ceil()/floor()を使うと、小数点以下の四捨五入、切り上げ、切り下げを行うことができます。ここでは、これらの使い方について紹介します。
講師:
03:13

字幕

round 関数ceil 関数floor 関数を使うと小数点以下の四捨五入切り上げ、切り下げを行うことができます。このレッスンではこれらの使い方について紹介します。画面では IDE でSass ファイルと CSS ファイルを並べて表示しています。画面左側の Sassファイルを編集するとIDE の機能を使って自動的に保存、コンパイルが行われ右側の CSS ファイルに出力される様になっています。数値の四捨五入は通常 CSS によるスタイリングではあまり使われませんが例えばミックスイン等で数値を計算した後に四捨五入したり切り上げ切り下げをしたいことがあります。その様な時は、これから紹介する3 つの関数が便利です。先ず四捨五入を行うround 関数を使って見ましょう。既に定義されているプロパティに対してround 関数を使ってみます。round 関数を使うには四捨五入したい数値の前にround と入力し数値を括弧で囲みます。出力された数値を見てみると10.85 という数値から四捨五入が行われるため結果としては 11 という整数が表示されています。この時関数の中に入れる値はただの数値でもピクセルの様に単位が付いていても問題なく動きます。 単位が付いている場合はその単位をそのまま使ってCSS に出力されます。次に切り上げについて紹介します。切り上げは ceil 関数を使います。この数値に対してceil 関数を使ってみましょう。同じ様に ceil と入力し値を括弧で囲みます。こうすることで 2.1 という値に対して切り上げが行われ結果的には 3 という数値になっています。こちらも同じ様に単位があれば、その単位を使ってCSS の方に出力されます。最後に切り下げを行う floor 関数です。同様に記述してみましょう。数値の前にfloor と入力し数値を括弧で囲みます。ご覧の様に数値が切り下げされて出力されました。勿論こちらも単位を付けるとその単位が利用されて CSS に出力されます。このレッスンでは小数点以下の四捨五入切り上げ切り下げを行うことができるround 関数ceil 関数floor 関数の使い方にについて学びました。

Sass入門ガイド

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

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

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

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

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