CSSって、なんだろう？？
みなさん、こんにちは！！
どうも、サイタマです！！
今回はCSSについて、綴っていきたいと思います。
私自身、CSSファイルを知ったのは、WEBクリエイターを勉強してからです。
WEBクリエイターでは、HTMLの技術よりCSSの技術の方が求められますので、CSSの理解が必要になります。
CSSの技術はそこまで難しくはありませんが、種類が多いので慣れるまでは時間がかかるかもしれません。
まずは、CSSの概要から説明します。
CSSはHTMLの表示を制御する言語である。
CSSはHTMLに、スタイルを提供し、フォントを変えたり、色を加えたり、複雑なレイアウトを組むことができます。
HTMLには複雑なレイアウトを組むことができませんので、CSSがHTMLのレイアウトを担当します。
HTMLとCSSの違い
両者の違いを簡単に表にしてみました。
| 種類 | 文書の記述 | 見た目の整形 |
|---|---|---|
| HTML | ○ | △ |
| CSS | × | ○ |
CSSの記述方法
ここでは、CSSをどのような記述にすると、HTMLが表示するのかを説明していこと思います。
まず、下記をご覧下さい。
h1 {
backgroun-color: #000000;
color: #ffffff;
}
上記のように、制御したいHTMLを選択し、波カッコで囲みます。
例：h1 { この中にh1をどのように表示させるかを記述します。 }
記述方法に関して、一貫性があるので簡単ですが、記述内容の種類が多いので1つ1つ覚えていかなければなりません。
では、実際に同様な記述をすると、HTMLが表示されるのか試してみましょう。
このブログでも、度々CSSの技術を使用しているので、お気づきの方はいると思います。
これはCSSの技術を使用しています。
このHTMLの表示は、このようなCSSの記述をしています。
h3 {
color: #444444;
background-color: #f3f3f3;
border-left: 10px solid #00ff00;
border-bottom: 2px solid #00ff00;
}
記述内容は、簡単に言葉で表現すると以下になります。
- colorでは、文字の色を指定しています。
- background-colorでは、背景色を指定しています。
- border-leftでは、左に10pxの罫線を緑色で引いています。
- border-bottomでは、下に2pxの罫線を緑色で引いています。
言葉で表現すると、CSSがHTMLにどのような効果をもたらすのかが、わかったと思います。
CSSを学習して気づいたのですが、ブログのレイアウトがうまい方は、CSSの使い方が上手いです。
まだまだ、CSSの技術は未熟な部分がありますが、今後はより見やすいブログを目指していきます。
