ＣＳＳとは？

画面サイズ（横：／縦：）

ＣＳＳとは？

　ＷＥＢプログラミング（ホームページのプログラミング）では、ＨＴＭＬの次にＣＳＳやジャバスクリプト（JavaScript）を学習するというのが一般的です。
「ＩＴ用語辞典e-Words」によれば

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

という説明になっています。（※１～※３の部分は筆者追加）

※１、※２、※３の説明

また追加的な説明（英単語の説明）をすれば

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

さらに「ＩＴ用語辞典e-Words」によれば

　多くの設定値は親要素に指定されたものが子要素、孫要素に引き継がれ、子要素で指定されたものが追加されていく。このように設定値が上から下へ伝播していく様子を階段状の滝を意味する “cascade” （カスケード）になぞらえてこのような名称となった。

という記述があります。

「親要素」が「子要素」、「孫要素」に引き継がれる例を調べてみると、例えば次のようなものがあげられます。

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

「今日の日付と時刻は、2024年12月6日6時30分です。」

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

＜スタイルの設定＞

◆親要素:背景色を黄色にする
　※子要素１:書体を游ゴシック体
　　〇孫要素１:文字色を赤にする
　　　・ひ孫要素１:文字の大きさ指定
　　〇孫要素２:文字色を青にする
　　　・ひ孫要素２:文字の大きさ指定
　※親要素の背景色で、子要素の書体で、孫要素の文字色で、ひ孫要素の文字の大きさで・・・

「今日の日付と時刻は、2024年12月6日6時30分です。」

と階段状の滝のように（カスケーディングに）表示されています。

なるほど・・・

上記※１、※２、※３の説明

（※１）の説明

（※２）プログラムの外部からスタイル設定を読み込んで適用することのメリット
　例えば

「今日の日付と時刻は、2024年12月6日6時30分です。」

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

（※３）ＨＴＭＬのプログラムの中に埋め込んで記述することのデメリット
　上記の（※２のメリット）の逆で、数千か所～数万か所のスタイルをプログラム中に書くことの煩わしさを考えれば説明するまでもありません。メリットは少なく、デメリット大！です。ページ数が非常に少ない場合には、【メリット】になるでしょう。

ちなみに、「文字色が青色で太文字で表示する」というスタイル設定は
　

と自分なりに設定している。これを数十～数千か所に書き込むのは容易ではない。「large-blue-b」という名前を付けておけば少ない文字数で適用できる。名前はlbbという名前でもいいが、あまりにも短すぎて意味がわからない。ブラックのbなのか、ブルーのbなのかわからない。「意味がわかるような名前」を付けるべきです。
　また、「ＨＴＭＬのプログラム中に記述する方法」には、次の２通りがあります。
（１）スタイルを適用したい場所にスタイル設定を書き込む方法。
　　膨大な作業量になります。
（２）外部ファイルと同じスタイル設定を、各プログラムの冒頭に書き込む方法
　　この方法だと、スタイルを修正した場合は、そのページにしか反映されません。
※外部ファイルを一つだけ作ってそれを適用する方法が「いかに素晴らしいことか！」がわかります。

このページに適用しているＣＳＳ（スタイルシート）の例

※このページには４本のＣＳＳファイルを外部から読み込んでいます。その中の１本です。

※スマートフォンでは見れません。パソコンでご覧ください。

【ファイル名】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ページへもどる

前のページへもどる