TOP > スタイルシート基本知識

スタイルシート基本知識のカテゴリ

スタイルシートって何?

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『相対単位』 があるます。

 
『1歩!スタイルシート』はリンクフリーです。ご意見・ご感想等なんでもどうぞ!メールはこちらから
『1歩!スタイルシート』の許可なく本サイトの一部あるいは全文のコピーならびに転用を禁じます。