１．はじめに
『ホームページ制作基本の”き”「HTML」』(https://wp.me/p82TIu-15r)では
ホームページを構成する最も基本となるHTMLについて学びました。
見出しをつけたり、表を作ったりなど、簡単なソースを覚えるだけで、いとも簡単にホームページの原型が出来上がりました。
しかし、白黒のページとカラーのページどちらが見やすいですかと言われれば、例外なくカラーのページと答えると思います。
残念ながらHTMLではホームページの原型は作れても、華やかな装飾は出来ません。
そんな時に登場するのが今回紹介するCSSです。
殺風景な画面を彩る手段を覚えれば、また一歩売れるホームページへと近づきます。
２．文字の装飾
前回HTMLについてご紹介した時と同様、今回も手を動かしながらどんなことが出来るのか体験していきましょう。先ずは最も基本となる文字の装飾をご紹介致します。
「判断されるのはわずか３秒！色の機能は活用必須」(https://wp.me/p82TIu-Z7)でご紹介しましたが、色を上手く使えばお客様が欲しいもの、探しているもの、読みたいもの等々、様々なものを表すことが出来ます。
まさに「色はそれだけで言葉」なのです！
例①・②の写真を見比べると、違いは色だけにも関わらず、受ける印象は 全く異なるのがわかるでしょう。
例①
例②
これだけで商品が売れる確率が上がるのであれば、CSSを覚えるのも効果的な投資だとは思いませんか？
では、早速実践に移りましょう！
前回同様テキストエディタのご用意をお忘れなく！
▼テキストエディタのダウンロードはこちら
前回紹介したテキストエディタ（http://brackets.io/）
なお、前提条件としてCSSはHTMLで作った基本の文章に装飾や機能を付け加えるものだと覚えて下さい。つまり、HTMLが常にセットでついてきます。
先ずはお手本①を打ち込んで「htmlcss1-1」とファイル名を付けてからブラウザに移動して下さい。
お手本①
次にお手本②のようにソースを書き加えてみてください。
お手本②
なお、ソースの書き加えをした際にはctrl+sキーを押すことで更新されますので、 併せて覚えておいてください
下の正解①のようになっていれば正解です。
正解①
テキストエディタだけでなくブラウザでの更新もお忘れなく！
３．背景を変更
さて、文字の装飾は出来ましたが、これだけでは少し寂しいものです。 そこで今度は背景を変更してみましょう。
今回はCSSがメインテーマですので詳しくは触れませんが、 先ほど設定した色文字を際立たせるには色彩表で正反対に位置する色を使うと良いとされています。
最近のインスタ映え、という言葉と共によく聞く、 いわゆるphotogenic（画面映えする）な体裁にすることが出来ます！
では、こちらも早速ソースの打ち込みを行いましょう。
お手本③を打ち込んで下さい！
お手本③
更新をしてみて正解②のようになれば大正解！ たった１箇所の変更だけで、こんなに変化しました！
正解②
ちなみに今のHTMLのソースで出てきたspanタグですが、divタグに変更すると こうなります。 ちょっとした違いですが用途によって使い分けができるのです！
でも、これで満足とはいかず、もう一つ購買意欲を掻き立てるような装飾を 施しましょう！
４．枠線を指定
最後にご紹介するのは枠線の追加です。
皆さんがネットで商品を買うサイトをいくつか見てみると、ほぼ間違いなくボタンには枠線がついています。
メリハリをつけてアピールする意味でも非常に重要な装飾です。
お手本④の打ち出しから始めましょう！
お手本④
更新をして正解③のようになれば大大大正解！ ここで最初のものと比べてみましょう。
正解③
思わずおぉ！と驚いた方も多いかと思います。
わずか数分の作業でここまで変化をつけることが出来ました。
しかもこれを一度覚えてしまえばあとは何度でも繰り返すことが出来ます。
５．こんなことを学びます
今回はCSSのさわりだけご紹介しましたが、
実際にはもっと高度な技術を駆使して、
よりお客様の興味を引くホームページ制作を行うことができます。
弊社で開催している「WEB制作プロフェッショナルコース」では、 ５ヶ月間（全１０日間）では全くの初心者から企業のWEB担当者として必要な実践的なスキルを身につけていただくことができます！
このコースでは以下のスキルを身に着けることができます。
・Photoshopスキル
・広告バナー制作
・ヘッダー画像（メインビジュアル）制作
・SNSアイコンの制作
・デザイン概論
・色彩学
・HTNL/CSS
・サイトコーディング
これらのスキルを身に着け、自社でホームページ制作が出来るようになることの一番のメリットが「会社の売り上げが上がる」ことです！
なぜなら逐一改善をしたい度にホームページ制作会社にお金と時間をかけて依頼をするよりも、施策のスピードがグンと上がり、PDCA（計画→実行→評価→改善）をスムーズに回すことが出来るからです。
さらには、サイト制作費などの外注コストもグッと抑えることができます。
この機会に「WEB担当者育成プログラム」を自社の社員に受講させて、WEB制作の内製化を進めていきませんか？
ご質問・お問い合わせは下記まで！
https://mrfusion.co.jp/form/form01/
６．まとめ
ここまでCSSでどんな事が出来るのか概要を説明してきました。
自社で内製化すれば、わずか数分の修正で済む作業を逐一業者に頼んで時間もお金もかけることなく、やりたい修正をやりたいタイミングで行えます。しかも身についたスキルは一生自社のものになります。
ぜひ、ウェブ制作スキルを身につけたい企業様の挑戦をお待ちしております！
