LogoMark.png

Webデザイン/2020/0616

第7回 CSS入門 その1

Webデザイン/2020造形短期大学部|2020.06.16

第7回目の展開と要件



以下、目次を見て演習の全体像を把握してから、順に説明を読み進めて下さい。



本日のメニュー


はじめに

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 は以下のようになっていると思います(第4回の授業で、若干修正されているはずです)。
とりあえず、ざっくりと眺めておいてください。第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. 演習1|色・文字サイズの変更

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

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



7. CSSによるページレイアウト

html_css.png

CSSによるレイアウト作業は、大きな箱の中に小さな箱を詰めていく作業と考えるとイメージしやすいでしょう。一般的には、container という外箱の中に、header 、navといった名前の内箱を順に詰め込んでいくことになります。

箱は、入れ子状に詰めるのが基本です。外の箱と中の箱が錯綜するような記述をするとレイアウトは正しく表示されないので、ソースコードを書く際は、きちんとインデントをとってわかりやすく書くことをお勧めします。

boxModel.png

7.1. ボックスモデルを理解する

箱組みをする際には、どこにどのような余白をつくるかが非常に重要です。以下のプロパティーについての理解が必要です。


7.2. ユニバーサルセレクタによる余白のリセット

ブラウザにはデフォルトCSSというものがあって、特に指定のない要素には自動的に margin, padding また line-height が適用されます。これは、デザイナーが精密な位置調整を行う場合に邪魔になるので、すべての要素に対して「余白のリセット」を行った上で、後に各々に余白の定義をするのが一般的です。
 ユニバーサルセレクタ( * )を使うと、すべての要素に一斉制御が可能になります。CSSの先頭で、以下のような記述をするとよいでしょう。

* {
    margin: 0;
    padding: 0;
}

この例では、すべての要素に対して余白をゼロにリセットしています。

SampleSite では、第5回の授業で、この部分をコメントアウトしているので、この段階で復活させましょう。

7.3. レイアウトに必須の手法

とりあえず、以下の2つの手法で大半のレイアウトは可能になります。


7.4. Flexboxを用いたレイアウト

サンプルでは、メニュー部分と、main の中を左右に分ける部分で、すでにこれが適用されています。確認するだけでOKです。

親要素(Flexコンテナ) に display: flex; を設定することで、子要素(Flexアイテム) の並び(縦・横)や順序(上下・左右)を制御する方法です。例えば、親要素に対して、display: flex; flex-direction: row; と書くと、子要素は横に並びます。
以下、メニューを横に並べる事例です。

詳しくは、CSS/Flexboxをご覧下さい。


7.5. positionを用いたレイアウト

サンプルでは、H1 のページタイトル部分に、すでにこれが適用されています。その他で使うとすれば、ロゴを配置する場合などです。

通常の「箱詰め作業」では、要素同士が重なるような配置はできません。しかし、「絶対的にこの場所に表示したい」というケースもあります。そのような場合に使えるのが、positionというプロパティーです。これを使うと、任意のブロックを基準にして、その左上を原点とした座標で、配置したいブロックの位置を指定することができます。

8. 演習2|レイアウトの変更

みなさんのお手元にあるSampleSite の中の style.css をエディタで開いて、ページのレイアウトの変更をお試しください。

SampleSite は、あくまでも練習用のものです。ここでは、動作を体験することが目的なので、細部にこだわった作りこみは不要です。

8.1. Flexbox の機能の確認

8.2. Position の機能の確認




付記:画像・動画が縮まらない問題

前回の演習で、article の中に、img や iframe で画像・動画を配置していました。その際、img の一般的な書き方として、タグの属性として、 width(幅)を直接指定していましたが、この方法で、画像を表示すると、ウィンドウ幅を縮めた際に、画像が「突っ張り棒」の状態になって、画像のあるブロックの幅が縮まらず、結果として、コンテナの外にはみ出すという問題が生じます。

これを解消するには、画像や動画の幅を、親要素に対してフレキシブルに拡大縮小するように、CSSで調整する必要があります。

画像の幅をフレキシブルに

img タグの width の記述を削除するとともに CSSで幅を制御します。

YouTube動画の埋め込み

この問題は、多くの人を悩ませているようで、Webで検索すると様々な方法が解説されていますが、一般に以下のようにするとうまくいくようです。

以上、以下に全体を反映したサンプルを掲載しています。

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


第7回目は、以上をもって終了とします。お疲れ様でした。



APPENDIX

第8回は、レスポンシブデザインについて学びます。





PAGES

GUIDE

DATA

Last-modified: 2020-06-16 (火) 13:20:42