スタイルシート基本知識のカテゴリ
スタイルシートって何?
WebページはHTMLと呼ばれる一種の言語で記述されています。HTMLは文書を「見出し」「段落」「箇条書き」 などの部品を組合せたものとして扱っています。つまり、文書を役割で分別してしまおう。 そうすることで文書を構造として捉えようとしているわけです。
CSSにはレベルがある。
CSS・スタイルシートはまだまだ進化している新しいWebページ作成の考え方です。 そのためスタイルシートの書き方はまだ統一されておらず、複数の書き方があります。
スタイルシートを使いこなすには・・・
やはり最低限のHTMLに関する知識が必要です。特に「要素」は重要な知識です。
スタイルシートにも何種類かあります
一般に「スタイルシート」といえば『CSS』(cascading style sheet)をさします。
セレクタとプロパティをおさえておこう!
スタイルシートの基本的な考えかたに「セレクタ」と「プロパティ」があります。
特定の要素にだけ、スタイルシートを適用したい場合。
スタイルシートの本来的な使い方は「Webページ内の要素の書式を統一する」ことです。
HTMLファイル一つだけにスタイルシートを適用したい場合。
「Webページ内の要素の書式を統一する」とは、Webページ全体にスタイルシートで書式をコントロールすることです。
スタイルシートを外部ファイルで利用する。
CSSが最も力を発揮するのは、Webサイト全体のデザインを統一する場合です。この場合、 スタイルシートを外部ファイルとして別ファイルに保存し、HTMLページから取り込む形をとります。
スタイルシートの優先順位を制御する
スタイルシートの内容は、特定の要素(タグ) のstyle属性>HTMLファイルのヘッダー部のstyle要素>外部ファイルを利用の順番に適用されます。
クラスを使って、指定したところのみスタイルシートを適用する
セレクタに要素を指定してしまうと、そのスタイルシートを適用したWebページすべてで、 その要素のすべての箇所が指定した書式となります。
つまり、P要素の文字サイズを指定すると、そのWebページ内のすべての段落(<p>タグで囲んだテキスト) は指定したサイズになります。
ある要素に限定したクラスを使う
CSSのキモともいえるクラスですが、特定の要素にだけ適用できるクラスを設定することもできます。
同名のクラスを複数の要素に設定する。
同じ名前のクラスを違う要素に設定することが出来ます。このとき、各要素に設定したクラスは、それぞれ他の要素には影響しません。
IDを使って要素を指定する
クラスと同じようにIDをHTML文書の要素に割り当てることで、スタイルシートの内容を反映させることが出来ます。
ある要素の子要素だけにスタイルシートを適用する。
HTML文書は多数の要素で構成されています。要素Aの中に、別の要素Bを入れ込んだ場合、AとBは親子関係にあるといいます。
リンクの書式を変えるには。
リンクを意味するa要素(<a href="URL">文字列</a>)はWebページを作成する場合、 必ず使用する要素です。デザイン上、a要素の色や見栄えを制御したい場合があると思います。
文章の最初の一文字だけに違う書式を設定する。
雑誌などでよく見かける、文章の段落の最初の一文字だけを大きくしたり、文字色を変える”ドロップキャップ”ですが、 スタイルシートを使ってWeb上の文章でも表現することが出来ます。
文章の最初の一行だけを違う書式にする。
文章の最初の一文字だけに違う書式を設定するには 「:first-letter」擬似要素を使用しました。同じように、最初の一行に違う書式を設定することも出来ます。
スタイルシートで色の指定をする。
スタイルシートを使ってデザインをコントロールする時、文字色や背景色を指定することもよくあります。HTMLで指定する時と同様、 色の表し方は、キーワードを使う方法とRGBの濃度を数値で指定する方法があります。
スタイルシートでのサイズのあらわし方
文字サイズや画像の幅を指定するとき、数字で明確に指定することがベストです。この数字の単位は『絶対単位』とj『相対単位』 があるます。