はじめに
技術広報のyayawowoです。
今回は、CSSについて初心者向けに基本的な書き方を解説します。
CSSを書く上で覚えておくべきことや、基本的な書き方をまとめております。
また、直ぐに実践できるようにサンプルコードを交えながら進めていきますので是非ご活用ください。
HTMLの基本的な説明は「HTMLで改行【brタグ・pタグ・preタグ】」もご確認ください。
CSSとは
CSSとは、「Cascading Style Sheets」 の略称でスタイルシートとも呼ばれています。
HTMLで作成した文章構造に対し、色や文字の大きさなどのデザインやレイアウトを整えてあげる役割が、ずばりCSSです。
イメージがつきにくいかと思いますので、以下の通りサンプルをご用意しました。
HTMLのサンプル
シンプルではありますが、HTMLだけで書いたコードが以下になります。
<h1>：大見出し<p>：段落
See the Pen by yasuko (@yayafu_) on CodePen.
HTML+CSSのサンプル
HTMLで作成した文章に対し、CSSでデザインを加えてみます。
<h1>：大見出しを赤色に変更<p>：段落の内の文字を大きく変更
See the Pen by yasuko (@yayafu_) on CodePen.
以上の通り、HTMLとCSSを組み合わせることでデザイン性があるWebぺージを作ることができます。
皆さんが見ているWebページでデザイン性が高いものは、HTMLに加え、CSSが使われていると分かっていただけたのではないでしょうか。
CSS 書き方 基本
CSSを書く上での基本をご説明します。
3つの場所
CSSを書く場所は、3つあります。
プログラムを書く目的に応じて、書く場所を適切に変えてください。
| パターン | 場所 |
|---|---|
| ① | HTMLにstyleタグを書く |
| ② | HTMLのインラインに書く |
| ③ | 別ファイルに書く |
では、各パターンを細かく見つつ、書き方も説明していきたいと思います。
①styleタグの書き方
CSSを書くために<style>タグを使います。
<style>タグは、HTML内にある<head>タグの中に書きます。
まずは、以下のサンプルコードをHTML内に書いてみましょう。
- サンプルコード
<style> h1 { color: red; } p { font-size: 50px; } </style>
<head>タグ内に書いた結果が以下の通りです。
See the Pen by yasuko (@yayafu_) on CodePen.
<style>タグ内に記載したタイトルの色と、大見出しの文字の大きさが反映されていることが分かります。
②インラインの書き方
では、次に<style>タグではなくHTMLのインラインに書く方法を説明します。
以下のサンプルコードの通り、<h1>タグと<p>タグにstyleが指定されているのがわかると思います。
この書き方をインラインと呼びます。
- サンプルコード
<h1 style="color: red">Hello World!</h1> <p style="font-size: 50px">こんにちは</p>
サンプルコードをHTMLにはめ込んだものが、こちらです。
See the Pen by yasuko (@yayafu_) on CodePen.
①の表示結果と比べても、同様の結果になっているかと思います。
このように、<style>タグで指定するのではなく、<h1>や<p>の要素に直接styleを指定して書くこともできます。
③別ファイルの書き方
最後に、CSSを別ファイルに書く方法を説明します。
HTMLファイルからCSSファイルを呼び出すことで可能とする実装方法です。
なお、ビジネスシーンでは③の書き方が一般的となっています。
サンプルコードを別ファイルに書き、「style.css」と名前を付けて保存しましょう。
- サンプルコード
h1 { color: red; } p { font-size: 50px; }
CSSを読み込むために、HTMLの<head>タグ内に以下記述をします。
<link rel="stylesheet" href="style.css">
rel：relation（関係）の略称で、読み込むファイルの関係性を意味する
href：relで読み込むファイルがある場所（URL） を意味する
➡「style.css」のスタイルシートを読み込む
表示結果は以下の通りです。
See the Pen by yasuko (@yayafu_) on CodePen.
③も、①②と同様の表示結果になりました。
CSSを別ファイルに書くことで、保守性・汎用性が高まり一貫性のあるWebページが作成できます。
是非ビジネスシーンでWebページを作成する際は、③の書き方をオススメします。
3つの要素
次は、CSSの3つの要素についてです。
CSSを書くには以下3つの要素を指定する必要があり、必須の知識となりますので覚えておいてください。
①：セレクタ ・・・どこの
②：プロパティ ・・・何を
③：値 ・・・どのように変えるか
では、以下サンプルコードはどのように指定するかを見てみましょう。
- サンプルコード1
|
h1 { color: red; }
①セレクタ ②プロパティ ③値
￣￣￣ ￣￣￣ ￣￣￣ |
①：セレクタ ・・・h1大見出しの
②：プロパティ ・・・文字色を
③：値 ・・・赤色に変える
- サンプルコード2
|
p { font-size: 50px; }
①セレクタ ②プロパティ ③値
￣￣￣ ￣￣￣￣￣ ￣￣￣ |
①：セレクタ ・・・p段落の
②：プロパティ ・・・文字サイズを
③：値 ・・・50pxに変える
以上の通り、3つの要素を指定することでデザイン性があるWebぺージを実装することができます。
よく使うプロパティ一覧
CSSの書き方を前述でまとめましたが、いざやってみよう！と思った際におそらくプロパティの指定に困るかと思います。そんな方のために、よく使うプロパティの一覧を種別にまとめましたので是非ご参考ください。
| 種別 | プロパティ | 説明文 |
|---|---|---|
| フォント | color | 文字色 |
| font-size | 文字サイズを指定 | |
| font-weight | 文字の太さを指定 | |
| font-family | フォントの種類を指定 | |
| テキスト | text-align | 行の揃え位置を指定 |
| text-decoration: | 文字線を指定 | |
| line-height: | 行間の高さを指定 | |
| letter-spacing: | 文字間隔を指定 | |
| text-indent: | 1行目の字下げ（インデント）を指定 | |
| リスト | list-style-type: | リストマークの種類を指定 |
| list-style-position: | リストマークの位置を指定 | |
| list-style-image: | リストマークに画像を指定 | |
| ボックス | margin: | 上下左右のマージンを指定 |
| padding: | 上下左右のパディングを指定 | |
| border: | 上下左右のボーダーを指定 | |
| イメージ | background-image: | 背景画像をURL指定 |
| background-position: | 背景画像の表示開始位置を指定 | |
| background-repeat: | 背景画像の繰り返し表示方法を指定 | |
| background-attachment: | 背景画像の固定や移動を指定 | |
| vertical-align: | テキストや画像の縦方向位置を指定 |
CSS 書き方 まとめ
CSSの基本的な書き方は、いかがでしたでしょうか。
HTMLやCSSは、メモ帳のようなテキストエディタがあればすぐに実践ができるため、机上学習よりもまずは実装にトライしてみてください。
最後にはなりますが、本ブログの内容がエンジニア（特にフロントエンドエンジニア）やデザイナーを目指している方にとって、一助になれば幸いです。
エンジニア中途採用サイト
ラクスでは、エンジニア・デザイナーの中途採用を積極的に行っております！
ご興味ありましたら是非ご確認をお願いします。
https://career-recruit.rakus.co.jp/career_engineer/カジュアル面談お申込みフォーム
どの職種に応募すれば良いかわからないという方は、カジュアル面談も随時行っております。
以下フォームよりお申込みください。
forms.gleイベント情報
会社の雰囲気を知りたい方は、毎週開催しているイベントにご参加ください！ rakus.connpass.com
