CSSとは?書き方を簡単にわかりやすく説明(漫画付)

記事のポイント
CSSはWEB上のデザインを担当する言語である

CSSとは?書き方を簡単にわかりやすく説明(漫画付)

プログラミング初心者 『CSS?なんじゃそれ?HTMLとどんな関係があるの?』

プログラミング初心者
『CSS?なんじゃそれ?HTMLとどんな関係があるの?』

こんにちは、AWAKOJIです。
今日も薬剤師をしながらプログラミングの勉強をしています。

プログラミングを勉強し始めたときにHTMLと一緒に出てくるのがCSSです。

読み方は文字通り『シーエスエス』です。

この記事では、CSSとは何か?その書き方について簡単にわかりやすく説明します。

理解しやすくするために下手ですが漫画もつけました。
5分もかからず読めるので少しお付き合いください。

スポンサーリンク

漫画〜CSSとは〜

CSSとは、cadcading style sheetsの略で web上の画面をデザインしてくれる言語である HTMLタグではさんだ文字のデザインを指定するk戸手役目を果たす CSSは化粧と同じ 顔(webサイト)に化粧(CSS)をほどこしてみんなにふりむいてもらおう
以上、CSSとは何かについて漫画で説明してみました。

ここからは文章でCSSについて簡単に説明したいと思います。

CSSとは?

CSSとは、HTMLと協力しながらweb上の画面をデザインしてくれる言語です。

HTMLは、webサイト上に表示される文字の位置や大きさなどを指定する言語です。
HTMLはタグと呼ばれる記号で文字を囲むことで文字の位置や大きさを指定します。

そしてCSSは、そのタグではさまれた文字の色や背景などのデザインを指定します。

CSSの具体例

実際に例をあげながら説明した方が理解しやすいと思います。

windowsでしたらメモ帳を開いてください。
macでしたらテキストエディットを開いてください。

そこに文章を書きます。

<p>僕はAWAKOJIです。</p>

『僕はAWAKOJIです。』という文章をHTMLのタグである<p>と</p>ではさみます。
これを拡張子htmlで保存しましょう。

このファイルをブラウザで読み込むと

僕はAWAKOJIです。

と画面に表示されるはずです。

ここまではHTMLとは?超初心者向けに簡単にわかりやすく説明(漫画付)の記事でも説明しました。

ここからCSSを使って文字を赤色にしてみます。

もう一度さきほどのhtmlファイルを開きます。
以下のように入力してください。

<style>
p{color:red; }
</style>
<p>僕はAWAKOJIです。</p>

これを保存して、再びブラウザで読み込んでみましょう。

僕はAWAKOJIです。

と赤文字で表示されると思います。

<style>と</style>で囲まれたp {color: red ;}がCSSになります。

これは、
『pタグで囲まれた文字のcolorをredにせよ』
という命令になります。

CSSを使ってタグではさまれた文字のデザイン(スタイル)を指定したわけです。

ちなみに、
pの部分がセレクタ
colorの部分がプロパティ名
redの部分がプロパティ値
といいます。

CSSとは何の略?

CSSとはCascading Style Sheets:カスケーディングスタイルシートの略です。
カスケードのデザインシートという意味です。
カスケードは連なった小さな滝を意味します。

なぜカスケードという言葉が使われるかというと、CSSの継承というのが関係します。

CSSの継承というのは、指定したデザインが、内部のタグ内の文字にも影響することをいいます。

こんな感じです。

HTMLファイルの入力

<style>
body{color:red; }
</style>

<body>
こんにちは。
<p>僕はAWAKOJIです。</p>
</body>

表示される内容

こんにちは。
僕はAWAKOJIです。

結果として表示されたのは、内部の<p>のタグで囲まれた文字の色も赤色に変わりました。
CSSでは、ではさんだ文字を赤色のデザインにするように指定していますが、内部のタグ内のデザインにも影響をおよぼすというわけです。

これが継承です。

滝の水がどんどん次の滝に流れ込むイメージからCSSという言葉ができたようですね。

CSSのバージョン(レベル)

CSSにはいくつかバージョンがあります。(CSSではバージョンではなくレベルといいます)

CSS1、CSS2、CSS3です。

現在、使用が勧められているのがCSS2.1です。

CSS3の一部は、まだ対応できていないブラウザもあるため注意が必要です。

あとがき

CSSは化粧に例えられると思います。

ブログを書く上で化粧(CSS)なしの文字(HTML)だけでは、だれも誰も振り向いてくれません。

り向いてくれるために化粧(css)を施すわけです。

しっかり化粧(CSS)をして振り向いてくれる顔(webページ)にしましょう!

スポンサーリンク

おすすめ記事

フォローする