情報処理技法 ( マルチメディアと表現 )I 第 12 回 CSS によるレイアウトデザイン (2) D.Mitsuhashi 1
クロスブラウジング D.Mitsuhashi 2
クロスブラウジング ブラウザや OS によって レンダリングには少なからず差異が存在する 同じソースで記述しても 表示が異なる場合がある なるべく 表示の差異を最小化し, 共通の視覚的デザインを提供すべき D.Mitsuhashi 3
クロスブラウジング どの環境でも同じに見えるよう 主要なブラウザでどのようにレンダリングされるのか確認することは重要 よく使われているブラウザはインストールしておく Google Chrome Microsoft Internet Explorer Microsoft Edge Firefox Safari Opera D.Mitsuhashi 4
CSS3 でのレイアウト D.Mitsuhashi 5
フレックスボックスレイアウト float を利用するレイアウトでは 複数の領域にわたるサイズ調整が困難 CSS3 では 容易に段組レイアウトを作成可能 ウインドウサイズに応じてレイアウトを変えることもできる ただし 可変長のレイアウトについては 講義では扱わないので必要な場合は各自調べること D.Mitsuhashi 6
フレックスボックスレイアウト CSS3 の display プロパティを用いる 段組レイアウトを包含する要素に対して 値を flex とする flex を用いると column-*, float, clear, ::first-line, ::first-letter は利用できないので注意 D.Mitsuhashi 7
フレックスボックスレイアウト <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
フレックスボックス内の垂直方向の揃え 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
フレックスボックス内の水平方向の揃え 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
背景画像 背景に画像を使う場合には,background-image プロパティを用いる 値には画像の URL を指定する :root{ background-image:url(./sample.jpg); D.Mitsuhashi 11
背景画像の繰り返し 背景画像を横方向, 縦方向に繰り返し表示させるには background-repeat プロパティを用いる 値は repeat repeat-x repeat-y no-repeat inherit 上下左右繰り返し横方向繰り返し上下方向繰り返し繰り返さない親要素の繰り返し指定に依存 D.Mitsuhashi 12
背景画像の固定 背景画像がウィンドウのスクロールに応じて同時にスクロールするかしないかの指定には, background-attachment プロパティを用いる 値は, scroll fixed inherit スクロールする固定親要素の値に依存 :root{ background-image:url(./sample.jpg); background-repeat:repeat; background-attachment:fixed; D.Mitsuhashi 13
配置と揃え 段組 D.Mitsuhashi 14
ブロック要素の中央揃え レイアウト全体 ( ブロック要素で指定されたもの ) を中央揃えにするには, 左右のマージンを均等にすればよい ( ただし width は必ず指定すること ) margin-left:auto; margin-right:auto; margin:0 auto; D.Mitsuhashi 15
インライン要素の揃え インライン要素を揃えるには 直接インライン要素に指定することはできない インライン要素を包含するブロック要素に対して textalign プロパティで指定する 値は left center right justify 左揃え中央揃え右揃え両端揃え div{ text-align:center; D.Mitsuhashi 16
マルチカラムによる段組 文章を段組で表示する column-count プロパティで段組の数を決定できる 値は段組の数 column-width プロパティで段の幅 値は長さ article{ column-count:3; column-width:100px; D.Mitsuhashi 17
段間の幅と区切り線 段間の幅は 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
段にまたがる見出し 見出しのみ 段組を適用せず表示することが可能 column-span プロパティを用いる 値は all で全ての段 1 で 1 段のみの表示 article h1{ column-span:all; -webkit-column-span:all; -moz-column-span:all; D.Mitsuhashi 19
Web Fonts D.Mitsuhashi 20
Web Fonts CSS3 では Web 上にあるフォントを読み込んで どのような環境でも同じ書体を表現することが可能になった Google が提供するサービス Google Fonts を利用すれば Web 上のフォントを利用可能 ただし欧文のみ Google Fonts https://fonts.google.com/ D.Mitsuhashi 21
Google Web Fonts 使いたいフォントを選び フォント見本右上の + をクリック ( 複数個選択可能 ) 決定したら右下の "1 family selected" をクリック D.Mitsuhashi 22
Google Web Fonts Embed Font に書かれているタグをコピーして HTML 書類の <head> 内にペーストする Specify in CSS に書かれている記述を CSS でフォントを指定したい箇所に記入する D.Mitsuhashi 23
Noto Sans Japanese Google では試験的に日本語 Web フォントを提供している ( 正式リリースは未定 ) @import url(http://fonts.googleapis.com/earlyaccess/notosansjavanese.css); body{ font-size:12px; font-family:'noto Sans Japanese', sans-serif; [ 最新版 ] Noto Sans Japanese を Web フォントとして使う方法 :TORCH http://toach.click/how-to-noto-sans-japanese/ Google Fonts + 日本語早期アクセス https://googlefonts.github.io/japanese/ D.Mitsuhashi 24
M+ WEB FONTS http://mplus-fonts.sourceforge.jp/webfonts/ http://webfontfan.com/japansans/ 日本語でフリーの Web font としては M+ WEB FONTS, Japan Sans などがある D.Mitsuhashi 25