WEBデザインとCSSの関係とは？知って得するCSSの基礎とテクニック

2022年12月29日2024年2月8日

この記事でわかること

CSSとは何か
CSSを書くのに必要なツール
CSSテンプレート

WEBデザインの勉強を始めると、「CSS」という言葉をよく見かけますよね。

WEBサイトに使われているのは知っているけど、どう使われていて、何をしているのか知らないという方も多いのではないでしょうか？

WEBデザインをする上で、CSSを知っておいて損はありません。

今回はCSSの書き方やツールの紹介、コピペするだけで簡単にCSSを使えるテンプレートをご紹介していきます。

「そもそもCSSって何？」
「CSSを使ってみたいけど難しそう..….」

と壁を感じている方は、ぜひこの記事を参考にしてCSSを使ってみましょう！

＼ 14364人にセミナーをして分かった！／

CSSって何？まずは基礎を知っておこう

「よく聞くけど、そもそもCSSって何をしているものなの？」
そんな疑問をお持ちの方へ、まずは基礎知識や書き方、ファイルの作り方についてお伝えしていきます。

CSSとはこんな言語

CSSとは、Cascading Style Sheetsの略でスタイルシート言語と呼ばれるものです。

CSSは、HTMLで書かれたサイトの装飾をする役割を持ちます。

HTMLで書いたサイトにCSSがないと、画像や文字が並ぶだけの、装飾がないサイトになってしまいます。

ここにCSSを組み込むことで、背景をつけたり、文字の色を変えたり、アニメーションで動きをつけたりすることができるのです。

CSSはサイトを見やすくし、ユーザーの目をひく素敵なサイトに仕上げる重要な役割を持っているのです。

基本の書き方

CSSは3つの要素で構成されています。

セレクタ
プロパティ
値

この3つで、「1.何の要素に、2.どんな装飾を、3.どれくらい施すか」を指定します。

これが基本の書き方です。

このCSSは、pタグの文章のフォントの太さを太くするという意味です。

ファイルの管理

基本的な書き方がわかったところで、CSSファイルの管理についてお伝えしていきます。

CSSでコードを書いたら、まずファイルを保存します。

その際、ファイル名は「style.css」とつけましょう。

拡張子は必ず、「.css」にしてください。

CSSファイルの保存場所は、「index.html」ファイルと同じフォルダに入れておきます。
そうしないとHTMLにCSSが反映されないので、注意してください。

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

CSSの基本がわかったので、実際にツールを使ってCSSを書いてみましょう。

CSSを書くためのツールをテキストエディタと言います。

ここでは、初心者の方におすすめのテキストエディタをご紹介していきます。

Dreamweaver

Dreamweaverとは、Adobe社が販売しているホームページ制作ソフトです。

ホームページの制作に特化した機能がたくさんついている、とても便利なソフトです。

Dreamweaverの特徴

デザインの編集をリアルタイムで確認できる

ライブビューという機能が備わっていて、2画面でデザインを確認しながら編集ができるという優れモノです。

CSSを編集したらどう反映されるか？がすぐわかるのは、初心者にとっても安心ですね。

コードヒント機能で時短できる

CSSコードを全て手で入力するのは、なかなか手間がかかるものです。

Dreamweaverはコードを途中まで入力すると、該当するコードの候補を数種類挙げてくれるコードヒント機能が備わっているので、簡単に素早く入力することができます。

チュートリアルが充実している

機能が多いDreamweaverですが、丁寧で充実したチュートリアルがあるので、いちいち使い方を検索する手間を短縮することができます。

動画を使って教えてくれるので、文章だけじゃわかりにくい！というイライラがありません。

有料ソフトである

DreamweaverはAdobeの単体プランで月額2480円です。

まずはお試しで1週間無料で使えるので、チュートリアルを見て使用感を確かめてみるのをオススメします。

コンプリートプランに入っている方は、追加料金なしで使えますよ！

Brackets

BracketsもAdobeが提供しているテキストエディタですが、こちらは無料のソフトです。

Dreamweaverの原型となるソフトなので、備わっている機能が似ています。

Bracketsの特徴

動作が軽く、サクサク動く

Dreamweaverに比べたら機能は少なくはなりますが、その分非常に軽く、立ち上げからサクサク動きます。

プラグインが豊富で自由にカスタマイズできる

最初はシンプルなソフトですが、プラグインを入れて自由にカスタマイズすることができます。

無料のプラグインが豊富にあるので、慣れてきたら自分仕様にカスタマイズして、便利なソフトにグレードアップしていきましょう！

ライブビュー機能もある

Deameweaverの便利機能、ライブビュー機能も備わっています。

横に並べて二画面で確認することはできませんが、自動でブラウザが立ち上がり編集後のデザインを確認することができます。

クイック編集機能が便利

テキストエディタは基本的に、HTMLの画面とCSSの画面をそれぞれ開き、行ったり来たりしながら編集していきます。

しかし、BracketsではHTML画面から直接CSSを編集できる機能がついています。
CSSの画面に切り替えて編集したいコードを探して……という時間を一気に短縮できる、とても便利な機能です。

atom

こちらも無料のテキストエディタで、拡張機能が多い点などオススメポイントがいくつかあります。

atomの特徴

豊富な拡張機能で使いやすい

Brakets同様、拡張機能が豊富にあるので自分仕様にカスタマイズすることができます。

無料なのでどんどん試してみて、使いやすくしていけるのは嬉しいですね。

最初は英語表示になっていますが、日本語表示に変更できる拡張機能があるので、使う際は最初に入れてしまいましょう。

初めてでもわかりやすく作られている

タブ型の作りやコマンドパレットなど、直感で操作できるわかりやすい仕様になっているのも嬉しいポイント。

一つの画面で設定を確認できるなど、利便性が高い作りになっています。

入力の一手間が省ける便利な機能

複数のカーソルで何行にも渡って一気に入力できたり、一瞬でインデントを揃える機能をショートカットキー割り当てられたりと、コード入力が楽になる機能がたくさんあります。

実際に使っていくとその便利さがよくわかります。

mi

miはMac専用の無料テキストエディタです。

Macに最適化されているので、Macユーザーにはオススメのテキストエディタと言えます。

miの特徴

軽量かつ多機能でとても便利

コードを編集するのに便利な機能をたくさん兼ね備えているmi。

マルチファイル検索や複数ある文字列を一括で変換できる機能など、あると嬉しい機能が備わっています。

豊富なライブラリでカスタマイズが可能

miもライブラリという拡張機能が豊富に用意されているので、使いやすいよう自由にカスタマイズすることが可能です。

その時々で自由にカスタマイズでき、初心者から上級者まで使い勝手がいいというのは嬉しいですね。

Dreamweaverも無料期間があるので、いろいろと試して自分にあったソフトを見つけてくださいね。

CSSを使ってできる装飾と実装するためのコード【テンプレートあり】

ここからはCSSを使ってできる装飾とそれを実行するためのコード（プロパティ）をご紹介していきます。

テンプレートもつけておくのでぜひ活用してくださいね。

font-weight

こちらは文字の太さを指定するプロパティです。

数字で指定することもできますし、「bold」や「lighter」とキーワードで指定することもできます。

数字で指定する場合は、100、200、300、400、500、600、700、800、900の９段階があり、400が標準的な太さになります。

キーワードで指定する場合、「normal」が400、「bold」が700と同じ太さとなり、相対的に細くしたい場合は「lighter」、相対的に太くしたい場合は「bolder」で指定します。

・HTMLコード

たった45日でWEBデザイナーに！ゼロイチWEBデザイン

・CSSコード

sample1{font-weight:400;}

・CSSコード

sample1{font-weight:700;}

font-size

文字のサイズを変更する時に使うプロパティです。

いろいろな単位がありますが、よく使うのは「px」や「％」です。

・HTMLコード

たった45日でWEBデザイナーに！ゼロイチWEBデザイン

・CSSコード

sample1{font-size:15px;}

これは、「sample1のタグがついた文章の文字（たった45日でWEBデザイナーに！ゼロイチWEBデザイン）を15pxに指定する」というCSSコードです。

color

文字の色を変更する時に使うプロパティです。

カラーコードで細かく指定することもできますし、色を英字で指定することもできます。

・HTMLコード

たった45日でWEBデザイナーに！ゼロイチWEBデザイン

・CSSコード

sample1{color:#2baef9;}

border

borderとは、枠線の色や太さ、線の種類を指定するプロパティのことです。

線の種類はこちらのキーワードで指定していきます。

＜線の種類を指定する主なキーワード＞
solid：一本線
double：二本線
dashed：破線
dotted：点線

・HTMLコード

たった45日でWEBデザイナーに！ゼロイチWEBデザイン

・CSSコード

sample1{border:7px solid #2baef9;}

background-color

背景色をつける時にこのプロパティを使います。

colorの時と同じで、英字のキーワードでもカラーコードでも指定することが可能です。

・HTMLコード

たった45日でWEBデザイナーに！ゼロイチWEBデザイン

・CSSコード

sample1{Background-color:#fffed9;}

height、width

HTMLのタグで囲まれた要素の高さ（height）と幅（width）を指定します。

・HTMLコード

たった45日でWEBデザイナーに！ゼロイチWEBデザイン

・CSSコード

sample1{
width:750px;
height:350px;
color:white;
background-color:blue;
}

WEBデザイナーがCSSを記述するときの注意点

ここまでCSSでできることをご紹介してきましたが、CSSを実装していくときには注意点があります。

知らないと実装に余計な時間がかかってしまうので、しっかり把握しておきましょう。

優先順位をしっかり理解する

コードを記述するときには、優先順位のルールを把握しておく必要があります。

優先順位を把握しておかないと、コードを書いたのにそれが上手く反映されないという事態が起きてしまうからです。

基本、CSSはあとから書いたものが優先されるようになっています。

例えば次のようにコードを記述した場合、優先されるのは「color:red;」であり、対象のものは赤くなります。

div{
color:blue;
}
div{
color:red;
}

コードが上手く反映されていない場合は、一度順番を確認しましょう。

全てのコードを覚える必要はない

CSSでできることはたくさんあり、その分コードの種類もたくさんありますが、全てを覚える必要はありません。

だいたいのコードは調べれば出てくるからです。

例えば「CSS　枠をつける」といった言葉を検索すれば、文字の周りに枠をつけられる記述がすぐに出てきます。

検索でできたコードをそのままコピー&ペーストすることで装飾ができます。

1つ1つ覚えていくより、調べてしまったほうがはやいですよ！

WEBサイトをちょっとお洒落に見せるCSSテンプレート

CSSに慣れてきたら、ちょっとお洒落に見せるCSSテクニックを使ってみましょう！

コピペで使えるテンプレートをご紹介していきます。

デザインを確認しながら、そのつど微調整して使ってみてくださいね。

背景を斜めにして、単調さをなくす

サイトを作っていくと、並行のデザインが多くなってしまい、単調になってくることはありませんか？

そこで、少し背景のデザインを斜めにして、変化をプラスしてみましょう。

少しスタイリッシュさが出てきますね！

.box{
clip-path:polygon(0 0,100% 20%,100% 80%,0 100%);
background:#fffce6;
}

clip-pathというプロパティで、それぞれ4つの頂点の位置を数字で指定しています。

ラインをしましまにしてアクセントを足す

シンプルな枠線だけでは少し物足りない、という時に試して欲しいのがストライプの枠線です。

アクセントにもなって、少しお洒落ですよね。

ストライプを背景にし、その上に白の背景のボックスを重ねるという仕組みになっています。
色や太さは、サイトに合わせて調整してみてください。

.stripe{
padding:10px;
background-size:10px 10px;
background-color:#dafeaf;
background-image:linear-gradient(45deg,#ffffff 25%, transparent 25%, transparent
50%, #ffffff 50%, #ffffff 75%, transparent 75%, transparent);
}
.stripe-inner{
background:#ffffff;
padding:20px;
}