-
1:ID:bnORWO · 1週間前

みんなイラレのデータからマージンとかの余白とか行間、文字間のCSSってどうやって調べてる?
今まで定規ツールとか四角形ツールとかで測ってたんだけどもっといい方法ないのか気になって聞いてみたい。
行間とかもフォントサイズとイラレ状の行間で割って出したりとか結構手間かかるからいい方法あったら知りたい。やっぱこういうのは地道に確かめてやるしかないんかな?

27 件の回答

2:ID:lJRKX8 · 1週間前

イラレのデータからウェブデータつくるなんて、チャンチャラ。
クズなの?

あれ?クズ発見!みたいな。
そのくらいのもん。
フォトショにもってってみそ?

3:ID:lgDcPM · 1週間前

Re:2 またお前か。あちこち荒らすなよ

4:ID:14VE.b · 1週間前

テキストボックス選択したら文字パレットに数値出ない?アウトライン取られてるの?

5:ID:.eOfXK · 1週間前

Re:2
こいつよくわかってないみたいだな。
恥ずかしいぞ。

6:ID: · 1週間前

Re:4
出るんだけどフォントサイズくらいしかそのまま持ってこれるデータなくて、カーニングとか行間とかはCSSそのまま入れても全然合わないし、マージンも手動で測ってて効率悪すぎだし自分だけなんかやり方間違ってるのかと思って・・・
行間はAIの行間➗フォントとかで計算で出してる状態

7:ID:kHqmkR · 1週間前

Re:6
行間は常にAi/PSのデータから計算していれてる。
というかSassつかってればline-height:(36/24);とかでいけるよ?

8:ID:14VE.b · 1週間前

Re:6
CSS の line-height と Ai の行送りは概念が違うからなぁ…まあ確かに困るね。ただマージンが何を指してるのか解からん。カーニングなんてやんの? せいぜい letter-spacing で一括指定するだけだけど。

9:ID: · 1週間前

Re:7
まじかああああそんな機能が・・・SCSSは使ってるけど入れ子にする程度にしか使ってなかった・・・
この感じだとまだ知らない便利なやつたくさんありそうだな・・・少しCSSの指定早くなる気がするありがとう。

てかみんなPSっていうけどAIでデータもらってるパターン少ないのかな・・・?
今までほとんどAiでしかもらったことないんだけど

10:ID: · 1週間前

Re:8
うちはデザイナーのこだわりでだいたい文字間は段落ごとに違うし、Aiデータ上だ文字間の設定にトラッキングとカーニングが入っててトラッキングの数字入れるだけだと合わないから困ってる。

マージンは普通に要素毎にどれくらい合間が空いてるかって話。手動で測ってるんだけどめっちゃレガシー+効率悪いことやってるんじゃないかとおもって。それでもぴったりは合わないからさらに手動で調整するんだけども

11:ID:4cHjnt · 1週間前

Re:10
なにそのデザイナーキモいな。
そんなんだから未だにIllustratorでカンプ作るようなレガシー制作してんだよ。。。

12:ID:kHqmkR · 1週間前

Re:9
フリーでコーディングしてるけど、イラレ30%、フォトショ60%、Fw 10%って感じですね。
デザインにこだわるところほどイラレ。効率重視の所はフォトショって感じかな。

13:ID:l0PzHX · 1週間前

Re:10
大丈夫。Appleとかでも1文字ごとにspan切ったりしてるから。
ただ、そんなに目立たない文章や流し込み本文にまでそれやられたらキレそうになるけどねw

14:ID:bmGHK0 · 1週間前

Re:8
>CSS の line-height と Ai の行送りは概念が違う
これで毎回困ってるんだけど手動で計算以外に解決方法あるの?

15:ID:14VE.b · 1週間前

Re:14
単位を両方で揃えれば(普通pxだろうけど)行間サイズはまったく一致する。上のスペースが ((line-height - font-size) / 2)px 空くだけ。

16:ID:J/FmJt · 1週間前

そういう場合は、指示書を作ってもらうこと。
プリントアウトに手書きで、フォントサイズは●●pxで、行間は●●px。トラッキングは●●で、ここの見出しの文字詰めだけはしてほしいとか。

すり合わせないと、お互い不幸。

>大丈夫。Appleとかでも1文字ごとにspan切ったりしてるから。
とかいう人がいるが、正直現実的ではない。
Appleぐらい大手の案件で時間と予算があればやっても良いけど。

基本的に、Webは見る人の環境やデバイスによって、フォントも違うし、
ブラウザの設定によってはフォントサイズも違う場合もあるし、全体の中央値をとる必要がある。

無駄に文字詰めして、ある一定の端末&フォントで微妙に崩れてる場合とか考えると
できるだけプレーンで汎用的なものを作る必要がある。

そのあたりをちゃんと理解してもらわないといけないよ。

誰のためのこだわりなのか。
それって本当にユーザーのためになってる?
と思ってしまうよ。

そこまでこだわりがあって、やるんだったら文字を画像(SVG)に
するとかしたほうがきれいだよ。

17:ID:bmGHK0 · 1週間前

Re:15
ありがとう。
>上のスペースが ((line-height - font-size) / 2)px 空くだけ。
これに困ってるんだ。
例えば見出し+本文とかで本文の行間をイラレに合わせると見出しの下の余白がカンプと合わなかったり。marginとかで調整するのもどうなのかと思って。。

18:ID:14VE.b · 1週間前

Re:13
これ正直 Web でやるのアホらしいで…グラフィックでも大見出しに使うぐらい。最近は Web フォントを使えば環境ごとの違いは吸収してくれるが、それでもまーなんだろ…アホらしいでやっぱり。

19:ID:l0PzHX · 1週間前

Re:18
Webフォントでも1文字ごとの字詰めはspan切らなきゃだよね?
アホらしいと思うのは分かるけど、メインビジュアルのコピーとか、こだわりたいところはやるべきだと思う。

20:ID:RgT.Uq · 1週間前

普通は、イラレのデータをそのレベルで再現するなんて非効率極まりないことしないと思うよ。
デザイナーがそこまで指示を出せるなら、XDなりSketchなりのツール上でCSSの値を出力できるもので指示を出すべきであって、そのコストをコーダーに負わせるなんて、2018年現在では非常識だね。俺が上の人間なら、内部予算を無駄遣いだと指摘するね。

21:ID:l0PzHX · 6日前

なんかあれだ、CodeGridにピクセルグリッドがECサイトのデザインカンプ例を載せてたけど、あそこのレベルまで出してくれるなら、完璧に仕上げてやるぜ! って気持ちになるな。
しかし、あのレベルを出してくるデザイナーとは一人として出会ったことがない。

23:ID:9LWpiI · 6日前

Re:21
これ見たくって探してるんだけどどの記事?

24:ID: · 6日前

いろんな意見あるなぁ
割り切れない数をSassで計算して出すのはめちゃ参考になった。ただ意外とマージンを自動で測る方法とかってないのね・・・。

25:ID:cJxVWs · 6日前

Re:2
イラレのデータからウェブデータつくれないなんて、チャンチャラ。
クズなの?

あれ?クズ発見!みたいな。
そのくらいのもん。
イラレ程度触れるようになってみそ?

26:ID:l0PzHX · 6日前

Re:23
ごめん、自分も探してるんだけど、無料閲覧の中には無かった…
前の会社で有料購読していたから、もしかすると有料記事の中にあるのかも。
今は有料購読してないから、これ以上は調べられないんだ。申し訳ない

27:ID:9LWpiI · 5日前

Re:26
https://app.codegrid.net/entry/design-spec-1
見つけた!いやいや、ありがとう。
おかげで助かりました。

28:ID:KzSb46 · 5日前

Re:27
有料か…
お試し期間とかないかな〜

1 件の回答が除外されました。[詳細]
コメントの受付は終了しました。

一緒に読まれている質問

ページ上部に戻る