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

第4回web講座

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

 第4回web講座

fonnt　テキスト周り

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

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

May 31, 2017

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

See All by 北海道科学大学　電子計算機研究部
第12回Network講座2019
Avatar for 北海道科学大学　電子計算機研究部 densan
1
65
第11回Network講座2019
Avatar for 北海道科学大学　電子計算機研究部 densan
0
75
第10回Network講座2019
Avatar for 北海道科学大学　電子計算機研究部 densan
0
52
第09回Network講座2019
Avatar for 北海道科学大学　電子計算機研究部 densan
1
170
第08回Network講座2019
Avatar for 北海道科学大学　電子計算機研究部 densan
0
57
第07回Network講座2019
Avatar for 北海道科学大学　電子計算機研究部 densan
0
53
第06回Network講座2019
Avatar for 北海道科学大学　電子計算機研究部 densan
0
76
第05回Network講座2019
Avatar for 北海道科学大学　電子計算機研究部 densan
0
55
第04回Network講座2019
Avatar for 北海道科学大学　電子計算機研究部 densan
0
120

Other Decks in Programming

See All in Programming
The ROI of Quarkus for Spring Boot Applications
Avatar for Holly Cummins hollycummins
0
120
[2026年度第1回ORセミナー] 計画最適化ベンチャーと競技プログラミング人材
Avatar for terry-u16 terryu16
0
270
Performance Engineering for Everyone
Avatar for Elena Tanasoiu elenatanasoiu
0
170
OSもどきOS
Avatar for Sora Arakawa arkw
0
570
DynamoDBには集計系のクエリがないけどなんとかしたい
Avatar for 村上優稀 musan
1
180
技術記事、 専門家としてのプログラマ、 言語化
Avatar for Koutarou Chikuba mizchi
13
6.2k
AIで効率化できた業務・日常
Avatar for Ochtum ochtum
0
140
エージェンティックRAGにAWSで入門しよう！
Avatar for Har1101 har1101
8
1.6k
Go1.27で導入されるジェネリクスメソッドでできること
Avatar for mackee mackee
0
140
スマートグラスで並列バイブコーディング
Avatar for Hayami Shuhei hyshu
0
150
TSKaigi Night Talks 2026_TypeScriptでサプライチェーンの整合性を型に閉じ込める
Avatar for ギークプラス ソフトウェア事業部 geekplus_tech
0
400
AI 輔助遺留系統現代化的經驗分享
Avatar for James Wang jame2408
1
680

Featured

See All Featured
The Organizational Zoo: Understanding Human Behavior Agility Through Metaphoric Constructive Conversations (based on the works of Arthur Shelley, Ph.D)
Avatar for Dr. Kim W Petersen kimpetersen
PRO
0
360
<Decoding/> the Language of Devs - We Love SEO 2024
Avatar for Nikki Halliwell nikkihalliwell
1
250
What the history of the web can teach us about the future of AI
Avatar for Ines Montani inesmontani
PRO
1
620
My Coaching Mixtape
Avatar for mlcsv mlcsv
0
150
Scaling GitHub
Avatar for Zach Holman holman
464
140k
Stewardship and Sustainability of Urban and Community Forests
Avatar for Eric Wiseman pwiseman
0
230
How to build a perfect <img>
Avatar for Jono Alderson jonoalderson
1
5.7k
XXLCSS - How to scale CSS and keep your sanity
Avatar for Zaharenia Atzitzikaki sugarenia
250
1.3M
Primal Persuasion: How to Engage the Brain for Learning That Lasts
Avatar for Mike Taylor tmiket
0
370
The Illustrated Guide to Node.js - THAT Conference 2024
Avatar for David Neal reverentgeek
1
390
How to optimise 3,500 product descriptions for ecommerce in one day using ChatGPT
Avatar for Katarina Dahlin katarinadahlin
PRO
1
3.6k
Save Time (by Creating Custom Rails Generators)
Avatar for Garrett Dimon garrettdimon
PRO
32
3.5k

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