今や、企業のみならず個人でもホームページを持っている時代と言えます。
つまり、サイトの制作は日常的なもので誰もができて当たり前になってきているわけですね。
サイトの制作は、有料・無料のテンプレートやホームページ作成ソフトなどを利用することで、簡単にできます。
ただ多くの人に見てもらうためには、コンテンツの内容はもちろんのことですが、まずはサイトの見栄えが大きな意味を持ってきます。
そこでcssの出番です。
cssを駆使することであなたのサイトはきっと誰をも惹きつける魅力あるものになるでしょう。
わたしもサイトを制作したことがありますが、cssの知識なしで作ったため、見栄えが悪いサイトになってしまったという記憶があります。
では、そのcssについて説明していきます。
目次
htmlとcssの違いと役割について
サイトを制作する上で、初めに遭遇するのがhtmlとcssという言葉です。
最初に見たときは誰もがとまどうはずのこの英文字の羅列。
この時点で既に逃げ出したくなる人も多いはずでしょう。
しかし、じっくりとこの言葉の意味を理解していくことで、専門用語のアレルギーも徐々に解消されていきます。
では、この2つの言葉の意味と特徴にはどういった違いがあるのかを紹介していきましょう。
htmlはサイトでどんな役割を果たしているのか
まずはhtmlから説明していきます。私たちが日頃見ているサイトのほぼ全ては、このhtmlで作られています。
ブラウザが何であれ、サイトのジャンルがどれであれ、その下地には必ずhtmlの存在が隠れていると言っていいのです。
サイト内の文章は「タイトル」や「大見出し」「小見出し」「段落」「改行」といったいくつかの要素によって成り立っています。
つまり構成ですね。
そして、これら個々の要素は、そのままの状態だとどんなに賢いコンピュータであっても、どれが見出しで、どこからどこまでが段落であるのかは理解できません。
全てを平等に同じものとして扱ってしまうのです。
そのため、サイトに表してみると、つまらない論文のような、ただの文字の羅列に過ぎない状態になってしまいます。
そこでコンピュータが個々の要素、つまりどれが見出しなのか、どこからどこまでが段落なのか、改行の位置はどこなのかなどを判断できるよう、タグを使って打ち込むのです。
これがhtmlの基本的な考え方となります。
htmlを使うことで、文字の羅列に息が吹き込まれ、しっかりと整った文章として生まれ変わるのです。
htmlだけではワープロで打ち込んだ文章と変わりない状態
ただし、こうしてできた文章は、そのままでは見栄えに乏しいものとなります。
風景で言うと、真冬の田園地帯のような寂しくて殺風景なものになってしまうのです。
これを、南国の楽園のような楽しくわくわくする風景にしなければ、せっかくサイトに訪れてくれたユーザーも一瞬にして、他のサイトへと飛んで行ってしまうことになります。
そこで登場するのがcssなのです。
cssはhtmlお抱えのスタイリスト
どんなに地味な人であっても、一流と呼ばれるメイクアーティストやスタイリストの手にかかれば誰もが振り返るような驚くべき変身を遂げてしまいます。
このメイクアーティストやスタイリストの役割を担うのがcssなのです。
具体的にはリンクボタンの挿入、背景の色合いや文字の大きさや色、また余白を作るといったことができます。
つまり、htmlで作った構造をどういった装飾にするのか、どういった見栄えにするのか、音楽で言うところのアレンジの部分となるのです。
検索上位を目指すためにもcss
htmlとcss、この2つの車輪を上手く動かすことデザイン性のある、ユーザーを惹きつけるサイトを作ることができるのです。
そうなると、サイトをじっくりと閲覧してもらえるようになり、サイトの滞在時間が長くなります。
そして、それは検索エンジンによる検索結果にも有利に働き、視聴回数も増えていくというプラスのスパイラルが起きやすい状態となっていくのです。
cssの基礎知識
cssは（Cascading Style Sheets、カスケーディング・スタイル・シート）のことで、htmlで作ったサイトをどのように表示させるのかを決めるものです。
htmlでも見栄えをよくできるけど……
htmlでもある程度は見栄えをよくすることはできます。
しかし、本来html は構造を指定するためのものです。
むやみに使い、スタイリングするとブラウザに上手く表示できなってしまう恐れが出てきます。
タグが増えることで、記述ミスも同じように増えますし、複雑になり過ぎて修正にも手間がかかり過ぎるというデメリットがあるのです。
そのため、構造と装飾をしっかりと分ける必要が出てくるのです。
cssはどういった仕組みなのか
cssの仕組みですが、基本的に「セレクタ」「プロパティ」「値」の要素からできています。
「セレクタ」は場所を示し、「プロパティ」は何を変えるのかを表します。
そして「値」は「セレクタ」で選択された部分をどう変えるのかを指定し、それによって見栄えが決まっていくのです。
そのためcssを使うメリットとしては、まずはhtmlタグで表した情報構造が正しく反映されるという点。
次に、メンテナンスがやりやすくなるという点。
そして、読み込みの速度が速くなるという点などがあります。
cssカラーの指定方法
サイトの見栄えに直結するのが色合いです。
モノトーンなサイトよりも鮮やかな色合いのサイトのほうが、視聴回数は圧倒的に多くなるのは必然と言えます。
では、そのcssで文字などのカラーを指定する方法を説明していきます。
それぞれの特徴を理解することで、自分のレベルに合った使い方ができるはずでしょう。
キーワードはcssカラーの入門編
まずは、キーワードによる指定方法です。
これは、カラーの名称をそのまま打ち込むといった分かりやすいものです。
例えば「red」や「black」と記入すれば、赤や黒として表示されるのです。
ただ、カラーバリエーションが17種類しかないため、細やかな色合いを表示することには向いていません。
しかし、扱いやすいので初心者にはおすすめの方法と言えます。
フォトショの16進数カラーコード
次に、16進数カラーコードです。これは「#＋カラーコード」を付けて指定する方法で、フォトショで使われている方法となります。
カラーコードは6桁の数字から成り立っていますが、2桁ずつに分けられ、それぞれ赤・緑・青を表し、256段階で色の強度を指定できるようになっています。
一つの色に対して256通りの強度が表せ、それが3つあるので256×256×256＝16,777,216通りの色を表示できることになります。
光の3原色の法則を利用したRGB
3つ目としてはRGBという方法があります。
これは赤・緑・青といった光の3原色をそれぞれ0から255の割合で指定するといった方法です。
3つの色を混ぜることで、無数の色合いを表現できます。
絵の具を混ぜて新しい色を作るといったことと同じものと思ってもらえばいいでしょう。
ちなみに白は（255,255,255）で、黒は（0,0,0）です。
もう一つ、淡い色合いを表現したい時などに重要な透過度ですが、16進数カラーコードとRGBでは可能ですので、透明度の強弱を付けたい場合にはこの2つの方法がおすすめです。
まとめ
サイトは文章や画像からなり、様々なコンテンツを生み出します。
ただいくら内容の濃いサイトであっても、見てもらわなければ、無いのと同じです。
サイトの見栄えは色合いに大きく影響されます。
綺麗な色合いで装飾されたサイトは、ちょっと見てみようかという気にもなるのです。
この記事が少しでもあなたのサイト作りに役立てば幸いです。
最後まで読んで頂きありがとうございます。
