LogoMark.png

Webデザイン基礎B/2020/1019

第6回 CSS入門 その1

Webデザイン基礎B/2020|造形短期大学部|2020.10.19遠隔
情報共有シート|特設サイト

AGENDA


以下、LIVE動画をご覧下さい。記事に沿って解説しています。
記録動画の公開は21日(水)までとします。早めの確認をお願いします。





本日のメニュー


はじめに

1. CSSとは

html_css.png

CSS(Cascading Style Sheets)とは、HTMLやXMLで記述された文書の「構造と体裁の分離」を実現する為に提唱された技術仕様(またそれが記述されたファイル)のことです。
 文書というものは、タイトル、見出し、本文、箇条書きなど、いくつかの要素に分けることができますが、その場しのぎにフォントや文字サイズを変更していたのでは、まとまりのない書類になってしまいます。そこで、「見出しは12ptでゴシック体」、「本文は10.5ポイントで明朝体」などとルールを決めて、文書全体を通じて共通にルールを適用させるというのが賢いやりかたです。このルール決めのことを「スタイル定義」といいます。
 CSSを記述する(つまりスタイルを定義する)ことにより、ページを構成する各要素の位置、文字の種類・サイズ・色、また背景色・背景画像といった、「見た目」に関する細かな設定を、文書本体とは独立したかたちで設定することができます。「スタイルシートを差し替える」ことは「文書の内容はそのままで、見た目を変更する」ということを意味するもので、これが可能になったことで、Webデザインのメンテナンス効率は大幅に向上しました。



2. CSSの3つの書き方

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

結論から言うと、3つめが最も推奨される方法です。
以下、それぞれの書き方を紹介しますが、1. と 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ファイルとは独立した別のファイルに書く(推奨

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


2.4. style.css ファイルの実際

今、みなさんのお手元にある SampleSite の style.css は以下のようになっていると思います(以前の演習において、若干修正されているはずです)。
とりあえず、ざっくりと眺めておいてください。第3節以降で、その文法的な事項について説明します。

 * {
   margin: 0;
   padding: 0;
   list-style: none;
   text-decoration: none;
 }
 #container {
   width: 84%;
   max-width: 1280px;
   min-width: 512px;
   margin: 0 auto;
 }
 header {
    position:relative;
    height: 8rem;
    background: #333;
    box-shadow: 0 4px 0.3125rem rgba(0,0,0,.3);
  }
   header h1 {
     position: absolute;
     top: 3rem;
     left: 3rem;
     font-size: 2rem;
     color: white;
   }
 nav {
   padding: 1rem 3rem ;
   background: #333;
 }
   nav ul {
     display: flex;
     flex-direction: row;
   }
   nav ul li {
     margin-right: 2rem;
   }
   nav ul li a {
     color: white;
   }
 main {
   display: flex;
   flex-direction: row;
 }
   section {
     flex: 3;
     padding: 3rem;
     background: #EEE;
   }
     article {
       min-height: 8rem;
       padding: 1rem;
       margin-bottom: 2rem;
       background: #FFF;
     }
   aside {
     flex: 1;
     padding: 3rem;
     background: #DDD;
   }
 footer {
   padding: 2rem 3rem;
   text-align: center;
   background: #333;
   color: white;
 }




3. CSSの書式

3.1. 基本フォーマット

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

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

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

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


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

/*  color: red;    */

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

3.3. 記載の順序

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



4. セレクタ

4.1. 様々なセレクタ

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


4.2. セレクタの具体例

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

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

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




5. 色・文字サイズ

5.1. 色指定の記法

5.2. 色の扱いについて

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

5.3. 文字サイズの記法

font-size: 値;

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

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

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




6. 演習|色・文字サイズの変更

みなさんのお手元にあるSampleSite の中の style.css をエディタで開いて、ページの色彩構成・文字サイズの変更をお試しください。

すでに、第2回の演習で多少の編集体験をしていただいていますが、今回は、記法も含めて学習して下さい。



7. 本日の成果をGitHub にアップロード


第6回目は、以上をもって終了とします。お疲れ様でした。
第7回は、CSSによるレイアウトの方法について学びます。





PAGES

GUIDE

DATA

Last-modified: 2020-10-19 (月) 13:03:15