情報処理技法
（マルチメディアと表現）I
クロスブラウジング
• ブラウザや OS によって、レンダリングには少なからず差異が 存在する • 同じソースで記述しても、表示が異なる場合がある • なるべく、表示の差異を最小化し，共通の視覚的デザインを提 供すべきクロスブラウジング
• どの環境でも同じに見えるよう、主要なブラウザでどのように レンダリングされるのか確認することは重要
• よく使われているブラウザはインストールしておく • Google Chrome
• Microsoft Internet Explorer • Microsoft Edge
• Firefox • Safari • Opera
フレックスボックスレイアウト
• float を利用するレイアウトでは、複数の領域にわたるサイズ 調整が困難 • CSS3 では、容易に段組レイアウトを作成可能 • ウインドウサイズに応じてレイアウトを変えることもできる • ただし、可変長のレイアウトについては、講義では扱わないので必要 な場合は各自調べることフレックスボックスレイアウト
• CSS3 の display プロパティを用いる
• 段組レイアウトを包含する要素に対して、
値を flex とする
• flex を用いると column-*, float, clear, ::first-line, ::first-letter は利用できないので注意
フレックスボックスレイアウト
ASIDE ARTICLE
800px
500px <div class="container">
<aside>ASIDE</aside> <article>ARTICLE</article> </div> div.container{ display:flex; width:800px; height:500px; } aside{ width:300px; } article{ width:500px; }
フレックスボックス内の垂直方向の揃え
• align-items プロパティを用いる • 上揃えは flex-start, 中央揃えは center, 下揃えは flex-end • 垂直方向の揃えを指定する場合 は、height を指定しないと行の 高さ分しか領域を確保しない div.container{ display:flex; align-items:center; width:800px; height:500px; } aside{ width:300px; height:200px; } article{ width:500px; height:400px; ASIDE ARTICLE 800px 500px 200px 400pxフレックスボックス内の水平方向の揃え
• justify-content プロパティを用 いる • 左揃えは flex-start, 中央揃えは center, 右揃えは flex-end • width を指定しないと揃わない div.container{ display:flex; justify-content:center; width:800px; height:500px; } aside{ width:300px; height:200px; } article{ width:300px; ASIDE ARTICLE 800px 500px背景画像
• 背景に画像を使う場合には，background-image プロパティを 用いる • 値には画像の URL を指定する :root{ background-image:url(./sample.jpg); }背景画像の繰り返し
• 背景画像を横方向，縦方向に繰り返し表示させるには background-repeat プロパティを用いる • 値は • repeat 上下左右繰り返し • repeat-x 横方向繰り返し • repeat-y 上下方向繰り返し • no-repeat 繰り返さない • inherit 親要素の繰り返し指定に依存背景画像の固定
• 背景画像がウィンドウのスクロールに応じて同時にスクロール するかしないかの指定には， background-attachment プロパティを用いる • 値は， • scroll スクロールする • fixed 固定 • inherit 親要素の値に依存 :root{ background-image:url(./sample.jpg); background-repeat:repeat; background-attachment:fixed; }ブロック要素の中央揃え
• レイアウト全体（ブロック要素で指定されたもの）を中央揃え にするには，左右のマージンを均等にすればよい（ただし width は必ず指定すること） margin-left:auto; margin-right:auto; margin:0 auto;インライン要素の揃え
• インライン要素を揃えるには、 直接インライン要素に指定す ることはできない • インライン要素を包含するブ ロック要素に対して、text-align プロパティで指定する • 値は • left 左揃え • center 中央揃え • right 右揃え • justify 両端揃え div{ text-align:center; }マルチカラムによる段組
• 文章を段組で表示する。 • column-count プロパティで 段組の数を決定できる • 値は段組の数 • column-width プロパティで 段の幅 • 値は長さ article{ column-count:3; column-width:100px; }段間の幅と区切り線
• 段間の幅は column-gap プロパティで決定する • 値は長さ • 段間の区切り線は、 • column-rule-style 線種 • column-rule-width 線幅 • column-rule-color 色 • 一括指定する場合は、 article{ column-count:3; column-width:100px; column-gap:20px; column-rule:solid 2px #cccccc; }段にまたがる見出し
• 見出しのみ、段組を適用せず 表示することが可能。 • column-span プロパティを用 いる • 値は all で全ての段、1 で 1段 のみの表示 article h1{ column-span:all;-webkit-column-span:all; -moz-column-span:all; }
Web Fonts
• CSS3では、Web上にあるフォントを読み込んで、どのような 環境でも同じ書体を表現することが可能になった。
• Google が提供するサービス Google Fonts を利用すれば、Web 上のフォントを利用可能
• ただし欧文のみ • Google Fonts
Google Web Fonts
• 使いたいフォントを選び、 フォント見本右上の＋をク リック（複数個選択可能） • 決定したら右下の "1 family selected" をクリックGoogle Web Fonts
• 「Embed Font」に書かれて いるタグをコピーして HTML 書類の<head>内にペースト する • 「Specify in CSS」に書かれ ている記述をCSSでフォント を指定したい箇所に記入する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/
