ホームページ制作/SEO対策なら株式会社サイバーブレーンへ

 03-5961-5681 平日10:00~19:00

 2018-09-12

WEBデザインの字詰めについて

こんにちは!
フォトショップでデザインサンプルを作った時はカッコ良かったのに、コーディングしてブラウザで見てみると何か違うって事があります。

画像や色はサンプルと同じにできますが、テキスト部分はやっぱり違うんですよね。
もっとも大きな違いは「字詰め」です。
普通にコーディングすると下記のようになります。

サンプル(テキスト)です。
「これはサンプルテキストです」
・これはサンプルテキストです

{$block_img_1_alt}

黄色の隙間の部分が気持ち悪いですよね。そんな時に使えるのが、cssの「font-feature-settings」です。
.class{
  font-feature-settings : "palt" 1;
}

たったこれだけで、下のようになります。

サンプル(テキスト)です。
「これはサンプルテキストです」
・これはサンプルテキストです

{$block_img_1_alt}

ピタッと揃っていて気持ちが良い!
後は、文字間と行の高さを調節すると
.class{
  font-feature-settings: "palt" 1;
  line-height: 1.8em;
  letter-spacing: 2px;
}

サンプル(テキスト)です。
「これはサンプルテキストです」
・これはサンプルテキストです

最初のサンプルテキストと比べてみると、読みやすくて綺麗に見えると思います。
今後も、細いところまで丁寧に作り込むように心がけていきます。

~この記事の著者~

サイト制作に関するご相談はこちら

 03-5961-5681 平日10:00~19:00

メールフォーム

あなたが
サイトに
求める要素
あなたがサイトに求める0要素