- CSSについて知りたい
- WEBコーディングについて概要を知りたい
- HTMLとCSSの違いがわからない
このような方に向けて記事を書きます。
結論として、CSSはhtmlメールの文章に対して装飾を与えるデザイン要素です。CSSを使うことで、見やすい配置やデザインのWEBページを制作可能です。複数ページにわたって設定ができるので、制作効率・運用が上がるメリットがあります。
なぜCSSが必要なのか?
ボクは元エンジニアです。大学も情報工学部でした。今はWEBコンサルをしていて、IT関連の仕事を始めて10年以上の経験があります。
意外とどうしてCSSが必要なのか？をイマイチよくわかってませんでした。なので昔の自分がわからなかったことを解説する視点で、説明していきますね。
・デザインの標準化が可能で外出しファイルに出来る
だから、保守・運用効率が高まる
だから、HTMLが見やすくなる
という感じです。
CSSは、デザイン要素を含む選択に対してプロパティーを設定し、デザインを設定できます。
例えばフォントを大きくしたり、見出しの背景を色付けする、画像とテキストのレイアウトを横に配置するといったものです。文字の大きさや、文章の間のスペースなども修正して対応が可能です。
これはHTMLの中に直接記載をして調整も可能です。しかしHTMLの情報量が多くなり、読みにくくなります。
ページが複数あるホームページにおいては、デザイン要素の修正が発生した場合に、複数のページにまたがって修正が必要となります。すると工数がかかりますしヌケモレも発生しやすくなるので、保守性が落ちます。
ですからCSSのメリットとして、外部ファイルに切り出して、idやClassといったタグにマークをつけてデザインの標準化を行います。
CSSに関しては色んな人が更新をしています。自分がゼロから作らなくても、他の人が作ったものを、そのまま使うことも可能です。参考にしたいサイトからCSSを使わせてもらうのもアリです。このように、CSSはWEBページ制作に重要な役割を持ちます。
CSSの設定方法
HTMLとCSSの繋ぎ込み、気になりませんか？
繋ぎ込みは、idと classというキーを使って、かつタグとあわせてつなぎ込みを行います。
CSSは基本的に別ファイルで出来ます。そうなった場合に、HTMLとどう連携するのか？がidやclassという考え方です。それぞれを結びつける変数を持って、名前をつけることで紐付いて調整ができます。
例えば
<HTMLファイル>
h1 class=“test1”
<cssファイル>
h1 .test1
というような形で、”test1”という文字列をキーにファイル間での紐付けを行い、調整していく、ということですね。
CSSを構成するプロパティ
htmlのタグに対して、「プロパティ」という考え方があります。これがCSSで設定する対象となるものです。
具体的には、下記のように設定できます。
■色系
フォントや枠組みの色を設定できます。
color
■フォント系
フォントの種類や太さを設定できます。
font-family
フォントの種類を設定できます
font-weight
フォントの大きさを設定できます
line-height
行間の幅を設定できます
■レイアウトの設定
margin
枠の外のスペースを調整できます
padding
枠内のスペースを調整できます
float
浮かせて重ねたり、横に並べたりします
z-index
ポップアップで要素の上下を設定します
レイアウトの設定はイメージが付きづらい部分なのですが、画像を配置するときなどは非常によく使います。実際にWEBページのCSSを見て、どのように設置されているのかを見ると理解が深まりますよ。
まとめ
CSSはHTMLをデザインするために、別に切り出したスタイリング様のファイルです。WEBページが見やすく、かつ効率的に作成ができます。作業側としては調整が必要で細かな知識が必要です。
HTMLタグのプロパティや属性が集まったもの、と理解すれば良いのではないでしょうか。
