CSSはWEB上のデザインを担当する言語である
プログラミング初心者
『CSS？なんじゃそれ？HTMLとどんな関係があるの？』
こんにちは、AWAKOJIです。
今日も薬剤師をしながらプログラミングの勉強をしています。
プログラミングを勉強し始めたときにHTMLと一緒に出てくるのがCSSです。
読み方は文字通り『シーエスエス』です。
この記事では、CSSとは何か？その書き方について簡単にわかりやすく説明します。
理解しやすくするために下手ですが漫画もつけました。
5分もかからず読めるので少しお付き合いください。
漫画〜CSSとは〜
以上、CSSとは何かについて漫画で説明してみました。
ここからは文章でCSSについて簡単に説明したいと思います。
CSSとは？
CSSとは、HTMLと協力しながらweb上の画面をデザインしてくれる言語です。
HTMLは、webサイト上に表示される文字の位置や大きさなどを指定する言語です。
HTMLはタグと呼ばれる記号で文字を囲むことで文字の位置や大きさを指定します。
そしてCSSは、そのタグではさまれた文字の色や背景などのデザインを指定します。
CSSの具体例
実際に例をあげながら説明した方が理解しやすいと思います。
windowsでしたらメモ帳を開いてください。
macでしたらテキストエディットを開いてください。
そこに文章を書きます。
『僕はAWAKOJIです。』という文章をHTMLのタグである<p>と</p>ではさみます。
これを拡張子htmlで保存しましょう。
このファイルをブラウザで読み込むと
と画面に表示されるはずです。
ここまではHTMLとは？超初心者向けに簡単にわかりやすく説明(漫画付)の記事でも説明しました。
ここからCSSを使って文字を赤色にしてみます。
もう一度さきほどのhtmlファイルを開きます。
以下のように入力してください。
p{color:red; }
</style>
<p>僕はAWAKOJIです。</p>
これを保存して、再びブラウザで読み込んでみましょう。
と赤文字で表示されると思います。
<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ではバージョンではなくレベルといいます)
CSS1、CSS2、CSS3です。
現在、使用が勧められているのがCSS2.1です。
CSS3の一部は、まだ対応できていないブラウザもあるため注意が必要です。
あとがき
CSSは化粧に例えられると思います。
ブログを書く上で化粧(CSS)なしの文字(HTML)だけでは、だれも誰も振り向いてくれません。
り向いてくれるために化粧(css)を施すわけです。
【無料体験・全額返金】圧倒的に効率的なプログラミングスクール
独学でプログラミングを勉強するのは大変じゃないですか？
- ググるのが面倒
- エラーの対応に1日消費
- 重要なコードがわからない
お金はかからないものの、かなり効率が悪いです。
『Time is Money』
時間を節約し、効率的に勉強したいならプログラミングスクールを圧倒的におすすめします。
スクールに通って短期間で集中的に成長しちゃいましょう。
代表的なスクールは以下の２つ。
- TechAcademy
web系、アプリ系いずれもOK
完全オンラインでプログラミングを学習したい方 - テックキャンプ
web系、アプリ系いずれもOK
教室またはオンラインで学習したい方
この２つには以下のような特典もあります。
TechAcademy
- 1週間の無料体験
- １コース申し込むと、もう１コースプレゼント
テックアカデミー
- 1週間以内に申告あれば全額返金
- 転職できなかったら全額返金
かなりお得です。
確かにどのスクールも本格的にやれば20～30万くらいかかります。
でも、スキルを身に付けて案件を受注してしまえばすぐに回収できる金額です。
目安の報酬をまとめておくと、
- ランサーズ：1件10万くらい
- 中小企業：1件30万くらい
- 大手企業：桁違い
こんな感じです。
1ヶ月で回収できる料金をケチって、独学をつづけるのはセンスが悪いです。
この無料キャンペーンや全額返金制度はいつまで続くかわかりません。
なので、とりあえず試してみるのが良いかと思います。
テックキャンプに関しては無料でカウンセリングを受けることができます。
プロのカウンセラーが個別に悩み聞いてくれるので、まずは話をしてみてもいいですね。
(下のバナーから詳細を見れます。)
受講料の割引もあるのでお得です。