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
56
第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
100
Other Decks in Programming
See All in Programming
dbt民主化とLLMによる開発ブースト ~ AI Readyな分析サイクルを目指して ~
yoshyum
3
1k
システム成長を止めない!本番無停止テーブル移行の全貌
sakawe_ee
1
210
AI時代のソフトウェア開発を考える(2025/07版) / Agentic Software Engineering Findy 2025-07 Edition
twada
PRO
93
31k
PHPで始める振る舞い駆動開発(Behaviour-Driven Development)
ohmori_yusuke
2
400
High-Level Programming Languages in AI Era -Human Thought and Mind-
hayat01sh1da
PRO
0
800
猫と暮らす Google Nest Cam生活🐈 / WebRTC with Google Nest Cam
yutailang0119
0
160
Flutterで備える!Accessibility Nutrition Labels完全ガイド
yuukiw00w
0
170
設計やレビューに悩んでいるPHPerに贈る、クリーンなオブジェクト設計の指針たち
panda_program
6
2.2k
GPUを計算資源として使おう!
primenumber
1
170
GitHub Copilot and GitHub Codespaces Hands-on
ymd65536
2
150
20250704_教育事業におけるアジャイルなデータ基盤構築
hanon52_
5
840
「テストは愚直&&網羅的に書くほどよい」という誤解 / Test Smarter, Not Harder
munetoshi
0
180
Featured
See All Featured
GraphQLの誤解/rethinking-graphql
sonatard
71
11k
Producing Creativity
orderedlist
PRO
346
40k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
32
2.4k
Build your cross-platform service in a week with App Engine
jlugia
231
18k
A better future with KSS
kneath
238
17k
A designer walks into a library…
pauljervisheath
207
24k
Building a Modern Day E-commerce SEO Strategy
aleyda
42
7.4k
Git: the NoSQL Database
bkeepers
PRO
430
65k
Bootstrapping a Software Product
garrettdimon
PRO
307
110k
Building Applications with DynamoDB
mza
95
6.5k
Typedesign – Prime Four
hannesfritz
42
2.7k
Measuring & Analyzing Core Web Vitals
bluesmoon
7
510
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
本日はここまで。