Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
第04回Web講座2018
Search
北海道科学大学 電子計算機研究部
June 06, 2018
Education
0
57
第04回Web講座2018
北海道科学大学 電子計算機研究部
June 06, 2018
Tweet
Share
More Decks by 北海道科学大学 電子計算機研究部
See All by 北海道科学大学 電子計算機研究部
第12回Network講座2019
densan
1
40
第11回Network講座2019
densan
0
65
第10回Network講座2019
densan
0
34
第09回Network講座2019
densan
1
130
第08回Network講座2019
densan
0
41
第07回Network講座2019
densan
0
41
第06回Network講座2019
densan
0
49
第05回Network講座2019
densan
0
41
第04回Network講座2019
densan
0
63
Other Decks in Education
See All in Education
20240319AJG
tosseto
0
300
執筆テーマの決め方
sapi_kawahara
1
180
Analysis and Validation - Lecture 4 - Information Visualisation (4019538FNR)
signer
PRO
0
1.4k
Information Architectures - Lecture 2 - Next Generation User Interfaces (4018166FNR)
signer
PRO
0
1.1k
「小・中・高等学校における情報教育の体系的な学習を目指したカリキュラムモデル基本方針」
codeforeveryone
0
1.4k
6 занятие. Четыре тактики метода "8 кубиков"бизнес-модели #ideaNN 1.03.2024.
karlov
0
150
SUMMER SCHOOL 2024
pnuslide
0
140
わたしのメタ学習 / My Own Meta Learning #shinjukurb
expajp
0
110
自己紹介 / who-am-i
yasulab
2
3.1k
Monaca Educationを活用した課題解決型の探究学習の実践
asial_edu
0
200
Pen-based Interaction - Lecture 4 - Next Generation User Interfaces (4018166FNR)
signer
PRO
0
1.2k
H5P-työkalut
matleenalaakso
3
32k
Featured
See All Featured
Dealing with People You Can't Stand - Big Design 2015
cassininazir
357
22k
Statistics for Hackers
jakevdp
789
220k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
501
140k
Automating Front-end Workflow
addyosmani
1356
200k
Put a Button on it: Removing Barriers to Going Fast.
kastner
58
3k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
14
1.5k
Docker and Python
trallard
34
2.7k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
244
20k
YesSQL, Process and Tooling at Scale
rocio
164
13k
BBQ
matthewcrist
80
8.8k
The Pragmatic Product Professional
lauravandoore
25
5.8k
Building Adaptive Systems
keathley
31
1.9k
Transcript
ネットワークチーム 第4回 北海道科学大学 電子計算機研究部
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進数(6or3)桁で指定する方法。 #記号の後、前から、赤
緑 青 の順に各色の濃さを指 定する。 光の三原色
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のサイズ指定方法は 絶対値と相対値の2種類に分類できる。 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 項目2-1が大きくなってしまう!
em と rem 35 項目2-1は1.5emが2回適用されてしまうのが原因 (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
演習8 レスポンシブ ウェブデザイン
演習8 レスポンシブウェブデザイン レスポンシブウェブデザイン PC、スマートフォン、タブレットなどの 解像度が異なるデバイスに対し 一つのCSSで表示を最適化すること。 43
演習8 レスポンシブウェブデザイン 44 意識高い系Webサイトを作ろう! 表示されていない 部分は補完して ください misaki.jpg は Slack
に貼ります。
演習8 レスポンシブウェブデザイン 45 意識高い系Webサイトを作ろう! 表示されていない 部分は補完して ください misaki.jpg は Slack
に貼ります。
本日はここまで お疲れ様でした