CSS

出典: フリー教科書『ウィキブックス（Wikibooks）』
ナビゲーションに移動 検索に移動

メインページ > 工学 > 情報技術 > プログラミング > CSS

目次[編集]

進捗状況の凡例
00%.svg 数行の文章か目次があります。
25%.svg:本文が少しあります。
50%.svg:本文が半分ほどあります。
75%.svg: 間もなく完成します。
100 percent.svg: 一応完成しています。

大学の教科書
自然科学: 数学 - 物理学; 古典力学 量子力学 - 化学; 無機化学 有機化学 - 生物学; 植物学 研究技術 - 地球科学 - 医学; 解剖学
語学: 日本語 英語 エスペラント 朝鮮語 デンマーク語 ドイツ語 フランス語 ラテン語 ルーマニア語
人文科学: 歴史学; 日本史 中国史 世界史 歴史観 - 心理学 - 哲学 - 芸術; 音楽 美術 - 文学; 古典文学 漢詩
社会科学: 法学 - 経済学 - 地理学 - 教育学; 学校教育 教育史
情報技術: 情報工学; MS-DOS/PC DOS UNIX/Linux TeX/LaTeX CGI - プログラミング; BASIC C言語 C++ D言語 HTML Java JavaScript Lisp Mizar Perl PHP Python Ruby Scheme SVG
小・中・高校の教科書
小学: 国語 社会 算数 理科 英語
中学: 国語 社会 数学 理科 英語
高校: 国語 - 地歴 - 公民 - 数学; 公式集 - 理科; 物理 化学 地学 生物 - 外国語 - 情報
解説書・実用書・参考書
趣味: 料理本 - スポーツ - ゲーム
試験: 資格試験 - 入学試験
その他の本: 防災 - 生活と進路 - ウィキペディアの書き方 - ジョーク集

はじめに[編集]

Wikipedia
 ウィキペディアにCascading Style Sheetsの記事があります。

CSS (Cascading Style Sheets) はHTML文書やXML文書に対して、文書のレイアウトや文字色などの多様なスタイルを指定するために生み出されました。

従来、HTMLのみでも文書に対して文字色の変更や背景画像を添えるなどの限定的な装飾指定は可能でしたが、HTML文書のみで完結した装飾指定は文書構造を複雑にし、また作成者によっては装飾目的で文書に誤った意味を付加することもあり、閲覧者にとってはアクセス容易性を、作成者にとってはメンテナンス性を低下させる原因となりました。

CSSを利用することによって構造と装飾を分離することが出来るため、HTML文書やXML文書の文書構造をシンプルに保つことができ、また従来のHTML文書のみで完結した装飾指定と比べても格段に豊富な装飾が可能になります。

各ブラウザーによる解釈の違い[編集]

2022年6月現在広く利用されているウェブブラウザーには、Google Chrome、Microsoft EdgeやMozilla Firefox 、Safari（macOSのウェブブラウザー）などがあります。

それぞれのウェブブラウザーでは、まだ国際規格化されていない独自のCSS拡張や草案段階の機能を先行実装しています。

さらに国際規格化されている機能でも各ブラウザーごとに解釈に揺れがあったり、間違った解釈がされていたり、あるいはサポートされていないといったものもあります。 このため、あるブラウザーで良く見えていたものが他のブラウザーでは閲覧出来ない事があります。

このことから、ウェブページを作成する場合には、独自拡張や先行実装を極力使用しないように注意する必要があります。

各ブラウザーでの機能の対応状況の調べ方[編集]

具体的に、特定の機能のブラウザーごとの実装状況を調べることができます。 例えば flexbox の実装状況が知りたかったとると、「flexbox」を https://caniuse.com/ で検索します。 すると、 https://caniuse.com/?search=flexbox が帰ってきます。 これを観ると、いまは亡きIEは、最終版まで flexbox をサポートできず、他のモダンブラウザーはすべて対応していることがわかります。 検索対象はCSSにとどまらず、HTML, JavaScript など多岐にわたり fetch などのWeb APIも検索対象になります。

CSS以外のレイアウト[編集]

CSS3はレイアウトを操作する機能を提供します。ところが現実のインターネットにはHTMLのTABLE要素を用いてレイアウトするなどCSSによらず本来の文章構造とは一致しないマークアップをレイアウトの為に行ったコンテンツがいまだに散見されます（2021年6月現在）。

この様なマークアップを行うと、例えば視覚障害者の方が使う読み上げブラウザが文章構造を把握できず適切な読み上げができなくなってしまいます。 また、TABLE要素でレイアウトするとレスポンシブデザインには出来ないのでモバイルディバイスでは「巨大な表の一部を虫眼鏡で覗く」様なユーザ体験となります。

HTML4では、色やサイズのHTML要素により指定する機能（FONT要素が象徴的）は、非推奨ながらW3Cの規定するHTML標準の一部でした（非推奨であるがゆえ標準化の度合いが相対的に低く、それがHTMLレンダリングエンジンごとの差異をさらに大きくする悪循環に陥っていました）。

しかし、HTML5では規格制定主体がW3CからWHATWGとなり、大幅な仕様改訂が行われFONT要素など物理修飾を行う要素は廃止（一部は物理修飾を離れた意味に再定義）となりました。 このことによってFONT要素はもはやHTML5の要素ですらありません[1]）。 また、FRAMESET要素も廃止されました。 DOCTYPEからDTDがなくなり、SGMLに基づいたマークアップ言語ですらなくなりました。

⇒ ウェブ標準

※ 未分類[編集]

※ どこのサブページに入れたらいいか不明な内容を、ここに記述する。
ある程度、記述が確立したら、サブページ化してください。

[TODO:次に示している例は、floatを使ったり根拠のないマージン見込みを使った悪いコードで、guridやflexboxを使った良質のコードに置換えるべきです]

たとえばCSSを使って、ページを左右2段組にしたい場合、下記コードのようにすればいい。

典型的な例である。

コード例
<!DOCTYPE html>
<html lang="ja">
<head>
    <title>CSSによるページ左右分割のコード例</title>

    <style type="text/css">

        .left {
            width: 60%;
            float: left;
            background-color: #ccccff
         }

        .right {
            width: 30%;
            float: right;
            background-color: #ffaaaa;
        }

        .kaigyo1 {
            word-break: break-all;
            overflow-wrap: anywhere;
        }

        .kaigyo2 {
            word-break: break-all;
            overflow-wrap: anywhere;
        }
    </style>
</head>

<body>

    <div class="left">
        <div class="kaigyo1">
            aaa aaaaaaaaaa aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
        </div>
    </div>
    <div class="right">
        <div class="kaigyo2">
            bbbbbbb bbbbbbbbbbbbbb bbbbbbbbbbbbbbbbb bbbbbbbbbbbb
        </div>
    </div>

</body>
</html>


解説

floatの指定がないと、片方のブロックの下の行から、もう片方のブロックの描画を開始してしまう。なので、もし floatが無いと、左右のブロックが斜め気味に配置されてしまい、目的の配置にならない。

とにかく、左右に段組をしたい配置の場合、まず float を検討するのが良いだろう（なお、他にも方法はある）。

CSS 指定の中の word-break: break-all; overflow-wrap: anywhere; は、改行を指定するのに、実用上は、普通は必要になる。

コレが無いと、長い文章などが突き出てしまう。（特に日本語の場合、突き出やすい。）

なお、 word-break: break-all; も overflow-wrap: anywhere; も効果はほぼ同じだが、ブラウザ種類ごとの互換性のため、上記コードでは両方とも記載してある。

width 幅とは横幅のこと。なお 縦幅なら height （ハイト）である。


width や height を指定する際、この場合は % （パーセント）単位でも指定が出来る。(CSS や html で入り組んだ複雑なレイアウトをしたりすると、場合によっては % 指定を受け付けないブラウザもあるが、しかしこのコード例の程度のレイアウトなら、どのブラウザでも(2020年5月4日に Firefox75 および Google Chrome84 で確認)、%表示できる。)

他にもピクセル単位(px)でwidthなどの幅を指定する方法もある。

余談だが、一般にCSSのコードは head タグの中に入れるのが普通である（入れなくても動作する）。


なお、この左右2段組のレイアウトのことを「2カラム」と言います。「カラム」とは柱のことです。

いっぽう、もし 左・中央・右 で3段構成になっていれば「3カラム」と言います。

通常のなんの左右分割もしてない状態なら、「シングルカラム」と言います。


あなたが今読んでいる「なお、この左右2段組のレイアウトのことを「2カラム」と言います。」という文章から「通常のなんの左右分割もしてない状態なら、「シングルカラム」と言います。」の文章までは、パソコン画面では、シングルカラムで表示されているだろうと思います。

CSS関数[編集]

マイナーな機能だが、CSS では実は数値計算が可能である。

ただし calc()関数を呼び出すなどして、そのカッコ内で数値計算をする必要がある。

calc()関数では、加減乗除をできる。

CSSのプロパティ指定の中で 

width: calc(20% + 40%);

のように、calcの中で指定する。（なお、上記の場合、60%になる）

CSS関数による数値計算の際、演算子 + や - の前後には半角スペースの空白を入れる必要がある。（そうしないと、ブラウザが演算子として認識せず、エラーになる。）


コード例
<!DOCTYPE html>
<html lang="ja">
<head>
    <title>CSS関数のテスト</title>

    <style type="text/css">

        .left {
            width: calc(20% + 40%);
            float: left;
            background-color: #ccccff
         }

        .kaigyo1 {
            word-break: break-all;
            overflow-wrap: anywhere;
        }

    </style>
</head>

<body>

    <div class="left">
        <div class="kaigyo1">
            5555555555555555555555555555555555555555555555555555555555555555555555555555555
            5555555555555555555555555555555555555555555555555555555555555555
        </div>
    </div>

</body>
</html>
結果
ページの左端から、60%の幅までに「5555・・・」の記述が続く。


その他のCSS関数

CSS関数はいくつもあるが、比較的によく紹介されるものとして、

回数などをカウントできる counter()
minmax
attr()
色において透過度を含めた色指定 rgba()
変数を参照できる var()

などがある。

counter()については、別の節でCSSカウンターと一緒に説明する。


なお、CSS関数の知名度はマイナーであり、一般の書籍では、CSS関数を紹介していない書籍も多い。

そもそも、本来、関数などの動的処理の構築は JavaScript の担当なので、あまりCSS関数で複雑な機能の実装を行うのは好ましくないだろう。


また、マイナーな機能は、将来的に仕様変更などもされやすく、もしかしたら機能が削減などをする可能性も高い。


こういった事情があるので、CSS関数を使うなら、なるべく最低限だけ、レイアウトや簡単な画像の表示といった映像的なことがらに関係ありそうな処理にだけ、CSS関数を使うべきだろう。

画像とあまり関係なさそうな処理や、複雑な処理は JavaScript 側で行うべきだろう。


無い機能

いわゆる if文（条件分岐） や while文（繰り返し） などといった制御構造の機能は、CSSには無い。

そういった制御構造のプログラミングをしたいなら、JavaScirptを使うべきである。（webページでの動的な制御は、JavaScriptの担当である。CSSは静的なレイアウト管理の担当である。制御構造は、CSSとは管轄が違う。）


CSS変数[編集]

2015年ごろから主要なブラウザに追加されてきた新機能で、CSS変数というのがある。正確には「カスタム プロパティ」という。

2015年以降の普通のwebブラウザでも、ほぼそのまま使える（バージョンによる若干の違いの可能性はあり）。特殊なアドオンなどのインストールは不要である。


書式
        :root {
            --変数名: 値 ;
        }

といった書式で、グローバル変数を定義できる。

CSS変数により、プロパティの値を変数として定義できる。（一方、プロパティ名自体は、CSS変数では定義できない。）


コロン「:」をrootの前につけることを忘れないように。

また、変数名の前には--をつける。ハイフン2個である。

CSS変数を呼び出すには、CSS関数のvar()を使って、 

var(--変数名)

の書式で呼び出せる。


コード例
<!DOCTYPE html>
<html lang="ja">
<head>
    <title>CSS変数のサンプル</title>

    <style type="text/css">

        :root {
            --hensuu: 20%;
        }

        .left {
            width: var(--hensuu);
            float: left;
            background-color: #ccccff
         }

        .kaigyo1 {
            word-break: break-all;
            overflow-wrap: anywhere;
        }

    </style>
</head>

<body>

    <div class="left">
        <div class="kaigyo1">
            fffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffff
            ffffffffffffffffffffffffffffffffffffffffffffffffffffffffffff
        </div>
    </div>

</body>
</html>


結果
左端から幅 20% まで「ffff・・・」（以下略）を表示。


  • 経緯

正式名称がカスタムプロパティなのに、なぜ『CSS変数』(英語でも"CSS Variables" という)のように『変数』と呼ばれるかというと、これには歴史的な経緯があり、もともと国債規格団体のW3Cでは仕様名が"CSS Variables (『CSS変数』)として提唱されており[2]、

2012年当時の規格では

(※ 廃止された古い仕様)
       :root {
           var-変数名: 値 ;
       }

のように変数(Variable)として宣言する場合には接頭辞に var- をつけないといけなかったという経緯があったのである。

ブラウザの実装でも、早い段階でCSS変数のサポートを導入した過去のFeirefox29 (時期は2013年の後半ごろ)でも、同様の旧仕様でサポートしていた。


その後、他社のブラウザでも同様の機能が導入されることになり、その際にW3C側での仕様の更新で、現在のカスタムプロパティの仕様に変更されたという経緯があり、その際に名称も変更した。

よってカスタムプロパティの実態は、変数である。 CSSの プロパティ値 を 変数を使って カスタムする という機能である。



コメントアウトの方法[編集]

CSSでコメントアウトを使うには/* */を使う。（一方、C言語などにある //だとエラーになり実行されない。）

コード例 

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <title>CSSカウンターのテスト</title>
    <style>
        body {
          counter-reset: i;  /* コメントのテスト */
        }
        h3::before {
          counter-increment: i;
          content: counter(i);
        }   
    </style>
  </head>
  <body>
    <h3>はじめにg</h3>
    <h3>文字表示のしかた</h3>
    <h3>算術演算</h3>
  </body>
</html>

上記コードでは styleタグのbody の counter-reset でコメントアウトをしている。

CSSカウンター[編集]

基本[編集]

CSSで、呼び出し回数をカウントをする機能がある。

節のタイトルに連番などをつけたい場合に、用いることができる。

書式は

CSS 

body {
  counter-reset: 変数名;  /* カウンター変数をリセット */
}

連番させたい要素のセレクタ::before {
  counter-increment: 変数名;    /* 変数名のあとに数字を指定すると、増分の間隔を指定できる。何も数値指定しない場合は1ずつ増分 */
  content: counter(変数名);     /* カウントする変数とその書式 */
}

である。

プロパティ content の値に、CSS関数の couter() を用いる。

コード例 

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <title>CSSカウンターのテスト</title>
    <style>
        body {
          counter-reset: i;
        }
        h3::before {
          counter-increment: i;
          content: counter(i);
        }   
    </style>
  </head>
  <body>
    <h3>はじめに</h3>
    <h3>文字表示のしかた</h3>
    <h3>算術演算</h3>
  </body>
</html>

実行結果 

1はじめに

2文字表示のしかた

3算術演算

書式のとおりだと、番号「1」と「はじめに」のあいだに隙間が無く、やや読みづらい。

番後の前後に文字をつけたす[編集]

そこで、 contentプロパティのところを 

content: "第" counter(i) "章  ";

のようにすると、番号の前後に文字を入れることができる。空白を追加したいなら、単に引用符の内部に空白スペースをいれればいい。 

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <title>CSSカウンターのテスト</title>
    <style>
        body {
          counter-reset: i;
        }
        h3::before {
          counter-increment: i;
          content: "第" counter(i) "章  ";
        }
    </style>
  </head>
  <body>
    <h3>はじめに</h3>
    <h3>文字表示のしかた</h3>
    <h3>算術演算</h3>
  </body>
</html>

実行結果 

第1章 はじめに

第2章 文字表示のしかた

第3章 算術演算

増分の間隔を変更[編集]

プロパティ 

counter-increment: i 2;

というように counter-increment プロパティの変数(i)のあとに数値指定すると、2→4→6 というふうに数える。つまり 

第2章 はじめに

第4章 文字表示のしかた

第6章 算術演算

と表示が変わる。

つまり、 

 counter-increment: i;

と変数のあとに何も数値を書かない場合は、 

 counter-increment: i 1;

と同じ意味になる。

なお上述のiの直後の増分間隔の数値には、0 や -1 など指定できる。(Fedora32 環境での Firefox75で動作確認ずみ。)

カウントの初期値を変更[編集]

CSSの body のほうで、 

counter-reset: i 10;

のように変数のあとに数値を書くことで0以外の数値から数えることができる。

何も指定しない場合、CSSでは0番から数えている。いくつか前の節で「第1章 はじめに」のように表示されるのは、最初の1回目のカウントのときに、+1したからである。 

counter-increment: i -1;

のようにマイナスの数を増分間隔（インクリメント値）に指定すれば、9→8→7というふうにカウントダウン方式で数えることもできる。

コード例 

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="utf-8">
    <title>CSSカウンターのテスト</title>
    <style>
        body {
          counter-reset: i 10;
        }
        h3::before {
          counter-increment: i -1;
          content: "のこり" counter(i) "秒  ";
        }
    </style>
  </head>
  <body>
    <h3></h3>
    <h3></h3>
    <h3></h3>
  </body>
</html>

表示結果 

のこり 9秒

のこり 8秒

のこり 7秒

このように、最初のカウントの際、すでに増減された状態で表示されている。（なので「のこり 10秒」でなく「のこり 9秒」から表示している。）

なお、説明の簡単化のため、秒数カウントダウンのような文字表示をしたが、ブラウザで表示を放置していても、べつにカウントダウンが進行したりはしないので、誤解のないように。

カウントのスタイルを変更[編集]

counter()CSS関数の第2引数でスタイルを変更することが出来る。 

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <title>CSSカウンターのテスト</title>
    <style>
      body {
          counter-reset: i;
      }
      h3::before {
          counter-increment: i;
          content: "第" counter(i, cjk-ideographic) "章  ";
      }
    </style>
  </head>
  <body>
    <h3>はじめに</h3>
    <h3>文字表示のしかた</h3>
    <h3>算術演算</h3>
  </body>
</html>

実行結果 

第一章  はじめに

第二章  文字表示のしかた

第三章  算術演算

図形の描画[編集]

CSSでは、円や長方形などの基本図形の描画もできる。ただし、あまり使い勝手が良くないので、HTML5で実装されたcanvasタグや、あるいはSVG機能を使って図形描画するのが良い。（SVG描画については wikibooks『SVG』を参照せよ。HTML5のcanvasタグの使い方についてはwikibooks『HTML/HTML5#canvas要素』を参照せよ。）

CSSはもともと、ページ構成などのレイアウトを決めるためのものなので、そもそもCSSは図形描画を目的としたものではない。HTML5以降の現在、SVGやcanvasなど図形描画を目的とした専用の機能があるので、なるべく、それらの専用の機能を用いたほうが将来的なメンテナンスなども安全であろう。

divによる方法[編集]

コード例 

<!DOCTYPE html>
<html lang="ja">
<head>
    <title>CSSによる図形</title>

    <style type="text/css">

    .maru {    /* maru の部分は自由に英語で命名できる */
        width: 200px;
        height: 100px; 
        background-color: blue; 
        border-radius: 50%;     /* 50%なら円。0%に近づけると四角に近づく */
    }

    </style>
</head>

<body>
文字    <div class="maru"></div> ああああ
</body>
</html>

表示結果としては、 

文字
※ここに楕円
ああああ

というレイアウトで、楕円（横軸の長さ200px、縦軸の長さ100pxの楕円）が表示される。divによって、改行が強制的に行われるので、このようなレイアウトになります。

なお、プロパティ中に background-color とありますが、このプロパティで指定した色によって円の内部が塗りつぶされます。


spanによる方法[編集]

span タグとdisplay: inline-block; を使うことで、テキスト中で改行させずに図形表示できます。 

<!DOCTYPE html>
<html lang="ja">
<head>
    <title>CSSによる図形</title>

    <style type="text/css">

    .maru {    /* maru の部分は自由に英語で命名できる */
        display: inline-block;  /* span ではこれを追加する */
        width: 200px;
        height: 100px; 
        background-color: rblue; 
        border-radius: 10%; 
    }

    </style>
</head>

<body>
 文字   <span class="maru"></span> ああああ
    
</body>
</html>

表示結果としては、 

文字 （※ここに楕円） ああああ

というレイアウトで、楕円（横軸の長さ200px、縦軸の長さ100pxの楕円）が表示される。divと違い、上記コードでは改行がないので、このような横並びのレイアウトになります。


このページ「CSS」は、まだ書きかけです。加筆・訂正など、協力いただける皆様の編集を心からお待ちしております。また、ご意見などがありましたら、お気軽にトークページへどうぞ。
  1. ^ https://html.spec.whatwg.org/multipage/#toc-semantics には FONT Element はなく Obsolate との言及すらない。
  2. ^ "CSS Variables Module Level 1" 2020年5月15日に確認。
"https://ja.wikibooks.org/w/index.php?title=CSS&oldid=207818" より作成