おしえて！CSSの書き方
HTMLというプログラミング言語でWebページに表示したいコンテンツを書くことができますが、これだけでは質素なページにしかなりません。
（HTMLの書き方については「おしえて！HTMLの書き方」で紹介しています。）
そこで登場するのがCSSというプログラミング言語です。
CSSはCascading Style Sheets（カスケーディングスタイルシート）の略です。
では、早速書き方をお伝えしていこうと思います。
基本的な書き方
以下にHTMLとCSSのサンプルを示します。
HTML
<html>
<head>
<style>
p {
color: red;
}
</style>
</head>
<body>
<p>テスト</p>
</body>
</html>
これをブラウザで開くと以下のように見えます。
おわかりになるでしょうか。
HTMLにPタグを用意して「テスト」と書きました。
そして、「テスト」の文字が赤くなっています。
文字を赤くしているのがCSSです。
CSSは通常HTMLのheadタグの中で読み込みます。
上記ではstyleタグの中でpタグの文字を赤くするよう、CSSを記述しています。
CSSはHTMLとはちょっと違う書き方をしていますね。
説明しますと、
どこ（セレクタ）に何（プロパティ）をどうする（値）ということを書きます。
上記の場合はpタグ（セレクタ）の色（プロパティ）を赤くする（値）となります。
まずはセレクタを書きます。セレクタとは装飾をつけたい要素のことを指します。pとかtableとかhtmlのタグ名を書くか、クラス名、id名を書きます。
タグ名を書くとWebページの中でそのタグが使われている所すべてに装飾が適用されます。
いや、全部には適用させたくなくて一部の要素にだけ装飾したいです、という場合はクラス名やid名を指定します。
クラス？id？
以下のコードを見てください。
HTML
<html>
<head>
<style>
p {
color: red;
}
.blue-text {
color: blue;
}
#orange-text {
color: orange;
}
</style>
</head>
<body>
<p>あいうえお</p>
<p class="blue-text">かきくけこ</p>
<p>さしすせそ</p>
<p class="blue-text">たちつてと</p>
<p id="orange-text">なにぬねの</p>
</body>
</html>
CSSを追加してみました。
pタグは文字を赤くしますが、「blue-text」というクラス名が指定された要素は文字を青くし、「orange-text」というid名が指定された要素は文字をオレンジ色にします、という内容です。
セレクタにクラス名を指定する時は先頭に「.」をつけます。
セレクタにid名を指定する時は先頭に「#」をつけます。
クラス、idはhtml要素の属性の一種です。
クラス、idはどちらもCSSではセレクタですが、どちらを使えばよいのでしょうか。
実はクラスはWebページの中に複数書くことができますが、idは一つしか書くことができません。
idはWebページの中の要素を特定するために使われるので、複数の要素に装飾を適用させたい場合はクラスを使いましょう。
（実は同じidを複数書いても動いたりするのですが、間違った書き方なのでid名は重複して書かないようにしましょう。）
idはどちらかというとCSSよりもjavascriptで使われます。
HTMLとCSSしか書かないのであればクラスだけで十分かと思います。
プロパティと値
セレクタを書いたら「{」と「}」で囲みます。
囲まれた部分をブロックといいます。
ブロックの中にセレクタに対する装飾の内容を書きます。
上記の場合は色を変えることしか書いていませんが、複数書くことができます。
CSS
.box {
width: 200px;
height: 100px;
background: plum;
border-radius: 10px;
}
上記はboxというクラス名のスタイルを用意して<div class=”box”></div>というdivタグを書いた結果です。
横幅200px、高さ100px、背景色はプラム色、箱の角をちょっと丸くするという内容を書いています。
このようにdivタグとCSSを使えばちょっとした図形を作ることができます。
まとめ
今回はCSSの基本的な書き方と装飾のほんの一部を紹介しましたが、セレクタの書き方やプロパティの種類はまだまだ色々あります。
ある程度使えるようになってくるとWebを作るのが楽しくなってくると思います。
このブログでもいろいろな書き方を紹介していきますので、是非いろいろ書いてみてください。
したっけ！
- CSSはセレクタとプロパティと値で構成される
- セレクタは装飾の対象
- プロパティは装飾の種類
- 値はプロパティに対する具体的な設定値
- セレクタにはタグ、クラス、idを指定できる
- クラス、idはタグの属性
- クラス名はWebページの中で重複できるが、idはできない
本格的にプログラミングを学びたいですか？ITのエンジニアになりたいですか？
IT業界は万年人手不足であり、ニーズがあります。
パソコンとインターネットがあれば場所を問わず仕事ができるので、リモートワークが普及しつつある現代にマッチした職種と言えると思いますし、
物理的に必要なものはパソコンぐらいなので初期投資にかかる費用も少なく、人並みに仕事ができればフリーランスになって会社依存を脱却することもできます。
身につけた技術は一生モノです。
もし本腰を入れて勉強したいという方はスクールに入るのも一つの手です。
いくつか紹介しますので、興味があればサイトを覗いてみてください。
TechAcademy
最短4週間で未経験からプロを育てるオンライン完結のスクールです。 どこかに通う必要なく、自宅でもプログラミングやアプリ開発を学ぶことができます。
TechAcademyのサイトへ
Want to learn programming in earnest? Want to be an IT engineer?
The IT industry is understaffed for many years and has needs.
If you have a computer and the Internet, you can work anywhere,
so I think it can be said that it is a job type that matches the present age when remote work is becoming widespread.
The initial investment cost is low, and if you can work like a normal person, you can become freelance and get rid of your dependence on the company.
The skills that you have acquired is something that will last a lifetime.
If you want to study in earnest, you can go to school.
I will introduce some of them, so if you are interested, please take a look at the site.
DMM WEBCAMP
This is a programming school for those who are serious about changing jobs. guarantee a job change, so it is recommended for those who are inexperienced and are looking for a job change in the IT industry!
move to DMM WEBCAMP
TechAcademy
It is an online school that trains professionals from inexperienced in a minimum of 4 weeks. You can learn programming and app development at home without having to go anywhere.
move to TechAcademy