[フレーム]
はてなブックマークアプリ

サクサク読めて、
アプリ限定の機能も多数!

アプリで開く

気に入った記事をブックマーク

  • 気に入った記事を保存できます
    保存した記事の一覧は、はてなブックマークで確認・編集ができます
  • 記事を読んだ感想やメモを書き残せます
  • 非公開でブックマークすることもできます
適切な情報に変更

エントリーの編集

loading...

エントリーの編集は全ユーザーに共通の機能です。
必ずガイドラインを一読の上ご利用ください。

タイトルガイドライン

このページのオーナーなので以下のアクションを実行できます

タイトル、本文などの情報を
再取得することができます
コメントを非表示にできます コメント表示の設定

ブックマークしました

ここにツイート内容が記載されます https://b.hatena.ne.jp/URLはspanで囲んでください

Twitterで共有

ONにすると、次回以降このダイアログを飛ばしてTwitterに遷移します

441users がブックマーク コメント 40

ガイドラインをご確認の上、良識あるコメントにご協力ください

0 / 0
入力したタグを追加

現在プライベートモードです 設定を変更する

おすすめタグタグについて

よく使うタグ

ウェブデザインにおけるline-heightについて

441 users parashuto.com

ガイドラインをご確認の上、良識あるコメントにご協力ください

0 / 0
入力したタグを追加

現在プライベートモードです 設定を変更する

おすすめタグタグについて

よく使うタグ

はてなブックマーク

はてなブックマークで
関心をシェアしよう

みんなの興味と感想が集まることで
新しい発見や、深堀りがもっと楽しく

ユーザー登録

アカウントをお持ちの方はログインページへ

記事へのコメント40件

  • 注目コメント
  • 新着コメント
PerolineLuv
PSDデザインに100%忠実なピクセルパーフェクトを強要される現場で、アタマに来て文字列周りは全て line-height:1 にして他の要素も全てpx単位でmargin, padding, position 実装してやったことある。

その他
ryo_n574
久々にウェブ制作関連の記事を書きました!

その他
ustam
とりあえず、line-height でオブジェクトの高さを指定するのは止めろ

その他
miruto
昔先輩が、「基本は1.618を使っているよ」って言ってて、なんですかその中途半端な値?って聞いたら、「黄金比」と言っていた。

その他
pmint
デザイン界隈では「バッドノウハウを考える人が優秀」っていう傾向がある。新興宗教と変わらない。

その他
sippo_des
この高速スクロール時代にどこまで気にするか、みたいなキモチ。 印刷はさらに不明。PDFでもおいておいてくれたほうが親切。何のコンテンツかわかんないけど。道順はテキストで親切に書いて♥

その他
ichi404
line-height:1じゃ複数行の文章対応出来なくなるじゃんか。個人的にletter-spacing細かく設定されてるの勘弁してってなる

その他
nunulk
"実は調べれば調べるほど奥が深いCSSのline-heightの世界"

その他
ezmu
XDはcss側に仕様合わせて欲しい ここだけでFigmaからの乗り換え検討にあがる

その他
maritimecolor
勉強になった〜。色々と曖昧にしてた部分あったからスッキリした。[css][アクセシビリティ]

その他
securecat
てか、上下に空きができるという言い方じゃなくて、line-heightは行ボックスの高さだで済むと思うんだけど行ボックスって表記が1つも出てこないのなんでなんだぜ?

その他
sawasawa12
ふむ

その他
kuracom
目がおじいちゃんなので和文は 1.8 以上にしてほしい。自分はなるべくそうしてる。単位はいつも入れてないけど、入れると厄介になるのを知れたのは良かった。

その他
fujibay1975
いつも1.5

その他
diveintounlimit
20年前のCSS仕様書から特にwhats newが無い

その他
thesecret3
ラインハイトってなんだかドイツ語っぽい。

その他
Helfard
へー。

その他
Nyoho
詳しい。

その他
primedesignworks
こういう所に行き着く前の、マージンを統一するとか、色数をやたらと増やさないとか、ガイドを引いてズレないようにするとか、オブジェクトのサイズは整数にするとか、レスポンシブで破綻しないようにしてほしい。

その他
ifttt
XDは用途がそれなんだからCSSに合わせろや!

その他
wumf0701
"line-heightの値は単位なしで記述するのがいい" おーこれは目から鱗!

その他
d4-1977
line-heighiは、視認性に関わる大切な値なので注意したいです。Figmaで単位が入っている時があるからコピペされないように変えたいけれど、viewer向けのプラグインないし、あの表示される箇所は変更出来ないらしい

その他
aceraceae
関係ないけど、鉛のプレートの話が興味深かった。

その他
ch416
昔からウェブサイトにおける行間の最適な間隔については文献もあるのだけど、なかなか文字の読みやすさに対してウェブ業界が成長しない。ウェブメディアとか無茶苦茶だし。

その他
tilfin
%と単位なしでも違うのか知らなかった。

その他
miruto
miruto 昔先輩が、「基本は1.618を使っているよ」って言ってて、なんですかその中途半端な値?って聞いたら、「黄金比」と言っていた。

2021年04月24日 リンク

その他
poliphilus
行送りと概念が違うのは面倒だよなあ。なんでこんな仕様にしたんだろうか。ちなみに和文は1.8はあった方がいいよ。欧文と違ってアセンダーがないからね。行長が短い場合は1.6、見出しは1.4まで許容可。

その他
montbranc62
いい記事

その他
namisk
印刷のほうのレディングのような仕様だと誤解していた。大誤解。。そんな細かい字組みの要件なくて幸せだったが、一から出直すわ......。

その他
oyssi
基本1.5くらいでデザインしているけど、和文は「1.8 – 2.0」なのか...結構空き気味な印象なので、読み易さやグルーピング難しいけどどうなんだろう。参考にいくつか挙げてもらっているので、それをメインに考えようかな

その他
ichi404
ichi404 line-height:1じゃ複数行の文章対応出来なくなるじゃんか。個人的にletter-spacing細かく設定されてるの勘弁してってなる

2021年04月24日 リンク

その他
misarine3
line-heightでブロックの高さ調節すると変更に対応できなくなる時あるある。ピクセルパーフェクトの要求してくる現場はちょっとガソリンかけたくなる時ある。やるけど!

その他
umai_bow
レディング分ネガティブマージン指定するぐらいならline-height:1を指定すればいいのでは。自分が良く理解できていない可能性がある

その他
blueboy
% em でなく、単位なし がいいそうだ。 / 行間が広いと読みやすいけど、スクロールの手間がかかる感じ。ちょっと間延びした印象も。

その他
pmint
pmint デザイン界隈では「バッドノウハウを考える人が優秀」っていう傾向がある。新興宗教と変わらない。

2021年04月24日 リンク

その他
gen-tatsumi
よいまとめです。ありがとうございます。

その他
AzuLitchi
行間読みやすいと忖度捗る。

その他
sippo_des
sippo_des この高速スクロール時代にどこまで気にするか、みたいなキモチ。 印刷はさらに不明。PDFでもおいておいてくれたほうが親切。何のコンテンツかわかんないけど。道順はテキストで親切に書いて♥

2021年04月24日 リンク

その他
ezmu
ezmu XDはcss側に仕様合わせて欲しい ここだけでFigmaからの乗り換え検討にあがる

2021年04月24日 リンク

その他

注目コメント算出アルゴリズムの一部にLINEヤフー株式会社の「建設的コメント順位付けモデルAPI」を使用しています

リンクを埋め込む

以下のコードをコピーしてサイトに埋め込むことができます

プレビュー
アプリのスクリーンショット
いまの話題をアプリでチェック!
  • バナー広告なし
  • ミュート機能あり
  • ダークモード搭載
アプリをダウンロード

関連記事

usersに達しました!

さんが1番目にブックマークした記事「ウェブデザインに...」が注目されています。

気持ちをシェアしよう

ツイートする

ウェブデザインにおけるline-heightについて

ウェブデザインにおけるline-heightってけっこう曲者で、CSSを理解してデザインしないと「空き」の設計... ウェブデザインにおけるline-heightってけっこう曲者で、CSSを理解してデザインしないと「空き」の設計が破綻したりコーディングで苦労することになります。FigmaやAdobe XD、Affinity Designerなどのグラフィックアプリでline heightの扱いが異なるので、使うツールの挙動を理解するのも大切です。 ということで、今回はCSSのline-heightについてまとめてみます。 実は調べれば調べるほど奥が深いCSSのline-heightの世界ですが、まずは基礎からまとめていこうと思います。 目次 以下はページ内のセクションへのリンクです。 CSSのline-heightでは文字の上下にスペースができる ウェブで使われるハーフ・レディングとは 印刷とウェブにおけるレディングの違い デザインツールでのline heightの扱いの違い 上下のハーフ・レディングを帳

ブックマークしたユーザー

  • ayoshh2024年08月10日 ayoshh
  • blogger3232023年11月21日 blogger323
  • techtech05212023年04月30日 techtech0521
  • montdsichel2022年10月07日 montdsichel
  • usako11242022年07月24日 usako1124
  • harrybeag2022年06月14日 harrybeag
  • tymikii2021年10月06日 tymikii
  • amagitakayosi2021年08月18日 amagitakayosi
  • heatman2021年05月24日 heatman
  • masakuma08122021年05月17日 masakuma0812
  • shibu_t2021年05月16日 shibu_t
  • harry00002021年05月15日 harry0000
  • www_taca2021年05月15日 www_taca
  • hachiame2021年05月10日 hachiame
  • hasunuma06132021年05月10日 hasunuma0613
  • heimusu2021年05月06日 heimusu
  • piayo2021年04月29日 piayo
  • hamaco2021年04月27日 hamaco
すべてのユーザーの
詳細を表示します

ブックマークしたすべてのユーザー

同じサイトの新着

同じサイトの新着をもっと読む

いま人気の記事

いま人気の記事をもっと読む

いま人気の記事 - テクノロジー

いま人気の記事 - テクノロジーをもっと読む

新着記事 - テクノロジー

新着記事 - テクノロジーをもっと読む

同時期にブックマークされた記事

いま人気の記事 - 企業メディア

企業メディアをもっと読む

はてなブックマーク

公式Twitter

はてなのサービス

Copyright © 2005-2025 Hatena. All Rights Reserved.
設定を変更しましたx

AltStyle によって変換されたページ (->オリジナル) /