2018年08月21日(火)
[CSS]テキスト要素の先頭行だけline-heightを取り除き、上ぴったりに揃えるスタイルシートのテクニック
テキスト要素を配置する際、line-heightがあると、テキストの先頭行を上ぴったりに揃えることはできません。先頭行だけline-heightでできた上スペースを取り除き、上に揃えるスタイルシートのテクニックを紹介します。
これをしたいと思った人は少なくないと思います。
先頭行の余計な余白を取り除き、ぴたっと揃えることができます。取り除くのは先頭行の上だけなので、先頭行の下やほかのテキスト要素はline-heightが適用されます。
Line-height Crop
by CodyHouse下記は各ポイントを意訳したものです。
※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。はじめに
元々は、近日公開予定の「Web Components」のために作成したものですが、グロー...
0
250
181
249author:
コリス
2006年の開設以来、一貫してサイト制作に関する最新情報を提供しているクリエイティブブログ
‹ PREV
最近はもうHelveticaだけではない！2018年、実際に使用されている人気が高い英語フォントの組み合わせ
NEXT ›
多種多様なデータのプレーンテキストのリストをコピーして使える・「Plain Text Lists」
Ads
2006年の開設以来、一貫してサイト制作に関する最新情報を提供しているクリエイティブブログコリスの記事『[CSS]テキスト要素の先頭行だけline-heightを取り除き、上ぴったりに揃えるスタイルシートのテクニック』についてまとめています。
この記事は特にアイコン・フォント・SEO・LINEについて書かれており、 気になるWebデザインの記事やまとめを見つけたら「本文を読む」をクリックすると、記事配信元のコリスで全文を閲覧することができます。RSS Sourceの「このサイトの記事一覧」をクリックするとコリスの記事をまとめて表示することができます。また閲覧数や各SNSのシェア状況を目安に、他の人たちが記事をどのように評価しているのか推測することができます。Webデザインにとって有益な記事をまとめていますので、ぜひリンク先をチェックしてみてください。
