壮Sass27226Webサイトを構築する際、角丸、グラデーション、アニメーション等、従来では画像やプログラミング言語を使わないと不可能だったデザイン表現が、CSS3を使うことで可能となりました。CSSの拡張言語であるSCSSや、SCSSのフレームワークであるCompassと組み合わせると、CSSによる表現の幅が広がります。今回は、CSSのみでのデザイン表現をテーマとし、SCSSやCompassの便利な機能を活用した幾何学模様の作り方をご紹介します。別画面でデモを再生するソースコード(SCSS)なぜSCSSやCompassを使うのかプログラミングを使って図形を描く場合、基本的な四則演算や三角関数といった数学的な処理や、繰り返し文(for文)、条件分岐(if文)等が扱えると便利です。CSSではcalc()メソッドを使った簡易な計算しかできず、繰り返し文や条件分岐等は実装されておりません。SCSSやCompassは、これらの処理を扱う為のAPIが用意されているので、図形の描画処理が手軽になります。SCSSやCompassのインストールおよび設定は以下のようなサイトを参考にするとわかりやすいでしょう。memobits以下、SCSSおよびCompassを使える環境が整っているものとして話を進めていきます。CSSで模様を描く手順ソースコード(CSS)本デモでは、複数の点を並べることで、模様を描くこととします。HTMLにliタグを複数定義し、各々のliタグを1つの点とみなし、スタイルを設定します。<li></li></ul>たとえば、画面上に3つの点を斜めに並べたい時、liタグのスタイルを、:nth-child()疑似クラスとtransform()メソッドのtranslate値を使用して、以下のように設定することで可能です。CSSは以下のようなコードです。直線上に点を配置するソースコード(SCSS)STEP1の点を100個に増やすと、直線のような図形が描画されます。100回の繰り返し処理を手動で行うのは煩わしいので、繰り返し処理のfor文を使います。Compassにおける変数の定義は以下のように行います。x=3変数$iを1から10まで1ずつ増加させて繰り返し処理を行うには、以下のように記述します。繰り返し処理内で、変数をセレクター名に使いたいときは、#{$i}という記述をします(インターポレーション)。繰り返し処理の内容}Compassで前述のtransform()のtranslate値を扱う場合、以下のような記述で可能です。$y);これを使って、直線上に点を描くには、SCSSで以下のように表されます。}}これをコンパイルすると、以下の様なCSSが書き出されます。円周上に点を配置するソースコード(SCSS)円周上の点のX座標、Y座標は、半径をr、角度をθとして、以下のように記述されます。SCSS、Compassでは、以下のような数学処理が使用できます。余弦関数これを使って、円周上に点を描くには以下のように記述します。使用すると、より複雑な曲線を描くことが可能です。Compassでは、それらの関数を算出するAPIも備わっています。Helpers本デモは、螺旋状の曲線、ハイポトロコイド曲線を2つ、矩形を並べた図形をそれぞれ作成してます。ハイポロイド曲線は上記のような描画結果となります。各々の図形は、親要素(div#mathBox)のクラスを切り替えることで配置が変わるようにしました。animationプロパティもCompassを使うと楽になるソースコード(SCSS)CSS3で実装されたanimation()メソッドは、任意のキーフレームで設定されたスタイルを徐々に変化させることができます。今回は、HSL色空間において彩度と明度を固定し色相だけを周期的に変化させるアニメーションを作り、それを点の背景色とします。その為には、0%から100%までを25%刻みでスタイルを設定し、キーフレーム間を制御する必要があり、Compassの繰り返し処理を使うと便利です。と25%ごとにキーフレームを設定。キーフレームはインターポレーションを使う。}}ベンダープレフィックスの制御Compassでtranslate()等を使ってCSS3のメソッドを記述すると、ほぼすべてのベンダープレフィックスが自動で付与されます。対象ブラウザ次第では不要なベンダープレフィックスは削除しておいたほうがよいでしょう。自動で付与されるベンダープレフィックスをすべて削除するには、$supported-browsersとreject()を使って以下のような設定をします。opera-mobile);animation周り等の処理は、Webkit系の最新ブラウザ(執筆段階)でもベンダープレフィックスがないと動きません。Chrome、Safariの為のベンダープレフィックスは付与するように設定しました。最後にモダンブラウザではHTML5、CSS3の対応も進んでおり、一般的なWebサイト上でCSSの表現を使用するシーンが増えるかと思います。SCSSやCompassを使用すると、CSSの記述が劇的に便利になり、表現のブラッシュアップに注力できるようになります。2016年2月12日に内容をメンテナンスしています。メディアアートを学ぶ。MEDIA、Qiita他)、Twitterで積極的に情報を発信中。Lynda.comやSchooの講師も務める。MEDIAは株式会社ICSが運営するオウンドメディアです。ICSはインタラクションデザイン専門のプロダクション。最先端のwebテクノロジーを駆使し、オンスクリーンメディアの表現分野で活動しています。問い合わせ採用情報インタラクションコンテンツの制作や新しいことに挑戦しながら、互いにスキルを高め合えるメンバーをICSでは募集しています。詳しくは採用情報をご覧ください。MEDIAは古い記事でもメンテナンスし続けることで、常に役立つ情報発信を目指しています。