SlideShare une entreprise Scribd logo

CSSレイアウトでなぜ失敗するか？

•
•
JustSystems Corporation
JustSystems Corporation

JustTechTalk#08 Webフロントエンドでやってみた2017の5本目の発表です。

Design
1  sur  34
Télécharger pour lire hors ligne

 JustSystems | UX DESIGN
1
A B
A B 9 7
A B
A B 4 2
A B
A B 


 
 

2
1 2 3
1 2 3
1
1 2 3
2
1 2 3
3
3
1 2 3
1 2 3
1 ▶
1 ▶
1 ▶ OK
1 

1 2 3
2 ▶ 

2 
 ▶ …
▶ OK … 2
▶ OK 
 2
1 2 3
3 ▶
▶ … 3 29px 17px 15px 11px 11px 13px

 ▶ OK 30px 16px 14px 12px 12px 14px 3

Recommandé

Spring Boot の Web アプリケーションを Docker に載せて AWS ECS で動かしている話
Spring Boot の Web アプリケーションを Docker に載せて AWS ECS で動かしている話Spring Boot の Web アプリケーションを Docker に載せて AWS ECS で動かしている話
Spring Boot の Web アプリケーションを Docker に載せて AWS ECS で動かしている話JustSystems Corporation
 
「技術内閣制度」〜2年間やってきて得られた事とこれから〜 #devsumi
「技術内閣制度」〜2年間やってきて得られた事とこれから〜 #devsumi「技術内閣制度」〜2年間やってきて得られた事とこれから〜 #devsumi
「技術内閣制度」〜2年間やってきて得られた事とこれから〜 #devsumiJustSystems Corporation
 
事業に貢献する商品開発と その成長の仕組み作り ~これからのエンジニアに必要とされるスキルとは~
事業に貢献する商品開発と その成長の仕組み作り ~これからのエンジニアに必要とされるスキルとは~事業に貢献する商品開発と その成長の仕組み作り ~これからのエンジニアに必要とされるスキルとは~
事業に貢献する商品開発と その成長の仕組み作り ~これからのエンジニアに必要とされるスキルとは~JustSystems Corporation
 
現役23名のPM：タイプ別マネジメントパターン
現役23名のPM：タイプ別マネジメントパターン現役23名のPM：タイプ別マネジメントパターン
現役23名のPM：タイプ別マネジメントパターンJustSystems Corporation
 
JavaでインメモリSQLエンジンを作ってみた
JavaでインメモリSQLエンジンを作ってみたJavaでインメモリSQLエンジンを作ってみた
JavaでインメモリSQLエンジンを作ってみたJustSystems Corporation
 
DDDとクリーンアーキテクチャでサーバーアプリケーションを作っている話
DDDとクリーンアーキテクチャでサーバーアプリケーションを作っている話DDDとクリーンアーキテクチャでサーバーアプリケーションを作っている話
DDDとクリーンアーキテクチャでサーバーアプリケーションを作っている話JustSystems Corporation
 
JustTechTalk#11_スマイルゼミ顧客満足度への貢献
JustTechTalk#11_スマイルゼミ顧客満足度への貢献JustTechTalk#11_スマイルゼミ顧客満足度への貢献
JustTechTalk#11_スマイルゼミ顧客満足度への貢献JustSystems Corporation
 
ピュアJavaだと思った？残念androidでした～いつからAndroidをJavaだと錯覚していた？～
ピュアJavaだと思った？残念androidでした～いつからAndroidをJavaだと錯覚していた？～ピュアJavaだと思った？残念androidでした～いつからAndroidをJavaだと錯覚していた？～
ピュアJavaだと思った？残念androidでした～いつからAndroidをJavaだと錯覚していた？～JustSystems Corporation
 

Recommandé

Spring Boot の Web アプリケーションを Docker に載せて AWS ECS で動かしている話
Spring Boot の Web アプリケーションを Docker に載せて AWS ECS で動かしている話Spring Boot の Web アプリケーションを Docker に載せて AWS ECS で動かしている話
Spring Boot の Web アプリケーションを Docker に載せて AWS ECS で動かしている話JustSystems Corporation
 
「技術内閣制度」〜2年間やってきて得られた事とこれから〜 #devsumi
「技術内閣制度」〜2年間やってきて得られた事とこれから〜 #devsumi「技術内閣制度」〜2年間やってきて得られた事とこれから〜 #devsumi
「技術内閣制度」〜2年間やってきて得られた事とこれから〜 #devsumiJustSystems Corporation
 
事業に貢献する商品開発と その成長の仕組み作り ~これからのエンジニアに必要とされるスキルとは~
事業に貢献する商品開発と その成長の仕組み作り ~これからのエンジニアに必要とされるスキルとは~事業に貢献する商品開発と その成長の仕組み作り ~これからのエンジニアに必要とされるスキルとは~
事業に貢献する商品開発と その成長の仕組み作り ~これからのエンジニアに必要とされるスキルとは~JustSystems Corporation
 
現役23名のPM：タイプ別マネジメントパターン
現役23名のPM：タイプ別マネジメントパターン現役23名のPM：タイプ別マネジメントパターン
現役23名のPM：タイプ別マネジメントパターンJustSystems Corporation
 
JavaでインメモリSQLエンジンを作ってみた
JavaでインメモリSQLエンジンを作ってみたJavaでインメモリSQLエンジンを作ってみた
JavaでインメモリSQLエンジンを作ってみたJustSystems Corporation
 
DDDとクリーンアーキテクチャでサーバーアプリケーションを作っている話
DDDとクリーンアーキテクチャでサーバーアプリケーションを作っている話DDDとクリーンアーキテクチャでサーバーアプリケーションを作っている話
DDDとクリーンアーキテクチャでサーバーアプリケーションを作っている話JustSystems Corporation
 
JustTechTalk#11_スマイルゼミ顧客満足度への貢献
JustTechTalk#11_スマイルゼミ顧客満足度への貢献JustTechTalk#11_スマイルゼミ顧客満足度への貢献
JustTechTalk#11_スマイルゼミ顧客満足度への貢献JustSystems Corporation
 
ピュアJavaだと思った？残念androidでした～いつからAndroidをJavaだと錯覚していた？～
ピュアJavaだと思った？残念androidでした～いつからAndroidをJavaだと錯覚していた？～ピュアJavaだと思った？残念androidでした～いつからAndroidをJavaだと錯覚していた？～
ピュアJavaだと思った？残念androidでした～いつからAndroidをJavaだと錯覚していた？～JustSystems Corporation
 
最新のJava言語仕様で見るモジュールシステム #jjug
最新のJava言語仕様で見るモジュールシステム #jjug最新のJava言語仕様で見るモジュールシステム #jjug
最新のJava言語仕様で見るモジュールシステム #jjugJustSystems Corporation
 
「書ける」から「できる」になれる！ ～Javaメモリ節約ノウハウ話～
「書ける」から「できる」になれる！ ～Javaメモリ節約ノウハウ話～「書ける」から「できる」になれる！ ～Javaメモリ節約ノウハウ話～
「書ける」から「できる」になれる！ ～Javaメモリ節約ノウハウ話～JustSystems Corporation
 
JustTechTalk#10 React開発における自動テスト実践
JustTechTalk#10 React開発における自動テスト実践JustTechTalk#10 React開発における自動テスト実践
JustTechTalk#10 React開発における自動テスト実践JustSystems Corporation
 
JustTechTalk#10windowsアプリでのテスト自動化事例
JustTechTalk#10windowsアプリでのテスト自動化事例JustTechTalk#10windowsアプリでのテスト自動化事例
JustTechTalk#10windowsアプリでのテスト自動化事例JustSystems Corporation
 
インパス！ あのこれダメッス！　～Javaコードレビューの指摘ポイント10選～
インパス！ あのこれダメッス！　～Javaコードレビューの指摘ポイント10選～インパス！ あのこれダメッス！　～Javaコードレビューの指摘ポイント10選～
インパス！ あのこれダメッス！　～Javaコードレビューの指摘ポイント10選～JustSystems Corporation
 
AWS運用における最適パターンの徹底活用
AWS運用における最適パターンの徹底活用AWS運用における最適パターンの徹底活用
AWS運用における最適パターンの徹底活用JustSystems Corporation
 
ジャストシステムのDevOps実例　今後の取り組み
ジャストシステムのDevOps実例　今後の取り組みジャストシステムのDevOps実例　今後の取り組み
ジャストシステムのDevOps実例　今後の取り組みJustSystems Corporation
 
Javaチョットデキルへの道〜JavaコアSDKに見る真似したいコード10選〜
Javaチョットデキルへの道〜JavaコアSDKに見る真似したいコード10選〜Javaチョットデキルへの道〜JavaコアSDKに見る真似したいコード10選〜
Javaチョットデキルへの道〜JavaコアSDKに見る真似したいコード10選〜JustSystems Corporation
 
Kotlin is charming; The reasons Java engineers should start Kotlin.
Kotlin is charming; The reasons Java engineers should start Kotlin.Kotlin is charming; The reasons Java engineers should start Kotlin.
Kotlin is charming; The reasons Java engineers should start Kotlin.JustSystems Corporation
 
Selenium WebDriver + python で E2Eテスト自動化
Selenium WebDriver + python で E2Eテスト自動化Selenium WebDriver + python で E2Eテスト自動化
Selenium WebDriver + python で E2Eテスト自動化JustSystems Corporation
 
TypeScriptの大規模開発への適用
TypeScriptの大規模開発への適用TypeScriptの大規模開発への適用
TypeScriptの大規模開発への適用JustSystems Corporation
 
UX実現に向けた社内の取り組みについて-訴求ファーストによる商品開発-
UX実現に向けた社内の取り組みについて-訴求ファーストによる商品開発-UX実現に向けた社内の取り組みについて-訴求ファーストによる商品開発-
UX実現に向けた社内の取り組みについて-訴求ファーストによる商品開発-JustSystems Corporation
 
「訴求ファースト」と「こだわり駆動開発」～教育、医療、もの書き市場で戦うプロダクトマネージャーの考え方～
「訴求ファースト」と「こだわり駆動開発」～教育、医療、もの書き市場で戦うプロダクトマネージャーの考え方～「訴求ファースト」と「こだわり駆動開発」～教育、医療、もの書き市場で戦うプロダクトマネージャーの考え方～
「訴求ファースト」と「こだわり駆動開発」～教育、医療、もの書き市場で戦うプロダクトマネージャーの考え方～JustSystems Corporation
 
メンバーのスキルアップ、どうしてる？ − Java 100本ノックで新加入メンバーを鍛えてみた −
メンバーのスキルアップ、どうしてる？ − Java 100本ノックで新加入メンバーを鍛えてみた −メンバーのスキルアップ、どうしてる？ − Java 100本ノックで新加入メンバーを鍛えてみた −
メンバーのスキルアップ、どうしてる？ − Java 100本ノックで新加入メンバーを鍛えてみた −JustSystems Corporation
 
ArrayListをじっくり読んでみた - JavaコアSDKを読む会を社内でやって気づいたこと -
ArrayListをじっくり読んでみた - JavaコアSDKを読む会を社内でやって気づいたこと -ArrayListをじっくり読んでみた - JavaコアSDKを読む会を社内でやって気づいたこと -
ArrayListをじっくり読んでみた - JavaコアSDKを読む会を社内でやって気づいたこと -JustSystems Corporation
 
ジャストシステムJava100本ノックのご紹介
ジャストシステムJava100本ノックのご紹介ジャストシステムJava100本ノックのご紹介
ジャストシステムJava100本ノックのご紹介JustSystems Corporation
 
ATOK Spark のご紹介とJavaによるプラグイン開発について
ATOK Spark のご紹介とJavaによるプラグイン開発についてATOK Spark のご紹介とJavaによるプラグイン開発について
ATOK Spark のご紹介とJavaによるプラグイン開発についてJustSystems Corporation
 
スマイルゼミの裏側（db編）
スマイルゼミの裏側（db編）スマイルゼミの裏側（db編）
スマイルゼミの裏側（db編）JustSystems Corporation
 
Groonga meetup20151129
Groonga meetup20151129Groonga meetup20151129
Groonga meetup20151129JustSystems Corporation
 
人工無脳バトル 1st STEP 回答と解説
人工無脳バトル 1st STEP 回答と解説人工無脳バトル 1st STEP 回答と解説
人工無脳バトル 1st STEP 回答と解説JustSystems Corporation
 

Contenu connexe

Plus de JustSystems Corporation

最新のJava言語仕様で見るモジュールシステム #jjug
最新のJava言語仕様で見るモジュールシステム #jjug最新のJava言語仕様で見るモジュールシステム #jjug
最新のJava言語仕様で見るモジュールシステム #jjugJustSystems Corporation
 
「書ける」から「できる」になれる！ ～Javaメモリ節約ノウハウ話～
「書ける」から「できる」になれる！ ～Javaメモリ節約ノウハウ話～「書ける」から「できる」になれる！ ～Javaメモリ節約ノウハウ話～
「書ける」から「できる」になれる！ ～Javaメモリ節約ノウハウ話～JustSystems Corporation
 
JustTechTalk#10 React開発における自動テスト実践
JustTechTalk#10 React開発における自動テスト実践JustTechTalk#10 React開発における自動テスト実践
JustTechTalk#10 React開発における自動テスト実践JustSystems Corporation
 
JustTechTalk#10windowsアプリでのテスト自動化事例
JustTechTalk#10windowsアプリでのテスト自動化事例JustTechTalk#10windowsアプリでのテスト自動化事例
JustTechTalk#10windowsアプリでのテスト自動化事例JustSystems Corporation
 
インパス！ あのこれダメッス！　～Javaコードレビューの指摘ポイント10選～
インパス！ あのこれダメッス！　～Javaコードレビューの指摘ポイント10選～インパス！ あのこれダメッス！　～Javaコードレビューの指摘ポイント10選～
インパス！ あのこれダメッス！　～Javaコードレビューの指摘ポイント10選～JustSystems Corporation
 
AWS運用における最適パターンの徹底活用
AWS運用における最適パターンの徹底活用AWS運用における最適パターンの徹底活用
AWS運用における最適パターンの徹底活用JustSystems Corporation
 
ジャストシステムのDevOps実例　今後の取り組み
ジャストシステムのDevOps実例　今後の取り組みジャストシステムのDevOps実例　今後の取り組み
ジャストシステムのDevOps実例　今後の取り組みJustSystems Corporation
 
Javaチョットデキルへの道〜JavaコアSDKに見る真似したいコード10選〜
Javaチョットデキルへの道〜JavaコアSDKに見る真似したいコード10選〜Javaチョットデキルへの道〜JavaコアSDKに見る真似したいコード10選〜
Javaチョットデキルへの道〜JavaコアSDKに見る真似したいコード10選〜JustSystems Corporation
 
Kotlin is charming; The reasons Java engineers should start Kotlin.
Kotlin is charming; The reasons Java engineers should start Kotlin.Kotlin is charming; The reasons Java engineers should start Kotlin.
Kotlin is charming; The reasons Java engineers should start Kotlin.JustSystems Corporation
 
Selenium WebDriver + python で E2Eテスト自動化
Selenium WebDriver + python で E2Eテスト自動化Selenium WebDriver + python で E2Eテスト自動化
Selenium WebDriver + python で E2Eテスト自動化JustSystems Corporation
 
TypeScriptの大規模開発への適用
TypeScriptの大規模開発への適用TypeScriptの大規模開発への適用
TypeScriptの大規模開発への適用JustSystems Corporation
 
UX実現に向けた社内の取り組みについて-訴求ファーストによる商品開発-
UX実現に向けた社内の取り組みについて-訴求ファーストによる商品開発-UX実現に向けた社内の取り組みについて-訴求ファーストによる商品開発-
UX実現に向けた社内の取り組みについて-訴求ファーストによる商品開発-JustSystems Corporation
 
「訴求ファースト」と「こだわり駆動開発」～教育、医療、もの書き市場で戦うプロダクトマネージャーの考え方～
「訴求ファースト」と「こだわり駆動開発」～教育、医療、もの書き市場で戦うプロダクトマネージャーの考え方～「訴求ファースト」と「こだわり駆動開発」～教育、医療、もの書き市場で戦うプロダクトマネージャーの考え方～
「訴求ファースト」と「こだわり駆動開発」～教育、医療、もの書き市場で戦うプロダクトマネージャーの考え方～JustSystems Corporation
 
メンバーのスキルアップ、どうしてる？ − Java 100本ノックで新加入メンバーを鍛えてみた −
メンバーのスキルアップ、どうしてる？ − Java 100本ノックで新加入メンバーを鍛えてみた −メンバーのスキルアップ、どうしてる？ − Java 100本ノックで新加入メンバーを鍛えてみた −
メンバーのスキルアップ、どうしてる？ − Java 100本ノックで新加入メンバーを鍛えてみた −JustSystems Corporation
 
ArrayListをじっくり読んでみた - JavaコアSDKを読む会を社内でやって気づいたこと -
ArrayListをじっくり読んでみた - JavaコアSDKを読む会を社内でやって気づいたこと -ArrayListをじっくり読んでみた - JavaコアSDKを読む会を社内でやって気づいたこと -
ArrayListをじっくり読んでみた - JavaコアSDKを読む会を社内でやって気づいたこと -JustSystems Corporation
 
ジャストシステムJava100本ノックのご紹介
ジャストシステムJava100本ノックのご紹介ジャストシステムJava100本ノックのご紹介
ジャストシステムJava100本ノックのご紹介JustSystems Corporation
 
ATOK Spark のご紹介とJavaによるプラグイン開発について
ATOK Spark のご紹介とJavaによるプラグイン開発についてATOK Spark のご紹介とJavaによるプラグイン開発について
ATOK Spark のご紹介とJavaによるプラグイン開発についてJustSystems Corporation
 
人工無脳バトル 1st STEP 回答と解説
人工無脳バトル 1st STEP 回答と解説人工無脳バトル 1st STEP 回答と解説
人工無脳バトル 1st STEP 回答と解説JustSystems Corporation
 

Plus de JustSystems Corporation (20)

最新のJava言語仕様で見るモジュールシステム #jjug
最新のJava言語仕様で見るモジュールシステム #jjug最新のJava言語仕様で見るモジュールシステム #jjug
最新のJava言語仕様で見るモジュールシステム #jjug
 
「書ける」から「できる」になれる！ ～Javaメモリ節約ノウハウ話～
「書ける」から「できる」になれる！ ～Javaメモリ節約ノウハウ話～「書ける」から「できる」になれる！ ～Javaメモリ節約ノウハウ話～
「書ける」から「できる」になれる！ ～Javaメモリ節約ノウハウ話～
 
JustTechTalk#10 React開発における自動テスト実践
JustTechTalk#10 React開発における自動テスト実践JustTechTalk#10 React開発における自動テスト実践
JustTechTalk#10 React開発における自動テスト実践
 
JustTechTalk#10windowsアプリでのテスト自動化事例
JustTechTalk#10windowsアプリでのテスト自動化事例JustTechTalk#10windowsアプリでのテスト自動化事例
JustTechTalk#10windowsアプリでのテスト自動化事例
 
インパス！ あのこれダメッス！　～Javaコードレビューの指摘ポイント10選～
インパス！ あのこれダメッス！　～Javaコードレビューの指摘ポイント10選～インパス！ あのこれダメッス！　～Javaコードレビューの指摘ポイント10選～
インパス！ あのこれダメッス！　～Javaコードレビューの指摘ポイント10選～
 
AWS運用における最適パターンの徹底活用
AWS運用における最適パターンの徹底活用AWS運用における最適パターンの徹底活用
AWS運用における最適パターンの徹底活用
 
ジャストシステムのDevOps実例　今後の取り組み
ジャストシステムのDevOps実例　今後の取り組みジャストシステムのDevOps実例　今後の取り組み
ジャストシステムのDevOps実例　今後の取り組み
 
Javaチョットデキルへの道〜JavaコアSDKに見る真似したいコード10選〜
Javaチョットデキルへの道〜JavaコアSDKに見る真似したいコード10選〜Javaチョットデキルへの道〜JavaコアSDKに見る真似したいコード10選〜
Javaチョットデキルへの道〜JavaコアSDKに見る真似したいコード10選〜
 
Kotlin is charming; The reasons Java engineers should start Kotlin.
Kotlin is charming; The reasons Java engineers should start Kotlin.Kotlin is charming; The reasons Java engineers should start Kotlin.
Kotlin is charming; The reasons Java engineers should start Kotlin.
 
Selenium WebDriver + python で E2Eテスト自動化
Selenium WebDriver + python で E2Eテスト自動化Selenium WebDriver + python で E2Eテスト自動化
Selenium WebDriver + python で E2Eテスト自動化
 
TypeScriptの大規模開発への適用
TypeScriptの大規模開発への適用TypeScriptの大規模開発への適用
TypeScriptの大規模開発への適用
 
UX実現に向けた社内の取り組みについて-訴求ファーストによる商品開発-
UX実現に向けた社内の取り組みについて-訴求ファーストによる商品開発-UX実現に向けた社内の取り組みについて-訴求ファーストによる商品開発-
UX実現に向けた社内の取り組みについて-訴求ファーストによる商品開発-
 
「訴求ファースト」と「こだわり駆動開発」～教育、医療、もの書き市場で戦うプロダクトマネージャーの考え方～
「訴求ファースト」と「こだわり駆動開発」～教育、医療、もの書き市場で戦うプロダクトマネージャーの考え方～「訴求ファースト」と「こだわり駆動開発」～教育、医療、もの書き市場で戦うプロダクトマネージャーの考え方～
「訴求ファースト」と「こだわり駆動開発」～教育、医療、もの書き市場で戦うプロダクトマネージャーの考え方～
 
メンバーのスキルアップ、どうしてる？ − Java 100本ノックで新加入メンバーを鍛えてみた −
メンバーのスキルアップ、どうしてる？ − Java 100本ノックで新加入メンバーを鍛えてみた −メンバーのスキルアップ、どうしてる？ − Java 100本ノックで新加入メンバーを鍛えてみた −
メンバーのスキルアップ、どうしてる？ − Java 100本ノックで新加入メンバーを鍛えてみた −
 
ArrayListをじっくり読んでみた - JavaコアSDKを読む会を社内でやって気づいたこと -
ArrayListをじっくり読んでみた - JavaコアSDKを読む会を社内でやって気づいたこと -ArrayListをじっくり読んでみた - JavaコアSDKを読む会を社内でやって気づいたこと -
ArrayListをじっくり読んでみた - JavaコアSDKを読む会を社内でやって気づいたこと -
 
ジャストシステムJava100本ノックのご紹介
ジャストシステムJava100本ノックのご紹介ジャストシステムJava100本ノックのご紹介
ジャストシステムJava100本ノックのご紹介
 
ATOK Spark のご紹介とJavaによるプラグイン開発について
ATOK Spark のご紹介とJavaによるプラグイン開発についてATOK Spark のご紹介とJavaによるプラグイン開発について
ATOK Spark のご紹介とJavaによるプラグイン開発について
 
スマイルゼミの裏側（db編）
スマイルゼミの裏側（db編）スマイルゼミの裏側（db編）
スマイルゼミの裏側（db編）
 
Groonga meetup20151129
Groonga meetup20151129Groonga meetup20151129
Groonga meetup20151129
 
人工無脳バトル 1st STEP 回答と解説
人工無脳バトル 1st STEP 回答と解説人工無脳バトル 1st STEP 回答と解説
人工無脳バトル 1st STEP 回答と解説
 

CSSレイアウトでなぜ失敗するか？