株式会社プライムネットワークスタッフが、html5やCSS3、phpなどのWEB技術に関することやワードプレスなどのCMSについて学んだことなどを紹介して行きたいと思います。
Sassって便利だから、使ってみれば？
なんて声が、１年前から勧められているにも関わらず今日まで来てしまいました。
話に聞いていると、なんだか便利で良さそうな気もするのですが、仕事のうえで、そこまでCSSを頻繁に使うこともなく、ちょこっとした修正ばっかりだったので、いままでスルーしていました。
ところが、なんだが最近、一からCSSを書かねばならないハメになり、遅まきながらSassについて調べてみました。
(やはり必要に駆られないとヤラない性分は変わりません・・・)
CSSのコーディングを便利にするもので、Sass(さっす,さす)と言うそうです。
要するにCSSの書き方にプログラミングでいうところの変数や計算式などが使え、書いたもの（.scss）をコンパイルしてCSSを作るという、かなりプログラミング寄りなものです。
とはいえ、コテコテのプログラミング言語ほど難しくなく、普通にCSSを書けるデザイナーであれば、問題なく移行できそうです。
まぁ、変数だのなんだのを考えるのも面倒くさいけど、現在の僕の中では、ある程度のCSSのルールができあがっているので、これをさらに推し進めればいいだけなので、頑張ってみようかな！
さて、しばらくぶりに勉強意欲が湧いてきたところで問題が・・・
なんとSassを使うためには、Rubyが必要になってくるのだそうです！！！
Masユーザであれば、最初からOSにRubyが入っているから簡単にインストールできるようですが、なにせ会社のパソコンはWindows。
まずは、Rubyからインストールしなければなりません！！！
インストーラがあるので簡単かと思ったら、今度はコマンドプロンプトで、わけのわからないコマンドを打たねばならない！
しかも、一度で済むこと無く、数回コマンドプロンプトで入力しなければなりません
読んだだけで、断念です。
いままである程度のインストール作業をこなして来ましたが、コマンドプロンプト系のインストールにいい思い出はありません。
上手く行けばいいのですが、一度として１回で上手くいった試しがありません。
なので、今回は、インストールの仕方をリンクで掲載しておきます。
ツイート
改めて、CSS3って凄いなと思う。
いままで画像やjavascriptで表現しなければならなかったことが、いとも容易くできてしまうのです。
とはいえ、すべてのブラウザで上手く動くかどうかは検証しなければなりませんが・・・
そんな中、ブログを作る上で、簡単に出来たらいいなと思っていたものがあったので、書き留めておきます。
これは、どのようなCSSになっているのかというと・・・
.overMoji {
width: 100px;
overflow: hidden;
white-space:nowrap;
text-overflow: ellipsis;
-webkit-text-overflow: ellipsis;
-o-text-overflow: ellipsis;
}
ここで使っているのは、「text-overflow」というプロパティ
とにかくwidthを指定して、省略符号を出したい部分の範囲を決めます。
今回は、widthを100pxにしてみました。
このプロパティに、省略符号をつけたければ「ellipsis」という値、
省略符号を表示しないのであれば「clip」という値をつければいいのです。
その他にもCSS3には、数々の素晴らしいプロパティがあるので、ちょくちょく紹介していきたいと思います。
ツイート
今日は、CSS3における「text-shadow」のお話。
まず、この「text-shadow」、何ができるかというと英語表記のまんま、「文字に影」と付けます。
つまりは、いままでPhotoShopやFireworksなどの画像加工ソフトで、文字にかけていたドロップシャドウ（文字に影をつける）を、CSSでコントロールできるというもの。
ちょっとした修正なのに、わざわざソフトを立ちあげて、画像保存してなんていう面倒くさいことに煩わされず、ちょっとテキストエディタをいじるだけで修正できるので、とても便利です。
とは言え、そこはCSSの話。
対応ブラウザが、モダンブラウザだと言われている、Chrome, Safari, Firefox, Operaでは問題なく利用できるのですが、2013年１月の時点で約55%ほどだと言われているIEには、まったく効き目がありません！！
しかも、微増ながらシェアがあがっているのだとか・・・
世界では、CROMEがIEのシェアを抜いて１位となっているというのに・・・。
それでは実際に「text-shadow」で何ができるのかを見てみましょう。
今回やるべきことは、3pxの中間色のグレー（#999）の影を落としてみる。
サンプルテキストに日本語を使うとかっこ良くできないのだよ
これには、以下のようなtext-shadowのスタイルを入れています。
text-shadow: 3px 3px 3px #999;
書き方の意味はというと・・・
text-shadow: 右方向 下方向 ぼかしの距離 色;
ちなみに、右方向と下方向にマイナスを入れると、それぞれ逆の方向、つまり左方向、上方向にシャドウをいれることになり、さきほどのソースをマイナスにしてみると
ハイ、これわかりづらいですよね？
こんなときはどうするかというと、text-shadowでは、ぼかしの距離を省略することができるので、その部分を省略し、ぼかさずシャープに影をつけてみましょう。
text-shadow: 3px 3px #999;
どうですか、ぼかしていないのに、この見づらさ・・・。
但し、どのように移動しているのかはわかりますよね？
text-shadow: 1px 1px #999;
だんだん僕のセンスが疑われはじめてきたのではないでしょうか・・・
こうなったら、思い切って、10pxほど、移動させてやりましょう。
text-shadow: 10px 10px #999;
やればやるほど、ダメになるという典型ですね。
「一番最初に作ったもののほうが良かった」というwebに有りがちな失敗例です。
しかし、この惨憺たる結果を見てきたときに、text-shadowって使い場所がなくね？なんておもいませんか？
いままでの例を見る限り、ないほうがマシじゃん！なんて・・・
でも、このtext-shadowは、太字や大きな文字と合わせると、それはそれは見栄え良くなるんですよ！
ただ、ただ、僕の使い方が下手くそだっただけで、もっと上手に使えるスタイルなのです。
ですので、みなさんは、色々と試してみてカッコイイtext-shadowの使い方を模索してみて下さい。
IE対応については、また別の機会に・・・
ツイート
