Yoshiaki ITO oti

テキスト周りのスタイリングに使えるCSSプロパティやスニペット | NxWorldがいい感じだったのでざっくりCanIuseでしらべてみた。

※ 「基本問題なし」と書いているのはIE8以降/Android4.1/iOS8以降なら大体問題無いでしょうという意味です。

1. アンチエイリアスを設定する

http://caniuse.com/#search=font-smoothing

MacOSのFirefox/Chromeのみ

プロパティ名	Chrome	Safari	Firefox	Edge	IE
writing-mode	△*1	△*1	○	○	△*2
text-orientation	△*3	-	○*4	-	-
text-combine-upright	△*5	△*5	-	△*6	△*6

*1 接頭辞が必要
*2 接頭辞が必要、旧プロパティ値で実装
*3 接頭辞が必要、sidewaysをサポートしない
*4 接頭辞が必要、sidewaysはFirefox v44からサポート予定

エンジニアからデザイナーに向けて、デザインカンプを作るときにしておいて欲しいこと。

デザインカンプをコーディングするときに困りがちなことや、こうしてもらえると助かることなどをまとめています。デザイナーが他のデザイナーのデザインカンプを引き継ぐこともあるので、誰にとっても使いやすいデザインカンプを作ることは大切なことだと思います。

このドキュメントは指示ではなく、エンジニア目線の提案です。必ずしも正しいとは考えていませんし、このドキュメントをもとに意見を出し合えたらと思っています。

基本的にデザインカンプに残して欲しいとしていますが、共有されているのであればデザインカンプ以外でも構いません。デザイナーの頭の中にだけある状態はさけたいと考えているので、ストックしておく場所としてデザインカンプを選んでいます。

ツーツはPhotoshopを想定しています。これは単純にPhotoshopで作られることが多いからです。違うツールを使っている場合は、読み替えるか、読み飛ばしてください。

全体編

細かすぎて伝わりづらい、Webデザインの質を上げるためのささやかな工夫

デザインレビューとは、減点方式である。レビュアーがクライアントであれディレクターであれ代理店であれ、往々にして良いところよりも悪いところが目につき、一度ついたマイナス査定を覆すのはプラス査定をとるよりも難しかったりする。（デザインそのものの完成度とは別に）
ちょっとした手抜きやミスでつまらない指摘を受けないように、自戒を込めて。

未完成のカンプを見せない

デザインカンプは原則として全て完成した状態で見せる。ワイヤーフレームがなかったり指示が不明瞭なセクションでも、「多分こんな感じだろう」でいいのでとりあえずきちんと作る。例えそれで正解でなくても、それを元に修正の指示をもらえるので効率がいい。何より、一度不完全なものを見せてしまうと、第一印象の悪さが後々まで尾をひいてしまいやすい。

「途中でもいいので見せて」と言ってくるディレクターやクライアントがいたらできるだけ拒否する。難しければ、メールに添付し忘れたフリをする、わざとぶっ壊したZIPファイルを送るなどして時間を稼げ。



	# ==== Emojis ====
	# 🐛 :bug: バグ修正
	# 👍 :+1: 機能改善
	# ✨ :sparkles: 部分的な機能追加
	# 🎉 :tada: 盛大に祝うべき大きな機能追加
	# ♻️ :recycle: リファクタリング
	# 🚿 :shower: 不要な機能・使われなくなった機能の削除
	# 💚 :green_heart: テストやCIの修正・改善

	@font-face {
	font-family: Emoji;
	src: local('Hiragino Kaku Gothic ProN'),
	local(Meiryo);
	}

	@font-face {
	font-family: Emoji;
	src: local('Segoe UI Emoji'),
	local('Segoe UI Symbol'),

	$width-comp-size: 640px;

	@function strip-unit($n) {
	@return $n / ($n * 0 + 1);
	}

	@function w($size) {
	$width: $size / $width-comp-size * 100%;

	@return $width;


	/*
	A simple little SCSS mixin for creating scrim gradients
	Inspired by Andreas Larson - https://github.com/larsenwork
	https://css-tricks.com/easing-linear-gradients/
	*/

	@mixin scrimGradient($startColor: $color-black, $direction: 'to bottom') {

	$scrimCoordinates: (

	mixin button
	button.button(type="button")
	block

	mixin disclosure
	.disclosure
	.disclosure__content
	block
	.disclosure__footer
	+button toggle

	import Hammer from 'hammerjs'

	const hammer = new Hammer(backdropEl, { touchAction: 'auto' })
	hammer.get('pinch').set({ enable: true })

	let isPinching = false

	hammer.on('pinchstart', () => {
	isPinching = true
	})