[CSS]文字に含まれる上下の余白を取り除いて、アイコンや画像とぴったり同じ高さにするスタイルシート
Post on:2018年4月3日
sponsors
文字に含まれる上下の余白を取り除いて、矩形ぴったりの高さに、アイコンとぴったり同じ高さに、画像とツラが揃うようにするスタイルシートを生成するオンラインツールを紹介します。
「line-height」が影響して、ぴったりに揃わないことに悩んだことがあるかもしれません。そんな文字の余白を一番上と一番下の行のみ取り除きます。
文字の余白を取り除くには、疑似要素:before, :afterそれぞれに負のマージンを与えます。これで、一行でも複数行でも上下の余白のみを取り除きます。
文字の上下の余白を取り除く
使い方は、簡単です。
まずは、下記ページにアクセスします。
フォントの種類・ウェイトを指定し、font-size, line-heightを定義し、上下の余白を調整します。
文字の上下の余白を調整
調整した見た目は、さまざまな要素で確認できます。
矩形ぴったり、アイコンとぴったり、画像とツラ合わせ、ボックスのパディングなど、Webページでよく使用される要素が用意されています。
余白の確認
見た目が問題なければ、コードが自動生成されます。
コードの生成
コードはSass用、LESS用、Stylus用の3種類です。
下記は、Sass用です。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 |
@mixin text-crop($line-height: 1.3, $top-adjustment: 0px, $bottom-adjustment: 0px) { // Configured in Step 1 $top-crop: 9; $bottom-crop: 8; $crop-font-size: 36; $crop-line-height: 1.2; // Apply values to calculate em-based margins that work with any font size $dynamic-top-crop: max(($top-crop + ($line-height - $crop-line-height) * ($crop-font-size / 2)), 0) / $crop-font-size; $dynamic-bottom-crop: max(($bottom-crop + ($line-height - $crop-line-height) * ($crop-font-size / 2)), 0) / $crop-font-size; // Mixin output line-height: $line-height; &::before, &::after { content: ''; display: block; height: 0; width: 0; } &::before { margin-bottom: calc(-#{$dynamic-top-crop}em + #{$top-adjustment}); } &::after { margin-top: calc(-#{$dynamic-bottom-crop}em + #{$bottom-adjustment}); } } // Mixin generated at: http://text-crop.eightshapes.com/? /* Usage Examples .my-level-1-heading-class { @include text-crop; // Will use default line height of 1.3 font-size: 48px; margin: 0 0 0 16px; } .my-level-2-heading-class { @include text-crop; // Will use default line height of 1.3 font-size: 32px; // Don't need to change any settings, will work with any font size automatically margin: 0 0 0 16px; } .my-body-copy-class { @include text-crop($line-height: 2); // Larger line height desired, set the line height via the mixin font-size: 16px; } // Sometimes depending on the font-size, the rendering, the browser, etc. you may need to tweak the output. // You can adjust the top and bottom cropping when invoking the component using the $top-adjustment and $bottom-adjustment settings .slight-adjustment-needed { @include text-crop($top-adjustment: -0.5px, $bottom-adjustment: 2px); font-size: 17px; } .dont-do-this { @include text-crop; font-size: 16px; line-height: 3; // DO NOT set line height outside of the mixin, the mixin needs the line height value to calculate the crop correctly } */ |
sponsors
