WEBデザイナーへの道
WEBデザイナーへの道#006
- WEB
- 2022年07月07日 17時15分
前回「WEBデザイナーへの道#005」では、HTMLの注意点について解説しました。
その中で「HTMLは文章に意味を持たせる為だけに使う」「HTMLを装飾目的で使わない」をお伝えしました。
今回は、Webサイトの見た目を司るスタイルシートについて解説していきます。
- 1．スタイルシートとは
- 2．スタイルシートはどこに書く
- 2-1．インライン
- 2-2．styleタグ
- 2-3．外部ファイル
- 2-4．どこに書くのがベストか？
- 3．スタイルシートの書き方
- 3-1．セレクタ
- 3-2．プロパティと値
- 4．スタイルシートフレームワーク
- 4-1．フレームワークのメリット・デメリット
- 4-2．代表的なフレームワーク
- 4-3．リセットCSS
- 5．まとめ
1．スタイルシートとは
スタイルシートとは文章の見た目を装飾する言語です。
主にCSS（Cascading Style Sheets、カスケーディング・スタイル・シート）と言われます。
HTMLは文章に意味を持たせる言語、と解説してきました。
CSSは文章を装飾することに特化した言語です。
HTMLとCSSを組み合わせることで、見た目が良いWebサイトが出来上がります。
2．スタイルシートはどこに書く
スタイルシートには３パターンの書き方があります。
2-1．インライン
HTMLタグにはstyle属性があります。そのstyle属性にスタイルシートを指定することができます。
同一スタイルを適用したいHTMLタグが複数ある場合でも１つ１つにstyleタグを記述する必要があるため面倒になります。
また、複数個所でスタイルを指定することになるため保守性が低下します。
<body>
<p style="color:red;">この文字は赤で表示/p>
</body>2-2．styleタグ
headタグ内にstyleタグを使って、スタイルをまとめて記述することができます。
styleタグで一括指定することで同一スタイルを適用したい場合でも容易に対応できます。
しかし、Webサイトに複数のWebページがある場合は全てのページにスタイルを記述する必要があります。
こちらも保守性が低下します。
<head>
<style>
p { color : red;}
</style>
<head>
<body>
<p>この文字は赤で表示</p>
</body>2-3．外部ファイル
HTMLとは別にスタイル専用のファイルを用意してスタイルシートを記述します。
HTMLではheadタグ内のlinkタグを使ってスタイルファイルを読み込みます。
複数のWebページがある場合でもスタイルを１カ所にまとめてあるため、保守性が向上します。
<head>
<link href='style.css' />
<head>
<body>
<p>この文字は赤で表示されます</p>
</body>p { color : red;}2-4．どこに書くのがベストか？
Webサイト制作の現場で最も主流なのが外部ファイルです。
外部ファイル以外のstyleタグは、滅多に使いません。
ですが、インラインやstyleタグにもメリットはあります。
まずは、Webページの表示スピードが速くなります。表示スピードの観点からGoogle社ではstyleタグを推奨しています。
また、インラインではピンポイントでスタイルを適用できます。
別な話になってしまいますが、phpやrubyなどのプログラミング言語を使用してHTMLを作り出す方法があります。
この方法を使えば、スタイルを別ファイルに用意して、HTMLを作り出す際にstyleタグに別ファイルのスタイルを適用させることができます。
Webサイトの多くは、この方法で作られています。
将来的にはこの方法も解説していく予定ですが、まずはHTMLとcssの基本を習得できるよう頑張りましょう。
3．スタイルシートの書き方
スタイルシートの基本的な書き方は、次のようになります。
スタイルを指定する対象（セレクタ）に続いてカーリーブラケット「{}」でプロパティと値を囲み、プロパティと値の間はコロン「:」で区切ります。そして値の末尾にセミコロン「;」を付けます。
セレクタ {
プロパティ : 値;
}3-1．セレクタ
スタイルを指定する対象を指定します。セレクタの指定方法は３通りあります。
1つ目はHTMLタグを指定する方法です。
HTMLタグでセレクタを指定した場合は、該当するHTMLタグすべてに適用されます。
次のサンプルでは、pタグのcolorプロパティ（文字の色）に値red（赤）を指定しています。
その為、３行すべてが2倍の大きさで表示されます。
HTMLタグでセレクタ指定した場合は、一部タグだけ適用外にすることはできません。
<p>この文字は赤</p>
<p>この文字は赤</p>
<p>この文字は赤</p>p {
color : red;
}２つ目はidを指定する方法です。
HTMLタグにはid属性があります。
対象のidをシャープ「#」を使って指定します。
基本的にidは重複することができません。
そのため、id１つ１つに対してスタイルを指定する必要があります。
<p id="text1">この文字は赤</p>
<p id="text2">この文字は青</p>
<p id="text3">この文字は赤</p>#text1 {
color : red;
}
#text2 {
color : blue;
}
#text3 {
color : red;
}３つ目はclassを指定する方法です。
HTMLタグにはclass属性があります。
class属性は、グループを意味します。
対象のclassをピリオド「.」を使って指定します。
class属性はid属性とは違い、重複できます。
<p class="text-red">この文字は赤</p>
<p class="text-blue">この文字は青</p>
<p class="text-red">この文字は赤</p>.text-red {
color : red;
}
.text-blue {
color : blue;
}実際のWebサイト制作現場では、すべてのパターンを使用します。
まずは、HTMLタグ指定で初期設定のスタイルを決めます。
その後、class属性でグループ単位にスタイルを適用し、一部変更したいときにid属性を使います。
または、class属性を複数指定することもあります。
文字の大きさを指定するclass、文字の色を指定するclassなどグループを複数作り、その組み合わせでスタイルを適用します。
どの単位（グループ）でclassを作るか。
Webサイト制作現場においてHTML、CSSを記述するコーダーの腕の見せ所です。
<p class="text-red">この文字は赤</p>
<p class="text-red text-x2">この文字は２倍の赤</p>.text-red {
color : red;
}
.text-x2 {
font-size : 200%;
}3-2．プロパティと値
プロパティには100を超える種類があります。
そしてプロパティに適した値を指定する必要があります。
代表的なプロパティとして
| プロパティ | 用途 | 値の例 |
|---|---|---|
| color | 文字の色 | red、blueまたは#FF0000、#0000FFなど |
| font-size | 文字の大きさ | ？%、？px、？ptなど |
| font-weight | 文字の太さ | normal、boldなど |
| background-color | 背景の色 | red、blueまたは#FF0000、#0000FFなど |
| border-color | 罫線の色 | red、blueまたは#FF0000、#0000FFなど |
| border-width | 罫線の太さ | medium、thickまたは1px、10pxなど |
| text-align | 文字位置 | left、center、right |
| margin | 余白 | 10px、20pxまたは10%、20%など |
などがあります。
１つ１つ丁寧に解説したいところですが種類が多すぎる為、今後の解説の中で都度解説していきます。
【参考】HTMLクイックリファレンス
4．スタイルシートフレームワーク
id名、class名の命名は、基本的に自由です。
英数字とハイフン「-」とアンダーバー「_」を使用することができます。
自由と言うのは何でもできて便利に見えますが、自由が故にしっかりとルールを設けないと煩雑になります。
まったく同じスタイルで名前が違うスタイルが出来てしまいます。
そこで、あらかじめルール決めされたフレームワークと言うものがあります。
4-1．フレームワークのメリット・デメリット
フレームワークは、よく使うclassがあらかじめ定義されているスタイルシートです。
すでに用意されているスタイルシートをlinkタグで読み込むことで、すぐに使うことができます。
フレームワークのメリットは、なんと言ってもあらかじめルール決めされていることです。
自分でcssを作らなくても、HTMLタグに「文字を赤にする場合はtext-redクラス」「文字を右寄せする場合はtext-rightクラス」などのclass属性を指定するだけで統一されたデザインになります。
デメリットもあります。
あらかじめ用意されているデザインになるため、オリジナル感がなくなることです。
そして、どのようなclassが用意されているか覚える必要があります。
それでもデメリットを補うほどフレームワークは大変便利なものです。
4-2．代表的なフレームワーク
Tailwind CSS
スタイルが細かく定義されおり、組み合わせて使うことで自由度が増すのが特徴です。
BootStrap
あらかじめデザインされたスタイルが用意されており、デザインセンスに自信がなくても相応のWebサイトが容易にできます。フレームワークの中で最も人気があります。
Bulma
スマホ向けWebサイトに重点を置いており、BootStrapよりも部品数が少ないものの、こちらもあらかじめデザインされていることから容易に使用することが可能です
Materialize
Googleが推奨するデザインの考えに基づいて作られており、BootStrapに似たデザインながらアニメーションを加えるなど人気のあるフレームワークです
Foundation
制作の高速化、表示の高速化を重点にしたフレームワークでFacebookなどでも採用されている人気があるフレームワークです。
Pure.css
Yahooが開発した最低限のスタイルで構成されたフレームワークです
このほかにも数多くのフレームワークが用意されています。
フレームワークの採用には賛否があることも事実ですが、使い方によっては大変便利です。
ちなみにこのサイトではBootStrapを採用しています。
4-3．リセットCSS
前回（第5回）で、ブラウザごとの見た目の違いを紹介しました。
いくらスタイルシートで装飾したとしても、ブラウザごとに元々の違いがあったのでは意味がありません。
この違いは、ブラウザごとにあらかじめ持っているスタイルがあるからです。
このブラウザごとにあらかじめ持っているスタイルを取り消す為だけのフレームワークがあります。
リセットCSSやノーマライズCSSと呼ばれるものです。
destyle.css
とても強力なリセットで、ほぼ白紙状態になります。
例えば、h1タグもh6タグも同じ文字の大きさになるなど、ブラウザが持つCSSがなかったことになるため、１から全てを自分で装飾することになります。
Normalize.css
こちらは、ブラウザの差異を統一することに重点を置いています。
その為、どのブラウザで見てもh1タグの大きさは同じ、h6タグの大きさも同じ、でもh1とh6の大きさは異なるようになります。
sanitize.css
Normalize.cssの拡張版に位置します。ブラウザ間の差異をなくした後、誰しもが調整するであろう個所をあらかじめ調整します。
などがあります。
- リセットCSSでブラウザごとの差異をなくす
- フレームワークで統一したデザインを適用
- 独自のスタイルシートで細部を調整する
の流れにすると、より簡単にWebサイトを制作できるようになります。
リセットcssにもデメリットがあります。
それは、ブラウザがバージョンアップする都度、リセットcssもバージョンアップが必要なことです。
ブラウザのバージョンが変わると、当初予定していなかった差異が生じることがあります。
リセットCSSを使用しているから「ブラウザ間の差異はない」と思い込むと、予期せぬデザイン崩れが発生する場合があります。
5．まとめ
今回は、CSSの書き方について概要を解説しました。
実際のWebサイト制作現場では、フレームワークを使って制作スピードをあげたり、経験豊富なWebサイト制作会社であれば、自社独自のフレームワークを用意している場合もあります。
まずは、どのような原理でスタイルが適用されているかをマスターすることを目指しましょう。
そのうえでフレームワークを使うことで制作効率が向上すると考えた方が良いと思います。
次回から実践を交えながらHTMLタグとCSSについて、さらに詳しく解説していく予定です。
- PR -
Google Adsense
- PR -
Google Adsense