むずかしくないCSS設計 #scripty06

むずかしくないCSS設計ヤフー株式会社メディア・マーケティングソリューションズグループマーケティングソリューションズカンパニープロモーション広告開発本部デザイン部UI/UX2 中西生乃

現場のプロが本気で教える HTML/ CSS デザイン講義突然ですが、こんな本が発売されました！現場のプロが本気で教える HTML/ CSS デザイン講義ヤフー株式会社森本恭平/平谷奈緒子/中西生乃著マークアップの基本から設計、Flexレイアウトまで 5年経っても通用する、最強・最新テクニックを教えます。 HTML5/CSS3対応 SB Creative Copyright (C) 2016 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止

4.

5.

6.

7.

8.

9.

10.

現場のプロが本気で教える HTML/ CSS デザイン講義本を書く際に注意したこと・読者のレベルはさまざま・最新技術よりは、少し古いくらいがちょうど良い・尖った内容より、少し一般化した内容くらいがちょうど良い多くの人にとって長く使える”思考プロセス”を伝える Copyright (C) 2016 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止

11.

12.

13.

14.

15.

16.

17.

18.

19.

20.

21.

現場のプロが本気で教える HTML/ CSS デザイン講義 scss/components/ components common parts _entryPanel.scss _form.scss _iconPanel.scss _imageSlide.scss _newsList.scss _overlayPanel.scss 汎用的なスモールパーツはここに入れるページを構成するコンポーネントを分けて入れる Copyright (C) 2016 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止

22.

23.

24.

25.

26.

現場のプロが本気で教える HTML/ CSS デザイン講義 Elementの階層を固定 .EntryPanel &__main 冬のコーヒーギフト &__head 大切なあの方にありがとうを届けたい。心も体も温まる素敵なギフト。プレゼントキャンペーン実施中！ READ MORE .EntryPanel__main__head としたくなる Copyright (C) 2016 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止

27.

28.

現場のプロが本気で教える HTML/ CSS デザイン講義 Elementの階層を固定 .EntryPanel &__main 冬のコーヒーギフト &__head 大切なあの方にありがとうを届けたい。心も体も温まる素敵なギフト。プレゼントキャンペーン実施中！ READ MORE .EntryPanel__mainと.EntryPanel__headに分ける Copyright (C) 2016 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止

29.

30.

現場のプロが本気で教える HTML/ CSS デザイン講義汎用的なElementsの名称例パターン名パターンの概要記述例 head コンポーネント内にタイトルなどがあった場合、その要素 topicBox__head body コンポーネントの中心部分 topicBox__body foot コンポーネントの付属となるような部分 topicBox__foot itemsのような複数形の単語リストのような連続する要素を含む親要素 news__items itemのような単数形の単語前述の親要素の対する子要素 news__item Copyright (C) 2016 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止

31.

32.

33.

現場のプロが本気で教える HTML/ CSS デザイン講義 EntryPanelの例冬のコーヒーギフト大切なあの方にありがとうを届けたい。心も体も温まる素敵なギフト。プレゼントキャンペーン実施中！ READ MORE あの人気店コラボメニュー今話題の人気店、Macaro'n Thingsのパンケーキを使ったコラボ商品のセットメニューを販売中。 READ MORE Copyright (C) 2016 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止

34.

現場のプロが本気で教える HTML/ CSS デザイン講義全体をEntryPanelという Blockとして定義 .EntryPanel 冬のコーヒーギフト大切なあの方にありがとうを届けたい。心も体も温まる素敵なギフト。プレゼントキャンペーン実施中！ READ MORE Copyright (C) 2016 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止

35.

現場のプロが本気で教える HTML/ CSS デザイン講義 mainとsubにElementを分ける .EntryPanel &__sub &__main 冬のコーヒーギフト大切なあの方にありがとうを届けたい。心も体も温まる素敵なギフト。プレゼントキャンペーン実施中！ READ MORE Copyright (C) 2016 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止

36.

現場のプロが本気で教える HTML/ CSS デザイン講義ここまでのHTMLはこんな感じ <div class="EntryPanel"> <div class="EntryPanel__sub"> <img src="XXX.jpg" alt=""> </div> <div class="EntryPanel__main"> <h3>タイトル.title.たいとる</h3> <div>説明分。description.せつめいぶん</div> <div><a href="">ボタン。 </a></div> </div> </div> Copyright (C) 2016 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止

37.

現場のプロが本気で教える HTML/ CSS デザイン講義 mainの中身を見ていきます .EntryPanel &__sub &__main 冬のコーヒーギフト大切なあの方にありがとうを届けたい。心も体も温まる素敵なギフト。プレゼントキャンペーン実施中！ READ MORE Copyright (C) 2016 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止

38.

現場のプロが本気で教える HTML/ CSS デザイン講義汎用的なElement名を使って、マークアップ .EntryPanel &__head 冬のコーヒーギフト大切なあの方にありがとうを届けたい。心も体も温まる素敵なギフト。プレゼントキャンペーン実施中！ &__body READ MORE &__foot Copyright (C) 2016 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止

39.

現場のプロが本気で教える HTML/ CSS デザイン講義ここまではHTMLこんな感じ <div class="EntryPanel"> <div class="EntryPanel__sub"> <img src="XXX.jpg" alt=""> </div> <div class="EntryPanel__main"> <h3 class="EntryPanel__head">タイトル.title.たいとる</h3> <div class="EntryPanel__body">説明分。description.せつめいぶん</div> <div class="EntryPanel__foot"><a href="">ボタン。 </a></div> </div> </div> Copyright (C) 2016 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止

40.

現場のプロが本気で教える HTML/ CSS デザイン講義 Buttonのような最小構成のものは partsとする冬のコーヒーギフト大切なあの方にありがとうを届けたい。心も体も温まる素敵なギフト。プレゼントキャンペーン実施中！ .button READ MORE Copyright (C) 2016 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止

41.

現場のプロが本気で教える HTML/ CSS デザイン講義 EntryPanel全体 <div class="EntryPanel l-halfColumn"> <div class="EntryPanel__sub"> <img class="EntryPanel__thumb" src="XXX.jpg" alt=""> </div> <div class="EntryPanel__main"> <h3 class="EntryPanel__head">タイトル.title.たいとる</h3> <div class="EntryPanel__body">説明分。description.せつめいぶん</div> <div class="EntryPanel__foot"><a href="" class="button">ボタン。 </a></div> </div> </div> Copyright (C) 2016 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止

42.

現場のプロが本気で教える HTML/ CSS デザイン講義ちょっとしたTips 冬のコーヒーギフト大切なあの方にありがとうを届けたい。心も体も温まる素敵なギフト。プレゼントキャンペーン実施中！ READ MORE レスポンシブで横幅変わってもレイアウトは保ちたいどうしたら良いか Copyright (C) 2016 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止

43.

現場のプロが本気で教える HTML/ CSS デザイン講義 Paddingを%で記述する padding、marginを%で指定すると、親要素の”横幅”が算出基準になる高さを%のpaddingで確保し、幅も%指定すると縦横比を一定に保てる 100% 冬のコーヒーギフト大切なあの方にありがとうを届けたい。心も体も温まる素敵なギフト。プレゼントキャンペーン実施中！ 45% 45% READ MORE Copyright (C) 2016 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止

44.

[beta]

現場のプロが本気で教える
HTML/
CSS
デザイン講義
Paddingを%で記述する
.EntryPanel {
&__thumb {
position: relative; //画像配置の基準とする
flex: 1 1 45%;
padding-top: 40.5%; //「1:0.9」の比率になるように設定
overflow: hidden; //はみ出しをクリップ
margin-right: $space-unit;
}
&__img {
position: absolute; //絶対配置にする
top: 50%; //フレームに対して「縦50%」の位置に移動
left: 50%; //フレームに対して「横50%」の位置に移動
transform: translate(-50%, -50%); //自分自身の「縦横50%」分位置を戻す
width: auto; //画像サイズは自動
height: auto;
max-width: 150%; //画像の最大サイズは「フレームの150%」
max-height: 150%;
min-width: 100%; //フレームサイズよりも小さい画像はフレームサイズに合わせて拡大
min-height: 100%;
}
//main、body、footなどはそのまま
}
Copyright (C) 2016 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止

45.

[beta]

現場のプロが本気で教える
HTML/
CSS
デザイン講義
Paddingを%で記述する
.EntryPanel {
&__thumb {
position: relative; //画像配置の基準とする
flex: 1 1 45%;
padding-top: 40.5%; //「1:0.9」の比率になるように設定
overflow: hidden; //はみ出しをクリップ
margin-right: $space-unit;
}
&__img {
ちょっとしたテクニックも
盛り込んでます！
position: absolute; //絶対配置にする
top: 50%; //フレームに対して「縦50%」の位置に移動
left: 50%; //フレームに対して「横50%」の位置に移動
transform: translate(-50%, -50%); //自分自身の「縦横50%」分位置を戻す
width: auto; //画像サイズは自動
height: auto;
max-width: 150%; //画像の最大サイズは「フレームの150%」
max-height: 150%;
min-width: 100%; //フレームサイズよりも小さい画像はフレームサイズに合わせて拡大
min-height: 100%;
}
//main、body、footなどはそのまま
}
Copyright (C) 2016 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止

46.

47.

現場のプロが本気で教える HTML/ CSS デザイン講義最後に現場のプロが本気で教える HTML/ CSS デザイン講義ヤフー株式会社森本恭平/平谷奈緒子/中西生乃著マークアップの基本から設計、Flexレイアウトまで 5年経っても通用する、最強・最新テクニックを教えます。 HTML5/CSS3対応 SB Creative Copyright (C) 2016 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止

48.

49.

50.

51.

52.

53.

現場のプロが本気で教える HTML/ CSS デザイン講義是非、買ってください！現場のプロが本気で教える HTML/ CSS デザイン講義ヤフー株式会社森本恭平/平谷奈緒子/中西生乃著マークアップの基本から設計、Flexレイアウトまで 5年経っても通用する、最強・最新テクニックを教えます。 HTML5/CSS3対応 SB Creative この本でステップアップして、まわりと差をつけよう！ https://www.amazon.co.jp/dp/4797386533 Copyright (C) 2016 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止

むずかしくないCSS設計 #scripty06

Yahoo!デベロッパーネットワーク

関連スライド

深層学習による自然言語処理入門: word2vecからBERT, GPT-3まで

ゼロから始める転移学習

ヤフーにおける WebAuthn と Passkey の UX の紹介と考察 #idcon #fidcon

OpenID Connectとネイティブアプリを取り巻く仕様と動向 Yahoo! JAPANの取り組み #openid #openid_tokyo

運用業務とスクラムは本当に組み合わせにくいのか︖運用業務が大半を占めるプロダクト開発での試行錯誤

ヤフーのオンプレ機械学習基盤AIPFについて #ml_kubernetes

各ページのテキスト