Webデザイン

Webデザイン初心者の方のためにCSSの基本について解説しました!

この授業は次のような方におすすめです。

・コーディングをすることになった新人Webデザイナーの方でCSSについてを知りたい方

・CSSで何ができるのか基本的なことを知りたい新人Webデザイナーの方

・CSSについて詳しく書かれている本を探している方

この授業を受けていただくことで、上にあげたような方の助けになり、CSSについてを理解できるようになって、Webサイトを作る際の参考になりますよ。

どうぞ最後までご覧になってください。

Webデザインに必要なCSSとは

先生
先生
CSSというのは、HTMLと組み合わせて使うことで、Webサイトのサイズや色、レイアウトなどのデザインを作るための言語だニャン。

CSSとは、Cascading Style Sheet(カスケーディング・スタイル・シート)の略です。

先生
先生
CSSの歴史は次の通りだよ。

・1996年に「CSS1」

・1998年に「CSS2」

・2011年に「CSS2.1」

・2011年6月に「CSS3」

デザイニャー
デザイニャー
「CSS3」は単一の企画じゃなくて、仕様がモジュール単位で策定されていて、それらをまとめて「CSS3」と呼んでいるんだニャン。

先生
先生
そして現在は「CSS4」の策定が進められているんだ。

WebデザインにCSSはどうして必要なのかその2つの理由

デザイニャー
デザイニャー
CSSはHTMLで作ったものにデザインの効果をつける言語で、Webデザインには必ず必要な言語なんだニャン。

先生
先生
CSSが重要なのはなぜなのか、特に大切なのは次の2つのポイントだよ。

・デザインが再現可能かが判断できるから

・コーディングすることを求められているから

デザインが再現可能かが判断できるから

デザイニャー
デザイニャー
Web上で表現できるのは、完全に自由というわけではないんだニャン。

先生
先生
そうだね。CSSで表現できるものには限りがあって、再現が難しいこともあるんだ。

デザイニャー
デザイニャー
それに最近では、スマートフォンでもWebサイトを表示しているから、画面の大きさに合わせて、テキストの改行の箇所も変わってくるんだよニャン。

先生
先生
これらのことをきちんと理解して、Web上でも表示できるデザインを作るためにも、CSSの知識は必要なんだ。

コーディングすることを求められているから

デザイニャー
デザイニャー
Webデザインの求人をよく見てみると、仕事内容にコーディングが含まれていることが多いニャン。

先生
先生
今のWeb業界は人手不足で、作ったデザインをコーディングをして完成させるコーダーが不足しているからなんだ。

デザイニャー
デザイニャー
だから、Webデザイナーにはコーディングのスキルも求められるというわけなんだニャン。

先生
先生
デザインもコーディングもこなすのは、大変だけれど、活躍も場が広がっているということで、それも良いことなんだと受け取っておこう。

Webデザインに必要なHTMLとCSSの関係とは

先生
先生
Webサイトの見栄えを調整する目的として、CSSが使われるようになったんだけれど、HTMLとCSSの役割は次の通りになるんだ。

・HTML ⇨ Webサイトに表示させる画像やテキストの記述や、文書構造を定義する(マークアップ言語)。

・CSS ⇨ HTMLの内容をWeb上に、どんな見た目で表示させるかを記述する。

デザイニャー
デザイニャー
このようにHTMLとCSSの役割を明確にして分けることで、人にもコンピュータにもわかりやすく優しいコードを描けるようになったわけだニャン。
【Webデザイン初心者】のためへWebデザインに欠かせないHTMLこの授業は次のような方におすすめです。 ・Webデザイン初心者で、HTMLの基礎について知りたい方 ・HTMLを初歩から...

Webデザインを作るためにCSSでできる3つのこと

先生
先生
最近では、WebサイトにおけるCSSの役割は広がってきているんだけれど、その中でも代表的なものは次の3つだよ。

・Webデザインのデザインを作る

・Webサイトのレイアウトを作る

・アニメーションを作る

先生
先生
最近では、スマートフォンやタブレットなどもたくさん出てきたので、それぞれの端末でWebサイトを見ても、最適に表示させるために、レスポンシブWebデザインというものも導入されるようになってきたんだ。

デザイニャー
デザイニャー
そのレスポンシブWebデザインで使われる「メディアクエリー」という技術もCSSで指定するものなんだニャン。

先生
先生
それでは、ここからCSSでできることのお話を一つ一つ聞いていくニャン。

Webデザインのデザインを作る

デザイニャー
デザイニャー
CSSを使うことで、Webサイトでどのような見栄えになるのかをデザインしたり装飾することができるって言ってたニャン。

先生
先生
WebサイトにおけるCSSの具体的例は次の3つだよ。

・テキストの色を変えたり、テキストの一部の文字を太くできる

・ボタンの色を変更できる

・Webサイトの背景に色をつけたり画像を敷くことができる

テキストの色を変えたり、テキストの一部の文字を太くできる

デザイニャー
デザイニャー
CSSでは、テキストの色を変えたり、一部の文字を太くしたりすることができるんだニャン。

先生
先生
そうだね。そうすることで、Webサイトの文章が読みやすくなるし、何を強調したいのかを、ユーザーにわかりやすく伝えることができるようになるんだ。

ボタンの色を変更できる

デザイニャー
デザイニャー
そしてCSSでは、ボタンの色を変更することもできるんだニャン。

先生
先生
そうすることで、ユーザーに押してもらいたいと思っているボタンを目立たせることができて、Webサイトに来てもらいたいという目的を果たしやすくなるんだ。

Webサイトの背景に色をつけたり画像を敷くことができる

デザイニャー
デザイニャー
そして最後に、Webサイトの背景に色を塗ったり、または画像を敷くことができるんだニャン。

先生
先生
そうすることで、Webサイトを訪れたユーザーに、可愛い、とかカッコいいとか、癒し系だとかというように、色々な印象を与えることができて、Webサイトの会社やお店などが持っているイメージを伝えることができやすくなるんだ。

デザイニャー
デザイニャー
この3つだけでも、CSSの役割が大きいことがわかったニャン。

先生
先生
この3つの例は本の一部なんだよ。他にもCSSによって色々な装飾やデザインを作り出すことができるんだ。

Webサイトのレイアウトを作る

デザイニャー
デザイニャー
Webサイトに表示するレイアウトを行うのも、CSSの大切な役割だよニャン。

先生
先生
CSSを使わないで、HTMLだけで表示すると、全部の内容が画面の左側に寄った状態で縦積みに配置されてしまうんだ。

デザイニャー
デザイニャー
この状態でもWebサイトの内容を把握できなくはないけれどニャン。

先生
先生
でもそれだと、情報量が多くなると、Webブラウザをずっとスクロールしないといけなくなるし、情報と情報の区切りもわかりづらくなって不便なんだ。

デザイニャー
デザイニャー
HTMLだけだと、Webサイトを見るユーザーにとっては、その内容が把握しづらくなるし、情報が見づらくなってしまうというわけだニャン。

アニメーションを作る

デザイニャー
デザイニャー
最近では、CSSを使って、Webサイトにアニメーションをつけることもできるようになっているようだニャン。

先生
先生
色々なデザインがWebサイトに表示されるようになってきたり、デザインの流行の変化に伴って、アニメーションを使ってWebサイトを表現することも増えてきているんだ。

デザイニャー
デザイニャー
例えばどんなものがものがあるのかニャン。

先生
先生
Webサイトには、リンク機能という、別のページへ移動することができる画像やテキストがたくさんあるよね。

デザイニャー
デザイニャー
そういうものには、一見しただけでは、クリックして別のページに飛ぶことができるかどうかがわかりにくいものもあるよニャン。

先生
先生
わかりにくいままだと、Webサイトを制作しても、見にきていただいたユーザーに必要な情報を伝えることができないという恐れも出てきてしまうんだ。

デザイニャー
デザイニャー
だから、アニメーションの力を借りて押してもらいやすいデザインのボタンを作る必要があるというわけだニャン。

CSSを書くために必要なツール

luis gomesによる写真: https://www.pexels.com/ja-jp/photo/546819/

 

デザイニャー
デザイニャー
CSSは、HTMLと同じで、WindowsやMacに搭載されているメモ帳やテキストエディタを使って書くこともできるんだニャン。

先生
先生
テキストエディタには次のような便利なものがあるよ。

先生
先生
初めてCSSをする方は、まずは無料で使えるテキストエディタを使うのが手軽でいいと思うよ。
Webデザインでエディタを使うメリット6つと選び方のポイント9つこの授業は次のような方におすすめです。 ・Webデザイン初心者でWebサイトを作るためにどんなエディタがあるのかを知りたい方 ...

CSSファイルの作り方

先生
先生
CSSファイルは次のような手順で作っていくよ。

・ファイルを新規作成する

・ファイルを保存する

・HTMLファイルにCSSファイルを読み込む

ファイルを新規作成する

デザイニャー
デザイニャー
まずは、CSSファイルを作ることから始めるんだニャン。

先生
先生
CSSファイルを作る方法は、まずテキストエディタを開いて、「@charset”UTF-8”」と書くんだ。

ファイルを保存する

デザイニャー
デザイニャー
そして、ファイルの保存をするんだけれど、ファイル名は「style.css」と入れるんだニャン。

先生
先生
その際に注意するのは次の2つだよ。

・ファイル名は必ず半角英数字にする

・拡張子は必ず「.css」と書く

HTMLファイルにCSSファイルを読み込む

デザイニャー
デザイニャー
CSSを反映させるには、HTMLファイルと連携させることが必要なんだよニャン。

先生
先生
CSSをHTMLファイルと連携させるには、HTMLファイルのheadタグの中に次のように書こう。

<head>

<link href=”style.css” rel=”stylesheet” type=”text/css”>

</head>

CSSの書き方の決まり

デザイニャー
デザイニャー
CSSの書き方にはルールがあるんだニャン。

先生
先生
書き方を間違えてしまうと、コードが動かなくなってしまうからね。基本の形は次のような感じだよ。

セレクタ {

  プロパティ:値;

}

先生
先生
CSSを書くときに注意することは次の2点だよ。

・全角を使わない

・{} で囲う

実際にCSSを書いてみよう

先生
先生
CSSの書き方は、次のように書くんだ

先生
先生
対象となる「セレクタ」に対して、「プロパティ」と値を指定するんだ。

デザイニャー
デザイニャー
なんだかなんのことなのか意味がわからないニャン。

先生
先生
最初はそうかもしれないね。そんなときには、上のように、日本語に変換して考えてみよう。

デザイニャー
デザイニャー
セレクタとかプロパティとか値とかについて教えてほしいニャン。

セレクタ

デザイニャー
デザイニャー
セレクタには、CSSを反映させたい範囲を書くんだニャン。

先生
先生
そこには、HTMLタグや、ID、クラス名を指定するんだ。

プロパティ

デザイニャー
デザイニャー
プロパティには、CSSを設定するための書式を書くんだニャン。

先生
先生
プロパティにはセレクタと違って、自分の好きな名前をつけることはできなくて、CSSで定められた英字を指定するんだ。そこに書く書式については、「代表的なプロパティ」で説明するよ。

デザイニャー
デザイニャー
値には、プロパティごとの設定値を書くんだニャン。

先生
先生
値には、英字を描いたり、単位が違ったり、プロパティによって色々な値を指定することができるんだ。

デザイニャー
デザイニャー
なんだか最初は難しそうだニャン。

先生
先生
そんな場合は、「このタグの何をどうするのか」というように、文章で考えてからCSSに書いていくと、理解しやすくなるよ。

CSSを書く前に必要な構文

デザイニャー
デザイニャー
いよいよCSSを書くんだニャン。

先生
先生
その前に、次のような構文を書く必要があるんだ。

デザイニャー
デザイニャー
これで準備OKだニャン。

CSSに書く代表的なプロパティ

先生

先生
先生
CSSに書く代表的なプロパティは次の通りだよ。

・width

・height

・color

・font-size

・font-weight

・background-color

・border

width

デザイニャー
デザイニャー
widthでは、要素の横幅を指定するんだニャン。

先生
先生
単位には、「px」や「%」を使うんだ。

height

デザイニャー
デザイニャー
heightでは、要素の高さを指定するんだニャン。

先生
先生
単位はwidthと同じで、「px」や「%」を使うんだ。

color

デザイニャー
デザイニャー
colorでは文字の色を指定するんだニャン。

先生
先生
色は英字でも指定できるし、RGBや16進数形式でも指定できるよ。

font-size

デザイニャー
デザイニャー
font-sizeは文字の大きさを指定するんだニャン。

先生
先生
font-sizeは、色々な単位を使うことができるけれど、やっぱり、「px」や「%」で指定することが多いんだ。

font-weight

デザイニャー
デザイニャー
font-weightは、文字の太さを指定するんだニャン。

先生
先生
文字を太くしたい場合には、「bold」を。補足したい場合には、「lighter」で指定するんだ。そして、もっと太さを細かく指定するには、値に数値を使うこともあるんだ。

background-color

デザイニャー
デザイニャー
background-colorは、要素の背景の色を指定するんだニャン。

先生
先生
colorと同じで、色を英字で書いたり、16進数で指定したりするんだ。

border

デザイニャー
デザイニャー
borderは、罫線(けいせん)を指定しるんだニャン。

先生
先生
borderでは、太さや色、形なども細かく指定することができるんだ。

CSSは全部丸暗記する必要はない

デザイニャー
デザイニャー
CSSは暗記しなくても良いって本当なのかニャン。

先生
先生
そうだね。特にプロパティの暗記はしなくてもOKだよ。英単語のようにノートに書いて暗記したりする必要はないよ。CSSの学習で必要なのは、考え方を養うことなんだ。どういうふうに見た目を実装するにはどうすれば良いのかということを考えることが、CSSを理解する一番の近道なんだ。

デザイニャー
デザイニャー
わからないときは、Google先生から教えてもらうくらいで大丈夫ってことだニャン。

CSSも含んだコーディングが学べる2冊のおすすめ本

先生
先生
コーディングを学ぶのに良いおすすめの本を2冊紹介しておくね。

1冊ですべて身につくHTML&CSSとWebデザイン入門講座

これだけで基本がしっかり身につく HTML/CSS&Webデザイン1冊目の本

まとめ

先生
先生
この授業では次のようなことをお話ししてきたよ。

・Webデザインに必要なCSSとは

・WebデザインにCSSはどうして必要なのかその2つの理由

・デザインが再現可能かが判断できるから

・コーディングすることを求められているから

・Webデザインに必要なHTMLとCSSの関係とは

・Webデザインを作るためにCSSでできる3つのこと

・Webデザインのデザインを作る

・テキストの色を変えたり、テキストの一部の文字を太くできる

・ボタンの色を変更できる

・Webサイトの背景に色をつけたり画像を敷くことができる

・Webサイトのレイアウトを作る

・アニメーションを作る

・CSSを書くために必要なツール

Visual Studio Code 

Brackets   

Atom

SublimeText

・CSSファイルの作り方

・ファイルを新規作成する

・ファイルを保存する

・ファイル名は必ず半角英数字にする

・拡張子は必ず「.css」と書く

・HTMLファイルにCSSファイルを読み込む

・実際にCSSを書いてみよう

・セレクタ

・プロパティ

・値

・CSSに書く代表的なプロパティ

・width

・height

・color

・font-size

・font-weight

・background-color

・border

・CSSを全部丸暗記する必要はない

・CSSも含んだコーディングが学べる2冊のおすすめ本

1冊ですべて身につくHTML & CSSとWebデザイン入門講座

これだけで基本がしっかり身につく HTML/CSS&Webデザイン1冊目の本

私たちは頑張るあなたを応援しています。