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

第4回web講座

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

 第4回web講座

fonnt　テキスト周り

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

May 31, 2017
Tweet

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

See All by 北海道科学大学　電子計算機研究部
第12回Network講座2019
densan
1
51
第11回Network講座2019
densan
0
67
第10回Network講座2019
densan
0
43
第09回Network講座2019
densan
1
150
第08回Network講座2019
densan
0
46
第07回Network講座2019
densan
0
43
第06回Network講座2019
densan
0
67
第05回Network講座2019
densan
0
48
第04回Network講座2019
densan
0
84

Other Decks in Programming

See All in Programming
PHPで学ぶプログラミングの教訓 / Lessons in Programming Learned through PHP
nrslib
2
230
PSR-15 はあなたのための ものではない？ - phpcon2024
myamagishi
0
110
MCP with Cloudflare Workers
yusukebe
2
220
LLM Supervised Fine-tuningの理論と実践
datanalyticslabo
5
1.2k
Cloudflare MCP ServerでClaude Desktop からWeb APIを構築
kutakutat
1
540
命名をリントする
chiroruxx
1
410
生成AIでGitHubソースコード取得して仕様書を作成
shukob
0
360
Zoneless Testing
rainerhahnekamp
0
120
talk-with-local-llm-with-web-streams-api
kbaba1001
0
180
Refactor your code - refactor yourself
xosofox
1
260
rails stats で紐解く ANDPAD のイマを支える技術たち
andpad
1
290
The Efficiency Paradox and How to Save Yourself and the World
hollycummins
1
440

Featured

See All Featured
Raft: Consensus for Rubyists
vanstee
137
6.7k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
44
9.3k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
29
2.3k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
247
1.3M
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
5
450
Building Better People: How to give real-time feedback that sticks.
wjessup
365
19k
[RailsConf 2023] Rails as a piece of cake
palkan
53
5k
Rails Girls Zürich Keynote
gr2m
94
13k
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
0
98
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
507
140k
A Modern Web Designer's Workflow
chriscoyier
693
190k
Optimising Largest Contentful Paint
csswizardry
33
3k

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. 本日はここまで。