【実用的】なんとなくバランスが良くない時に使えるCSSのコツまとめ【駆け出しWEBプログラマー向け】

この記事はこんな人におすすめ

・WEBエンジニア、WEBプログラマーとして1ヶ月〜1年くらい

・なんとなくバランスが悪い気がするんだけど、どこが悪いのか分からない、、

・デザインを整える時のコツが知りたい!

「うーん、よさそうな感じはするんだけど、なんとなくバランス悪いかも。」

HTML・CSSを書いていてそんな感覚になったことありませんか?

今回は、そんな時に手軽に使える「実用的な」CSSのコツをまとめてみました。

主にご紹介するのは、「こんな簡単なことで綺麗になるんだ!」と思えるようなことをメインでまとめています。もちろんこれ以上に手の込んだ修正が必要になる場合もありますが、あくまで「手間をかけず」「すぐ綺麗に」がテーマになっております。ではどうぞ!

 

テキスト関連

WEBデザインはテキストの使い方を少し修正するだけで見た目の綺麗さがかなり変わります。

もしちょっと綺麗じゃないかもと思った時は以下の点を気にしてみてください!

最適なfont-sizeにする

フォントサイズは大きすぎても小さすぎても読みにくくなります。

サイト全体のフォントサイズを決める時は「16pxを中心に考える」ことをお勧めします。

理由としては、「googleも推奨しているサイズである」「誰でも読みやすいサイズである」という部分です。(もちろん強調したい部分などはその類ではありません。)

それともう一つ気にして欲しいことは、selectやinputなどの入力フォームを使用しているサイトの場合は16px以下だとスマホでタップした時にズームアップされてしまうということです。

結構見かけるサイトが多いのですが、入力する->ズームされる->入力終わって画面のズームを戻すみたいな作業はユーザーにとってはかなり手間です。デザインの関係で16px以下の使用していてもフォームはズームされないように出来るだけ16px以上を使用するようにしましょう

letter-spacingとline-heightを効果的に使う

letter-spacingは「文字間を空ける」プロパティです。line-heightは「行間を空ける」プロパティです。

letter-spacing: 0.4px;
line-height: 1;

このようにCSSでは表記します。

letter-spacingでは空ける横幅のサイズ、line-heightでは縦に文字何個分空けるか(line-height: 1;であれば行間はなし)を指定します。

どんな時に効果的かというと、フォントなどによっては行間・文字間が詰まっていて読みにくい場合です。そんな時にletter-spacingを少し入れてあげるとゆったりした印象を与えられるので文章も読みやすくなります。特に漢字が多めの文章だとかなり効果を発揮します。

letter-spacing: 0; line-height: 1; の文章

今回は、そんな時に手軽に使える「実用的な」CSSのコツをまとめてみました。
主にご紹介するのは、「こんな簡単なことで綺麗になるんだ!」と思えるようなことをメインでまとめています。
もちろんこれ以上に手の込んだ修正が必要になる場合もありますが、あくまで「手間をかけず」「すぐ綺麗に」がテーマになっております。ではどうぞ!

letter-spacing: 0.4px; line-height: 1.5; の文章

今回は、そんな時に手軽に使える「実用的な」CSSのコツをまとめてみました。
主にご紹介するのは、「こんな簡単なことで綺麗になるんだ!」と思えるようなことをメインでまとめています。
もちろんこれ以上に手の込んだ修正が必要になる場合もありますが、あくまで「手間をかけず」「すぐ綺麗に」がテーマになっております。ではどうぞ!

上記の文章、それぞれ見比べてみるといかがでしょうか?

実際にはフォントの大きさによってそれぞれの数字はいじることになりますが、このような感じで違いがでるので自分のサイトで試してみてバランスがよさそうな設定をすることをおすすめします!

スマホのフォントサイズはvw(ビューウィッズ)を使う(例外あり)

スマホのフォントサイズにpx指定をすると画面サイズが小さいスマホでみた時に極端に文字が大きく感じたり、レイアウトが崩れてしまうような状況になることがよくあります。

そんなことを避けるために、可能であればスマホではデバイスの横幅によって可変してくれるvwを使用することがおすすめです。

vwを使用することによって横幅の小さいデバイスからiphone 12 proのような横幅の大きいデバイスまで微妙な横幅の違いに応じてフォントサイズが可変してくれるようになります。

注意点は以下の例外と、絶対にPCには適用しないことです。

PCは11インチ、13インチ、15インチまたはディスプレイなど横幅の可変サイズが非常に大きいのでvwを使用すると想像もしていなかったサイズ感で表示されてしまうことがあります。それを避けるためにもPCはpx、スマホはvwなどの使い分けをすることをおすすめします。

例外に関しては、一番は「最適なfont-sizeにする」で書いていますが、スマホによっては16pxを下回るサイズになってしまうので「selectやinputなどの入力フォームを使用しているサイトの場合は16px以下だとスマホでタップした時にズームアップされてしまう」状態になってします場合があります。

なのでselectやinputのフォントサイズはスマホでもpxで指定してあげてもいいかもしれません。

もちろん場合によってはpxで指定した方が確実な場合もあるので、適材適所は大事です。

テキストの色は黒(#000)は使用せず、ちょいグレー(#333)を使う

通常色の指定をしていないと、使用される黒の色は真っ黒の#000(カラーコード)になります。

もちろんこれが絶対悪いわけではないのですが、特に背景が白に近い色だった場合に文章を読むには白と黒のコントラストが強く目に負担がかかります。

その際に使用して欲しいのが#333の黒です。目にも優しくおしゃれな印象になります。

比べてみるとこんな感じになります。

カラーコード#000の黒です。
カラーコード#333の黒です。

ちなみに、この記事も#333の黒で書かれています。

レイアウト関連

要素の端をそろえる

要素の端を揃えた、デザインにすると安定感が出て綺麗になります。

パターンとしては、

・要素の左端をそろえる

・要素の周りの空白(paddingやmargin)をそろえる

・要素の大きさ(width)をそろえる

主にこの3つを気にしながら整列させていくと綺麗になっていくと思います。

特に離れた要素は左端が揃っていなかったりするのでその部分も気にするといいと思います。

HTMLは積木のようにブロックで構成を考える

上で触れた「左端をそろえる」「大きさをそろえる」ですが、HTMLの構成を考える時に適当に要素を置いていくのではなく、そもそもブロックで考えられていれば要素の端をそろえるみたいな話は出てこないはずなのです。

例えば、ジェンガは初めに隙間なく積まれていた時は安定しているのに抜いていくと空白でき、その分不安定になりますよね?

そんな感じでみていても安心感がなく見える構成になってしまいます。人間は「揃っている」「同じ」という部分に綺麗さを感じるので、そこを意識すると綺麗な構成になります。

時にはメディアクエリじゃなくて読み込むCSSを変える(スピード対策)

これはCSSの書き方ではないのですが、経験上メディアクエリで対応できずにPC、SPでCSSを切り分けないといけないことがあったのでおまけで載せてみます。

その時の状況としては、「1つのstyle.cssにメディアクエリで分けて書かれている」が、CSSのサイズが大きすぎて「サイトの表示が遅い」というような状況でした。(当然圧縮等の方法は適用済みです。)

「一番時間がかからず、効果がある方法を!」と無茶振りをされ、そこに収まったのがPCとSPでCSSを分割し、ユーザーエージェント(User Agent)によって読み込むCSSを変更するという方法でした。

この方法であれば、単純に読み込むCSSの量を半分にできますし、幸いメディアクエリがしっかり分割して綺麗に書かれていたことで作業もそこまで多くなく済みました。

肝心なユーザーエージェントで判断する方法ですが、以下のようなコードで判断しました。(2020/2月当時)

function is_mobile() {
  if(!array_key_exists('HTTP_USER_AGENT',$_SERVER)){
    // USER_AGENTが設定されていない場合は、falseを返す
    return false;
  }

  if($_SERVER['HTTP_USER_AGENT'] === 'Amazon CloudFront'){
    if($_SERVER['HTTP_CLOUDFRONT_IS_DESKTOP_VIEWER'] === 'true'){
      $ua = 'desktop';
    } else if($_SERVER['HTTP_CLOUDFRONT_IS_TABLET_VIEWER'] === 'true'){
      $ua = 'iPad';
    } else if($_SERVER['HTTP_CLOUDFRONT_IS_MOBILE_VIEWER'] === 'true'){
      $ua = 'iPhone';
    }
  } else {
    $ua = $_SERVER['HTTP_USER_AGENT'];
  }

  if (((strpos($ua, 'Android') !== false) && (strpos($ua, 'Mobile') !== false)) || (strpos($ua, 'iPhone') !== false) || (strpos($ua, 'Windows Phone') !== false)) {
    //スマホ
    return true;
  } else {
    //PC
    return false;
  }
}

function is_desktop() {
  if(!array_key_exists('HTTP_USER_AGENT',$_SERVER)){
    // USER_AGENTが設定されていない場合は、trueで返す
    return true;
  }

  if($_SERVER['HTTP_USER_AGENT'] === 'Amazon CloudFront'){
    if($_SERVER['HTTP_CLOUDFRONT_IS_DESKTOP_VIEWER'] === 'true'){
      $ua = 'desktop';
    } else if($_SERVER['HTTP_CLOUDFRONT_IS_TABLET_VIEWER'] === 'true'){
      $ua = 'iPad';
    } else if($_SERVER['HTTP_CLOUDFRONT_IS_MOBILE_VIEWER'] === 'true'){
      $ua = 'iPhone';
    }
  } else {
    $ua = $_SERVER['HTTP_USER_AGENT'];
  }

  if (((strpos($ua, 'Android') !== false) && (strpos($ua, 'Mobile') !== false)) || (strpos($ua, 'iPhone') !== false) || (strpos($ua, 'Windows Phone') !== false)) {
    //スマホ
    return false;
  } else {
    //PC
    return true;
  }
}

ユーザーエージェントをAmazon CloudFrontとそれ以外で分けているのはAmazon CloudFrontはユーザーエージェントをdesktop,iPad,iPhoneの3種類で返してくるからです。

上記のようなコードでスマホとPCの判断をし、使用するCSSを切り分けることによってかなりの速度改善につながりました。

もし肥大化したCSSにお困りであれば上記のような方法もお試しあれ。

まとめ

いかがだったでしょうか?

少しの工夫や微調整で、ユーザーに安心感や信頼感を持ってもらえるようなデザインになるのでまとめたような方法を試しながら自分なりに改善してみていってください!