第04回Web講座2018

ネットワークチーム第４回北海道科学大学電子計算機研究部

INDEX ⚫ 前回のおさらい ⚫ プロパティ ⚫ 単位について ⚫ 演習 -
レスポンシブウェブデザイン 2

前回のおさらい

前回のおさらい CSS構文セレクタ { プロパティ : 値; } 4

前回のおさらい 5 名前セレクタの書式スタイルを適用する対象要素型セレクタ要素名要素名で指定した要素全称セレクタ *
すべての要素 classセレクタ要素名.クラス名クラス名を付けた要素 idセレクタ要素名#id名 id名を付けた要素複数のセレクタセレクタ,セレクタ複数のセレクタ子孫セレクタセレクタセレクタ下の階層の子孫要素子セレクタセレクタ>セレクタ直下の階層の子要素隣接セレクタセレクタ+セレクタ直後に隣接している要素

プロパティ

colorプロパティ color: #FF0000; color: #F00; color: rgb(255,0,0); color: rgba(100%,0%,0%,40%); 7
文字色を指定する。記述例

color 指定方法 color: #FF0000; color: #F00; 8 カラーコードによる指定 16進数（６or３)桁で指定する方法。 #記号の後、前から、赤
緑青の順に各色の濃さを指定する。光の三原色

color 指定方法 color: rgb(255,0,0); color: rgba(100%,0%,0%,40%); color: rgba(255,0,0,0.4); 9 rgbによる指定
rgb() を使用して各色の濃さを指定する。括弧内で赤緑青の順にカンマ区切りで数値(0-255) または割合(0%-100%) を指定する。 rgba() は、上記に加え透明度を指定することが出来る。数値で指定する場合は 0-1 で指定する。

color 実行例 10

fontプロパティ 11 フォントに関する指定を行う。以下の六つのプロパティがある。プロパティ用途 font-style 文字をイタリック体と斜体にする。 font-variant 文字をスモールキャップ（小さい大文字）にする際に
使用する。 font-weight 文字の太さを指定する。 fine-height 行の高さを指定する。 font-size 文字の大きさを指定する。 font-family フォントの種類を指定する

font-style 12 文字をイタリック体と斜体にできる。ブラウザが判断して、そのフォントの標準のものを斜めに傾けて表示する。 ⚫ normal : 標準。初期値 ⚫
italic : イタリック体。斜体 ⚫ oblique : こちらも斜体。h2にも対応

font-style 記述例 13

font-variant 14 文字をスモールキャップにする際に使用する。スモールキャップとは、アルファベットを小さいサイズの大文字として表示すること。 ⚫ normal : 標準。初期値 ⚫
small-caps : スモールキャップのフォントで表示

font-variant 15

font-weight 16 文字の太さを指定する。 ⚫ 100~900 数値が大きいほど太い。 ⚫ normal 標準初期値
400の指定 ⚫ bold 太字 700の指定 ⚫ lighter 現在のフォントより一段階細くする ⚫ bolder 現在のフォントより一段階太くする

font-weight 記述例 17

font-weight 記述例 18

line-height 19 行の高さを指定する。 ⚫ (数値)[単位]で指定 10px 1.2em など ⚫ ％で指定
120% など ⚫ 数値で指定 pxなどの単位をつけた指定はもちろん、数値のみも可能。その場合、その値にフォントサイズをかけた高さになる。 1.5 = 150%

line-height 20 行間を0に指定

font-size 21 文字の大きさを指定する ⚫ (数値)[単位] で指定 • px 絶対値（absolute）pixelで指定する。 •
％相対値（relative）親要素のサイズによって可変する。 • em パーセントと同じ、ただし、100％=1em となる。 • ex パーセントと同じ、小文字の大きさを1とする。 • rem <html>に適用したフォントサイズに対する大きさ。 • vw viewport width ビューポートの幅に対する割合 • vh viewport height ビューポートの高さに対する割合。

font-size 22 文字の大きさを指定する ⚫ キーワードで指定 xx-small, x-small, small, medium, large,
x-large, xx-large medium が標準。また、smaller, larger は他の要素と比べて相対的に文字の大きさを上下させる。(1.2倍比率)

font-size 記述例 23

font-family 24 フォントの種類を指定する ⚫ フォント名で指定 ‘Yu Gothic‘ のように指定する。シングルクォーテーション又はダブルクォーテーションで囲う ⚫
キーワードで指定 ◆ sans-serif ゴシック系のフォント ◆ serif 明朝系のフォント ◆ cursive 筆記体・草書体のフォント ◆ fantasy 装飾的なフォント ◆ monospace 等幅フォント

font-family 記述例 25

fontプロパティ 26 font プロパティを用いると前述の六つのプロパティを一括で指定できる。順番 1. font-style font-variant font-weight（順不同）
2. font-size 3. line-height ←スラッシュで区切る 4. font-family ←familyは一番最後

fontプロパティ記述例 27

単位について px em rem

単位について CSSのサイズ指定方法は絶対値と相対値の２種類に分類できる。 29 絶対値（absolute）サイズが固定される。他の要素に左右されない。例 px, pt, mm,
in 相対値（relative）親要素のサイズを基準に決定される。親要素のサイズが変わればそれに応じてサイズが変わる。例 %, em, rem, vw, vh

単位について 30 単位相対・絶対説明 px 絶対単位スクリーンの1ピクセルを1pxと定義する mm 絶対単位
ミリメートル約3.78px in 絶対単位インチ 25.4mm 96px % 相対単位親要素を基準とした百分率画像などに使用する em 相対単位 %と同様 100% = 1em フォントサイズに使用する rem 相対単位ルートのフォントサイズを基準としたem vw 相対単位ビューポート幅の1/100 vh 相対単位ビューポート高さの1/100

単位についてブラウザのデフォルト設定は多くの場合、以下の関係になっている 31 100% = 1em = 1rem =
16px = 12pt

em と rem

em と rem 33 リストを入れ子構造にして li要素のフォントサイズを 1.5emに指定した。ブラウザで表示すると…

em と rem 34 項目２－１が大きくなってしまう！

em と rem 35 項目２－１は1.5emが２回適用されてしまうのが原因 (1.5 × 1.5 = 2.25倍)

em と rem 36 1.5em を 1.5rem にすると同じ大きさになる。 em は親要素を基準にするのに対し
rem はルート（最上位）要素を基準にする。 (root em → rem)

rem テクニック 37 このように指定することで 1rem が 10px になり rem が扱いやすくなる
16px × 0.625 = 10px html { font-size : 62.5%; }

ビューポート viewport

ビューポートビューポート（Viewport）ブラウザの表示領域のこと。 39

ビューポート vh (Viewport Height) ビューポートの高さの1% vw (Viewport Width) ビューポートの幅の1% 40
高さ ÷ 100 = vh 幅 ÷ 100 = vw

ビューポート vmin vh と vw の小さい方に基づくサイズ。 vmax vh と vw
の大きい方に基づくサイズ。 41

演習８レスポンシブウェブデザイン

演習８レスポンシブウェブデザインレスポンシブウェブデザイン PC、スマートフォン、タブレットなどの解像度が異なるデバイスに対し一つのCSSで表示を最適化すること。 43

演習８レスポンシブウェブデザイン 44 意識高い系Webサイトを作ろう！表示されていない部分は補完してください misaki.jpg は Slack
に貼ります。

演習８レスポンシブウェブデザイン 45 意識高い系Webサイトを作ろう！表示されていない部分は補完してください misaki.jpg は Slack
に貼ります。

本日はここまでお疲れ様でした

第04回Web講座2018

第04回Web講座2018

More Decks by 北海道科学大学 電子計算機研究部

Other Decks in Education

Featured

Transcript

More Decks by 北海道科学大学　電子計算機研究部