ブログ記事一覧

Webデザイナー必須スキル CSS〜20%をマスターして80%の結果を出す!

Css

“CSSってなんか難しいなあ”

というイメージを持っている方も多いかもしれません。
そんな苦手意識を持つ方にこのブログを用意しました。

20%のキーポイントをマスターしたら、
80%の結果を出すことができる、

ということがテーマです

結果を出す為には、
すべてのスキルや知識を身につける必要はありません。
20%のスキルや知識でも、立派なサイトやサービスを
作ることができると思います。

そもそもCSSってなんで必要なの?

Webデザイナーにとって、CSSは必須のスキルといわれています。

そもそもなぜCSSが必須スキルと言われているなんでしょうか?

CSSとはCascaded Style Sheet(カスケーデッド・スタイルシート)の略です。
スタイル、つまり、視覚表現を扱っている部分になります。

つまりHTMLに加えて、CSSを使うと

コンテンツ(HTML)と視覚表現(CSS)の部分を分離できる 

ということです。

どういうことでしょうか?

分離することによって、
HTMLとは別に自由にCSS(デザイン)を修正・変更できるようになります。
これによってWebページ製作・維持管理が非常に楽になります。

HTMLでもスタイルを書くことができますが。
そうなると、もし視覚表現を変更したいと思った時に、
HTMLを編集する必要がでてきますね。

結果として、とても維持管理が大変になるのでオススメしません。

スタイルシートは外部ファイルに書こう

スタイルシートのメリットを最大限に活かすには、
スタイルシートを外部に独立させたファイルの作成が一番です。

HTMLとCSSを切り離なすとメンテナンスが楽である

と先ほど述べました。

ポイントはサイト全体の共通スタイルを定義した
スタイルファイルを用意することです。
全てのHTMLファイルからそのファイルを参照するようにしておけば、
サイト全体の表現を簡単に統一できます。

上の例では、背景色を変えたい場合、
CSSファイルの設定を変えるだけで、
すべてのページの設定を変えることができます。

CSSの書き方

そんな便利なCSSですが、どうやって書いたらいいのでしょうか?

書き方はとてもシンプルです。
以下の例では、HTMLの<div>タグに色を設定する場合の記述例です。

適用対象の「div」はセレクタと呼ばれ、
適用するスタイル「color」はプロパティと呼ばれ、
どういう色にするか、そこはバリューと呼ばれています。

すべてのセレクタはかぎかっこ {  } で囲みます
プロパティと値の間はコロン「:」で区切り
最後にはセミコロン「;」を書きます

1行で複数のプロパティも書ける!

セミコロンで区切られていれば、1行に複数のプロパティを記述することができます。
例えば、下記の例ですと、<P>タグにマージンと、パデイングを加える場合です。

複数のセレクタに同じプロパティを設定できる!

セレクタをカンマ「,」で区切ることで、複数のセレクタに同じプロパティを適用することができます。

CSSの必須要素 マージンとパディング 

CSSでよく出てくる”マージン”と”パディング”とはなんでしょうか?

margin、paddingを活用すると、下の図のように”border”を境にして、
外側の余白と、内側の余白を指定することができるのです。

なぜmarginと、paddingに分けて、余白を指定する必要があるのでしょうか?

marginとpaddingが存在しなかったら、どうなるでしょうか?

文字(適用先の表示領域)にborderの罫線が
びったりくっついた形になって
サイトのページが非常に見にくくなってしまします。

marginとpaddingを活用すると、すっきりしたレイアウトになります!

下記のイメージですが、
左側は何かつまった感じで見にくいですよね。
右側のようにmarginとpaddingを活用すると、
余白ができて、サイト全体がとても見やすくなります。

マージンとパデイングの書き方

上(TOP)、下(BOTTOM)、左(LEFT)、右(RIGHT)
それぞれのプロパティの値を下図のように個別に指定することができます。
上下左右を書く順番はありません。

CSSの必須要素 IDとは?

IDとは固有の特徴をある要素に割り当てる時に使います。
つまり、同じID名は、1ページ中に1度しか使えない
ということです。

どういうことでしょうか?

具体的な例をあげてみると
たとえば、div要素などを用いてあるページを
「上部領域(head)」「サイドバー(side)」「本文領域(main)」「下部領域(foot)」
の4ブロックに区切ってレイアウトする場合を考えます。

このレイアウトの場合、
「上部領域(head)」「サイドバー(side)」「本文領域(main)」「下部領域(foot)」
はそれぞれ1ページ中に一度しか登場しません。

こういったケースはIDで設定してみましょう。

上部領域: <div id="header">~</div>
サイドバー: <div id="sidebar">~</div>
本文領域: <div id="main">~</div>
下部領域: <div id="foot">~</div>

CSSの必須要素 CLASS

Classとは「種別名を割り当てる」
つまり、同じclass名を、1ページ中に何度でも使えます。

1ページ中に1度しか登場しないものには「id」を、
1ページ中に何度でも登場できるものには「class」を使います。

例えば、
下記の図のように同一ページで
同じ要素(mail_subbox, foot_subbox)が
複数回出てくる場合は、Classを使ってみるのが良いでしょう。

Class属性とID属性を使い分けるメリットとは 

では、なぜそもそのClassとIDを設定するのでしょうか?

ウェブサイトの規模が大きくなってデザインが複雑になってくると、
「どういう目的で用意されたスタイルなのか?」
「どこに適用されるスタイルなのか?」
といったことが分かりにくくなります。

そのようなとき、
「class」と「id」を使い分けていれば、
ソースコードを把握しやすくなるでしょう。

これは

“可読性の向上”

と言って、サイトをメンテナンスする時に
とても重要な要素になります。

複雑なサイトになると、多くの人がデザインに関わってきますね、
その時に読みやすさ=可読性というのはとても重要になります

CLASSとIDの書き方

スタイルシートではクラス名の前に「.(ドット)」を、
ID名の前に「#(シャープ)」を付けて記述します。

CSSの必須要素 フロートの設定をマスターする

フロートの設定を設定すると、
縦に並んでいるブロックを横にならべることができようになります。

主要なウェブサイトは
2段組みや3段組みのレイアウト
(ブロックが横に並んでいるレイアウト)
になっています。

フロートを設定すると、
簡単に2段組み3段組みのレイアウトを設計することができます。

いかがでしたでしょうか。
CSSに関して、必要最低限な20%のスキル・知識を網羅しました。

この20%の知識を実際に自分のスキルにするには実践をやるしかありません。

スキルハブの実践講座を受講してWebデザインをマスターしよう!

我々が提供する教育サービススキルハブでも、
これらの必須スキル20%にフォーカスを置いた実践的なレッスンを提供しています。

最短距離でWebスキルを身につけたい人は
是非受講してみてください。(下の画像をクリック!)


最短距離で最大の成果を上げたい人のためのブログシリーズ

最短距離でWebデザイナーになる80:20の法則
HTMLの必須20%をマスターする
CSSの必須20%をマスターする
デザインスキルの必須20%をマスターする
UX設計の必須20%をマスターする
配色・色彩のスキルの必須20%をマスターする(近日公開)
Web企画のスキルの必須20%をマスターする(近日公開)
Webマーケティングのスキルの必須20%をマスターする(近日公開)
SEO(検索エンジン最適化)のスキルの必須20%をマスターする(近日公開)
プログラミングの必須20%をマスターする(近日公開)
Illustratorのスキルの必須20%をマスターする(近日公開)
Photoshopのスキルの必須20%をマスターする(近日公開)

Webdev top2

田所 雅之

シリコンバレーと日本で起業経験があります。
アメリカ・アジア・日本の起業家/投資家との
ネットワークをもっているのが強み

Skillhubの購読にはFacebookが便利です

Twitterでお得な情報配信中


コメントするにはユーザー登録が必要です。ユーザー登録するとすべての講座を受講する事ができます。

ユーザー登録(無料)

northwingsがいいねといってます。