WEBデザイナーが教えるクリエイティブ系への転職情報サイト「WEBデザイナーズナビ」

Webデザイナーズナビ 〜デザイナーの転職・スキルアップ情報 〜

CSSの勉強を始める前に。初心者はこの30個だけ覚えればWEBサイトは作れる

初心者が最初に覚えるCSS

WEBデザインにおけるコーディングの骨組みであるHTML、装飾のスタイルシート(CSS)。

WEBデザイナーはこの2つの言語を駆使してウェブサイトのデザインを整えていきます。しかし膨大な数と使い方があるCSSを参考書の1ページ目から暗記することは大変です。

そこで現場でよく使われるCSSから覚えて、前回のHTMLの基礎と組み合わせてウェブサイトを構築できるようになりましょう。細かい部分や使用頻度の少ないCSSは後から参考書を呼んで必要に応じて使えるようになれば十分です。

必要最低限覚えるべきCSSのプロパティは30個です。これを覚えれば一通りのWEBサイトを作ることができます。

デザイナーLevel:1 「はじめてのWEBデザイン」目次

この記事の内容

CSSとは

カスケーディング・スタイルシートの略称です。HTMLの要素に対してフォントサイズやカラー・マージンなどを指定してデザインを整えて行きます。WEBデザイナーの技量を測る目安として、どのくらいのCSS知識があり状況に応じて最適な装飾ができるかが重要視されているくらいです。

CSSを勉強するには基本的はHTMLの知識が必要になります。

HTMLは最初から全て覚えようとすると時間がいくらあっても足りません。WEBデザインの現場で使われるHTMLタグは思いの外少ないため、それらを集中して覚えてしまい、後々必要

CSSの書き方のルール

CSSの書き方の基本

これがCSSの書き方です。例外はありません。;を付け忘れたりタグを閉じ忘れるとスタイルが適応されませんので、記述前に{}と閉めてしまうことをおすすめします。

CSSはHTMLのデザイン部分を担当する

HTMLはデザイン性を一切持ちません。ですからHTMLのみでWEBデザインをするとフォントの大きさ、レイアウト、配色などすべてがブラウザの独自認識で表示されます。これではWEBデザインとして成り立ちません。

そこでHTMLにデザインを担当するCSSを組み合わせることでWEBページにデザイン性・見やすさを装飾していきます。

CSSの書き方の種類

大きく分けて3つのやり方があります。

もっとも管理しやすいのがHTMLに外部ファイルで読み込む手法です。通常のWEBサイトでは複数のHTMLのデザインを一元管理するため、1つのCSSファイルを複数のHTMLで読み込みます。

こうすることでHTMLのデザイン部分を修正するときはCSSファイル1つを編集すれば、複数のHTMLのデザインをすべて変更することができます。

HTML内にCSSを書き込むと、デザイン修正の時にすべてのHTMLを編集しなければならないため、非効率であり現実的ではありません。すべてのWEBデザインの現場で基本となるCSSは外部読み込みをしている。これは絶対に覚えておいてください。

CSSの読み込み例

外部ファイルとしてCSSを読み込む場合

HTMLのヘッダー内にCSSを書き込む場合

HTMLタグに書き込む場合

注意するべきはHTMLタグに直接CSSを書き込む場合。サンプルでは【h1】に【font-size:20px;】というプロパティと値を入れています。
外部ファイルとして読み込む場合、HTLMのheadにCSSを書く場合は、HTML内のすべてのHTMLに対してCSSが適応されます。

対して、HTMLタグに直接HTMLを各場合は、そのタグのみにCSSが適応されます。

この2つでh1のフォントサイズが違う結果になります。

どのHTMLにCSSを適応させるかの「セレクタ」をまず覚える

CSSを適応させるセレクタを選ぶ

自分の好きな箇所のHTMLタグにCSSを適応できなければ意味がありません。それを指定するのを「セレクタ」と呼びます。

CSSのセレクタでh1を指定するとHTML上のすべてのh1に適応されます。基本設計として絶対にh1はすべてこのルールでいくんだ!という断固たる決意がない限りは使ってはいけません。

次の2つが基本的なCSSの使い方になります。【.(ドット)】から始まるものをclass、【#(シャープ)】から始まるものをidといいます。どちらも【fs20】というセレクタになっています。この部分は自分の好きな文字列を作ることが可能です。

しかし一定のルールにもとづいて名前を作らないと管理が大変になってしまいますので、【f(ont)s(ize)20】という意味合いで、このクラス・idはフォントサイズ20pxに指定するものですよ。と分かりやすく名称しています。

好きな文字列を作ったところで、HTMLの好きなHTMLタグに装飾を加えるはできません。そのためにHTMLにどのクラス・idを適応させるかを書く必要があります。

クラスでCSSを指定する

IDでCSSを指定する

このようにHTMLに適応させるCSSのクラスやIDを書き込んであげます。そうするとHTMLは「CSSファイルの、◎◎というクラスを適応させればいいんだ」と理解できます。

このHTMLとCSSのセットがウェブサイトをコーティングする上での基本になります。複雑なWEBサービスになるとHTMLタグのほぼ全てにクラスやIDが指定されるくらい複雑化します。

セレクタは複数選択することができる

HTMLタグの指定はスペースで、クラスは,(コンマ)で区切ることで複数のセレクタにCSSプロパティを付与することができます。

ClassとIDの違い

HTMLに与える影響は一緒ですが、明確な違いがあります。ClassはHTML上で何度も使用して良い、IDは1度しか使用してはいけないということです。たとえば複数のHTMLタグのフォントサイズを20pxにしたいとしましょう

これはOKです。クラスは複数のHTMLに使用してもいいのですから。

これは使用して行けないません。同じIDがHTMLファイル上に2回書かれています。たとえh1タグ2つに同じIDを振っても2回は2回。ルール違反です。

じゃあ全部Classにしちゃえばいいのでは?

ぶっちゃけていうとデザインの装飾を整えるだけであればそれで大丈夫です。しかしフロントエンドエンジニアやシステムエンジニアがjavascriptを使用する際に困ったことになります。

例えば、特定のリンクをクリックしたら画像が浮き上がってくるようなjavascriptを書くとします。javascriptの挙動はClassとidで制御することが多いため、Classしかない場合、1つのリンクをクリックしたら、そこら中の画像が浮き上がってきてしまいます。

javascriptを使用するとHTMLの1つだけを指定したいということがありますので、idを使う必要が出てきます。

またWEBデザイナーにしてもウェブサイトの基本構造や枠組に同じCSSのプロパティを当てることはありえませんので、1回しか使わないHTMLタグに関してはid指定したほうがスタイリッシュです。この理解をおろそかにしていると実際にWEB開発現場でSEと仕事をするときに多大な迷惑をかけることになります。

初心者が最初に覚えるべきCSS

初心者が覚えるべきCSS
私が10年以上のWEBデザイナー歴の中からまず覚えるべき&現場で多用されるCSSをピックアップしました。ここに載っていないCSSは費用頻度が低いか、基本を覚えないと活用できないものばかりです。

このCSSだけでも現役で通用しますので、まずはこの基本を覚えましょう!

フォント

テキスト

背景

レイアウト

テーブル

リスト

フォント

フォントのCSS

フォントサイズの変更

フォントサイズの指定はたくさんの型式がありますがまずはこの3つだけを押さえれば大丈夫です。

pxはその通りピクセルで直接指定します。

emは倍数です。ブラウザの基本は大体が16px合わせているため、emでフォントサイズを指定すると、実際のフォントサイズがわからなくなってしまいます。そのためHTMLの一番大枠であるボディタグのフォントサイズを10pxにすることでem指定を使いやすくします。

%(パーセント)での表示もemと同じでブラウザの解釈に依存する形で100%が16pxが基準になるため、一度bodyのフォントサイズを10pxに整える作業が必要です。

このように使用することができますが、すべてのフォント指定をパーセントで行っている開発現場は見たことがありません。

フォントの太さ

デザイン確認

font-weightはデフォルトではノーマルです。よって主に文字を太くしたい時に使用するCSSです。数値指定は100〜900で行なうことができますが、日本語フォントでは対応していないものが多いため実際はほぼ、boldのみの使用となります。

フォントのカラー

デザイン確認

フォントのカラー変更は#(シャープ)の後に3桁か6桁の数値を入れます。#333と#333333は同じ色です。色を数字で慣れていない人はこちらのカラーピッカーWEBサービスを使用しましょう。HEXに書かれている数値がCSSで使える文字にあります。

DreamWeaverやカスタマイズ後のSublime TextならばCSSを記述中にcolorと入力すると自動でカラーピッカーが現れて好きな色を選択することができます。

白バックの背景に真っ黒(#000000)はギラツキで文章が読みにくいこともあり、多くのWEBデザインの現場では白バックに対して黒よりも1つ明るいグレーである#333333を使用します。

カラーピッカー

フォントの種類

WEBサイトで使用するフォントの種類を選択します。多くの場合、デザインの統一を図るためにbodyに適用させ、その他一部分に違うフォントを使う程度に留めます。

Dreamweaverでおすすめされているfont-familyです。前に書いてあるフォントから優先的に適応されます。

注意するべきはユーザーがのOSに入っていないフォントは表示されないという点です。ヒラギノはMacならば表示され、Windowsでは表示されません。Windowsでは3番目に書いてあるメイリオが適応されます。

MacとWindowsがOSが使用してるフォントを指定しておくと安全ですMacはヒラギノ角ゴ、Windowsはメイリオが入っていればトラブルは起きません。

テキスト

テキストのCSS

テキストの並び

デザイン確認

ブラウザのデフォルトは左揃えです。テーブルのセルの中などは中央揃えを良く使ったりします。

テキストの行幅:line-height

デザイン確認

文字の行間を設定します。指定方法はフォントサイズの指定とほぼ同じです。違いは実数で指定できることです。em、%と同じ計算方法になります。

テキストに付く線:text-decoration

デザイン確認

テキストにの線の種類を指定します。aタグはブラウザの基本設定として下線が入ってしまうので、それを打ち消すためにtext-decoration:noneは良く多用されます。

テキストの文字間隔:letter-spacing

デザイン確認

文字の間隔はpxかemのどちらかを一般的に使用します。ブログなどの文章は読みやすさを重視するために、ブラウザのデフォルトに対して、letter-spacing:1px、0.1emなどで調整することがあります。

背景

背景のCSS

背景色:background-color

デフォルトは透明になっています。bodyなどのサイト全体に適応させるときは、フォントが見えづらくなるため、フォントカラーも一緒に変更するのが一般的です。

デザイン確認

背景画像:background-image

要素の背景に画像を使用する際に使用します。

デザイン確認

背景画像のリピートの仕方:background-repeat

背景画像を横方向のみリピート表示
背景画像を縦方向のみリピート表示
背景画像をリピートしない

指定した背景の連続して表示するかの設置をします。たとえば小さい画像部分的に使いたい場合はno-repeatを使用します。ロゴマークの表示などで多用されます。

背景画像の位置:background-position

背景画像の表示位置を指定します。特定の位置に画像を使用することから、background-repeat:no-repeatと併用してよく使われます。

上から10px 左から10pxの位置に表示
上から10% 左から10%の位置に表示
上から0pxの位置に表示
下から0pxの位置に表示
左から0pxの位置に表示
右から0pxの位置に表示
中央(50%)の位置に表示

背景のCSSの一括指定:background

ご紹介した背景に関するCSSを一括で指定することができます。WEBデザインの現場ではこちらの書き方の方が浸透しています。

レイアウト

隙間:margin

マージンのCSS

隙間の取り方は様々な記述があります。この記述ルールは覚えておくと作業がはかどります。隙間の単位はpxの他にem・%などが使用可能です。

余白:padding

パディングのCSS

要素の中の余白を設定します。marginと混同してしまいがちです。marginは要素の外側の隙間、paddingは要素の内側の隙間と覚えましょう。

枠線:border

borderのCSS
枠線の書き方にたくさんの種類がありますが、最初は1つだけ覚えておけば十分です。一括ですべて書き手しまう方法です。

確認

太さの指定

線の種類の指定

色の指定

表示内容の幅指定:width

確認

要素の横幅を指定します。テキストの要素にwidthを使うと指定した横幅に応じて自動的に改行されます。一般的なWEBサイトは2カラム(右と左で表示している)ものが多いと思います。

これはwidthを使用して横幅を指定しているからです。パーセンテージでの値は扱いが難しいですが、最近はスマートフォンの横幅が多くなってきたため、ピクセル指定だとレイアウトが崩れることから使用頻度が増えて来ています。

表示内容の高さ指定:height

使用頻度はwidthに劣りますが、縦幅をキッチリを決めてデザインしたい場合に使用します。

要素の回り込み:float

floatのCSS
要素を左右に配置するために使用します。

基本的にHTMLはひたすら縦に要素を置いていきます(回り込みといいます)。よってこのfloatを使わないと一般的なメインコンテンツ+サイドバーのようなデザインはできません。

確認

このようにして骨組みになる要素を左右配置することでいレイアウトが整ったWEBデザインを行えるようになります。

要素の回り込み解除:clear

確認
floatの要素の回りこみを解除します。これを行わないと、floatで左右どちらかに回り込みしてる要素の下に、置きたい要素が配置できなくなります。
このように意図しないところにdiv要素が配置されます。これを解除するためにclearを使用します。

確認

回りこみが解除されました。このようにfloatを使って要素を左右に配置したら、その下にくる要素にはclearを使用することがルールになっています。

要素の表示方法の指定:display

HTMLタグにはブロック要素とインライン要素があります。ブロック要素は1つの固まりとして定義されているため、横幅や縦幅という概念があります。その横幅は入力したテキスト部分になります。

対してインライン要素は固まりではないので、横幅・縦幅を持ちません。たとえばspanはインライン要素であるため固まりを持ちません。よってwidth,height,marginといったCSSが使えません。

inline-blockはブロック要素と、インライン要素の中間。
次にくる要素が改行されることはないけれど、width、height、margin、paddingを指定できる便利な値です。

確認
この状態ですとmarginが効いていないのがわかると思います。CSSコーティングでmarginが聞かないときはほぼすべてdisplayがinlineになっています。

確認
このように書いて挙げればspan要素は1つのかたまりとして認識されて、marginが聞くようになり、widthも使用可能になります。

要素をどのように配置するかの基準の指定:position

要素を特定の位置に表示したい場合にに使用します。表示にはtop / bottom / left / rightのプロパティを組み合わせて使用します。

position:absolute

確認

ブラウザの一番上、左から20pxの位置に表示されます。position:absoluteを使用すると、このHTMLタグがどこになっても必ず指定した位置に表示されます。

position:rerative

相対配置と呼ばれるポジションで、position:absoluteとセットで使用します。

確認

position:relativeの要素の中にposition:absoluteの要素を配置した場合、abulosuteの位置が親要素であるrelativeから計算した位置に表示されます。

position:fixed

要素を絶対配置して固定させます。スクロールしてもその位置から動くことがありません。

確認

要素の重ね順の指定:z-index

z-indexはpositionのプロパティを使用すると使用可能になります。あたいはrelative / absolute / fixedの3つです。数字の数が大きいほど重ねが上になります。

確認

要素内に収まらないときの指定:overflow

widthやheightで幅を指定しているボックスの中の要素がはみ出てしまう時の表示の仕方を選択します。

確認

テーブル

枠線の表示方法:border-collapse

テーブルの枠の表現方法を選択します。テーブルのHTMLはデフォルトでは枠線が定義されていませんので、CSSのborderと合わせて使用します。

確認

リスト

行頭記号の指定:list-style-type

リストを作る、ul / olにlist-style-typeを付けることで、liで表示されるリストの行頭部分を変更することができます。

確認

行頭の記号を画像指定:list-style-image

行頭にオリジナルの画像を使うことができます。画像の大きさによっては上手くレイアウトされないことがあるので、padding-leftなどを使用してバランスを調整します。

確認

これだけ覚えればWEBデザインをすることができる。

ご紹介したCSSを使えばほとんどのウェブデザインを表現することができます。CSSは膨大な量がありすべてを覚えるのは現実的ではなく、多くのWEBデザイナーも広い知識を持つよりも基本的なCSSの使い方のパターンを覚えます。

一度使ったCSSとHTMLの組み合わせをevernoteなどに保存しておき、忘れてしまったとしてもいつでも引き出せるようにつねにコードを保存しましょう。これを繰り返すことで多くのCSSと使用パターンを暗記していき、最終的には参考書な検索に頼らずにWEBサイトを作れるように鳴ります。

ここに書いてあるCSSだけでWEBサイトを作ることができますが、初心者の方は参考書を買う・オンラインスクールに登録してみるなどして、実際のWEBデザイナがーどのようにコードを書いているのかを真似るのが上達の近道です。WEB開発を始めとしたデザインはTechAcademy [テックアカデミー]が、プログラミング研修ならCodeCampなどが有名です。

書けば書くほどHTML・CSSは上達しますので、日頃からコードを書く環境を作るいいでしょう。

スポンサーリンク

Desingers Navigator

アルバイトWEBデザイナーから始まり派遣WEBデザイナーを経て、大手企業正社員WEBデザイナーへ。その後WEBディレクターになりUI・UXの専門に。現在はフリーランスのWEBデザイナー / ディレクターをしています。

関連記事 / RELATED POST