CSSでできることをわかりやすく解説！どんな仕事や副業でいくらもらえる？

https://homeworkers.jp/program/s-html-css/CSSでできることは、HTMLで構築されたWebページの装飾です。

CSSはWebサイトの見た目を作るためのマークアップ言語のことを指し、HTMLと組み合わせて使われるのが一般的です。
したがってCSSを学ぶ方はHTMLも同時に学習することになります。

ほかのプログラミング言語はその気になれば何でも作れると豪語するエンジニアがいるほど汎用性が高いのですが、CSSでできることは「Webページの装飾」だけに限られます。したがってCSSでできること自体は少ないのですが、それだけ使用用途に特化している分、Webページを装飾するにCSS以外の言語を使うケースはありません。

CSSはWebサービスやWebアプリケーションを開発する際に必ず使用される言語です。今回はそんなCSSでできることを、実際の開発案件と併せてご紹介していきます。

CSSでできること

CSSは組み合わせによって、幅広いWebデザインを作ることが可能です。ここでは、代表的なCSSデザインをいくつか紹介します。

1, Webページの装飾

冒頭でも説明しましたが、HTMLで作成したWebページにCSSでデザインします。

まずはCSSがどのようにHTMLを装飾するのか、実際にコーディングする過程をご紹介します。

<a href="URL" class="btn-test">ボタン</a>

CSSで全く装飾しないまま、上のHTMLコードを張り付けた場合、次のように表示されます。

ボタン

なんとも心もとない、わかりにくいボタンですね。

そこでCSSを使って装飾します。
まずはボタンに色を付けて、クリックしたときに動くようにしましょう。

クリック可能なボタンを作成する

まずはCSSを使って、Webページ上で「クリックできそう」だと見ただけで認識できる、わかりやすいボタンを作成してみます。

先ほど生成したHTMLソースコードは、大きく3つの要素に分解することができます。

<a href="URL" class="btn-test">ボタン</a>

1. aタグ部分(<a></a>)
2. aタグに付与したclass部分(class=”btn-test”)
3. Webページ上で表示するテキスト部分(ボタン)


今回は上記aタグに対して、”btn-test” という名前のclass名を付与しました。

こうすることで、これから作成するCSSの装飾コードを呼び出し、HTMLコードに付与することができます。Webページ上には様々なCSSコードが内在していますから、それらを区別するためにclassで名前を与えるのだと覚えてください。

.btn-test {
  color: #fff; /*文字の色*/
  background: #f56500; /*ボタン色*/
  padding: 10px 30px; 
  border: none;
  text-decoration: none;　
}

.btn-test:active {
    background-color: #cc5500; /*ボタンを押したときの色*/
}

上記CSSコードでは、「btn-test」と名前が付けられた要素に対して、文字の色やボタンの色を変更したり、ボタン部分を表現する枠線を作成したりしています。

また、「btn-test:active」では、作成したボタンがクリックされたときにだけ反映させる別のCSSコードを用意しています。今回はボタンをクリックしたときに、ボタンの色を変更するコードを作成しました。上記CSSコードを与えると、先に掲載したHTMLコードは次のように表示されます。

ボタン

ボタンにグラデーションデザインを追加する

次に、ボタンの色をグラデーションスタイルに変更してみましょう。

.btn-test {
  color: #fff;
  background: linear-gradient(#f56500, #9941D8); /*グラデーション追加*/
  padding: 10px 30px;
  border: none;
  text-decoration: none;
}

.btn-test:active {
  background: linear-gradient(#cc5500, #7d16c7);　/*グラデーション追加*/
}

上のコードでは、ボタンの背景色を指定する「background:」というコードにて、ボタン色を「linear-gradient」と置き、グラデーションを再現しています。カッコ内にある(#cc5500, #7d16c7)の意味は、カンマ以前の#cc5500という色からグラデーションをスタートさせて、徐々に#7d16c7という色へ変色させていくことを意味しています。

ボタン

CSSは他のプログラミング言語と異なり、ほとんどの場合、自分が再現したいと思った表現のプリセットが用意されています。
今回グラデーションを表現するときにも、linear-gradientという関数を使いました。

ボタンにシャドウ(影)を作る

最後に、ボタンに影を表示させてよりリッチなデザインを表現してみましょう。

.btn-test {
    display: inline-block;
    color: #fff;
    background: linear-gradient(#f56500, #9941D8);
    padding: 10px 30px;
    border: none;
    text-decoration: none;
    box-shadow: 3px 3px #bbb; /*影を追加*/
}

.btn-test:active {
    background: linear-gradient(#cc5500, #7d16c7);
    box-shadow: none; /*ボタンクリックの時は影を削除する*/
}

今回は box-shadow: という関数を用いて、ボタンの右下に薄い影を追加しました。
ボタンをクリックすると影を削除するように設定しています。実際にボタンを押し込んだように見えませんか？

ボタン

Webデザインは「クリック時に影を消す」といった細かい工夫の積み重ねによって、Webページを閲覧するユーザーに好まれるデザインを制作します。優れたデザイナーほど創意工夫に富んでいて、一目で人を引き込む魅力的なページを作成できます。

デザインの良し悪しだけで、企業の売り上げが3倍に跳ね上がるような話もよくあることです。
企業を下支えするようなデザイナーになれると、それだけやりがいが生まれてデザイン沼にハマります。

以上のように、CSSでできることの大部分は、HTMLコードを装飾し、見やすくする・魅力的なデザインを作成することです。

2, LP制作、LPコーディング

次に、もう少し実際の制作案件に近いCSSでできることとして、LPコーディングをご紹介します。
LPとはランディングページと呼ばれ、集客に特化したWebページのことを指します。

例えば スターバックスのLPは縦長の1枚ページで作成されていて、これは土台となるHTMLソースコードに対してCSSコードで装飾を行い、誰が見てもスターバックスとわかるような、ブランドイメージに合ったページに仕立て上げられています。

CSSを使ってLPを制作するには、大きくわけて3つの工程を踏みます。

1. ワイヤーフレームの作成
2. HTMLコーディング
3. CSSコーディング

まずはワイヤーフレームの作成です。
ワイヤーフレームとはLPの設計図のことで、「どの要素を」「どこに」「どうやって」配置するかデザインの大枠を決めます。

Webデザイナーは実際にWebページを制作する前にワイヤーフレームを作成し、LP制作案件の発注者に制作イメージを共有します。お互いにデザインの齟齬がないように提案し、合意を得られた段階でコーディングに入ります。

ワイヤフレームを決めたら、HTMLとCSSでLPコーディングします。
HTMLではWebページそのものを制作します。そこに先ほど作ったワイヤーフレームをWeb上で再現するように、CSSでの装飾を行います。
HTMLとCSSで作られた動きのないWebページを「静的なページ」と表現しますが、ここにJavaScriptなどで動きを取り入れたWebページを「動的なページ」と表現します。最近ではLPにも動きを取り入れる傾向があり、LP制作要件にJavaScriptの開発経験が求められるケースもあるようです。

3, Webサイトの製作

さらに、HTML/CSSに合わせてPHPやJavaScriptなどの言語を使用すれば、Webサイトの制作ができるようになります。

個人でゼロベースからWebサイトを開発するならPHPやJavaScriptなどの言語が必修ですが、実際の制作案件ではWebサイトの根幹部分を開発するバックエンドエンジニア(PHPやJavaScriptなどで開発する人)と、Webサイトをデザインするフロントエンドエンジニア(HTMLとCSSで開発する人)で役割分担されます。

Webデザイナーはフロントエンドエンジニアに分類される職業です。
したがって、PHPやJavaScriptを知らなくともWebサイト制作案件に携わることは可能です。

また最近は、WordpressやネットショップのBASEなどのCMSをベースにWebサイトを制作している事業者が多くなっています。
この場合はWebサイトの根幹部分をCMSによって補われており、特に開発する必要がないため、HTML/CSSなどフロントエンド言語のみの制作が可能です。

Webサイト制作はLP制作とは違い、Webサイトの全体像をとらえた上でUI/UX設計を行うなど考慮するべきことがたくさんあります。

当然難易度は高くなりますが、それだけ報酬も高くなります。

Webデザイナー、フロントエンドエンジニアになるには専用ツールの知見も必要

もしもあなたがWebデザイナーやフロントエンドエンジニアとしてのキャリアを歩みたいと思っているなら、HTMLとCSSの知識だけでは不十分です。

実際の制作現場では、クライアントにデザインを提案するためのワイヤーフレームを制作したり、成果物のクオリティを高めるためのフレームワーク(Bootstrap)や、動的なデザインを実現するためのJavaScriptが必要になったりするからです。

したがって現場で通用するスキルを学ぶためには、プログラミングスクールに通うべきだと言えます。
独学でもHTMLとCSSだけなら学習可能ですが、その他制作に必要なスキルを身に着けるなら、専門のスクールが用意したカリキュラムにしたがって実際に手を動かしながら学んだ方が効率よく学習できます。

CSSを学んで制作案件を獲得するまでの道筋

CSSでできることが理解できたら、学んだことをどのように活用すれば「現場で通用するスキル」に昇華できるのか、具体的な流れを見ていきましょう。

1. Webページをコーディングするために必要なスキルを学ぶ
2. 自分の実力を証明するためのポートフォリオを作る
3. LP制作案件を受注する
4. 要件定義、ワイヤーフレームの作成
5. LPコーディング
6. 制作物の納品

ひとつづつ、順を追って説明します。

1, HTML/CSSなど、Webページをコーディングするために必要なスキルを学ぶ

まずは、HTMLとCSSを学び、Webデザイナーやフロントエンドエンジニアに必要なスキルを身に着けることから始めましょう。

前述のとおり、現場で通用するスキルを身に着けるにはHTMLとCSSの学習だけでは不十分です。ワイヤーフレームを作成するためのスキルや、動的なデザインを再現するための言語の勉強も必要になります。

2, 自分の実力を証明するためのポートフォリオを作る

制作に必要なスキルを身に着けたら、実際に手を動かしてポートフォリオ(実績)を制作してみましょう。

Webデザイナーやフロントエンドエンジニアとしての実績を証明するためには、実際に自分で作成した制作物を用意しなければなりません。いくら口先で「○○を学びました」と言ったところで、実際に制作したものがなければ、誰も実力を証明できないからです。

3, LP制作案件を受注する

ポートフォリオを制作できたら、制作案件としてもっとも難易度の低い「LP制作案件」を受注してみましょう。プログラミングスクールで基礎基本を学んだ方なら、スクール側が実際の案件を斡旋してくれる場合も多いです。

Webデザイナーやフロントエンドエンジニアとして制作会社に転職を考えている方ならなおさら、個人で案件を受注した経験を持っておくべきです。
制作会社からすれば、現場経験のない初心者を中途で採用する気など起きるはずがないですよね。

何よりも最初は、自分を売り込むための実績を作ることから始めてください。

その意味でも実際の制作案件をカリキュラム上で用意してくれるプログラミングスクールは、それだけでも入会の価値があります。

4, 要件定義、ワイヤーフレームの作成

制作案件を受注出来たら、これから自分がどのようなデザインを納品するのかクライアントに提案するために、ワイヤーフレームを作成します。

作成したワイヤーフレームはクライアントに提示し、希望に沿ったデザインなのか、どこか修正・追加してほしい項目はあるか、ヒヤリングします。
数度にわたるやり取りの末、互いに合意できるワイヤーフレームを作成できたらHTMLやCSSを使って制作に入ります。

5, LPコーディング

ワイヤーフレームが承認されてはじめて、それをWebページに落とし込むためにコーディングを行います。

この時、もしも動的なWebサイトの作成が必要になるのであれば、HTMLやCSSだけではなく、JavaScriptなどの言語での開発も必要になります。
制作し始めてから「自分では実装できなかった」とならないように、しっかり要件定義の際に互いの認識をすり合わせましょう。密なコミュニケーションなしに制作案件など達成できません。

6, 制作物の納品

LPの制作が完了したら納品、報酬を受け取ります。

実際に案件を取り始めると、例えばワイヤーフレームを複数作成するように言われたり、コーディングし終わってから再度成果物を作成しなければならなかったり、さまざまなトラブルが起こります(Web制作は “炎上しやすい” クライアントワークとしても知られています)。

自分が不当な扱いを受けないためにも、まっとうなクライアントの元で制作するためにも、最初は体系立ったノウハウを持つプログラミングスクールで学習することを強くおすすめします。

CSSは独学で学習するべき？プログラミングスクールに通う意味とは

CSSはその学習コストの低さから、インターネット上にたくさんの学習コンテンツがあります。
基礎基本を網羅的に学べるコンテンツが無料で提供されていたり、月額980円から学習できる動画スクールも用意されています。

そんなCSSを、わざわざ高額なプログラミングスクールに通って学習する意味はあるのでしょうか？

当サイト編集部の考えでは、HTMLやCSSを使って制作会社に転職したい方や、フリーランスエンジニアとして本格的に活動したい人ほど、プログラミングスクールに通うべきだと考えています。

CSSでできることまとめ

CSSでできることは、Webサイトの見た目を整えることです。

LP制作やWeb制作に携わる際にはもちろん、他の言語を学習するときにも避けては通れない言語です。

ただし、HTMLやCSSを学習しただけで実際の開発案件に携われる！とは思わないようにしましょう。

最近はSNSなどで「誰でも簡単にWebデザイナーになれる！」など吹聴されていますが、そうして軽い気持ちでWebデザイナーになった副業フリーランスたちの成果物が悲惨で、発注者から憤りの声がたくさん上がっています。

まっとうな制作者になるためにも、体系的に基礎基本を学習できるプログラミングスクールで地固めすることをおすすめします。

この記事でCSSのできることが理解できたら、『CSSを学習するにおすすめのプログラミングスクール』や『CSS以外の言語で開発できること』にも目を通してみてくださいね。