Download as PDF, PPTX
Uploaded by井上 誠
大規模サイトにおける本当は怖いCSSの話
WDF.Vol.8で話したCSSについてのスライドです。 HTMLの見た目を制御するCSS。 CSS3やsassなど技術的な話題を目にすることは多いですが その運用方法について多くは語られていません。 大規模サイトを大人数で制作する状況でCSSはどうあるべきか。 DMM.comという巨大サイトの運用を通じて得た経験を話したいと思います。
![Hexagonal architecture with Spring Boot [EPAM Java online conference]](https://cdn.slidesharecdn.com/ss_thumbnails/hexagonalarchitecturewithspringboot-180925151506-thumbnail.jpg?width=640&height=640&fit=bounds)
大規模サイトにおける本当は怖いCSSの話
- 1. 本当は怖いCSSの話 大規模サイトにおける Makoto Inoue Talkof CSS fearful in fact
- 2. 井上 誠 三重県伊勢市出身 金沢美大工芸科卒業 DMM.com Labo勤務 入社8年目 デザイン部チーフ twitter:@in0in0 facebook: http://www.facebook.com/in0in0 Makoto 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> CSS HTML
- 19.
- 20.
- 21. モジュールタイプ 可搬性のあるパーツ単位でHTMLとCSSを作成する ul.worklist li {…} ul.favoritelistli {…} <ul class="worklist"> <li>... </ul> <ul class="favoritelist"> <li>... </ul> CSS HTML
- 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">... CSS HTML
- 25.
- 26.
- 27.
- 28. ご清聴ありがとうございました Makoto Inoue Talkof CSS fearful in fact