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

2021/04/23 369 users Rriver ウェブデザイン figma 曲者 コーディング

ウェブデザインにおけるline-heightってけっこう曲者で、CSSを理解してデザインしないと「空き」の設計が破綻したりコーディングで苦労することになります。FigmaやAdobe XD、Affinity Designerなどのグラフィックアプリでline heightの扱いが異なるので、使うツールの挙動を理解するのも大切です。 ということで、今回... 続きを読む

line-heightの不要な上下の余白を打ち消して、デザインデータに沿ったコーディングを効率化する方法 | Blog | YUYA KINOSHITA

2020/04/22 20 users 余白 コーディング 上下 実装 数値

Webサイトのコーディング（実装）では、デザインデータ通りの数値を反映しているにも関わらずブラウザ上の表示がデザインデータと比べてずれる（余白が大きくなりすぎる）場合があります。 これはブラウザのline-heightの仕様によるものですが、line-height制御の難しさがデザインデータとコーディング後（ブラウザ表示... 続きを読む

IE11やEdgeにも対応できる、CSSだけで3行目でテキストの文末を「…」で省略する | かちびと.net

2019/07/24 56 users 文末 Edge CSS WebKit overflow

Result よくある、テキストの文末を省略するやつです。 1行に限らず、3行目、5行目など、n行で省略可能でWebkitやFirefoxはもちろん、IE11やEdgeもサポートしたコードです ↑ IE11で確認したスクショです。Penは非対応だったのでjsfiddleで確認しています css p { line-height: 1.4; max-height: 4.2em; overflow: hidden... 続きを読む

[CSS]テキスト要素の先頭行だけline-heightを取り除き、上ぴったりに揃えるスタイルシートのテクニック | コリス

2018/08/21 187 users コリス 余白 CSS テキスト スペース

テキスト要素を配置する際、line-heightがあると、テキストの先頭行を上ぴったりに揃えることはできません。先頭行だけline-heightでできた上スペースを取り除き、上に揃えるスタイルシートのテクニックを紹介します。 これをしたいと思った人は少なくないと思います。 先頭行の余計な余白を取り除き、ぴたっと揃えるこ... 続きを読む

[CSS]見出しや本文のfont-sizeとline-heightの単位にremを使用して、レスポンシブ対応にするスタイルシート | コリス

2018/07/20 29 users rem コリス font-size return CSS

// Function for converting a px based font-size to rem. @function calculateRem($size) { $remSize: $size / 16px; //Default font size on html element is 100%, equivalent to 16px; @return #{$remSize}rem; } @function calculateNum($lheight) { $numSize: $lheight; //Default font size on html element is ... 続きを読む

こういうのを待ってた！日本語フォントで、レスポンシブ用の文字の指定を調整できる無料ツール -Archetype | コリス

2018/02/28 172 users Archetype コリス 見出し レスポンシブ用 サイズ

文字の指定をいろいろ調整できる無料ツールは他にもありますが、ようやく日本語フォントに対応したものがリリースされていたので、紹介します。 文字のサイズやline-heightをはじめ、見出しレベルによるサイズの拡大率など、 ...記事の続きを読む 続きを読む

letter-spacingを隠し味程度に | a-ki blog

2016/12/26 13 users letter-spacing 行間 長文 デフォルト 配慮

このブログは基本font-sizeを100％にしています。もちろん文章が読みやすいようにという配慮からなんですけど、文字が大きいと詰め込んだ印象になって長文の場合かえって読みにくく感じることがあります。 これを解消するにはline-height（行間）を広めにとる（130%～150%くらい）と同時にletter-spacing(字間）をほんの少し広げてやると良いみたいです。 デフォルトではlett... 続きを読む

marginとline-heightによる"真の余白"について考える | SimpleIsm

2015/06/09 73 users コーダー margin 余白 デザイナー ありがたい

まだまだWeb制作においては、デザイナーがデザインしたものをコーダーがコーディングする、というような流れが多いように思う。 デザイナーは1pxにもこだわる人たちなので、コーダーもそれに応えるように、きちんとデザイン通りに表現する。 余白の指示書などがあるとありがたい。例えば、「ここは20px、ここは40px、ここは60px」というような具合。デザイナーによっては、余白がそれぞれバラバラだったりして... 続きを読む

見出しやパラグラフのフォントサイズや行間をemベースで簡単に設計できるオンラインツール -Em Baseline Generator | コリス

2013/04/11 92 users パラグラフ コリス font-size フォントサイズ 行間

emベースで見出し、パラグラフ、リストなどのfont-size, line-heightなどを設計できるオンラインツールを紹介します。 Em Baseline Generator 使い方は簡単です。 ベースとなるfont-sizeとline-heightを設定します。 font-sizeとline-heightを設定 設定した値は、すぐに右のプレビューに反映されます。 見出し、パラグラフ、リストな... 続きを読む

スタイルだけで「いいね」がずれるのを解決します！ | 株式会社LIG

2013/02/21 63 users 株式会社LIG スタイル Social ボタ ソーシャル

特定のOSおよび特定のブラウザでしか発生しないかと思われますが、 「いいね」だけずれちゃったりしたとき。 ありませんか？こんな風に。 これ、もしかしたら、「line-height」のスタイルが当たってしまっている所為かもしれません。 .social { line-height: 0; } 「いいね」のところだけこんな感じでしてあげましょう。 どうでしょうか、キレイに揃いましたか？ ソーシャルのボタ... 続きを読む

ことばの分析から学ぶ科学的思考法 - 大修館書店

2012/11/14 39 users 大修館書店 分析 思考法 まえがき Style

<font size="2" style="line-height:"140%"> 本書は実際の講義さながらに、ことばの分析をしながらその結果をどのように組み立ててまとまった一つの考えとしていけばよいのかを指南した書である。文系理系を問わず学生が不得手とする、理論モデルをつくる際の論理の組み立て方をクイズを解くような形で実体験することができる入門書である。 まえがき 　１章　脳の中にある言語計算機... 続きを読む

[CSS]読みやすさのポイントは縦のリズム、見出しのレベルがひと目で分かるようにスタイルするチュートリアル | コリス

2012/11/05 103 users コリス padding margin ひと目 チュートリアル

読みやすいウェブページの大切なポイントの一つは、縦のリズムです。ウェブにおける縦のリズムはfont-size, line-height, margin(padding)の3つの要因からなっています。 この3つの要因とデザインを組み合わせ、見出しのレベルがひと目で分かるようにデザインされた見出しを実装するスタイルシートのチュートリアルを紹介します。 Heading Set Styling with ... 続きを読む

[CSS]いろいろな問題を解決する1行のスタイルシート集 | コリス

2008/03/11 785 users センタリング コリス フロート 横幅 CSS

CSS Globeのエントリーから、スタイルシートのレイアウトで生じる問題を解決する８つの1行のスタイルシートの紹介です。 8 Premium One Line Css Tips 縦方向のセンタリング 高さが固定されている場合、「line-height」を使用して、縦方向のセンタリングが実装できます。 デモページ line-height:24px; はみだす箇所を隠す 横幅の広い画像などをフロート... 続きを読む

[CSS]日本語と英語で異なる最適なフォントサイズの指定方法 | コリス

2007/04/10 176 users font-size コリス フォントサイズ CSS 組み合わせ

日本語・英語のサイト制作に使用しているCSSのフォントサイズの指定で、2007年用デフォルトとしているものです。 %指定を採用している理由の１つは、font-size、line-heightとともに組み合わせにより微妙に異なり、その組み合わせの最適な値を採用するためです。 日本語サイトのフォントサイズの指定 英語サイトのフォントサイズの指定 line-heightの指定 日本語サイトのフォントサイ... 続きを読む

line-height に単位ありの指定は駄目？ | WWW WATCH

2007/02/22 93 users Number プロパティ CSS ところ WWW WATCH

最近、CSS の line-height プロパティに指定する値は単位なし （<number>） が良いという話が話題になっているようです。別に今に始まった話題ではないんですけども、最近この話題に触れている記事の中に、ちょっと気になる書き方をされる方がいるのでちょっと書いてみます。 で、そもそもなんで line-height の値は <number> で指定しておいた方がいの？ってところですが、そ... 続きを読む

CSSを書く際の5つのテクニック:phpspot開発日誌

2006/09/11 423 users CSS phpspot開発日誌 font-size Body

CSS tips and tricks at The Blog Herald CSSを書く際の5つのテクニック。 1. サイズ指定の際はピクセルを使うな。 body { font-size: 62.5% } p { font-size: 1.2em; line-height: 1.5em; } px指定してしまうとブラウザの文字サイズに反応しなくなってしまうというやつですね。 2. 階層構造はイン... 続きを読む

Lucky bag::blog: line-height の値には単位なしが良いとされる理由

2006/04/10 492 users length Lucky Bag 単位 ナビゲーション 理由

この記事が属するカテゴリー CSS CSS で行ボックスの高さを指定する line-height 値に、em(length) や %(percentage) などの単位を付けて指定しているサイトを意外と見かける。それは間違いではないし、例えばナビゲーションとかでブロック要素の垂直センターに配置するために意図的に指定しているんであれば良いんだけれど、そうでないなら line-height 値には単位... 続きを読む