Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

細かすぎて伝わらないイザナキ仕様

103 views

Published on

2017/12/16 MT東京 LT用

Published in: Technology
  • Be the first to comment

  • Be the first to like this

細かすぎて伝わらないイザナキ仕様

  1. 1. 細かすぎて伝わらない
 イザナキ仕様
  2. 2. ENTRY NO.1 他の箇所に影響を与えないCSS設計
  3. 3. \すべての記事セットの生みの親ァッ!!/
 .article_body 記事セット全体の親要素をつくる
  4. 4. .article_body {
 &__section {…} //セクション &__row {…} //記事セット
 &__col {…} //カラム } BEMを採用
  5. 5. ENTRY NO.2 ver.1のCSSの見直し
 外注のコーダーの学習コストダウン
  6. 6. //article_body全体 @import 'article_body_function.scss';
 @import 'article_body_style.scss';
 //セクション
 @import 'article_section.scss'; //row,column @import 'article_body_row.scss'; //記事セット
 @import ‘set_heading.scss’; @import ‘set_wysiwyg.scss'; 階層・記事セットごとに ファイルを分割
  7. 7. zw さらに、触っていいところ
 触って良くないところで分割 //article_body全体 @import '/core/article_body_function.scss';
 @import '/customize/article_body_function.scss';
 @import '/customize/article_body_style.scss';
 //セクション
 @import ‘/core/article_section.scss'; @import '/customize/article_section.scss'; //row,column @import '/core/article_body_row.scss';
 @import '/customize/article_body_row.scss';
 //記事セット
 @import ‘set_heading.scss’;
  8. 8. 余白は記事セット構成の階層に合わせて、
 基本4段階に設定 ENTRY NO.3
  9. 9. セクション 80px
  10. 10. 行=記事セット 40px
  11. 11. カラム 20px
  12. 12. 要素 15px ※行間のマージンでもあり、
 使用頻度が最も高いもの
  13. 13. li + li {margin-top: 10px}
 .set_images figcaption {margin-top: 10px} その他
  14. 14. ENTRY NO.3 「“見出し”の直後にくる記事セットだけ、余白を狭くする」から
 「”見出し”の直前の記事セットだけ、余白を広くする」に
  15. 15. “見出し”の直後にくる
 記事セットだけ、余白を狭くする
  16. 16. 次の記事セットが
 同じ章節だとしても はなれすぎて連続性がうすい
  17. 17. ”見出し”の直前の
 記事セットだけ、余白を広くする ※ただし直前が”見出し”の場合をのぞく
  18. 18. コンテンツの流れがとぎれず
 読みやすくなった ※ 記事セット標準の余白を少しせまくとるのも ポイント
  19. 19. .article_body__row:not(.set_heading) + .set_heading{
 margin-top: 80px;
 } :notが便利
  20. 20. ENTRY NO.4 WYSWIYGのメニューをカスタマイズする
  21. 21. 記事セットで大体の表現はがっちり作り込んでいる
 WYSIWYGはテキスト入力に集中
  22. 22. メニューは
 最小限の書式選択に減らす
  23. 23. ENTRY NO.5 編集画面のスクロール量削減
  24. 24. カスタムフィールドによる編集画面が
 縦に長くなってしまうのを防ぐ
  25. 25. タブを活用する
  26. 26. ラジオボタンは横並びにする
  27. 27. カスタムフィールド製造開発パートナー募集中! WordPress/Movable Type/WebRelease
 concrete5/CraftCMS

×