Web 設計入門

Size: px

Start display at page:

Download "Web 設計入門"

てるえさんきち
5 years ago
Views:

1 情報処理技法 ( マルチメディアと表現 )I 第 12 回 CSS によるレイアウトデザイン (2) D.Mitsuhashi 1

2 クロスブラウジング D.Mitsuhashi 2

3 クロスブラウジングブラウザや OS によってレンダリングには少なからず差異が存在する同じソースで記述しても表示が異なる場合があるなるべく表示の差異を最小化し, 共通の視覚的デザインを提供すべき D.Mitsuhashi 3

4 クロスブラウジングどの環境でも同じに見えるよう主要なブラウザでどのようにレンダリングされるのか確認することは重要よく使われているブラウザはインストールしておく Google Chrome Microsoft Internet Explorer Microsoft Edge Firefox Safari Opera D.Mitsuhashi 4

5 CSS3 でのレイアウト D.Mitsuhashi 5

6 フレックスボックスレイアウト float を利用するレイアウトでは複数の領域にわたるサイズ調整が困難 CSS3 では容易に段組レイアウトを作成可能ウインドウサイズに応じてレイアウトを変えることもできるただし可変長のレイアウトについては講義では扱わないので必要な場合は各自調べること D.Mitsuhashi 6

7 フレックスボックスレイアウト CSS3 の display プロパティを用いる段組レイアウトを包含する要素に対して値を flex とする flex を用いると column-*, float, clear, ::first-line, ::first-letter は利用できないので注意 D.Mitsuhashi 7

8 フレックスボックスレイアウト <div class="container"> <aside>aside</aside> <article>article</article> </div> 800px div.container{ display:flex; width:800px; height:500px; aside{ width:300px; ASIDE ARTICLE 500px article{ width:500px; D.Mitsuhashi 8

9 フレックスボックス内の垂直方向の揃え align-items プロパティを用いる上揃えは flex-start, 中央揃えは center, 下揃えは flex-end 垂直方向の揃えを指定する場合は height を指定しないと行の高さ分しか領域を確保しない 800px div.container{ display:flex; align-items:center; width:800px; height:500px; aside{ width:300px; height:200px; ASIDE 200px ARTICLE 400px 500px article{ width:500px; height:400px; D.Mitsuhashi 9

10 フレックスボックス内の水平方向の揃え justify-content プロパティを用いる左揃えは flex-start, 中央揃えは center, 右揃えは flex-end width を指定しないと揃わない div.container{ display:flex; justify-content:center; width:800px; height:500px; ASIDE 800px aside{ width:300px; height:200px; 300px ARTICLE 300px 500px article{ width:300px; height:400px; D.Mitsuhashi 10

11 背景画像背景に画像を使う場合には,background-image プロパティを用いる値には画像の URL を指定する :root{ background-image:url(./sample.jpg); D.Mitsuhashi 11

12 背景画像の繰り返し背景画像を横方向, 縦方向に繰り返し表示させるには background-repeat プロパティを用いる値は repeat repeat-x repeat-y no-repeat inherit 上下左右繰り返し横方向繰り返し上下方向繰り返し繰り返さない親要素の繰り返し指定に依存 D.Mitsuhashi 12

13 背景画像の固定背景画像がウィンドウのスクロールに応じて同時にスクロールするかしないかの指定には, background-attachment プロパティを用いる値は, scroll fixed inherit スクロールする固定親要素の値に依存 :root{ background-image:url(./sample.jpg); background-repeat:repeat; background-attachment:fixed; D.Mitsuhashi 13

14 配置と揃え段組 D.Mitsuhashi 14

15 ブロック要素の中央揃えレイアウト全体 ( ブロック要素で指定されたもの ) を中央揃えにするには, 左右のマージンを均等にすればよい ( ただし width は必ず指定すること ) margin-left:auto; margin-right:auto; margin:0 auto; D.Mitsuhashi 15

16 インライン要素の揃えインライン要素を揃えるには直接インライン要素に指定することはできないインライン要素を包含するブロック要素に対して textalign プロパティで指定する値は left center right justify 左揃え中央揃え右揃え両端揃え div{ text-align:center; D.Mitsuhashi 16

17 マルチカラムによる段組文章を段組で表示する column-count プロパティで段組の数を決定できる値は段組の数 column-width プロパティで段の幅値は長さ article{ column-count:3; column-width:100px; D.Mitsuhashi 17

18 段間の幅と区切り線段間の幅は column-gap プロパティで決定する値は長さ段間の区切り線は column-rule-style 線種 column-rule-width 線幅 column-rule-color 色一括指定する場合は column-rule article{ column-count:3; column-width:100px; column-gap:20px; column-rule:solid 2px #cccccc; D.Mitsuhashi 18

19 段にまたがる見出し見出しのみ段組を適用せず表示することが可能 column-span プロパティを用いる値は all で全ての段 1 で 1 段のみの表示 article h1{ column-span:all; -webkit-column-span:all; -moz-column-span:all; D.Mitsuhashi 19

20 Web Fonts D.Mitsuhashi 20

21 Web Fonts CSS3 では Web 上にあるフォントを読み込んでどのような環境でも同じ書体を表現することが可能になった Google が提供するサービス Google Fonts を利用すれば Web 上のフォントを利用可能ただし欧文のみ Google Fonts D.Mitsuhashi 21

22 Google Web Fonts 使いたいフォントを選びフォント見本右上の + をクリック ( 複数個選択可能 ) 決定したら右下の "1 family selected" をクリック D.Mitsuhashi 22

23 Google Web Fonts Embed Font に書かれているタグをコピーして HTML 書類の <head> 内にペーストする Specify in CSS に書かれている記述を CSS でフォントを指定したい箇所に記入する D.Mitsuhashi 23

24 Noto Sans Japanese Google では試験的に日本語 Web フォントを提供している ( 正式リリースは未定 url( body{ font-size:12px; font-family:'noto Sans Japanese', sans-serif; [ 最新版 ] Noto Sans Japanese を Web フォントとして使う方法 :TORCH Google Fonts + 日本語早期アクセス D.Mitsuhashi 24

25 M+ WEB FONTS 日本語でフリーの Web font としては M+ WEB FONTS, Japan Sans などがある D.Mitsuhashi 25

スタイルシートでデザインを整えよう

スタイルシートでデザインを整えようスタイルシートでデザイン (2) CSS (Cascading Style Sheets) ここまで HTML は文章の意味的な役割を記述するもので表示はブラウザ次第であることを強調してきましたあるブラウザでの表示方法を前提に HTML で見た目を制御しようとすると他の環境では意味が通じにくい相互運用性の低い情報となってしまいます Web の表現を作者が指定するには HTML ではなくスタイルシートという別の機能をもちいます