そもそもCSSてなに? | グラフィック・Webデザイナーのネタ | SOHO-College

グラフィック・Webデザイナーのネタ | SOHO-College

仕事や転職に役立つ情報も発信してます。グラフィクデザイン・Webデザイン・イラスト・アクセスアップや集客の為のWebマーケティングに関するノウハウもご紹介!ぜひご覧ください◎



HTML5とかCSS3とか、Webデザイナーの人やデベロッパーの人の中では話題になっていますが、そもそもCSSってなに?という人の方が多いかと思います。以前にアメブロをカスタマイズした時書いた記事にコメントでも頂きました。その時は説明不足だったので今回記事にしてみようとおもいます。


そもそもCSSってなに?


「CSS」とは、Cascading Style Sheets(カスケーディング・スタイルシート)の略で、HTMLというWeb言語の装飾部分を指定できる機能のことをいいます。


図で表すとこんな感じです。
$グラフィック・Webデザイナーのネタ  |    SOHO-College-css2

HTMLファイルに、基本的な「テキスト」「画像」などを記述しておいて、
「色」や「文字サイズ」や「レイアウト」といった「装飾」部分をCSSにかいておきます。

このふたつのデータは1セット。ひとつのページを表示するときに
2つのデータを使います。


もちろん、HTMLファイル内にデザイン要素を記述することも出来ますが、デザイン部分をきりはなしておくことでいろいろとメリットがあります。






CSSを使う3つのいいところ


デザイン部分をわけておく、「CSS」を使うことでいいところはまとめると3つあります。

◆編集の効率アップ
CSSにデザイン部分をかいておくコトで編集作業がずいぶんと楽になります。たとえば「見出しの色を変更したい!」という時、HTMLファイルで見出しの色を設定してあると、見出しの数だけ修正していかなければいけません。見出しが100個あれば、100個の修正作業が発生してしまいます。ところが、CSSで見出しの色の設定しておけば、1カ所を変更するだけで、全ての見出しの色を変更してくれます。これは便利!

◆デザイン性がアップ
CSSでデザインを決めることによって、HTMLだけで記述するよりも、はるかに多くのことが可能です。より多彩なWebデザインを作る時にもとても役立ちます。


◆読み込みの速度がアップ
HTMLの記述と、デザイン部分
をわけておくことで、読み込みの速度がアップします。
データの容量も軽くなる所もいいところのひとつです。






まとめ


Web制作をするだけでなく、ブログをかいている方も、「CSSカスタマイズ」という言葉を耳にするかと思います。要するにデザインを指定する記述がCSS!これの編集することで自由なデザインにすることができます。はじめは慣れない文字がいろいろでてくるかと思いますがぜひ一度チャレンジしてみてください♪