ホームページ作成 無料指南所

最終更新日:2014/9/11

ホームページ作成 無料指南所 index.html  >  css.html ｃｓｓについて

ｃｓｓについて

ｃｓｓとは、カスケーディング・スタイル・シートと呼ばれるもので、Webページのレイアウトを定義する規格のことです。これまで、WebページのレイアウトはHTMLを用いて記述され、HTMLにはレイアウトに関する仕様が大量に取り込まれた歴史がありますが、そうした使い方は本来のhtmlの使い方に反したものなので、そうしたレイアウトや装飾などといった部分に対して、htmlとは別に新たな枠組みを作ろうということで、このcssが登場しました。
このcssは、文字の装飾から、行間の見栄えなど、さらにはレイアウト自体にも使え、またhtmlで表現可能なことの大部分を表現できて、かつhtmlでは出来ない装飾方法もあるので、現在ではhtmlとセットで覚えておく必要があるとされる、ホームページ作成に密接に関わる言語です。

一番分かりやすいのは、実際に見てもらった方が早いと思うので、
下記にそれぞれスタイルシートが適用されたページを貼っておきます。
ちなみにサンプルは、このサイトのソフト紹介のページを使ってみます。

・cssを適用させたページ

・ｃｓｓの適用をさせないページ

ご覧になったでしょうか？
この２つのページのhtmlはまったく同じものです。
しかし、cssの指定を省いただけで、このように全く違った見え方になるのが分かったと思います。

このように、ホームページの見栄えをよくするために使われているのがcssです。

では、どのように書けばいいのでしょうか？

実は、cssはhtmlを触る人なら絶対に覚えなければならないとされるものですが、
使われる文法などとは全く別物であるので、覚えるのには少し苦労するのかもしれません。

以下に説明を記しておきます。

p・・・・・・htmタグlの段落要素。<p>~</p>の事

font-size・・・・・・文字サイズ。上の場合は文字サイズ13ｐｘ指定

color・・・・・・文字の色。#999999とは「カラーコード」の事で、言葉でいうと「灰色」

・・となります。

ここからは解説ですが、
まず、"{" 　から 　 "}"　 までの部分を宣言ブロックといいます。
また、"color : #999999" の部分を宣言といいます。
宣言の内、":" より前（上例では "color"）をプロパティ（特性）といいます。
宣言の内、":" より後（上例では "#999999"）を値といいます。
上例の CSS 断片を適用すると宣言している文書のうち、セレクタが指定しているものと一致する部位（HTML 文書においては要素、要素の親子関係、特定のクラス、ID など）に、宣言ブロック内の宣言が適用されます。
宣言は、「プロパティ:値」か、「空（何も記述しない）」のどちらかで構成され、プロパティ、":"、値の前後には空白文字（スペース、タブ、改行など）を自由に入れられ、また";"で区切ることにより宣言を並べて書くことができます。
よって、 上に記した例は、HTML 文書に適用する場合に、
「ｐ という 要素の文字色を灰色にせよ」　という指定を意味しています。

この文法がｃｓｓの基本の使い方になりますので、
これさえ覚えたら、筆者的には、そのほかの使い方も、覚えていきやすいと思うので、
苦手とは言わず、積極的に使っていきましょう。

Favorite

VTuber事務所のおすすめランキング

Last update:2024/1/15