【新人Web担当の方へ】Webページ作成のための基本的な要素～CSS編～
最終更新日：2023/11/17
こんにちは。
スターティアラボの稲木です。
前回HTMLに関してご紹介しましたが、HTMLについて全く知らなかった方もご覧いただき、少しでもHTMLの概要について知っていただければ、嬉しいです。
さて今回は、予告していましたCSSについてご紹介します。
HTMLはテキストや画像を表示させるための骨組みだとご紹介しましたが、CSSは骨組みを装飾する「飾り」を司るとイメージしながらご覧いただけばと思います。
つまり、CSSは企画したデザインを表現するために必要な要素となっております。
また、本日の内容もWeb初心者の方向けに、エラーが発生した・思うように作成できないなどの問題が起きた際に、問題を切り分けるためにも必要な知識にもなりますので、なるべく分かりやすく進めていきますね！
1、CSSって何やってるの？
CSSとはCascading Style Sheets（カスケーディング・スタイル・シート）の略で、Cascadingは「階段状に連続する滝」、Style Sheetsはこの言葉でCSSを指すこともありますが、構造化された文書などで表示する形式（装飾）を制御するものという意味となります。
簡単に言うと、Webサイトを修飾して表示を行うために制御する命令がCSSとなります。
イメージしていただくとしましたら、Webとは異なりますが日常で使用しているWordやパワーポイントがわかりやすいと思います。スタイル機能（装飾）が機能しているので、皆さんはテキストや画像を自由に変更できているかと思います。
つまりCSSとは、Webサイト上でテキストの色や大きさを変更する場合や画像の表示サイズを決めることを設定するために、HTMLとは別に書く必要がある決め事となります。
それでは、WebサイトでどのようにCSSが記述されて、使用されているのかを確認していきたいと思います。
2、どうやるの？
大きくは2通りの方法があり、
- 記述されたHTMLの中に命令を書く方法
- 適用させたい命令をページ全体に読み込ませて適用させる方法
となります。
2通りの方法はどのような方法で表示されているか下記のイラストから、概念的なイメージとして捉えていただければと思います。
HTMLの中に命令を書く方法
HTMLの中に命令を書く方法は前回ご紹介しましたHTMLのタグの中に、装飾するための要素を直接書く方法です。
例を挙げますと、 <p style=“color:red;”>赤色が表示されます。</p> のようにHTMLの開始タグへ style=“○○:○○;”と命令を書くと書かれた内容を表示するように装飾がされます。この場合だとHTMLタグ内で囲まれた範囲のテキストが赤色になります。
“(ダブルコーテーション)で囲まれた中はHTMLと同様に決まった規則を書くと表示されるようになっています。
HTMLタグにstyleを使って、色をつけるCSSを書くことでHTMLタグに挟まれた文字は指定された色として表示されるようになります。
HTMLタグにstyleを使って、色をつけるCSSを書くことでHTMLタグに挟まれた文字は指定された色として表示されるようになります。
適用させたい命令をページ全体に読み込ませる方法
ページ全体に命令を読み込ませて、適用させる方法はHTMLの表に見えていないheadと呼ばれる箇所に記載をして、HTMLの装飾部分に表示をするように適用させると装飾されます。
実際に記述する場合は、命令の内容とHTMLに命令を受け取るためのクラスを設定する必要があります。
命令の内容
.txt_blue{
Colo:blue;
font-weight:bold;
}
命令を受け取るための記述
<p class=”txt_blue”></p>
HTMLタグにclassを使って、色をつけるCSSを確認させて、HTMLタグで表現するための装飾する命令を指定します。
あれ、、、どちらも直接書いていないか？と感じる方は多くいらっしゃるかと思いますが、これは装飾をするための命令が頻発するかそれともその場限りの命令になるかによって、使い方が変わるとイメージしてください。
例えば、color:red;やfont-weight:bold;など複数の命令を使用する場合、頻発するものには共通の命令をまとめ、クラス(class)で呼び出せるようすれば、HTML上では短い内容で表現が行えます。またスタイル(style)は一部分のみに使用する場合の命令に近く、頻発するクラス(class)にない要素を暫定的に補うための要素とイメージしていただければと思います。
要は、頻発するクラス(class)はまとめて全体のHTMLを簡潔に書き、要素を暫定的に補うためにstyleを使用していると捉えていただければと思います。
3、書くのは難しい？
CSSの記述を書くこと自体は、初心者の方でも行うことは可能です。
例であげると前章の①styleはHTMLのタグに装飾内容を少し書くことは比較的行いやすいのですが、②classの命令内容と命令を受け取るクラスを設定するのはちょっと難易度が上がります。
また、書き方の規則を把握して、装飾したい内容を書いたとしても思い通りに表示されない場合がございます。
それは、冒頭でご紹介したCSSのCascading 「階段状に連続する滝」と呼ばれる所以かと思いますが、１つの命令が適用されているだけではなく、複数の命令がかかった上での装飾が表示されている場合が多く、内容を理解していないと修正が難しくなります。
そのため、Web担当になり始めの方はCSSを変更されたい場合は社内の方や制作会社の方にご相談する方法が一番となります。
ただ、制作会社の場合は修正内容の難度によって時間の他に費用が発生する場合がありますので、本当に相談内容が費用をかけて実現させる内容かをまずは相談していただくことから始めていただければと思います。
4、まとめ
いかがでしたでしょうか？
今回のCSS編は、基本構造というより概念的な部分が大きく、イメージとして捉えていただければと思います。
実は、私自身まだまだCSSの一部しか把握できておらず、みなさまと同じく学ぼうとしている最中になります。そんな中でいきなり難しいことを教えられても、ナンノコッチャとなって学ぶ姿勢を崩してはいけないかと思いまして、今回はここまでとなります。
ちょっと詳しい内容はまた時期を開けてご紹介できればと考えております！
そして、次回は今回ご紹介したCSSとHTMLだけではなく、Webサイトでは必要な要素としてお聞きしたことのあるJavaScriptと呼ばれる動きを司る命令があります。
このJavaScriptも理解しているのとしていないのでは、Webサイトへの理解度が格段に変わりますので、次回はそのJavaScriptについてご説明しますね。
それでは、次回またお会いしましょう。
