いまさら聞けない「CSS」超入門

いまさら聞けない「CSS」超入門

はじめてのCSS

CSSとは、HTMLなどのWEBページを制作する上で文字のスタイルやフォント、文字の大きさを表現する定義をまとめたものと言えます。

なぜこのCSSがWebサイト上で一般的に使用されているのかと言いますと、HTMLには要素と呼ばれるタグで囲んだ記述を行います。

タグには見出しや段落など文書を作成する上で訪れた人が一目で見やすいページを作成しやすくしています。このタグは大きなWebサイトほど大量にあり、同じタグで同じ文字のスタイルが使用されているのが一般的です。

この場合、タグごとに同じスタイルの記述をし続けるのは見栄えにも良くありません。こうした場合に活躍するのが、CSSです。CSSはHTMLで指定された構造をどのように表現するかをまとめたファイルで、タグや属性、id、クラスなど指定したセレクタごとにスタイルを定義することができます。

つまり、Webサイトをデザインする上で必要なスタイルはCSSに記述しておき、HTMLからタグ内で指定するだけで良くなります。同じ記述を何度もするのではなく、同じスタイルを定義したセレクタをHTML側で指定するだけの簡単かつ拡張性のよいWebサイトが構築できるようになります。

CSSはWebサイトのデザインするためには欠かせないものとなっていて、ある要素を使用する場合は、特定のアイコンを使用してアンカーにすることができます。

例えばページの左右に小見出しをつける、サイトのマップをタイトルごとにリンクする場合に文字の最初に特定の三角のアイコンを使用するなどといった場合にはCSS側で小見出しのタグを指定したら画像を表示させるといった使用方法が可能です。

こうすることで同じタグであれば同一のアイコンを使用することができ、デザイン性が向上します。画像を変更したい場合はCSS側でアイコンのリンク先を変更するだけで完了します。もしCSSを使用しないで、タグ内に1つ1つ指定していた場合は、すべてのタグのリンク先を変更しなくてはならず、手間だけでなく変更漏れが発生し、せっかく制作したWebサイトの中身が充実していてもデザインが崩れてしまいます。

このように、HTMLでは構造を記述し、CSSではその構造をどのように表現させるのかを記述するためのものと分けることで、Webサイトの変更を柔軟に行い、かつ少ない工数で更新することができるようになります。特に変更の多いデザイン性の富んだサイトでは不可欠だと言えます。

CSSでできること

CSSは、ホームページのデザインを設定する為の言語であり、HTMLやXMLやSVGなどと組み合わせて使う事が一般的です。

CSSには、色やフォントなどの各種要素を設定する為のメソッドが用意されており、一般的なプログラミング言語やスクリプト言語に比べて、平易な書き方になっています。

従来のホームページのデザイン設定は、HTMLの各要素が持っているパラメータを変更したり、レイアウトはテーブル要素で行ったりしていましたので、煩雑になりがちでした。

CSSでは、HTMLのソースコードとCSSを分離させる事が出来るようになっていますので、非常にメンテナンスがしやすくする事が可能になっています。

ホームページのデザインを行う際には、CSSで各種設定を行う事で、色を変えたり、オブジェクトのサイズを変更したり、フォントのサイズや色や種類を変更したりして実現します。

指定する方法は、指定したい要素やクラス名を指定し、波括弧を使って各種メソッドを設定します。

メソッドの指定方法は、メソッド名を先に記述し、その後にコロンを書き、そして、設定したい値を記述して、最後にセミコロンで締めくくります。

一つの要素やクラスには、複数のメソッドを設定する事ができ、更に外部CSSで上書きを行う事も出来ますので、ベースになるCSSを書いておいて、外部CSSで上書きを行えば、自在にホームページのデザインを好きなように変更する事が可能になります。

JavaScriptは、Webサイトに動きを与える事が出来るようにする事が出来るスクリプト言語ですが、DOMとの組み合わせによって、HTMLの各要素やパラメータにアクセス出来るだけでなく、CSSの値も変更が可能です。

サードパーティー製のJavaScriptライブラリでは、予め、CSSにアクセスしやすくする為の仕組みが導入されていますので、容易にスクリプトでデザイン変更が出来るようになっています。 スタイルシートで出来る事は、基本的にデザインの設定ですが、最新規格では、スタイルシートだけで動きのあるメニューを作成する事も出来ます。

JavaScriptとの組み合わせによって表現力は豊かになり、色々な使い方が出来るようになります。

外部スタイルシートは、適用する順番を考えてHTMLに記述していかなくてはいけません。

スタイルシートは上書きが出来ますが、上書きをしたい部分を確実に適用する為には、順序を考えて設定を行っていく必要があります。

CSSの基礎知識

CSSはHTMLなどを使用したWebサイトの構築には欠かせないものとなっています。なぜWebサイトを構築する上で欠かせないものになっているかと言いますと、多くのメリットがあるからです。

HTMLでは要素を記述し、その中にタグを並べてブラウザで表示する仕組みになっています。数多くのWebサイトを見たことがある人は分かりますが、Webページには文字の大きさやフォントサイズ、色や背景色、ボタンやテキストエリアなど様々な項目が存在しています。

これらはすべて指定した位置に指定した要素が記述されているためです。CSSはこの定義された構造をどう表現するかを記述したファイルです。

CSSには多くのメリットがあると上述しましたが、同一のタグや属性に対しして同じスタイルを適用したい場合に非常にメリットがあります。

HTMLには同じ要素がいくつか記述されています。例えば見出しについては各ページで必ず見出しが存在し、タグが記述されています。

このタグにクラスやid、属性を指定しCSSで定義したセレクタを指定することによって、CSSで定義した文字のスタイルやボタン、テキストエリアを適用することができます。同じタグ内に同じスタイルを何度も記述するのではなく、CSSで定義した一つのスタイルを指定するだけで、同じ表現が可能になります。HTMLで同じスタイルを指定したい場合はこういった書き方が最も一般的な書き方です。

その他、アンカーのスタイルや画像の使用などもCSSで書くことができます。書き方としては他の書き方と同じで、セレクタとプロパティ、値を指定します。CSSにアイコンのリンクを埋め込むことは非常にメリットがあり、同じアイコンを何度も使用する場合は特に必須の書き方です。

例えばアンカーの文字の先頭にアイコンを表示させたい場合、タグに同じアイコンのリンクを指定して記述してしまうと、アイコンを変更したくなったら、すべてのタグを修正しなくてはいけなくなります。その点、CSSのセレクタを指定した場合はHTML側の修正は不要で、CSSのアイコンのリンク先だけを変更するだけですべての要素に変更を適用することができます。

また、Webサイトの拡張性を考慮すると、非常にメリットがあります。文字のスタイル部分を外に記述するだけで、追加したページに対しても同じようにスタイルを使用することができます。サイトの全体として統一感が出て、非常に良いWebサイトを作成することができます。

知っておきたいCSSの基本用語

CSSはhtmlなどWEBページを作成する上でよく使用し、構造の表現をまとめたものと言えます。CSSの基本的な用語として、セレクタ、プロパティ、値があります。

セレクタとは、htmlの要素名を指定して具体的なスタイルを定義する場合に使用します。例えば<P>という要素に適用したいスタイルが文字色が赤、フォントサイズが12ptというように全ての要素に同一のスタイルを適用できるようになります。htmlでいちいち要素ごとに同じスタイルを書きこむ必要はなく、CSSの定義だけて良くなるので非常に便利です。

セレクタは要素指定だけではなく、全称、class、idセレクタなど多くの種類を指定することが可能です。また、属性セレクタと呼ばれるセレクタでは、指定した要素で特定の属性を持つ要素だけに対してスタイルを指定することができます。自分で定義したクラスなども使用でき、異なる要素でも同じクラスを指定することで同様のスタイルを適用することができます。

次に指定するのはプロパティです。前述のようにフォントカラーを指定したい場合、プロパティにcolorを定義します。この他、フォントや文字サイズ、余白などのプロパティを使用することができます。文字色やサイズは値を指定して定義します。こうすることによって、要素のスタイルを決めることができます。

同じスタイルをhtmlのタグの中に定義して何度も同じことを繰り返して記述するとソースの見栄えだけでなく、検索ロボットのSEOの評価も下がってしまいます。このため、CSSはWEBページの構造では一般的に使用されています。

プロパティの値については要素ごとに違うようにしたい、h1タグや指定したクラスのタグのみに適用したい場合はCSSで定義だけしておいて、html側のタグ内でclassを指定することによって同じ要素でも異なるスタイルを適用することができます。

プロパティと値はコロン「:」で区切り、最後はセミコロン「;」で終了させます。

CSSの記述の仕方にも統一感を持たせることでWEBページの全体構造として非常に見やすく、拡張性のある記述ができるようになります。

書き方は比較的自由に記述できますが、セレクタのプロパティが複数指定したい場合は、改行を入れてインデントを揃えることで見栄えが良くなります。半角スペースを使用して適宜見やすい工夫ができると他の人がWEBページを更新する場合に分かりやすくなります。

無料相談会に参加する

未経験からでもクリエイティブクラスのプログラマを目指せる環境 プログラミングスキルだけでなく、より包括的なビジネススキルを学べる場と聞くと、上級者向けという印象を持つかもしれません。 Creator’s Hiveの受講者の9割がプログラミング未経験者です。

受講中はもちろんのこと、卒業後の就職・転職まで、万全のサポート体制を整えているため、未経験からプログラマに転職を希望されている方にもオススメです。

Creator’s Hiveプログラマ養成所の無料説明会に参加しよう!
 無料説明会を随時行っており、個別の相談も大歓迎です。

無料相談会に参加する

LEAVE A REPLY

*
* (公開されません)

CAPTCHA


*

COMMENT ON FACEBOOK