【プログラミング初心者向け】CSSとはなんなのか説明していきます(*'ω'*)

f:id:CONPURO:20200910041411j:plain

みなさんこんにちは(*'▽')
今回はプログラミング言語CSSについて説明していきます(*´ω`)


この記事は、そもそもCSSがなんなのか?CSSを学ぶメリットとはなんなのか?
のようなことが書いてあり、書き方についてはあまり詳しくは書いていないので、そこには気を付けてください。


この記事を書いた人は、プログラミング学習歴が4ヶ月です。
今までに学んだ言語はHTMLとCSSJavascriptです。
まだまだ未熟ですが頑張ります(*'ω'*)


目次

 


CSSの基礎

f:id:CONPURO:20200910041438j:plain


CSSってそもそもなに?

まず、CSSが何なのか説明していきます。
ウィキペディアにはこのように書かれています。

 

Cascading Style SheetsCSS、カスケーディング・スタイル・シート、カスケード・スタイル・シート、日: 段階スタイルシート[1])は、HTML や XML の要素をどのように修飾(表示)するかを指示する仕様の一つで、World Wide Web Consortium (W3C) がとりまとめ勧告する。文書の構造体裁分離させるという理念を実現するために提唱されたスタイルシートの具体的な仕様の一つ。

 引用元:Cascading Style Sheets - Wikipedia

 


HTMLというのは、ハイパーテキストを作るためのマークアップ言語の1つです。
くわしくはこの記事を見てください!(^^)!
【プログラミング初心者向け】HTMLについて解説していきます。 - CONPUROの日記

 


XMLはHTMLと同じマークアップ言語の1種です。


修飾は文章をわかりやすくするために飾りをつけることです。小学校や中学校のときに国語の授業で習ったと思います。


World Wide Web Consortium (W3C)は
Webで使用される技術を標準化する団体のことです。
例えばHTMLやCSSなどは昔はいろいろな書き方がありました。しかし、それだと面倒くさいので全て統一させるというような事をこの団体はやっています。


文書の構造と体裁を分離させるというのは、昔CSSがなかったころ、ウェブサイトの飾りつけはすべてHTMLの中でしていました。しかしそれだとコードがごちゃごちゃしたり、面倒くさかったりなど、いろいろ問題がありました。


そこでウェブサイトの飾りつけをHTMLの外でやれたらなというような願いが生まれました。その願いのことだと思ってください。




これらをざっくりまとめると
CSSは、HTMLやXMLを飾り付けする
プログラミングマークアップ言語という事です!(^^)!

CSSを学ぶメリット

CSSを学ぶメリットは下の2つです。



  • 文字などのHTMLで書いた要素を装飾して相手に伝わりやすくなる
  • プログラミングの土台を固めることができる

 

 

それぞれ説明していきます(*´ω`)

 

文字などのHTMLで書いた要素を装飾して相手に伝わりやすくなる

 

例えば友達の家でクリスマスパーティーを開くという場面があります。そのときにメインのクリスマスケーキのほかになにか飾りがないと楽しいという思いが伝わりにくいと思います。逆に飾りがあると、楽しいという思いが伝わりやすくなると思います。


プログラミングも同じで、ただ文章だけを書いて、飾りを何もつけないでいると、その書いてある内容が伝えたい思いが伝わりずらくなってしまいます。
なので飾りをつけてあげると思いが伝わりやすくなるというような感じです。

 
プログラミングの土台を固めることができる

 

このCSSマークアップ言語なので簡単です。しかし、その簡単なところがかなり重要です。例えば、ビルを作るとき、土台がぐにゃぐにゃしているところにしっかりとしたビルが作れるとおもいますか。おそらく作れないとおもいます。作れたとしても、ぐにゃぐにゃしてすぐにビルが崩れてしまうと思います。


プログラミングも同じでまずHTMLやCSSなどの土台の部分をきちんとしておかないと、他の言語をやったときに崩れてしまいます。なのでCSSを学ぶ必要があります!(^^)!

 

CSSを書くために必要な環境
  

さあ、CSSを書くぞを言う気持ちになっていると思いますが、CSSを書くために必要な環境、つまり準備が必要になってきます。しかし、とても簡単ですぐにできます。


CSSを書くために必要な準備は以下の通りです(*´ω`)

 

  1. パソコンを起動する。
  2. パソコンに入っているメモ帳アプリを開く。
  3. HTMLを少し書いてみる
  4. HTMLの<head>~~~</head>の中に
    <link  rel="~~~" href="~~~" >をいれる。

 

1と2はHTMLと同じなのでここでは詳しくは説明しません。


3.HTMLを少し書く

例えば、特にクリスマスパーティーとかもないような日に部屋をクリスマスっぽく飾りつけをしたらおかしいですよね。そのような飾りつけはクリスマスパーティーとかの特別なイベントがあるときにするものですよね。


CSSも同じで飾り付ける元がないとおかしいです。なのでHTMLを少し書いてください。別にたくさん書いてもかまいません。



4.HTMLの<head>~~~</head>の中に
<link  rel="~~~" href="~~~" >をいれる。


例えば、パーティーを友達の家で開きます。自分の家に友達は来ません。それなのに、自分の部屋の飾りつけをしていたらおかしいですよね。


CSSも同じで、飾りつけをする場所を明確にしないといけないです。
そこで必要になってくるのがこの作業です。


relの""の中には、stylesheetと書いてください。


hrefの""の中には、自分の作った、または作ろうとしているCSSファイルのファイル名を書いてください。

ちなみにここまでで出てきたのはHTMLファイルで、CSSファイルはまだ出てきていません。これらが書けたら、CSSを書くことができます。
あと、HTMLと同じように、CSSファイル名の後ろに、拡張子をつけるのを忘れずにしてください。今回のCSSの拡張子は 「.css」(ドットシーエスエス)です。
例えば、puroguraming.cssのような感じです!(^^)!

 


CSSの書き方

さて、準備ができたのでCSSの書き方を説明していきます。
CSSを書くとこんな感じになります(*´ω`)

p{

  color : red ;

}

 

まずやりかたを箇条書きでまとめると以下の通りです。

 

  1. 自分の書いたHTMLの要素を書く
  2. 要素の前に中カッコを書く
  3. 中カッコの中にHTMLの要素をどのように飾っていくのかを書く
    (いくつでも大丈夫)

 


コメント


HTMLの方でも説明しましたが、プログラミングはほかの人と共同で作業をすることが多いです。なので、ほかの人が自分が作ったプログラムをみて、どこがどういう役割を持っているのかを理解してもらうことが大切です。


そのためにプログラムのコードの近くにコメントを書きましょう。


CSSの場合、書き方としては次の通りです(*´ω`)

  

p{

   //文字の色を赤くする
   color : red ;
   //文字の大きさを30pxにする
   font-size : 30px ;



 

文字が薄くなっているところがコメントです。コメントの前には基本的に//(ダブルスラッシュ)を付けます。そうしないとコンピュータがプログラムだと認識してページが思ったように表示されなくなってしまいます( ;∀;)

 

今回の記事は以上です。
ここまで読んでいただきありがとうございました。