読者です 読者をやめる 読者になる 読者になる

とあるITエンジニアたちの備忘録

新米エンジニア5人がお送りする、ちょっとためになる話

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の技術は未熟な部分がありますが、今後はより見やすいブログを目指していきます。

広告を非表示にする