講師だって、最初は初心者だもの[番外]2013年は、がんばらずに、自分らしくしなやかに CSSメタ言語の LESS に注目/森 和恵

投稿:  著者:  読了時間:7分(本文:約3,200文字)


こんにちは。森和恵です。あけましておめでとうございます。今年もよろしくお願いいたします。......と、去年と同じ書き出しで今年もスタートしました。まずは、今年の抱負を語りたいと思います。

■抱負に振り回されるようじゃイカン。

  そろそろ、変わらなきゃイカン。〜2012年の抱負〜
  < http://bn.dgcr.com/archives/20120130140100.html >

去年は、張り切ってこのような抱負を掲げてみたものの......。仕事に流されてしまい、ほとんど手つかずで終えてしまいました。一年中、時間に追われていたような気がします。

理由は何となくわかってて、第一が41歳を超えて体力がついていかなくなったことが大きいなと思います。「若い時と同じ調子で仕事をしようと思ったって、ダメだよ(笑)」なんて、友達に言われる始末だし(恥)。

日々の仕事に追われるし、目標をぜんぜん達成できない自分が情けなくて、責めてばかり。割と苦しい一年を過ごしました。

なので、今年は「がんばらずに、自分らしくしなやかに」を掲げてみました。無理できないのなら、できない自分を認めて、できることからコツコツやっていこうかなと思っています。

まずは、春までの目標として、志低めに最低限「これはしなきゃまずいだろ?」と思うものだけに絞ってみました(迷ったときは、短いスパンで小さな目標かかげ、達成感を得て自信をつけるのがいいらしいです)。




●まずは、自分改造を

体力が衰えてきているのに、体重は増加する一方......なんて最悪なループから脱出したいと思います。ええ、何としてでも。もうじき42才。ここで失敗したら戻れない......気がします(苦笑)。

・睡眠は6時間キープで、早寝・早起き(11時〜5時)をする
・甘いものは午前中に、お昼ご飯をちゃんと食べる
・ジムに最低でも週1回は行く

当たり前のことだけど、これが習慣化したらずいぶん生活改善できるはず。

●物事を深くインプットする

講師業という仕事柄、浅く広くのインプットを心がけて来ました。が、どうやらそれでは、役に立ちそうにないんだなと思い知らされました。みんなが知っていることを知ってても、必要とされないんだなと。

なので、興味を持ったことをこれまでより、もう少しだけ深く掘り下げて消化させたいなと思います。当面は、それをするためのアウトプットを目指そうかなと思います(知識をモノにするには、アウトプットする過程で根付くからです)。

●好きなことにじっくり取り組む

週に一度は、完全にオフを取って、好きなことに取り組みたいと思います。好きなことは、なんでもいいのですが、仕事意外のことにすること。日記の記録でもいいので、形に残すこと。あと、オフの日に疲れすぎてて一日寝て過ごすなんてことがないように体調管理も必要ですね。


■CSSメタ言語の LESS に注目

自分の抱負を書いたら、次は、Web業界的に何に注目するか?を挙げたいと思います。

私が注目しているのは、Twitter BootstrapとLESSです。どちらも、最近の流行といえば流行なのですが、どちらも「CSSを拡張する」ものです。導入にはてこずりますが、組み込んでしまえば、Web制作を効率化できるものです。

この辺りの現状を見るために、お正月明け早々にイベントに参加してきました。このイベント、有料にもかかわらず240名の定員があっというまに満席になるほどの盛況ぶりで、ここへの関心の高さを伺わせてくれました。

  CSS Preprocessor Shootout
  < http://lp26.cssnite.jp/ >

イベントのテーマは、CSS Preprocessor(CSSメタ言語)。CSSを記述するときに変数やMixinと言われる関数が使えたりし、ベタでCSSを管理するよりかなり楽になります。LESSは、Sass、Stylusに次ぐCSSメタ言語のひとつで、機能はそれほど高くないけれど、それ故に初心者に取り組みやすい言語です。

  LESS
  < http://lesscss.org/ >

LESSコードの便利さについて、一例をあげてみます。

LESSのコードで「@変数名:値」を定義しCSSの値を変数に持つことができます。

@color: #4D926F;

#header {
 color: @color;
}
h2 {
 color: @color;
}

これを、通常のCSSコードに直すと、変数名が展開されて値がセットされます。

#header {
 color: #4D926F;
}

h2 {
 color: #4D926F;
}

プログラム系が嫌いではない人にとって、「えー! なにこれ? すげー!」的なものだと思います。それでなくても、Webサイト制作業務に携わるなら、楽したいなら、ぜひ覚えておいて損はないはず。

LESS→CSSに直す方法(コンパイルするというそうです)は、いろいろありますが、一番手軽なのがWeb上で試せるLESS2CSSです。

 |LESS2CSS
 < http://less2css.org/ >

Twitter Bootstrap は、Twitterが提供する CSSフレームワークです。 一言でいうと、Twitterのサイトで使われているさまざまなCSSのテクニックをテンプレートにして、配布してくれています。

 |Twitter Bootstrap
 < http://twitter.github.com/bootstrap/ >

例えば、Twitterで使われているボタンのデザインを適応する時は、タグにclass="btn btn-large" という属性をつけただけで使えてしまうというすぐれものです。

< button class="btn btn-large" type="button" >Large button< /button >

 |Twitter Bootstrap の Buttons 例
 < http://twitter.github.com/bootstrap/base-css.html#buttons >

実は、Twitter Bootstrap をカスタマイズするのにLESSが使えるとのこと。最初からあるデザインを自分好みにカスタマイズできるそうです。やはり、LESSが大切。

ということで、今回は触りだけご紹介しました。
また、次回以降の記事で、いろいろと描きたいなと思います。

さて、今回は年の初め......ということもあり、サラッとした感じで終わります。
次回は2月初めごろです。興味が熱いうちにLESSをもう少し掘り下げます。
ではまた!(^θ^)

※記事へのご意見・ご要望は下記より受付ます。
< http://bit.ly/gIHFfu >

【森和恵 r360studio 〜 Web系インストラクター 〜】
< site: http://r360studio.com > < twitter: http://twitter.com/r360studio >
< mail: r360studio@gmail.com >
< サイト制作の教科書 r360study: http://www.facebook.com/r360study >

大阪の会場なのですが、新しいセミナーの告知をさせてください。そう、自分がいいなと思ったことは、すぐにセミナーでお伝えしたいなと思っております。インプットしたら、アウトプットが大切ですね。(^^)

  Twitter Bootstrap活用入門(2月23日)
  < http://www.sansokan.jp/events/eve_detail.san?H_A_NO=14923 >
  はじめてのLESS入門(3月16日)
  < http://www.sansokan.jp/events/eve_detail.san?H_A_NO=14926 >