125 プログラミング学習日記

プログラミング学習15日目~複数クラスはこわくない

投稿日:

プログラミング学習を始めて2週間になる。

オンラインで学べる Progate で、実際に手を動かしてコードを書きながらサンプルのページを作り込んでいくことで、亀の歩みではあるけれども一つ一つ身についていく実感に、毎日の学習が待ち遠しい。

ここ数日で学んだことのうち,もっとも目からうろこだったものについてメモしておく。

「ボタンの基本デザインは同じで、このボタンだけ文字を赤にしたいんだけど」

デザインしていると、まあ、いろいろしたいことが出てくる。

今回の課題は「複数クラス」

Classについておさらい

クラスというのは、なんだかわからないので敬遠していたのだが、単なるラベル付けだった。

lyustyle
「このラベルが付いているものは、こんなデザインにしますよー」

ということだ。

なんのことはない。

スタイルシートの方で、例えば

lala
「boxという名前の部分には、フォントサイズ14pxにするよ」

と決めておけばいい。

このコードは下のようになる。

コード

.box {
font-size:14px;

 

こうしてあらかじめ定義しておいて,

lyustyle
「ここの

(部分)の文字は全部14pxにしたいから,クラスは「.box」にしょうっと」

と考えるわけだ。

コードで書くとこうなる。

<div class=”box”> ◎◎ </div>

lala
◎◎の部分は,クラス名「box」で決めたフォントサイズ14pxになるよというわけね。

<div>に二つの名前を付ける

で,今回のお題は,<div>に「.box」だけじゃなくて,[.red」という名前のクラスもいっしょにあてたい,という課題をどうするか。

実は簡単で,次のようにする。

<div class=”box red”> ◎◎ </div>

上のように,クラス名をあてる箇所に複数のクラス名を書いておけばいい。

ただそれだけ。

いったいなんでそんなことが必要なんだろう。

 

それは,実はデザインをしているとよくあることだ。

lyustyle
「この部分と,この部分,どっちもフォントサイズを14pxにしたいけど,こっちの部分は文字を赤に,こっちの部分は青にしたいよう」

というようなことはよくある。

そういう時は,一個ずつ

.boxred {
font-size:14px
color:red;
}

.boxblue{
font-size:14px;
color:blue;
}

とすればいい。

すればいいのだが・・・

しかし,上の例では,太字で書いたところ,つまりカラーを示すところ以外は共通している。

ならば,共通部分と,個別部分とを分けてクラス名を定義しておけば,簡単に済む。

<div class="box red">◯◯</div>

こう書いたら,「.box」クラスの14pxというフォントサイズと,「.red」クラスの赤という文字色が同時に表されるわけ。

lala
なんて便利。

あとから,文字色を緑にしたいという希望がいくら増えても,そのクラスだけ作っていけば大丈夫。

ボタンの基本デザインと個別の文字色をつくっておく

いろいろなクラスをつくっておいて,それらを組み合わせて<div>に適用できるのが複数クラスというわけだった。

ボタンの基本のデザインを「.btn」というクラス名でつくっておき,

あとは,文字色という個別のデザインを「.blue」「.red」という名前のクラスでつくっておく。

あとは,

lyustyle
「このボタンは,基本デザインに青文字にしたいよう」

となれば,

lala
はい。<div class="btn blue">◯◯</div>

とすればいいわけだし,

lyustyle
「このボタンは,基本デザインに赤文字にしたいよう」

となれば,

lala
はい。<div class="btn red">◯◯</div>

とするだけなんだね。

こうやって個別にクラスを作り,それを組み合わせていけば,少ない労力で効率よくデザインできる。

今回の目からウロコは以上。

見るのも嫌だった CSSコードは ,今ではよい友達です

6月15日をもって,ちょうど半月経ったことになる。

半月前と今と比べて大きく変わったことがある。

それは,CSSのコードを見ることへのアレルギーがほぼなくなっていること。

以前は,あのコードを見るのも嫌で,スタイルシートいじるときも,息を止めながら(なんで?)該当箇所をさがしてちまちまいじっていた。

いちばんきらいだったのが,{とか,}とか。

なんで,あれなのか?

あれじゃなくてもいいだろう。

よりによって,あれ

あれはきらいなんだ。

 

でも,学習によって正体がわかり,毎日顔を合わせるようになると,少しずつ嫌じゃなくなってきた。

そして今では,友達になろうとしています。

関連記事もどうぞ

メルマガ講座「10年ブログによるブランディング講座」

登録

10年ブログによるブランディング講座は30通のメールによる講座です。
また,2018年7月現在,週1回金曜日に「Lyustyleの読書」をはじめとする「知的迷走通信」を配信しています。
皆さんと一緒に楽しく成長できたらと思っています。

lyustyle
無料です。解除も自由です。下のリンクよりご登録ください。Lyustyleの設置した安全なページです。


登録するとすぐに第1回目のメールが届き,その後,30通のメール講座が始まります。

Lyustyleメルマガ「知的迷走通信」

 



よろしければ、購読の登録をしていただければ幸いです。


follow us in feedly

にほんブログ村 PC家電ブログ デジモノ・ガジェットへ

にほんブログ村


-125 プログラミング学習日記
-

Copyright© 知的生活ネットワーク , 2019 All Rights Reserved.