Upgrade to Pro — share decks privately, control downloads, hide ads and more …

第4回web講座

Avatar for 北海道科学大学　電子計算機研究部 北海道科学大学　電子計算機研究部
May 31, 2017
Programming
0
67

 第4回web講座

fonnt　テキスト周り
Avatar for 北海道科学大学　電子計算機研究部

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

May 31, 2017
Tweet

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

See All by 北海道科学大学　電子計算機研究部
第12回Network講座2019
Avatar for 北海道科学大学　電子計算機研究部 densan
1
55
第11回Network講座2019
Avatar for 北海道科学大学　電子計算機研究部 densan
0
70
第10回Network講座2019
Avatar for 北海道科学大学　電子計算機研究部 densan
0
46
第09回Network講座2019
Avatar for 北海道科学大学　電子計算機研究部 densan
1
160
第08回Network講座2019
Avatar for 北海道科学大学　電子計算機研究部 densan
0
49
第07回Network講座2019
Avatar for 北海道科学大学　電子計算機研究部 densan
0
46
第06回Network講座2019
Avatar for 北海道科学大学　電子計算機研究部 densan
0
71
第05回Network講座2019
Avatar for 北海道科学大学　電子計算機研究部 densan
0
51
第04回Network講座2019
Avatar for 北海道科学大学　電子計算機研究部 densan
0
100

Other Decks in Programming

See All in Programming
「Cursor/Devin全社導入の理想と現実」のその後
Avatar for Ryoichi Saito saitoryc
0
160
なぜ適用するか、移行して理解するClean Architecture 〜構造を超えて設計を継承する〜 / Why Apply, Migrate and Understand Clean Architecture - Inherit Design Beyond Structure
Avatar for shiro seike seike460
PRO
1
690
GoのGenericsによるslice操作との付き合い方
Avatar for syumai syumai
3
690
Deep Dive into ~/.claude/projects
Avatar for Yuya Hirayama hiragram
8
1.5k
20250628_非エンジニアがバイブコーディングしてみた
Avatar for ponponmikan ponponmikankan
0
430
Systèmes distribués, pour le meilleur et pour le pire - BreizhCamp 2025 - Conférence
Avatar for Sébastien LECACHEUR slecache
0
110
Blazing Fast UI Development with Compose Hot Reload (droidcon New York 2025)
Avatar for Márton Braun zsmb
1
220
Kotlin エンジニアへ送る：Swift 案件に参加させられる日に備えて～似てるけど色々違う Swift の仕様 / from Kotlin to Swift
Avatar for Elvis Shi lovee
1
260
設計やレビューに悩んでいるPHPerに贈る、クリーンなオブジェクト設計の指針たち
Avatar for panda_program panda_program
6
1.4k
なんとなくわかった気になるブロックテーマ入門/contents.nagoya 2025 6.28
Avatar for Chiaki Okamoto chiilog
1
210
生成AIで日々のエラー調査を進めたい
Avatar for aboy yuyaabo
0
650
Result型で“失敗”を型にするPHPコードの書き方
Avatar for Takuma Kajikawa kajitack
4
380

Featured

See All Featured
Dealing with People You Can't Stand - Big Design 2015
Avatar for Cassini Nazir cassininazir
367
26k
Principles of Awesome APIs and How to Build Them.
Avatar for Keavy McMinn keavy
126
17k
Intergalactic Javascript Robots from Outer Space
Avatar for Vicent Martí tanoku
271
27k
Bash Introduction
Avatar for André Augusto Costa Santos 62gerente
614
210k
Connecting the Dots Between Site Speed, User Experience & Your Business [WebExpo 2025]
Avatar for Tammy Everts tammyeverts
5
210
A designer walks into a library…
Avatar for Paul Jervis Heath pauljervisheath
207
24k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
Avatar for Sam Stephenson sstephenson
161
15k
How GitHub (no longer) Works
Avatar for Zach Holman holman
314
140k
jQuery: Nuts, Bolts and Bling
Avatar for Doug Neiner dougneiner
63
7.8k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
Avatar for Eileen M. Uchitelle eileencodes
35
2.3k
Imperfection Machines: The Place of Print at Facebook
Avatar for Scott Boms scottboms
267
13k
Build your cross-platform service in a week with App Engine
Avatar for Jose L jlugia
231
18k

Transcript

  1. 第４回Web講座 present by kagawa

  2. テキストプロパティ 文字に関するプロパティを演習しましょう。  カラー  間隔・表示位置  サイズ指定

  3. color カラー 文字色を指定する。色の指定方法は以下の通り。 color: #FF0000; color: #F00; color: rgb(255,0,0); color:

    rgba(100%,0%,0%,40%);

  4. 色の指定方法 1. カラーコード（6桁） 16進数（６or３)桁で指定する方法。 #記号の後,前から1,2桁ずつ、赤、緑、青 の順に各色の濃さを指定する。 color: #F00; color: #FF0000;

  5. 色の指定方法 2. rgbaによる指定 rgba() を使用して各色の濃さを指定する。 括弧内で赤、緑、青、透明度の順にカンマ区切りで数値を指定する。 透明度は0~1の範囲で指定し、0に近くなるほど透明になる。 color: rgba(255,0,0,0.5); カラーコードの7-8桁で透明度は指定できる。

  6. 色の指定方法 HTML内でCSSを書くことも可能 <style type =“test/css> // 開始—終了タグの間に記述する。 </style> ただ、冗長になるので非推奨

  7. 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は一番最後

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

    イタリック体。斜体  oblique : こちらも斜体。h2にも対応

  9. font-style

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

    スモールキャップのフォントで表示

  11. font-variant

  12. font-weight 文字の太さを指定する。  100~900：ほぼ [太字：標準] の２つになる。  normal : 標準。初期値。

    400の指定  bold : 太字。 700の指定  lighter : 現在のフォントより一段階細くする  bolder : 現在のフォントより一段階太くする

  13. font-weight p要素内でstrongタグで囲む方と強調される。

  14. font-weight

  15. line-height 行の高さを指定する。  数値で指定  pxなどの単位をつけた指定はもちろん、数値のみも可能。 その場合、その値にフォントサイズをかけた高さになる。  ％で指定...他

  16. font-size 文字の大きさを指定する。  キーワードで指定 xx-small, x-small, small, medium, large, x-large,

    xx-large の7段階 medium が標準。また、smaller, larger は他の要素と比べて 相対的に文字の大きさを上下させる。(1.2倍比率)

  17. -size サイズの指定方法２。他のオプションと共通するので詳しく  px ：絶対値（absolute）pixelで指定する。  ％ ：相対値（relative）親要素のサイズによって可変する。  em

    ：パーセントと同じ、ただし、100％=1em となる。  ex ：パーセントと同じ、小文字の大きさを1とする。  rem：<html>に適用したフォントサイズに対する 「rem」のブラウザサポート Firefox3.6+, Chrome, Safari5, IE9+

  18. -size サイズの指定方法３。 ブラウザの幅(viewport) に応じてフォントサイズを可変に対応する  vw ：viewport width ビューポートの幅に対する割合 

    vh ：viewport height ビューポートの高さに対する割合。 比較的新しいオプション、対応するかはブラウザによる。 次のページに対応verを記載。

  19. 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 ~

  20. -size

  21. レスポンシブwebデザイン レスポンシブデザインとは Webページを表示するとき、PC・スマホ・タブレットでユーザーは観覧する。 画面サイズによってページの幅やレイアウトが 見 や す い よ う

    に 移 動 す る 。 ピクセル指定や、vw指定を駆使する。動的に配信する。別々のURLを用意する...他多々 メリット / デメリット があるので詳しく調べて見ましょう！

  22. 復習:リスト演習 ul要素は ↓ のように、ページメニューなどに使用されることが多い ↓コレ

  23. リスト・疑似クラス  :nth-child(n) 指定した要素の内、前から数えてn番目の要素にスタイルを適用する  :nth-last-child(n) 指定した要素の内、後ろから数えてn番目の要素にスタイルを適用す る

  24. 使用例

  25. 使用例

  26. 解説 上から2番目の li 要素の文字色をオレンジ色に変更

  27. 解説 後ろから数えて奇数番目の li 要素の背景色を水色に変更

  28. 解説 前から数えて3の倍数番目の li 要素の背景色を緑色に変更 ※複数のセレクタに当てはまる要素がある時、後ろに書いた方のスタイルを適用する ※n>=0

  29. 本日はここまで。