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
第4回web講座
Search
北海道科学大学 電子計算機研究部
May 31, 2017
Programming
0
63
第4回web講座
fonnt テキスト周り
北海道科学大学 電子計算機研究部
May 31, 2017
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 Programming
See All in Programming
AmperとFleetを使ったAndroidアプリ
yoppie
0
250
PHPはいつから死んでいるかの調査
chiroruxx
2
410
try! Swift Tokyo 初参加報告LT
hinakko2
0
230
CREってこういうこと? 体験入社 - 提案資料 - / what-is-cre-trial-employment
shinden
1
460
Fast JSX: Don't clone props object #28768
yossydev
1
160
Git Rebase
bkuhlmann
11
1.6k
SIMD Parallel Programming with the Vector API
josepaumard
0
220
VS Code をプロダクトにどう取り込むか
onomax
1
640
TCAとKMPを用いた新規動画配信アプリ 「ABEMA Live」の設計
tomu28
2
120
禅の心を手に入れよ
eltociear
1
280
GitHub Copilotのススメ
marcy731
1
220
Try creating your own orderedmap
kazamori
1
170
Featured
See All Featured
Raft: Consensus for Rubyists
vanstee
133
6.3k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
21
1.4k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
123
39k
Fantastic passwords and where to find them - at NoRuKo
philnash
38
2.5k
The Language of Interfaces
destraynor
151
23k
How STYLIGHT went responsive
nonsquared
92
4.8k
Bash Introduction
62gerente
605
210k
The Invisible Customer
myddelton
114
12k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
275
13k
Bootstrapping a Software Product
garrettdimon
PRO
302
110k
The Illustrated Children's Guide to Kubernetes
chrisshort
32
46k
Side Projects
sachag
451
41k
Transcript
第4回Web講座 present by kagawa
テキストプロパティ 文字に関するプロパティを演習しましょう。 カラー 間隔・表示位置 サイズ指定
color カラー 文字色を指定する。色の指定方法は以下の通り。 color: #FF0000; color: #F00; color: rgb(255,0,0); color:
rgba(100%,0%,0%,40%);
色の指定方法 1. カラーコード(6桁) 16進数(6or3)桁で指定する方法。 #記号の後,前から1,2桁ずつ、赤、緑、青 の順に各色の濃さを指定する。 color: #F00; color: #FF0000;
色の指定方法 2. rgbaによる指定 rgba() を使用して各色の濃さを指定する。 括弧内で赤、緑、青、透明度の順にカンマ区切りで数値を指定する。 透明度は0~1の範囲で指定し、0に近くなるほど透明になる。 color: rgba(255,0,0,0.5); カラーコードの7-8桁で透明度は指定できる。
色の指定方法 HTML内でCSSを書くことも可能 <style type =“test/css> // 開始—終了タグの間に記述する。 </style> ただ、冗長になるので非推奨
font フォント font プロパティを用いると、以下の六つのプロパティを一括指定できる 1. font-style 2. font-variant 3. font-weight
4. line-height 5. font-size 6. font-family 優先順位 1. font-style、font-variant、font-weight(順不同) 2. font-size 3. line-height 4. font-family ←familyは一番最後
font-style 文字をイタリック体と斜体にできる。 ブラウザが判断して、そのフォントの標準のものを斜めに傾けて表示する。 normal : 標準。初期値 italic :
イタリック体。斜体 oblique : こちらも斜体。h2にも対応
font-style
font-variant 文字をスモールキャップにする際に使用する。 アルファベットを小さいサイズの大文字として表示すること。 normal : 標準。初期値 small-caps :
スモールキャップのフォントで表示
font-variant
font-weight 文字の太さを指定する。 100~900:ほぼ [太字:標準] の2つになる。 normal : 標準。初期値。
400の指定 bold : 太字。 700の指定 lighter : 現在のフォントより一段階細くする bolder : 現在のフォントより一段階太くする
font-weight p要素内でstrongタグで囲む方と強調される。
font-weight
line-height 行の高さを指定する。 数値で指定 pxなどの単位をつけた指定はもちろん、数値のみも可能。 その場合、その値にフォントサイズをかけた高さになる。 %で指定...他
font-size 文字の大きさを指定する。 キーワードで指定 xx-small, x-small, small, medium, large, x-large,
xx-large の7段階 medium が標準。また、smaller, larger は他の要素と比べて 相対的に文字の大きさを上下させる。(1.2倍比率)
-size サイズの指定方法2。他のオプションと共通するので詳しく px :絶対値(absolute)pixelで指定する。 % :相対値(relative)親要素のサイズによって可変する。 em
:パーセントと同じ、ただし、100%=1em となる。 ex :パーセントと同じ、小文字の大きさを1とする。 rem:<html>に適用したフォントサイズに対する 「rem」のブラウザサポート Firefox3.6+, Chrome, Safari5, IE9+
-size サイズの指定方法3。 ブラウザの幅(viewport) に応じてフォントサイズを可変に対応する vw :viewport width ビューポートの幅に対する割合
vh :viewport height ビューポートの高さに対する割合。 比較的新しいオプション、対応するかはブラウザによる。 次のページに対応verを記載。
vw wh vmin vmax 対応表 Browser vw, vh vmin vmax
Chrome v20.0 ~ v20.0 ~ v26.0 ~ Safari v6.0 ~ v6.0 ~ v6.1 ~ Firefox v19.0 ~ v19.0 ~ v19.0 ~ Opera v15.0 ~ v15.0 ~ v15.0 ~ iOS Safari v6.0 ~ v6.1 ~ v7.0 ~ Android Brower v4.4 ~ v4.4 ~ v4.4 ~ Internet Explorer v9.0 ~ v9.0 ~ v11.0 ~
-size
レスポンシブwebデザイン レスポンシブデザインとは Webページを表示するとき、PC・スマホ・タブレットでユーザーは観覧する。 画面サイズによってページの幅やレイアウトが 見 や す い よ う
に 移 動 す る 。 ピクセル指定や、vw指定を駆使する。動的に配信する。別々のURLを用意する...他多々 メリット / デメリット があるので詳しく調べて見ましょう!
復習:リスト演習 ul要素は ↓ のように、ページメニューなどに使用されることが多い ↓コレ
リスト・疑似クラス :nth-child(n) 指定した要素の内、前から数えてn番目の要素にスタイルを適用する :nth-last-child(n) 指定した要素の内、後ろから数えてn番目の要素にスタイルを適用す る
使用例
使用例
解説 上から2番目の li 要素の文字色をオレンジ色に変更
解説 後ろから数えて奇数番目の li 要素の背景色を水色に変更
解説 前から数えて3の倍数番目の li 要素の背景色を緑色に変更 ※複数のセレクタに当てはまる要素がある時、後ろに書いた方のスタイルを適用する ※n>=0
本日はここまで。