Furyu

[フリュー公式] Tech Blog

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

2013年11月21日

社内行事でのHTML講習会資料の共有

こんにちは。竹島です。
先日、フリュー2014年度新卒社員さんの「就業体験」というイベントがありました。 来年入社する学生の方々が、フリューの仕事を体験してみる、といった内容なのですが、
その中で行われた、WEBページ製作が初めての方向けの、HTML講習会を担当させていただきました。
その際作成した資料を共有したいと思います。    

Html講習会資料 from 竹島 泉

  

かなり基礎的な内容になっていますので、これからWEB製作をはじめてみたい学生さんなど、ぜひ参考にしていただければと思います。


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を次回は(いずれ)紹介したいと思います。