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
67
第4回web講座
fonnt テキスト周り
北海道科学大学 電子計算機研究部
May 31, 2017
Tweet
Share
More Decks by 北海道科学大学 電子計算機研究部
See All by 北海道科学大学 電子計算機研究部
第12回Network講座2019
densan
1
57
第11回Network講座2019
densan
0
70
第10回Network講座2019
densan
0
46
第09回Network講座2019
densan
1
160
第08回Network講座2019
densan
0
49
第07回Network講座2019
densan
0
46
第06回Network講座2019
densan
0
71
第05回Network講座2019
densan
0
51
第04回Network講座2019
densan
0
110
Other Decks in Programming
See All in Programming
CJK and Unicode From a PHP Committer
youkidearitai
PRO
0
100
兎に角、コードレビュー
mitohato14
0
170
Jakarta EE Core Profile and Helidon - Speed, Simplicity, and AI Integration
ivargrimstad
0
300
Ruby Parser progress report 2025
yui_knk
1
260
Updates on MLS on Ruby (and maybe more)
sylph01
1
170
LLMOpsのパフォーマンスを支える技術と現場で実践した改善
po3rin
8
1k
サイトを作ったらNFCタグキーホルダーを爆速で作れ!
yuukis
0
750
Oracle Database Technology Night 92 Database Connection control FAN-AC
oracle4engineer
PRO
1
360
JSONataを使ってみよう Step Functionsが楽しくなる実践テクニック #devio2025
dafujii
0
230
🔨 小さなビルドシステムを作る
momeemt
3
630
CSC305 Summer Lecture 12
javiergs
PRO
0
130
Claude Codeで実装以外の開発フロー、どこまで自動化できるか?失敗と成功
ndadayo
3
1.8k
Featured
See All Featured
Intergalactic Javascript Robots from Outer Space
tanoku
272
27k
VelocityConf: Rendering Performance Case Studies
addyosmani
332
24k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
139
34k
The MySQL Ecosystem @ GitHub 2015
samlambert
251
13k
Speed Design
sergeychernyshev
32
1.1k
The Straight Up "How To Draw Better" Workshop
denniskardys
236
140k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
126
53k
Large-scale JavaScript Application Architecture
addyosmani
512
110k
How to Ace a Technical Interview
jacobian
279
23k
GitHub's CSS Performance
jonrohan
1032
460k
How to train your dragon (web standard)
notwaldorf
96
6.2k
No one is an island. Learnings from fostering a developers community.
thoeni
21
3.4k
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
本日はここまで。