Furyu
[フリュー公式]

Tech Blog

フリュー株式会社の技術ブログです

2013年02月20日

オブジェクト指向CSSのススメ

便利なオブジェクト指向CSSの紹介をします。

オブジェクト指向CSS(OOCSSとは?)

オブジェクト指向のCSS、、、つまり、CSS側でスタイルを細かく分けて、HTML上で組み合わせてデザインしていく最近見直されてきたCSSの書き方です。
主にCSSテンプレート制作に利用出来ます。
まずは例を見てみましょう。

例) 文字を小さく、かつ右寄せにしたい

こんな風にclassを組み合わせるだけで、文字組等出来る様になります。

例) ul.table_list.col2>li*8>aとか使ってみた場合

flexible boxを使ったマルチカラムや、テーブル状のリストを作るスタイルを予め用意すれば、かなりの物を作れます。

img1

いくつかのスタイルは省略されてますが、基本的にこんな感じです。
記述するのは基本的なレイアウトのみで、個別のデザインはid/classを追記し、個別のスタイルを当てていくと見やすくなります。

メリット

HTMLだけでUIの作り方を制作する人に指示できる事です。
HTMLの基本しか知らない人でも、組み合わせ次第でいろんなUIが実現出来ます。

img2

こんな感じで簡単な取扱説明書を作れば、使い方を簡単にメンバーへ伝える事が出来ます。
見る側も、CSSと見比べっ子しながら作らないで良いので楽ですね!

デメリット

とまぁメリットだらけに見えるOOCSSには大きなデメリットが2個もあります。

  1. メンテナンス性が悪くなります。
    例えば、通常、liを追加するだけで済む所が、一杯classを追記しなくてはいけなくなったりします。
    特にCSSに精通している人にとっては邪魔になる事の方が多いです。
  2. セマンティックで無いクラスの濫用はそもそもダメ。
    要するに、クラス名に内容と直接関係ない名前(例. col2)は付けてはいけないという話です。
    国内では対応状況は悪いですが、そのうち標準になるでしょう。

①はよく更新する部分は楽に更新出来る様に別途CSSを組めば大丈夫です。
ただ、マニュアルはその分多くなります。
②はidを付けて管理したり、別途セマンティックなクラスを付ける事でそれらしくする事は出来ます。
ただ完璧では無いです。

まとめ

OOCSSは、

  1. ○ CSSがよくわからない人でもHTMLの基礎さえ知っていれば複雑なレイアウトを組める
  2. ○ テンプレートの解説が容易
  3. ☓ メンテナンスが複雑
  4. ☓ セマンティックでは無い

という事になります。
HTML+CSS専門家と実際に運用する人のスキルレベルに差がある場合は有用かと思います。

続きます

まだここから先があります。
OOCSSの弱点を潰しつつ、オブジェクト指向で簡単にサイトがレイアウト出来る…
その名もOOSCSSを次回は(いずれ)紹介したいと思います。


2012年10月1日

いしはら

iOS6のborder-imageの表示について

ソフトウェア開発部の、いしはらです。
iPhoneお持ちの方はiOS6にアップデートされたでしょうか?
私は早速おこないました!

iOS6のSafariで見ると、作成したサイトの一部が今までと違う表示になったので、調べていると…
CSSのプロパティ「border-image」の表示が改善されていることが分かりました!


border-imageに使う画像を↑の画像にして表示すると…

iOS5・iOS6でそれぞれこのように表示されます。

iOS5では画像一枚が背景のように表示されていますが、iOS6ではちゃんと「境界線」として画像が表示されています。
iOS6でCSS3の対応が改善されていることがわかりますね。

他にも改善された点は色々とあると思うので、発見でき次第随時こちらで情報発信をしていきます!


2012年09月12日

いしはら

デジタルハリウッド大阪校で講演をおこないます

ソフトウェア開発部の、いしはらです。
9月23日(日)にデジタルハリウッド大阪校が開催する
「デジタルストリーム 2012 OSAKA」にて講演をおこなうことになりました!

デジタルストリームとは?

デジタルストリーム 2012 OSAKA

「フォトグラフィック講座」「デジタルメディア概論」「Webクリエイター女子対談」など、デザイン&デジタルを1日で丸ごと体験できるイベントです


私は「Webクリエイター女子対談」で、Web業界の女性の働き方についてお話します。
弊社についてもお話する予定なので、「Web業界で働きたい!」
「フリューでどんな仕事をするのか知りたい!」
という方は是非ご参加ください。参加は無料です。
詳細はこちら


2012年07月18日

いしはら

スマートフォンサイト用のCSS3チートシートを作成してみた

はじめまして。 ソフトウェア開発部の、いしはらです。 HTMLやJavaScript、CSSといったクライアントサイドの技術を中心に開発をおこなっています。

開発でCSS3をよく使っているのですが 「あれ、ここってどうやって書くんだったっけ…」とプロパティをよく忘れちゃいます。 忘れてしまう度に検索したり本を開いたり…というのは手間なので… スマートフォンサイトで使うCSS3のチートシートを作成しました!

是非ご活用ください。

enter image description here

CSS3 Cheat Sheet For Smart Phone Site