フロントエンドエンジニア養成所

CSSとは

CSSとは、ウェブサイトの装飾やレイアウトなどを定義する為の言語です。

先の記事で解説したHTMLによって定義されたウェブサイト上の文字やボタンの色を変更したり、コンテンツの間隔を調整したりすることができます。

先の記事でHTMLはケーキで例えると生地としましたが、CSSはクリームやイチゴで飾り付けをする(デザインの)役割と、ケーキの形や層を整えたり、並べ方を工夫したりして全体の見た目や配置を整える(レイアウトの)役割を担っています。

先のHTMLで作成したsample-html.htmlにcssのコードを追加したファイルを作成しましょう。ファイル名はsample-css.htmlとします。

<button>サンプル</button>

<!--ここから-->
<style type="text/css">
    button {background-color: red;}
</style>
<!--ここまで追加-->

CSSのコードはstyleタグ(<style>...</style>)の中に記載しています。

CSSでは、ボタンの色を赤にするコードを書いています。

保存したsample-css.htmlをブラウザ(Google Chrome, Safari, MicroSoft Edgeなど)で開くと次の画像のように表示されます。

Alt text

このサイトを運営している人

運営者の写真

はじめまして。このサイトを運営しているsidsydです。

エンジニアをしたり、日本酒サイト「酒道」を運営したりしております。

▶ 運営者情報ページへ