【前編】CSSとは？Webサイトの見た目を整える第一歩

こんにちは！
よっしーです！

今回はWebサイトの
見た目を整える方法を
紹介していきます

ブラウザに文字は表示することが
できるようになったけど

どうやって見た目を
整えていくのか分からない

という人のために
徹底解説していきます

まず、「見た目を整える」って
なんのためにするのか

文字だけ表示されてれば
伝わるから見た目なんて
関係ないと思っている人

インターネットで好きな
言葉を入れて
サイトを見てください

真っ黒な文字だけのサイトって
ないですよね

それは、見た目が整っていると
「伝えたいこと」が
すぐに伝わるからです。

文字が強調されてたり
綺麗に整えていたり
するとすごく見やすいです。

だから、サイト制作では
見た目を整えるのは必須なんです

もし、見た目が整っていないサイトを
作ると見にくいサイトが完成するので

画面の向こうにいる人に
情報を届けることができません。

最悪の場合
時間をかけて頑張って書いたコードが
全て無駄になってしまいます。

では、
どうやって見た目を整えていくのか
見ていきましょう。

目次

1. １. CSSとは
2. ２. なぜ「読みやすさ」が重要なのか？
3. ３. CSSで読みやすい文章を作る方法
4. 最後に

3つの構成に分けて話します。

１. CSSとは

CSS（Cascading Style Sheets）は、
HTMLで構築したWebページに“
デザイン”を加えるための言語です。

具体的には以下のようなことができます。

• 文字の大きさや色の調整
• 余白や配置の指定
• 背景色や装飾の追加

文章がどれだけ素晴らしくても、
見づらければユーザー側はすぐに
サイトを閉じてしまいます

つまり、「見た目を整える」ことは、
情報を正しく伝えるために
必要不可欠な工程なのです。

２. なぜ「読みやすさ」が重要なのか？

スマホやPCでWebページを見る人にとって、
「文字が読みやすいかどうか」は
印象を大きく左右します。

• フォントサイズが小さすぎる
• 行間が詰まりすぎていて読みにくい
• コントラストが強すぎて目が疲れる

こんな状態では、
ユーザーは最後まで読み進めてくれません。

まずはCSSで文字の見た目を整えて、
「読みやすい文章」を目指しましょう。

３. CSSで読みやすい文章を作る方法

この前編では、まずCSSで
文字を見やすく整える方法を紹介します。

【1. フォントや色を整えて「読みやすさ」をアップしよう！】

●フォントサイズと種類を指定

body {

font-size: 16px;
font-family: "Helvetica", sans-serif;

}

font-sizeで文字の大きさ、
font-familyでフォントの
種類を指定します。

Webではゴシック体系が
読みやすく好まれます。

●文字色の調整

h1 {

color: #333;

}

真っ黒（#000）よりも
#333 や #555 のような
グレー寄りの色が読みやすくおすすめです。

●行間・文字間の調整

body {  

line-height: 1.6;
letter-spacing: 0.05em;

}

 行間(line-height)や文字間(letter-spacing)を
広げることで、文章全体の
可読性が大幅に向上します。

●文字の装飾で強調

cssstrong {

font-weight: bold;
color: #007acc;

}

 重要なキーワードやメッセージを
視覚的に強調することで、
ユーザーの目線を引きつけられます。

最後に

CSSは「サイトの見た目」を
整えるための魔法の道具です。

基本を押さえれば、読みやすくて
整理されたサイトが
作れるようになります。

見やすい設計ができれば、
それだけで大きな強みになります。

今回は以下の3つを学びました

1.CSSとは何か
2. なぜ「読みやすさ」が重要なのか？
3. CSSで読みやすい文章を作る方法

どうでしたか？
覚えること多すぎて
分からないって人

大丈夫です！

書いていけば自然と
コードが書けるように
なっていきます！

焦らなくて大丈夫です
一つ一つコードを
書いていきましょう！

このように、CSSを使えば文章の
「伝わり方」が大きく変わります。
次回は【中編】レイアウト編をお届けします！

これからもあなたのWeb制作の学習を
応援しています。
一緒に乗り越えていきましょう！

よっしー

よっしーの公式ライン【画像をタップ↓】