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ページ)にしましょう!

【無料体験・全額返金】圧倒的に効率的なプログラミングスクール

独学でプログラミングを勉強するのは大変じゃないですか?

  • ググるのが面倒
  • エラーの対応に1日消費
  • 重要なコードがわからない

お金はかからないものの、かなり効率が悪いです。

『Time is Money』
時間を節約し、効率的に勉強したいならプログラミングスクールを圧倒的におすすめします。
スクールに通って短期間で集中的に成長しちゃいましょう。

代表的なスクールは以下の2つ。

  • TechAcademy
    web系、アプリ系いずれもOK
    完全オンラインでプログラミングを学習したい方
  • テックキャンプ
    web系、アプリ系いずれもOK
    教室またはオンラインで学習したい方

この2つには以下のような特典もあります。

TechAcademy

  • 1週間の無料体験
  • 1コース申し込むと、もう1コースプレゼント

テックアカデミー

  • 1週間以内に申告あれば全額返金
  • 転職できなかったら全額返金

かなりお得です。

確かにどのスクールも本格的にやれば20~30万くらいかかります。
でも、スキルを身に付けて案件を受注してしまえばすぐに回収できる金額です。

目安の報酬をまとめておくと、

  • ランサーズ:1件10万くらい
  • 中小企業:1件30万くらい
  • 大手企業:桁違い

こんな感じです。
1ヶ月で回収できる料金をケチって、独学をつづけるのはセンスが悪いです。

この無料キャンペーンや全額返金制度はいつまで続くかわかりません。
なので、とりあえず試してみるのが良いかと思います。

TechAcademy:無料で1週間体験
テックキャンプ:全額返金制度

テックキャンプに関しては無料でカウンセリングを受けることができます。
プロのカウンセラーが個別に悩み聞いてくれるので、まずは話をしてみてもいいですね。
(下のバナーから詳細を見れます。)
受講料の割引もあるのでお得です。

スポンサーリンク

おすすめ記事

フォローする