画面サイズ(横:/縦:
Topページへもどる
前のページへもどる

CSSとは?

 WEBプログラミング(ホームページのプログラミング)では、HTMLの次に CSSやジャバスクリプト(JavaScript)を学習するというのが一般的です。
「IT用語辞典e-Words」によれば

CSS【 Cascading Style Sheets 】カスケーディングスタイルシート
 CSSとは、Webページの要素の配置や見栄えなどを記述するための言語。 HTML文書に追加して、「見た目をコントロールすることができ、文書の(※1プログラムの)外部から 読み込んで適用することも(※2)、HTMLのプログラムの中に埋め込んで記述する(※3)こともできる。」

という説明になっています。(※1~※3の部分は筆者追加)
※1、※2、※3の説明

また追加的な説明(英単語の説明)をすれば
カスケード【 cascade 】(カスケーディング【Cascading】) の意味は、
「何段も連なった小さな滝のこと。」で、転じて、「同じものがいくつも数珠つなぎに 連結された構造」や、「連鎖的・段階的に物事が生じる様子」を表しています。
 スタイルシートは、「ページの文書構造を記述するための部分」と 「スタイル(見栄え)を指定する部分」 を分離するために考え出された(作られた。規定された。)ものです。この、 「スタイル(見栄え)を指定する部分」 のことを 「スタイルシート」 といいます。

さらに「IT用語辞典e-Words」によれば
 多くの設定値は親要素に指定されたものが子要素、孫要素に引き継がれ、 子要素で指定されたものが追加されていく。このように設定値が上から下へ 伝播していく様子を 階段状の滝 を意味する “cascade” (カスケード) になぞらえてこのような名称となった。
という記述があります。
「親要素」が「子要素」、「孫要素」に引き継がれる例
を調べてみると、例えば次のようなものがあげられます。

例えば、画面に、游ゴシック体で

「今日の日付と時刻は、
20231302019です。」

と表示する場合のスタイルシートの設定例は、次のようになります。

<スタイルの設定>
◆親要素:背景色を黄色にする
 ※子要素1:書体を游ゴシック体
  〇孫要素1:文字色を赤にする
   ・ひ孫要素1:文字の大きさ指定
  〇孫要素2:文字色を青にする
   ・ひ孫要素2:文字の大きさ指定
 ※親要素の背景色で、子要素の書体で、孫要素の文字色で、ひ孫要素の文字の大きさで・・・

「今日の日付と時刻は、
20231302019です。」

階段状の滝 のように( カスケーディング に)表示されています。 イラスト なるほど・・・

上記※1、※2、※3の説明

(※1)の説明

(※2)プログラムの外部からスタイル設定を読み込んで適用することのメリット
 例えば
「今日の日付と時刻は、
20231302019です。」
と表示する場合、この部分だけでもスタイルの設定部分としては 「背景色の設定」「書体の設定」 (書体の設定は省略できる。省略した場合は規定値が適用される。)、 「文字の色」 さらに、 「文字の大きさ」 などなど十数か所にもなります。さらに、ページ全体では数十か所、 ページ数が数百ページある場合は、数千~数万か所と 膨大な量になります。 この煩わしさを解消するために、スタイル設定をまとめたファイルを一つ作って名前をつけておけば、 この設定を読み込んで適用することで、煩わしさがものすごく軽減できます。
【デメリット】としてあげれば、「適用するスタイルが、『自分が名付けたスタイル名』なので、 どういうふうに設定してあるのかがわかりづらい。(細かな部分までは覚えていない。)」と言った ところでしょうか。しかし、私の経験からすれば、 メリットの方がはるかに多い(メリット大!) と思っています。

(※3)HTMLのプログラムの中に埋め込んで記述することのデメリット
 上記の(※2のメリット)の逆で、数千か所~数万か所のスタイルをプログラム中に書くことの 煩わしさを考えれば説明するまでもありません。メリットは少なく、 デメリット大!です。 ページ数が非常に少ない場合には、【メリット】になるでしょう。
ちなみに、「文字色が青色で太文字で表示する」というスタイル設定は
 画像
と自分なりに設定している。これを 数十~数千か所 に書き込むのは容易ではない。「large-blue-b」という名前を付けておけば少ない文字数で適用できる。 名前はlbbという名前でもいいが、あまりにも短すぎて意味がわからない。 ブラックのbなのか、ブルーのbなのかわからない。「意味がわかるような名前」を付けるべきです。
 また、「HTMLのプログラム中に記述する方法」には、次の2通りがあります。
(1)スタイルを適用したい場所にスタイル設定を書き込む方法。
  膨大な作業量になります。
(2)外部ファイルと同じスタイル設定を、各プログラムの冒頭に書き込む方法
  この方法だと、スタイルを修正した場合は、そのページにしか反映されません。
※外部ファイルを一つだけ作ってそれを適用する方法「いかに素晴らしいことか!」 がわかります。

このページに適用しているCSS(スタイルシート)の例

※このページには4本のCSSファイルを外部から読み込んでいます。その中の1本です。
※スマートフォンでは見れません。パソコンでご覧ください。
【ファイル名】fontSoutaiSettei.css
    

/* ----------ノーマルフォント群 --------------*/
.medium-black {
    /* 文字サイズ:標準、ノーマル、文字色:黒 */
    font-size: medium;
    font-weight: normal;
    color: #000000;
}

.medium-red {
    /* 文字サイズ:標準、ノーマル、文字色:赤 */
    font-size: medium;
    font-weight: normal;
    color: #FF0000;
}

.medium-green {
    /* 文字サイズ:標準、ノーマル、文字色:緑 */
    font-size: medium;
    font-weight: normal;
    color: #00FF00;
}

.medium-blue {
    /* 文字サイズ:標準、ノーマル、文字色:青 */
    font-size: medium;
    font-weight: normal;
    color: #0000FF;
}

/* ----------太字フォント群 ----------------*/
.xxsmall-black-b {
    /* 文字サイズ:極々小、太字、文字色:黒 */
    font-size: xx-small;
    font-weight: bold;
    color: #000000;
}

.xxsmall-red-b {
    /* 文字サイズ:極々小、太字、文字色:赤 */
    font-size: xx-small;
    font-weight: bold;
    color: #FF0000;
}

.xsmall-black-b {
    /* 文字サイズ:極小、太字、文字色:黒 */
    font-size: x-small;
    font-weight: bold;
    color: #000000;
}

.xsmall-red-b {
    /* 文字サイズ:極小、太字、文字色:赤 */
    font-size: x-small;
    font-weight: bold;
    color: #FF0000;
}

.small-black-b {
    /* 文字サイズ:小、太字、文字色:黒 */
    font-size: small;
    font-weight: bold;
    color: #000000;
}

.small-red-b {
    /* 文字サイズ:小、太字、文字色:赤 */
    font-size: small;
    font-weight: bold;
    color: #FF0000;
}

.medium-black-b {
    /* 文字サイズ:標準、太字、文字色:黒 */
    font-size: medium;
    font-weight: bold;
    color: #000000;
}

.medium-red-b {
    /* 文字サイズ:標準、太字、文字色:赤 */
    font-size: medium;
    font-weight: bold;
    color: #FF0000;
}

.medium-blue-b {
    /* 文字サイズ:標準、太字、文字色:青 */
    font-size: medium;
    font-weight: bold;
    color: #0000FF;
}

.large-black-b  {
    /* 文字サイズ:大、太字、文字色:黒 */
    font-size: large;
    font-weight: bold;
    color: #000000;
}

.large-blue-b  {
    /* 文字サイズ:大、太字、文字色:青 */
    font-size: large;
    font-weight: bold;
    color: #0000FF;
}

.large-red-b  {
    /* 文字サイズ:大、太字、文字色:赤 */
    font-size: large;
    font-weight: bold;
    color: #FF0000;
}

.xlarge-black-b  {
    /* 文字サイズ:極大、太字、文字色:黒 */
    font-size: x-large;
    font-weight: bold;
    color: #000000;
}

.xlarge-blue-b  {
    /* 文字サイズ:極大、太字、文字色:青 */
    font-size: x-large;
    font-weight: bold;
    color: #0000FF;
}

.xlarge-red-b  {
    /* 文字サイズ:極大、太字、文字色:赤 */
    font-size: x-large;
    font-weight: bold;
    color: #FF0000;
}

.xxlarge-black-b  {
    /* 文字サイズ:極々大、太字、文字色:黒 */
    font-size: xx-large;
    font-weight: bold;
    color: #000000;
}

.xxlarge-red-b  {
    /* 文字サイズ:極々大、太字、文字色:赤 */
    font-size: xx-large;
    font-weight: bold;
    color: #FF0000;
}
.xxlarge-blue-b  {
    /* 文字サイズ:極々大、太字、文字色:青 */
    font-size: xx-large;
    font-weight: bold;
    color: #0000FF;
}
    
	


ページ先頭へ

Topページへもどる
前のページへもどる