1 2 Web (2) HTML ( ) HTML CSS CSS = Cascading Stye Sheet (CSS) W3C (Word Wide Web Consortium, Web ) 2006-2018 Harumi Murakami and Kota Abe HTML&CSS 3 1990 Web HTML Web 1993 Web <font>, <i>, <b> HTML HTML&CSS 4 1996 CSS (CSS1) 1997 HTML3.2 HTML 1997 HTML4.0 1998 CSS2 1999 HTML4.01 2011 CSS2.1 2014 HTML5 CSS3: ( )
CSS 5 CSS 6 ) Web ウェブアクセシビリティと 2 1 Web ウェブアクセシビリティと 高齢者や障害者を含め 誰もがホームページ等で提供される情報や機能を支障なく利用できることを意味します ウェブアクセシビリティ 必要性 インターネット 普及により 健常者と同様に高齢者や障害者にとってホームページ等 重要な情報源となっています しかし 情報を提供する側がウェブアクセシビリティに配慮して適切に対応をしていないと 高齢者や障害者が ホームページ等から情報を取得できなかったり ウェブ上 手続きができないという問題が発生し 社会生活で多大な不利益が発生したり 災害時等に必要な情報が届かない状況となれ 生命 危機に直面する可能性があります http://www.soumu.go.jp/main_content/000438394.pdf CSS 7 CSS 8 ウェブアクセシビリティが確保されていない場合の問題事例 3 避難所等の情報や地図が画像 PDF( スキャナーでスキャンしたもの等 ) のみで掲載され 音声読み上げソフトが使用できず 視覚障害者が避難情報を得られない 市長の会見の模様が字幕のない動画のみで掲載され 字幕やテキストの会見録がないため 聴覚障害者が内容を把握できない ホームページがキーボードのみで操作できるように作られておらず 手の動作が不自由でマウスを使うことができない利用者がホームページを利用することができない 背景と文字の色のコントラスト比が確保されておらず 高齢者や色覚障害者が閲覧しにくい ホームページが構造化されておらず 機械判読可能 ( 機械やコンピューターで直接読み取って利用できる形式であること ) でないため 外国人が自動翻訳ソフトを使用した際にうまく翻訳されない CSS HTML < > h1 { /* h1 */ font-size: arge; /* */ coor: red; /* */ ( ) < > < > /* */ ;
9 CSS 10 coor background-coor font ine-height text-aign text-decoration () width, height, margin, padding, border CSS ( ) HTML <head> <ink re= styesheet type= text/css href= CSS URL > CSS HTML <head> <head> <stye type= text/css > h1 { font-size: arge; </stye> <tite></tite> </head> CSS HTML <h1 stye= font-size: arge; > </h1> CSS HTML 11 12 (<head>..</head>) <ink> CSS URL <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitiona//EN" "http://www.w3.org/tr/htm4/oose.dtd"> <htm> <head> <meta http-equiv="content-type" content="text/htm; charset=shift_jis"> <tite></tite> <ink re= styesheet type= text/css href= CSS.css > </head> <body> </body> </htm> pubic_htm index.htm ( HTML)???.htm (HTML)???.png,???.jpg ( ) mystye.css (CSS
13 body, h1, h2, p, /* p */ p { text-indent: 2em;, /* h1, h2, h3 font-famiy */ h1, h2, h3 { font-famiy: sans-serif; 14 HTML cass <p cass= note > </p> (note) CSS cass.note { font-size: sma;. cass <p cass= note > 1</p> <p cass= note > 2</p> ID ( ) 15 HTML id <tabe id= revenue > id (revenue) CSS id #id { font-size: sma; # id id JavaScript HTML 16 <p> <strong> HTML: <p> <strong> </strong> </p> p strong { coor: #ff0000; p strongok ) <p><span><strong> </strong></span></p> <p><strong> p > strong { coor: #ff0000; p strong.note strong { ;
17 18 () * { font-stye: itaic; /* */ font-size: x-arge; /* */ a:ink a:visited a:hover :first-ine :first-etter p:first-etter { 1 1 /* 1 */ font-size: xx-arge; 19 HTML 1 ( > > ) HTML CSS * { font-stye: itaic; font-size: arge;.heo { coor: red; background-coor: yeow; p { coor: bue; font-size: xx-arge; Safari Safari Web HTML CSS 20
21 (1) 22 coor: ( ) background-coor: : back, maroon, green, navy, siver, red, ime, bue, gray, purpe, oive, tea, white, fuchsia, yeow, aqua : coor: purpe RGB (Red, Green, Bue) 0x00 0xFF (256 ) : coor: #ffa500 (Red 0xFF, Green 0xA5, Bue 0x00) #000000, #ffffff 10 : coor: rgb(50, 100, 200) font-famiy:, serif ( ), sans-serif ( ), cursive (), fantasy ( ), monospace (, ) ) font-famiy: Hiragino Kaku Gothic ProN, YuGothic, Meiryo, sans-serif () (2) 23 span div 24 font-stye: norma, itaic ( ), obique ( ) font-weight: norma, bod ( ), ighter () boder () font-size: xx-sma, x-sma, sma, medium, arge, x-arge, xx-arge 120% ( 1.2 ) CSS HTML span ABC<span cass= excuse >DEF</span>GHI (span ) div ABC<div cass= footnote >DEF</div>GHI (div) ABCDEFGHI ABC DEF GHI
border, margin, padding 25 border 26 HTML h1, p, div, span, ABCD padding ( ) border ( ) margin ( ) border: ; ) border: soid 10px #0000ff; : Soid ( ) doube ( ), inset ( ), outset ( ), dashed ( ) border-top, border-bottom, border-eft, borderright HTML margin margin, padding 27 Tips 28 margin ( ) ) margin: 0; 0 ) margin: 0 auto; 0 () ) margin: 10px 20px 30px 40px;,,, margin-top, margin-bottom, margineft, margin-right ) margin-eft: 100px; padding ( ) width auto text-aign center h1{ margin: 30px auto; /* 30px, auto*/ width: 30%; /* 30% */ text-aign: center; /* */ bodybackground-image body { background-image: ur(".png"); background-repeat: body (h1, p, div, span, etc.)
29 WebCSS CSS 7 Safari, Firefox HTML: Another HTML Lint W3C HTML Vaidator CSS: W3C CSS Vaidator http://www.ex.media.osaka-cu.ac.jp/~/