htmlcss if、for、eachを使いこなそう
» STARTOUT詳細はこちら

WEBサービスづくり学習「STARTOUT」はじめました!

自分の「WEBサービス」を作りながら「制作技術」を習得しよう!

STARTOUTとは、WEB制作×サービス作りのオンライン実践学習サービスです。ゼロからWEBサービスを作り、収益化しながら技術を習得してみましょう!

 詳しくはこちら
ここでは「WEB制作×事業づくり実践学習サービス STARTOUT」の学習コンテンツの一部を公開しています。もし1,000以上あるすべてのコンテンツを学び尽くしたい場合、ぜひこちらからご登録ください!

if、for、eachを使いこなそう

HTML×CSS|2019年03月13日

2019年03月13日
  • このエントリーをはてなブックマークに追加

今回のSassは、さらにプログラミングらしくなっていきます。
プログラミングではおなじみのif文、for文、each文を使えます。

といっても、まだプログラミングに触れていない方は、よく分かりませんよね。
簡単にご説明すると、次のようになります。

  • if文は「条件分岐」で、条件がAだったらAルートを選ぶ、と処理できます。
  • for文は「繰り返し」で、指定回数分、同じ処理を繰り返せます。
  • 1つの変数の中に、いくつものデータを格納できる「配列」が使えます。
  • each文で「配列の中身を順に出力」できます。

まだ、ざっくりとした理解で構いません。
それぞれの項目で、詳しく説明していきます。

if文やfor文は、これまでphpやJavaScriptと言ったプログラミングだけのものでした。
しかしSassが生まれたことによって、CSSでも使えるようになったのです。

まだphpやJavaScriptに触れてない方も、ここで触ってみてください。
プログラミング言語を学ぶ時、理解がスムーズになるかもしれません。

それではまず、if文からご説明していきます。

if文

if文とは、条件によって処理を変える分岐のことです。

例えば変数の中身が「りんご」だったら、色を「赤」に変えたり。
変数の中身が「桃」だったら色を「ピンク」に変えたり、という処理です。

数字が1より多かったら、デザインAを出力する。
数字が10より多かったら、デザインBを出力する。

そんな処理の分岐を作ることができるのです。

では、実際にSassでif文を使う時、どうすべきでしょうか。
基本的には、次のような書き方をします。

//まず、変数をセットします。
$category:diary;
$count:8;

.mainCont{
	//もし$categoryがdiaryなら次のCSSを適用
	@if $category == diary{
		background:#000;
		color:#fff;
	//もし$categoryがstudyなら次のCSSを適用
	}@else if $category == study{
		background:#dde0f4;
		color:#18288a;
	//もし$categoryがどれも当てはまらないなら次のCSSを適用
	}@else{
		background:#fff;
		color:#000;
	}
	.innerCont{
		//もし$countが5以下なら次のCSSを適用
		@if $count <= 5{
			background:#000;
			color:#fff;
		//もし$countが6以上10未満なら次のCSSを適用
		}@else if $count >= 5 and $count <= 10{
			background:#dde0f4;
			color:#18288a;
		//もし$countが上記以上なら次のCSSを適用
		}@else{
			background:#fff;
			color:#000;
		}
	}
}

このように、条件によって、出し分けが可能です。
なおifで使われている=や<=といった記号があります。
これらの記号は「比較演算子」と呼ばれ、値を比較する際に使われます。
下記に一覧をまとめますので、随時使い分けてみてください。

  • 「==」同じだったら
  • 「!=」同じじゃなければ
  • 「<=」左の数字が右の数字以下だったら
  • 「>=」左の数字が右の数字以上だったら
  • 「<」左の数字が右の数字より大きかったら
  • 「>」左の数字が右の数字より小さかったら

また、if文に2つ以上の条件を指定する時。
「and」「or」のような文字列を使います。
これを「論理演算子」と呼びます。

  • 「and」どちらも条件が揃った時
  • 「or」どちらか片方の条件が揃った時

基本的には、この2つを使います。
if文は論理演算子と比較演算子を使い分けながら書きます。
なお、今回のscssをコンパイルすると、次のようになります。

common.nested.css

.mainCont {background:#000;color:#fff;}  
.mainCont .innerCont {background:#dde0f4;color:#18288a;}

無事、CSSが条件通りになっていますね。
if文はデザインの出し分けに、特に重宝します。
WEBサイトを作りながら使い方を考えてみましょう。

for文

同じ処理を何度か繰り返したい時があります。

例えば、連番でクラス名をつけて、CSSを指定したい時。
paddingなどを10ずつ加算して10パターン作りたい時。

for文を使うことで、素早く効率的にCSSを構築できます。

for文はループ、とも呼ばれています。
繰り返しを意味するループですね。

今回は10ずつpaddingを増やすループを試してみましょう。

//変数 from 開始値 through 終了値
//1回のループにつき1ずつ変数に加算される
//開始値から始まり、終了値になるまで繰り返される
@for $i from 1 through 10{
	//変数を#{$i}でクラス名や値に使えます
	.padding-top-#{$i}0px{
		padding-top:#{$i}0px;
	}
}

for文の使い方は説明の通りです。
では、このfor文をコンパイルすると、どうなるでしょう。

common.nested.css

.padding-top-10px {
  padding-top: 10px; }

.padding-top-20px {
  padding-top: 20px; }

.padding-top-30px {
  padding-top: 30px; }

.padding-top-40px {
  padding-top: 40px; }

.padding-top-50px {
  padding-top: 50px; }

.padding-top-60px {
  padding-top: 60px; }

.padding-top-70px {
  padding-top: 70px; }

.padding-top-80px {
  padding-top: 80px; }

.padding-top-90px {
  padding-top: 90px; }

.padding-top-100px {
  padding-top: 100px; }

このように10パターンのCSSが書き出されました。
通常のCSSなら、記述が面倒だったでしょう。
ところがforを使えば、非常にシンプルに書くことができるのです。

繰り返しにおける処理をfor文は簡単に実現します。
他のプログラミング言語でもよく使われる処理です。

each文

最後にeach文をご紹介します。
このあたりまで抑えれば、ある程度Sassも使いこなせるでしょう。

each文を説明するには、まず配列について知る必要があります。
配列とは「いくつもデータを入れられる」変数です。

これまでの変数を「箱」だとすると、配列は「棚」です。
1つの棚の中に、いくつも物をしまえるようなイメージを持ちましょう。
使う時は、好きな棚を開けて中身を取り出せば使えます。

例えば「画像」という配列があったとしましょう。
その中に、base、over、cross、dataという言葉を入れます。
配列として書くとこんな感じです。

$imgs : base, over, cross, data;

では、この配列を、どのように使えば良いでしょうか。
配列の中身を使うには、each文を使って取り出します。

//配列を指定します。
$imgs : base, over, cross, data;
//変数 in 配列
@each $v in $imgs{
	//#{変数}で中の文字をclassと繋いで出力できます。
	.bg-#{$v}{
		//値に使う時は、変数を指定するだけでOKです。
		background: url(#{$v}.png);
	}
}

では、コンパイルすると、どうなるでしょうか。

.bg-base {
  background: url(base.png); }
.bg-over {
  background: url(over.png); }
.bg-cross {
  background: url(cross.png); }
.bg-data {
  background: url(data.png); }

このようにbackgorundが4つずつ出来ました。
今回はclass名と画像名に配列の値を使いました。

また、1つの配列に2つの値を入れることもできます。
といっても、あまりイメージがわかないと思うので、実際にやってみましょう。

例えば4パターンのcolorを変化させるclassを出力するとします。
そこで、下記の条件を配列で出力したいとしたらどうなるでしょうか。

  • class名は.color-redのように色が明確にわかるようにしたい。
  • そして値はcolor:#c51919;のようにカラーコードで出力したい。

先ほどの方法だと、class名と値を違うテキストにすることはできません。
見返してみるとわかるかと思いますが、class名と値が、baseやoverのように、同じ名前になってますよね。
それでは、要望がかなえられません。

今回の場合、2つの値を出し分ける必要があります。
配列は通常、値を1つずつ入れていくしか出来ません。

そこで使うのが「連想配列」という配列です。
色とカラーコード、2つ以上のデータを並列に配置できます。

//連想配列。
$colors-list: (
	//左が色の名前(変数1)、右にカラーコード(変数2)。
	//今回の組み合わせに限らず自由に入れられます。
	red:#c51919,
	blue:#244ec7,
	green:#49ba26,
	yellow:#d5cf1f
);

//変数1($name),変数2($color) in 配列
@each $name, $color in $colors-list{
	//$nameと$color、2つ使い分けられます。
	.color-#{$name}{
		color:$color;
	}
	.back-color-#{$name}{
		background:$color;
	}
}

このソースコードをコンパイルするとどうなるでしょうか。

.color-red {
  color: #c51919; }

.back-color-red {
  background: #c51919; }

.color-blue {
  color: #244ec7; }

.back-color-blue {
  background: #244ec7; }

.color-green {
  color: #49ba26; }

.back-color-green {
  background: #49ba26; }

.color-yellow {
  color: #d5cf1f; }

.back-color-yellow {
  background: #d5cf1f; }

名前とカラーコードに分けてコンパイルできました。
このように、配列とeachを使うと、連番的なCSSを一気に生成できます。
CSSで書くと、長く冗長なコードになりますが、Sassだとシンプルです。

最初は使いづらいかもしれませんが、何度も使ってみてください。
慣れてくれば、従来のCSSよりも楽で、シンプルに感じられます。
ぜひ、使いこなせるように練習してみましょう。

WEBサービスづくり学習「STARTOUT」はじめました!

自分の「WEBサービス」を作りながら「制作技術」を習得しよう!

STARTOUTとは、WEB制作×サービス作りのオンライン実践学習サービスです。ゼロからWEBサービスを作り、収益化しながら技術を習得してみましょう!

 詳細はこちら
  • このエントリーをはてなブックマークに追加

ウエヤマ ショウタ

WEB制作 ✕ 事業づくり学習サービス「STARTOUT」|事業づくり実践学習サービス「WAREHOUSE」|教えない学校、IT留学シェアハウス「WORKROOM」|以上3つ運営してます。近々、上記の成果を束ねて、クリエイターと起業家が生まれ、事業が生み出され続ける町を作る人。ベルリンのホルツマルクトはロールモデル。

ウエヤマ ショウタ

WEB制作 ✕ 事業づくり学習サービス「STARTOUT」|事業づくり実践学習サービス「WAREHOUSE」|教えない学校、IT留学シェアハウス「WORKROOM」|以上3つ運営してます。近々、上記の成果を束ねて、クリエイターと起業家が生まれ、事業が生み出され続ける町を作る人。ベルリンのホルツマルクトはロールモデル。

WEBサービスづくり学習「STARTOUT」はじめました!

自分の「WEBサービス」を作りながら「制作技術」を習得しよう!

STARTOUTとは、WEB制作×サービス作りのオンライン実践学習サービスです。ゼロからWEBサービスを作り、収益化しながら技術を習得してみましょう!

 詳しくはこちら