$30 off During Our Annual Pro Sale. View Details »

第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
60
第11回Network講座2019
Avatar for 北海道科学大学　電子計算機研究部 densan
0
71
第10回Network講座2019
Avatar for 北海道科学大学　電子計算機研究部 densan
0
47
第09回Network講座2019
Avatar for 北海道科学大学　電子計算機研究部 densan
1
160
第08回Network講座2019
Avatar for 北海道科学大学　電子計算機研究部 densan
0
51
第07回Network講座2019
Avatar for 北海道科学大学　電子計算機研究部 densan
0
48
第06回Network講座2019
Avatar for 北海道科学大学　電子計算機研究部 densan
0
72
第05回Network講座2019
Avatar for 北海道科学大学　電子計算機研究部 densan
0
52
第04回Network講座2019
Avatar for 北海道科学大学　電子計算機研究部 densan
0
110

Other Decks in Programming

See All in Programming
sbt 2
Avatar for kenji yoshida xuwei_k
0
190
ソフトウェア設計の課題・原則・実践技法
Avatar for 増田 亨 masuda220
PRO
24
21k
ローターアクトEクラブ アメリカンナイト：川端 柚菜 氏（Japan O.K. ローターアクトEクラブ 会長）:2720 Japan O.K. ロータリーEクラブ2025年12月1日卓話
Avatar for 2720 Japan O.K. ロータリーEクラブ 2720japanoke
0
450
TypeScriptで設計する 堅牢さとUXを両立した非同期ワークフローの実現
Avatar for Matsumoto Moeka moeka__c
6
2.9k
関数の挙動書き換える
Avatar for takato fukui takatofukui
4
770
【CA.ai #3】Google ADKを活用したAI Agent開発と運用知見
Avatar for Kazuki Hara harappa80
0
260
251126 TestState APIってなんだっけ?Step Functionsテストどう変わる?
Avatar for Takumi Abe east_takumi
0
300
俺流レスポンシブコーディング 2025
Avatar for TAK tak_dcxi
13
7.7k
令和最新版Android Studioで化石デバイス向けアプリを作る
Avatar for Sora Arakawa arkw
0
130
開発に寄りそう自動テストの実現
Avatar for Hiroki Iseri goyoki
1
410
[SF Ruby Conf 2025] Rails X
Avatar for Vladimir Dementyev palkan
0
440
『実践MLOps』から学ぶ DevOps for ML
Avatar for Satsuki Nagae nsakki55
2
550

Featured

See All Featured
Building a Scalable Design System with Sketch
Avatar for Laura Van Doore lauravandoore
463
34k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
Avatar for soudai sone soudai
PRO
196
69k
Context Engineering - Making Every Token Count
Avatar for Addy Osmani addyosmani
9
460
Fight the Zombie Pattern Library - RWD Summit 2016
Avatar for Marcelo Somers marcelosomers
234
17k
Designing Dashboards & Data Visualisations in Web Apps
Avatar for Des Traynor destraynor
231
54k
Documentation Writing (for coders)
Avatar for Carmen Chung carmenintech
76
5.2k
What's in a price? How to price your products and services
Avatar for Michael Herold michaelherold
246
12k
Large-scale JavaScript Application Architecture
Avatar for Addy Osmani addyosmani
514
110k
How to train your dragon (web standard)
Avatar for Monica Dinculescu notwaldorf
97
6.4k
Build your cross-platform service in a week with App Engine
Avatar for Jose L jlugia
234
18k
Speed Design
Avatar for Sergey Chernyshev sergeychernyshev
33
1.4k
The Art of Delivering Value - GDevCon NA Keynote
Avatar for David Neal reverentgeek
16
1.8k

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