Download as PDF, PPTX
Uploaded by井上 誠
PDF, PPTX117,037 views
大規模サイトにおける本当は怖いCSSの話
WDF.Vol.8で話したCSSについてのスライドです。HTMLの見た目を制御するCSS。CSS3やsassなど技術的な話題を目にすることは多いですがその運用方法について多くは語られていません。大規模サイトを大人数で制作する状況でCSSはどうあるべきか。DMM.comという巨大サイトの運用を通じて得た経験を話したいと思います。
大規模サイトにおける本当は怖いCSSの話
- 1.本当は怖いCSSの話大規模サイトにおけるMakoto Inoue Talkof CSS fearful in fact
- 2.井上 誠三重県伊勢市出身金沢美大工芸科卒業DMM.com Labo勤務入社8年目デザイン部チーフtwitter:@in0in0facebook: http://www.facebook.com/in0in0Makoto Inoue Talk of CSS fearful in fact
- 3.CSSの何が怖いの？A thing withwhat dreadful of CSS?
- 4.
- 5.
- 6.
- 7.確認する<p class=”btn check”>チェックボックス✓<inputtype=”checkbox”class=”check”>段落ですp span{color:blue;margin:20px}<p class=”btn”><span>ボタン</span></p>ボタン定義済みのid,class名をつけた要素の再定義で崩れた
- 8.
- 9.共通ボタン 例外ボタン共通ボタンデバイスの向きを変えられるユーザはいつでも、さまざまな理由でiOSデバイスの向きを変えることができます。たとえば、実行する操作が縦長の向きのほうが自然に感じられる場合もあれば、横長のほうがより多くの情報を表示できると感じられる場合もあります。デバイスの向きを変える理由が何であれ、アプリケーションの主要な機能が見やすいままであることをユーザは期待します。ユーザはホーム(Home)画面からアプリケーションを起動することが多く、そのためすべてのアプリケーションが同じ向きで開始することを期待する傾向があります。iPhoneとiPadではホーム(Home)画面の表示の仕方が異なるため、このような期待がアプリケーションに与える影響も異なります。●直接操作ユーザは、画面上のオブジェクトを、別のコントロールを通じてではなく直接操作すると、より深く作業に関わることになり、アクションの結果をより簡単に理解できます。iOSユーザは、Multi-Touchインターフェイスのおかげで、直接操作の感覚をより高度に感じることができます。ジェスチャを使用することで、ユーザはマウスなどの手段を用いることなく画面に表示されるオブジェクトにタッチすることができるため、それらオブジェクトに対してより強い親しみの感覚や制御している感覚を持ちます。たとえば、ズームのコントロールをタップする代わりに、ピンチのジェスチャを通じてコンテンツの領域を直接拡大、または縮小することができます。ゲームでは、プレーヤーが画面上のオブジェクトを直接動かしたり、対話をしたりします。たとえば、ゲームによっては、回して開くダイヤル錠を表示するものなどがあります。iOSアプリケーションでは、以下の場合にユーザが直接操作を体験できます。● 画面上のオブジェクトに影響を与えるため、デバイスを回転させたり、動かしたりするとき●ジェスチャを使用して画面上のオブジェクトを操作するとき● 自身のアクションが目に見える結果を即座にもたらす様子を見ることができるときフィードバックディスプレイはサイズに関係なくもっとも重要iOSデバイスのディスプレイは、ユーザ体験の中心的位置を占めています。ユーザはきれいな文字、グラフィック、メディアを見るだけでなく、（画面を見ることができなくても）Multi-Touch画面と指で物理的にやり取りして操作を進めます。iOSデバイスにはさまざまな寸法や解像度のディスプレイがありますが、使い勝手に関する限り、考え方はいずれも同じです。● タップ可能なUI要素の快適な最小サイズは44×44ポイントです。● ユーザは一般に、アプリケーションアートワークの質を敏感に意識します。● 画面表示が良好であれば、デバイスの違いを意識せず、本来の作業に集中できます。注意: ピクセルとは、画像編集アプリケーションにおいて、デバイスの画面のサイズや作成デバイスの向きを変えられるユーザはいつでも、さまざまな理由でiOSデバイスの向きを変えることができます。たとえば、実行する操作が縦長の向きのほうが自然に感じられる場合もあれば、横長のほうがより多くの情報を表示できると感じられる場合もあります。デバイスの向きを変える理由が何であれ、アプリケーションの主要な機能が見やすいままであることをユーザは期待します。ユーザが対話するのは一度に1つのアプリケーションフォアグラウンドに表示できるのは一度に1つのアプリケーシションから別のアプリケーションに切り替えると、前のアプし、そのユーザインターフェイスも表示されなくなります。こユーザが再起動または停止するまで、アプリケーションをバます。ほとんどのアプリケーションは、バックグラウンドに移行す状態のアプリケーションはマルチタスクUIに表示されるので、易に切り替えることができます。マルチタスクUIは画面の一番ションのUIまたはホーム(Home)画面の下に表示されます（次リケーションの場合）。共通化しすぎて最適化できないレギュレーションが足かせに
- 10.
- 11.これなら怖くない！大規模サイトCSS設計の勘所The vital pointof a large-scale site CSS design
- 12.
- 13.全体共有のセレクタは明確に.worklist{...}場所をなるべく限定する#list .worklist p#listp.d-worklist{...}例：接頭辞で明確にして衝突を回避する
- 14.
- 15.
- 16.
- 17.
- 18.ストラクチャタイプHTML構造を重視、構造に沿ったCSS指定をしていく#page-top #list {…}#page-top#list .worklist li {…}<body id="page-top"> <div id="list"> <ul class=”worklist”><li>...</li></ul>CSSHTML
- 19.
- 20.
- 21.モジュールタイプ可搬性のあるパーツ単位でHTMLとCSSを作成するul.worklist li {…}ul.favoritelistli {…}<ul class="worklist"> <li>...</ul><ul class="favoritelist"> <li>...</ul>CSSHTML
- 22.
- 23.
- 24.オブジェクトタイプclass指定の組み合わせでパーツの見た目を定義する.headline{font-size:18px}.caution{color:red; font-weight:bold}.center{text-align:center}<p class="headlinecaution center">...<div class="caution center">...CSSHTML
- 25.
- 26.
- 27.
- 28.ご清聴ありがとうございましたMakoto Inoue Talkof CSS fearful in fact