こんにちは、ユキです。
新卒で大企業のSIerに入社し、現在は大手の業務システムWebアプリケーションを開発しています。
CSSって結局何をするのに使うの？
簡単にいうとWebサイトのデザインをするよ。
今回はCSSでできることを初心者向けに解説していきます。
ユキのIT教室の記事は優しめの記事となっております。
お酒でも飲みながらゆっくり読んでみてください。
スポンサーリンク
フェーズ1： CSSでできること
CSSはWebサイトを自分の好きなようにデザインするための言語です。
スタイルシート言語と呼ばれていますがあまり気にしなくていいです。
ようはHTMLで書いた文章や画像を装飾するために使うと覚えておいてください。
ここでCSSでできることで簡単にできるものをざっとリストにまとめてみます。
- 文字の色、サイズ変更
- 行間、行揃え変更
- 背景の色、背景画像変更
このリストを見るとWebサイトで見えているものはCSSでできそうですよね。
それでは1つずつどのようにやるか説明してきますね。
フェーズ2： 実際にCSSをいじってみよう
それではCSSをいじっていきましょう。
ユキのIT教室では Atomを使用しています。
AtomはGitHubが開発したオープンソースのテキストエディタです。
リンクから飛べるのでダウンロードしてみてください。
2.1 CSSを適用
<link rel="stylesheet" href="style.css">まずは、htmlファイルのheadタグにlinkタグを使用してCSSファイルを指定してください。
rel属性に”stylesheet”、href属性に”読み込みたいCSSファイル”を指定すれば適用できます。
2.2 CSSの基本文法
h1 { color: green;
}CSSの基本文法を説明します。
例として上記のコードを書きました。
上記のコード内のh1の部分を「セレクター」、colorの部分を「プロパティ」、redの部分を「値」といいます。
各役割は次の表の通りです。
| セレクター | どのタグに装飾をするかを指定 (例だとh1タグを指定している) |
| プロパティ | 何を変更するかを指定 (例だと文字の色を指定している) |
| 値 | どのように変更するかを指定 (例だと緑色を指定している) |
基本的にこの文法を使用してCSSは書かれています。
最初のうちはこの3つだけ覚えておけば大丈夫です。
2.2 文字の色変更
color: (色);文字の色を変更する処理です。
この値の部分にgreenを指定すると次の画像のようになります。
2.3 文字サイズ変更
font-size: (文字サイズ);文字のサイズを変更する処理です。
文字サイズに50pxを指定すると次の画像のようになります。
2.4 文字の行間を変更
line-height: (文字の行間サイズ);文字の行間を変更する処理です。
行間サイズを0.2と指定すると次の画像のようになります。
2.5 文字の行揃え変更
text-align: (行揃えの仕方)；文字の行揃えを変更する処理です。
行揃えの仕方をcenterと指定すると次の画像のようになります。
2.6 背景の色を変更
background-color: (背景色);背景色を変更する処理です。
背景色を#0bdと指定すると次の画像のようになります。
2.7 背景画像変更
background-image: url( (パス) );背景画像を変更する処理です。
パスのところに自分の画像がある場所を指定します。
例として、今回はパスを「../../yukigesiki」としました
まとめ
今回はCSSでできることを解説していきました。
CSSはWebサイトを作成する際に必要不可欠な言語です。
デザインを自分好みにカスタマイズすることができるようになるので覚えておいて損はないです。
私はCSSを1冊ですべて身につくHTML & CSSとWebデザイン入門講座 [ Mana ]で勉強しました。
 | 1冊ですべて身につくHTML & CSSとWebデザイン入門講座 [ Mana ] 価格:2,486円 |
この本一冊あればCSSでのデザインスキルはマスターできます。
自作のポートフォリオ作ることも可能ですのでみなさん一度手に取ってみてください。
また、CSSの学習はプログラミングスクールもおすすめです。
「RUNTEQのプログラミングスクール」では無料相談を行なっています。
自分のプログラミングに関する悩みなどを気軽に打ち明けてみてください。
これからもユキのIT教室では初心者・未経験者向けのIT情報を発信していくのでよかったらフォローしてください。
以上、ユキでした！
スポンサーリンク
