LogoMark.png

Webデザイン演習/2021/0511

第4回 CSS

Webデザイン演習/20212020.05.11

AGENDA


はじめに目次を見て、本日の演習の全体像を把握して下さい。

CONTENTS


はじめに

動画・音声サンプルについて

前回演習で、動画・音声サンプルを利用した方は、権利関係の確認をお願いします。Wikimedia Commons の動画は、その多くが PD ではなく CC です。複製利用は可能ですが、著作者の情報を明示する必要があります。

GitHub で公開中のサンプルについては、以下を参考に HTML内に著作者情報や引用元アドレスなどを明記して下さい。

<h2>Sample Audio</h2>
<audio src="audio/xxxxxx.mp3" controls></audio>
<p>効果音:<a href="https://maou.audio/">魔王魂</a></p>
<h2>Sample Video</h2>
<video src="video/LittleOwl.webm" width="480" controls></video>
<p>動画素材:<a 
  href="https://commons.wikimedia.org/wiki/File:Little_Owl,South_Hebron.webm''>
  Little Owl,South Hebron.webm</a>
</p>


NHKクリエイティブ・ライブラリーについて

ここでは様々な動画が MP4 の形式 で提供されています。
https://www.nhk.or.jp/archives/creative/material/

著作者「NHKクリエイティブ・ライブラリー」の情報を明記することで、Webサイト等での利用も可能なので、今回のような事例ではおすすめです。

利用規約を確認して「ダウンロード」をクリックすると、動画ファイルがブラウザ上で直接表示されます。その状態でブラウザのメニューから「ファイル」>「ページを名前をつけて保存」とすると、xxxx.mp4 という動画データを保存することが可能です。

<h2>Sample Video</h2>
<video src="video/xxxx.mp4" width="480" controls></video>
<p>動画素材:<a 
  href="https://www.nhk.or.jp/archives/creative/material/''>
  NHKクリエイティブ・ライブラリー</a>
</p>




1. CSSとは

html_css.png

CSS(Cascading Style Sheets)とは、HTMLやXMLで記述された文書の「構造と体裁の分離」を実現する為に提唱された技術仕様(またそれが記述されたファイル)のことです。

文書というものは、タイトル、見出し、本文、箇条書きなど、いくつかの要素に分けることができますが、その場しのぎにフォントや文字サイズを変更していたのでは、まとまりのない書類になってしまいます。そこで、「見出しは12ptでゴシック体」、「本文は10.5ポイントで明朝体」などとルールを決めて、文書全体を通じて共通にルールを適用させるというのが賢いやりかたです。このルール決めのことを「スタイル定義」といいます。

CSSを記述する(つまりスタイルを定義する)ことにより、ページを構成する各要素の位置、文字の種類・サイズ・色、また背景色・背景画像といった、「見た目」に関する細かな設定を、文書本体とは独立したかたちで設定することができます。「スタイルシートを差し替える」ことは「文書の内容はそのままで、見た目を変更する」ということを意味するもので、これが可能になったことで、Webデザインのメンテナンス効率は大幅に向上しました。



2. CSSの3つの書き方

CSSを記述する方法は3つあります。

結論から言うと3つめが推奨される方法です。以下、参考までにそれぞれの書き方を紹介しますが、2.1. と 2.2. は非推奨です。

2.1. HTMLファイルに書かれた各タグの中に直接書く

以下のように書くと、h1 の文字色が赤、文字サイズが 24px になります。

<h1 style="color: red; font-size:24px; ">HOME</h1>


2.2. HTMLファイルのヘッダー部分にまとめて書く

以下の例では、h1の見出しの背景色が赤になります。

<!DOCTYPE html>
<html lang="ja">

    <head>
        <title>SamplePage</title>
        <style type="text/css">  
        <!-- 
            h1 {
                background-color : red; 
            }
        -->  
        </style>  
    </head>

    <body>
        <h1>HOME</h1>
        <p>
            本文
        </p>   
    </body>

</html>

上のソースコードの中では、以下の3行の部分がCSSです。
「h1の部分の背景色を赤にする」という指示が書かれています。

h1 {
    background-color : red; 
}


2.3. HTMLファイルとは独立した別のファイルに書く(推奨)

これが、もっとも推奨される方法です。

3. 最初のサンプルを作る

では、CSS体験の最初のサンプルをつくります。

index.html


style.css


動作確認

以下のように見えるはずです。
SampleSite


4. 演習1|基本サンプル

CSSの文法等、細かい話はあとにして、とりあえず、最小限の修正を加えたもの(今、あなたの手元にある最初のサンプル)を、リポジトリ css_sample_01 としてアップしてみましょう。

4.1. 必要最小限の変更を行う

HTML、CSS ともに、以下のような部分について、上記のサンプルを修正して、あなたのオリジナルサンプルにして下さい。

4.2. GitHubPages に公開

付記:サーバーにアップしたらおかしくなる・・場合

ローカル(あなたの手元)とリモートサーバーとでは、仕様の違いから、「アップしたらおかしくなった・・」ということがおこる場合があります。

ローカル環境は、ルールがゆるいので、例えば、style.css と書くべきところを、Style.CSS と書いても正常に動きます。ところが、サーバーでは、大文字と小文字を区別するので、この場合は「ファイルが見つからない」という状態になり、CSSが反映されません。

異常が生じた場合は、そのあたりを再確認し、ファイルを再度アップロードして下さい。

4.3. 学科サイトにリンクを記載

HTMLのサンプルと同様、CSS のサンプルについても、学科サイトの WebSample のページの CSSの見出しの下に順に、複数のサンプルを掲載してきます。まずは、この最初のサンプルを以下のような形でリンク公開して下さい。

**CSS
-BASIC SAMPLE:https : //JohnSmith.github.io/css_sample_01/
~




5. CSSの書式

5.1. 基本フォーマット

CSSでは、「見出し(h1)の・背景色を・赤に」のように、どの部分の・何を・どうするかを列挙します。それぞれセレクタプロパティー と言います。記述の基本ルールは以下のとおり。
コロン(:)とセミコロン(;)を間違えないよう注意して下さい。

セレクタ(どの部分の) {
    プロパティー(何を)  :  値(どうする) ;
    プロパティー(何を)  :  値(どうする) ;
             :
}

ひとつのセレクタに複数の指示を与えることができます。
具体に書くと以下のようなイメージです

h1 {
    background-color: red;
    color : white;
}


5.2. CSSにおけるコメントアウトについて

/*  color: red;    */

のように /* と */ で一定範囲を囲むと、コメント扱いとなります。
後で使う可能性のある記述を一時機能停止させたい場合にも使えます。

5.3. 記載の順序

CSSファイル内に記載された事項は、基本的に上から順に処理されていきます。したがって、基本的には「全般的指示から例外的指示へ」「全体から部分へ」「ページの上部から下部へ」を意識して記載します。テーマごとに追加するCSSなどを除いて、基本的に記述が重複しないよう、注意して下さい。

本格的なサイト構築では、開発チームが定めたコーディングルールに従うのが普通ですが、一般に以下のような順番になります。

6. セレクタ

6.1. 様々なセレクタ

セレクタは「対象」を特定するキーワードであり、思い通りのデザインを実現するためには、それを正しく把握することがとても重要な技術となります。ページ内の各要素を掴むためのセレクタには以下の3種類があります。

初心の間は、上記の3種類のセレクタを使って全体像を理解する経験を積んで下さい。本格的なサイトの開発では、要素タグ名やID名は必要最小限(あるいは使わない)で、厳格なルールに従うCLASSセレクタを使うの一般的ですが、いきなり難しいルールをまる覚えするのではなく、ひととおりの体験を通して徐々に理想的な書き方に近づく・・というのがよいでしょう。

6.2. セレクタの具体例

6.3. 親要素と子孫要素について

階層構造をもつ文書において要素をセレクトする際には「親要素と子孫要素」という概念を理解することが重要です。外側の要素を親要素、中に囲まれている要素を子孫要素といいます。

<div> ← 親要素
  <p> ・・・ </p> ← 子要素
  <p> ← 子要素
      <span>・・・</span>  ← 孫要素
  </p>
  <p> ・・・ </p> ← 子要素
</div>





以下、CSSを使って、色、サイズ、背景画像を制御する演習です。
この段階では、まだレイアウトについては考える必要はなく、要素の色やサイズの変更を行う部分にだけ特化した、シンプルなサンプル制作を行なって下さい。
index.htmlについては sample_01 のものをそのまま使って、項目だけ増やすかたちで構いません。





7. 演習2|色

CSSで様々な色の利用方法を試したサンプルを作成して下さい。

7.1. 色指定の記法

7.2. 色の扱いについて

Webサイトの文字や背景の色には、RGB値を16進数で表す16進トリプレット、あるいは、red やgreen といった直接的な名称で指定する X11 Colors を利用して指定します。

7.3. 作業手順

8. 演習3|文字サイズ

CSSで様々な文字サイズの表示を試したサンプルを作成して下さい。

8.1. 文字サイズの記法

font-size: 値;

https://developer.mozilla.org/ja/docs/Web/CSS/font-size

8.2. サイズの単位について

Webサイト上の大きさを指定するには、画面サイズに対して最も直接的な pxの他に、%、em、rem といった単位が存在します。

8.3. 作業手順

9. 演習4|背景画像

CSSで背景画像を表示するサンプルを作成して下さい。

9.1. 背景画像の記法

background-image : url("(画像のURL)");

https://developer.mozilla.org/ja/docs/Web/CSS/background-image

事例(imagesフォルダ内の back.gif )を使う場合

background-image : url("images/back.gif");


9.2. 背景の表示方法

9.3. 作業手順

10. 本日の成果の確認

学科サイトの氏名/WebSample のページに以下のパターンで、CSS のサンプルをリンク掲載して下さい。

**CSS
-BASIC SAMPLE :https : //JohnSmith.github.io/css_sample_01/
-COLOR :https : //JohnSmith.github.io/css_sample_02/
-SIZE :https : //JohnSmith.github.io/css_sample_03/
-BG IMAGE :https : //JohnSmith.github.io/css_sample_04/
~




以上で、本日の授業は終了です。お疲れさまでした。


APPENDIX

CSSがめんどくさい… と感じている方へ。

サイトを構成するページが3〜4ページ程度で、しかも、すべてのページが異なる見た目で構わない… という場合は、CSSの分離などせず、いきなりザクザク作る方が簡単です。

授業では、大規模かつ持続可能なサイトづくりを前提としているために、Web標準、スタイルシート分離で、「まずはテンプレートを作りましょう」という段取りで進めるかたちになっています。

CSSファイルを分離するメリット

通常Webサイトは、まったく同じ雛形から生成された複数のページの集合体から成ります。つまり、どのページも骨格構造はまったく同じで、ページタイトル、本文の文章、画像などが異なるだけです*1

ということは、例えば100ページ以上ある大きなサイトでも、それらが同じ骨格構造をもつページであれば、CSSの記述を変更する(あるいはCSSファイルを別のものに入れ替える)だけで、すべてのページのデザインが変更できる・・・ということになります。多くのページをもつ規模の大きなサイトほど、このメリットは大きくなります。

もし、個々のページ(HTML)にビジュアルの定義(例えば背景色は赤)を書き込んでいた場合、サイト全体のビジュアルを変更したいと思ったら、全ページのHTMLを書き直す必要がでてきます。しかし、「HTMLには フック*2だけ与えて、当該要素のビジュアル仕様は別のCSSファイルに書く」という方法であれば、CSSファイルの変更だけで、すべてのページのデザインを一挙に変えることができるのです。

CSSを記述したファイルを、春バージョン、夏バージョンなどと個別に用意しておけば、HTML本体はそのままで、CSSファイルだけ差し替えれば見た目のデザインを一瞬にして変更することができます。このメリット…ご理解いただけたでしょうか。

PAGES

GUIDE

DATA


*1 メニューをクリックしてページをジャンプすると、「ロゴやメニューはそのままで、真ん中のコンテンツだけが入れ替わっている」と思っている方が多いようですが(かつてFRAMEを多用した時代はそうでした)、Web標準のサイトではページを移動するときは、基本的にはロゴもメニューも含めてページ全体が入れ替わっています。

*2 要素を把握するための「手がかり」のこと。一般にはID名やクラス名がそれにあたります。
Last-modified: 2021-05-11 (火) 19:47:09