読了時間:8分(本文:約3,600文字)ツイートはてブするこんにちは。昨日は3月頃の春の陽気でしたね。大阪城では、梅が咲いてきたそうで......厳しい冬はもうそろそろ終わりなのかも。節分が終わって、今日は立春だそうですし、そろそろ寒さに縮こまっていないで、動き出したいなと思います。今回は予告通りに、CSSメタ言語のLESSについてお話します。春が来る前にマスターしておけば、はやく仕事を切り上げてお花見だって行けちゃうかもしれません。>さて、始める前に一つだけ思い出しておいてください。LESSコードはそのままではブラウザが理解できないので、LESS→CSSと変換する必要があります。ここでは、手軽に試せるLESS2CSSを使ってください。左側にLESSコードを入力すると右側で変換されます。〈変数〉LESSを使えば、CSSのルールを拡張して、記述に便利な機能を追加することができます。今回は、前回も少し紹介した「変数(Variables)」について考えてみましょう。LESSでは、「@変数名:値;」を使って、値を変数として定義できます。変数名は、先頭に@をつけて任意の文字列(アルファベット・数字・ハイフンなどの組み合わせ)を指定します。カラーコード・数値など、使用頻度の高い定番の値を変数定義しておけば、CSSセレクタに個別にカラーコードを書かずに指定ができます。私のサイトでは、水色(#abf1e7)がメインカラーです。いろんなところで使うので、変数@r360Colorに定義しました。下記のコードでは、ページ背景色(bodyセレクタ)や囲み枠の線色(#contentsセレクタ)の2か所で変数@r360Colorを利用しています。#abf1e7;}公式サイトでの変数の説明は、以下のようにあります。『変数は広範囲で利用している値を1ヶ所で定義することができ、その値をスタイルシート内で再利用することができます。これにより全体の変更を1行のコードの編集で行うことなうことができます。#f1acc8;」と定義している1か所を変更するだけでOKです。『全体の変更を1行のコードの編集で行うことなう』ことができます。#abf1e7;}この例では、変数をさらに進化させて、変数@r360Borderでよく使うボーダーを、変数@r360Fontでよく使うフォントを......というように、徹底的に変数を使って定義してみました。ここでの注目ポイントは、変数@r360Borderでみられるように、値はどこまで指定してもOKということです。@r360Color;」というように、ボーダーの指定から、形状(solid)、太さ(5px)、カラー(@r360Color)とまとめて定義に入れてしまってもOKです。カラーで見られるように変数を定義の中で使うこともできます。演算をすることもできます。演算とは、四則計算のことですね。足したり(+)、引いたり(-)、掛けたり(*)、割ったり(/)することができます。10%)」と書くと10%明度が高く計算されます。先の例でのボーダー指定から、変数@r360BorderSizeを使ってボーダーの太さだけを別で定義し、変数@r360BorderSizeBoldでそれに10を加えています。10%)を使い、テーマカラーを基準により明るい色に変更しています。15px;}と、ここまでくれば、まるでプログラミングをしているような感覚に陥りますが、注意がひとつ。LESSの変数は、定義した後から値を変化させることができないので、変数というよりは定数と考えたほうがいいかもしれません。プログラムにおける変数のように、右辺で計算をして変数に再度代入するなんてことはできません。@r360BorderSize+10;」こんな風に書くとエラーになります。いうことで、今回はLESSの変数についてご紹介しました。LESSのネタを続けていきますね。!(^θ^)※記事へのご意見・ご要望は下記より受付ます。>昔、上司に「あなたは、言葉尻だけは丁寧に頼んでいる風に見えるけど、最終的には自分の思うように無理やり相手を動かすふしがあるので、言動に注意してね」と言われたことがある。自分の意見は通すけど、相手の意見を頭から無視していた風に見えたのでそう注意されたのでしょう。たしかに、若い時は「自分が正義だ!」とか馬鹿な勘違いをしていたと思います。三つ子の魂なんとやら......とあるように、本性から変えることは無理だろうけど、それからは注意してきたつもりです。そのツケがまわり回ったのか、いま自分が相手にそんな感じの応対をされてて、「ああ、これが上司に言われていた状態かなぁ......。たしかに、嫌な気分になるし、信頼関係は生まれないよね」と改めて思い知らされています。当事者の立場になって、改めて反省中。LESS便利だなと思った方はぜひぜひ。日々一歩(104)[コラム]2019年秋到来。和恵この著者の記事一覧へこのサイトについてこのサイトは平日毎日発行しているメールマガジン「日刊デジタルクリエイターズ」のバックナンバーを収録しているサイトです。1998年4月の第1号からすべて収録されています。著者別の掲載リストもあり(ページ末尾)、気になる著者のバックナンバーを読むことができます。基本的にメールマガジンの発行後、このサイトが更新されるので、最新情報を確実に読みたい場合は、メールマガジンを購読して頂くことがお薦めです。「日刊デジタルクリエイターズ」のメールマガジンは、デジタルメディアで活躍する現役クリエイターたちのコラムで構成されている本格派のメールマガジンです。実用的な内容から、インスピレーションを刺激する内容まで多彩なコラムをお届けします。メールマガジンスタンドの「まぐまぐ」「melma!」にメールアドレスを登録するだけです。ご購読は以下のボタンから。Amazonを使用しています。記事)川合和史@コロ。