コマンドがわからない、ターミナルを使いたくないという人でも、Sassを使用できる方法に、Koalaという直感的に操作ができるアプリケーションソフトがあります。今回はその方法を紹介します。KoalaでSassを使用する手順手順は以下の通りです。KoalaをダウンロードしますKoalaを起動しますプロジェクトファイルを用意します設定ファイルを作成しますCSSに変換（コンパイル）しますKoalaをダウン……
清涼飲料水や男性用の化粧品等の広告など、清涼感を出すために水滴が飛び散っているようなイメージが使われることがよくあります。もちろん、本物の水滴を利用することもありますが、Photoshopのブラシでもああいった効果を再現出来ます。今日はそんな効果を出すのに役に立つブラシを幾つかご紹介致します。Free Water Splash Photoshop Brushesなめらかな水の動きをとらえたブラシで……
ExcelやGoogle Spreadsheetなどの表計算ソフトを仕事や学校で使う人は多いかと思います。 本来の用途である表計算はもちろんですが、計算までしなくてもなにかのリストを作る際に使ったり、システムの仕様書を描いたり（エンジニアの方に嫌がられる事が多いので気をつけましょう）、活躍の場は多いです。 そんな当たり前のように使っているようなExcelですが、本業の方でもない限り、意外と関数……
スマホの画面を見たり触ったりせずに、ポケットに入れたままで使えるアプリを作るにはどうすれば良いでしょう？ The Best Interface is No Interfaceの著者であるGolden Krishna氏がこの刺激的な新しいUXの議論について、自身の新しい著作をもとに語ります。Charlesは生活のすべてがスマホの中に入っているように感じています。彼は、日常のちょっとした事をするために……
プログラミングをしていく上で、アルゴリズムをきちんと理解しているといないのとでは大きな差が生まれます。アルゴリズムをよりよく理解することで、プログラミングスキルも深まっていきます。今回はアルゴリズムが学べるおすすめ書籍を10点ご紹介します。アルゴリズムを、はじめようまずはアルゴリズムの入門書をご紹介致します！アルゴリズムには様々なものがありますが、本書籍では「プログラマが最低限知っておかなくてはな……
Sassの便利な機能、入れ子について紹介したいと思います。ちなみに入れ子のことを英語でネストと言い、実際にSassでもそう呼ばれることがあります。入れ子は、Sassを使うのであれば絶対使うものです。入れ子（ネスト）の基本入れ子とは、簡単に言うと今まで一つの{ }で完結していたものを、{ }の中に{ }を書いてCSSで値を指定していくものです。早速コードを見てみましょう。HTMLコード<……
アンパサンド（&）についてアンパサンドとは、親セレクタを参照することを言います。親セレクタを参照するとはどういうことなのか、実際のコードを見ながら説明していきます。a { display: block; background-color: #000; color: #fff; } a:hover { background-color: #999; ……
widthの値を、違う値とを足したものにしたいと思ったときに、Sassの便利な機能で演算というものを使うことができます。演算とは実際にどういうものなのか、説明していきたいと思います。演算の基本演算とは、 +, -, *, / を使った、足し算、引き算、掛け算、割り算のことを言います。CSSファイルに変換されると計算され、正式な値が出てきます。.box1 { width: 100px + 1……
こちらの記事ではSassの概念的な部分について紹介しました。今回は、Sassでもよく聞くSCSSについて、Sassとは何が違うのか説明したいと思います。 Sass、SASS、SCSSの３つの言葉の違い Sass CSSを拡張したメタ言語のこと、詳しくはこちらの記事を参照下さい。 SASS SASS記法やSASSファイルと書かれていることが多く、Sassの2つの記法のうちの一つです。 SCSS 上記……
SassはCSSにはできない、コードを書く手間を減らしたり、運用しやすくする機能などがあります。今回はそういったSassならではの便利な機能を、１つずつ紹介していきたいと思います。Sassの便利な機能入れ子（ネスト）が使えるので、記述が省略できるa { color: black; &:hover { color: blue; } }通常CSSでは一つ……