JIS Web Web JIS JIS 5.1.a 5.1.b 5.2.a 5.2.b 5.2.c 5.2.d 5.2.e 5.2.f 5.2.g 5.3.a 5.3.b 5.3.c 5.3.d 5.3.e 5.3.f 5.3.g 5.3.h 5.3.i 5.4.a 5.4.b 5.4.c PDF 無料ダウンロード

http://www1.iwate-ed.jp/

JIS Web Web JIS JIS 5.1.a 5.1.b 5.2.a 5.2.b 5.2.c 5.2.d 5.2.e 5.2.f 5.2.g 5.3.a 5.3.b 5.3.c 5.3.d 5.3.e 5.3.f 5.3.g 5.3.h 5.3.i 5.4.a 5.4.b 5.4.c 5.4.d 5.4.e 5.5.a 5.5.b 5.5.c 5.6.a 5.6.b 5.6.c 5.7.a 5.7.b 5.8.a 5.8.b

5.9.a 5.9.b 5.9.c 5.9.d 5.9.e 5.9.f 6.1 6.2 6.3 6.4 6.5 Web 10 WebInspector ColorSelector ColorDoctor HTML

Windows WindowsXP Windows WindowsXP Windows WindowsXP joho-r@center.iwate-ed.jp HTMLCSS JavaScript HTML JavaScript CSS Web HTML CSS Web Web Web JIS

JIS accessibility JIS X8341-1 JIS X8341-1 http://www.jisc.go.jp/newstopics/tpk/accessibility.htm Web Web W3CWorld Wide Web Consortium 1999 1.0 WCAG1.0 1.0wcag1.0 http://www.zspc.com/documents/wcag10/index.html 1999 5 5 W3C Web Web 18 325 30 35 175 13 65 18 11 1 2651 20.7% -1-

13 6 1 http://www.mhlw.go.jp/houdou/2002/08/h0808-2.html 18 11 1 http://www.stat.go.jp/data/jinsui/200611/zuhyou/05k2-1.xls Web 69.7% 81.1% 43.6% 19.6% http://www.soumu.go.jp/iicp/seika/data/research/survey/telecom/2003/0306-001.pdf 25.9% 36.5% 16.0% 13.7% 19.5% 8.5% 6.0% 9.2% 3.6% 0.7% 1.0% 12.2% 18.8% 7.1% 7.3% 11.4% 4.4% 52.4% 58.0% 47.0% 14 15 6 http://www.soumu.go.jp/s-news/2003/030307_1.html Web Web -2-

-3- Web Web Web OS OS

OS IT Web JIS BP Web Web http://www.pref.iwate.jp/ Web WindowsXP OS -4-

-5- Web Windows Web http://www1.iwate-ed.jp/ InternetExplorer Web

-6- JIS IT H15.6.16 http://www.meti.go.jp/kohosys/press/0004153/ JIS JIS X8341-3 16 6 21

JIS JIS JIS X8341-3:2004 JIS JIS X 8341-3:2004 JIS X 0208 WindowsXP InternetExplorer MacOS Netscape blink InternetExplorer InternetExplorer Netscape -7-

<H1> </H1> <P> <BR> <BR> <BR> <BR> <BR> </P> caption caption -8-

<title> TOP </title> HTML index.html <frame src="menu.html" title=" " id=" " > <frame src="main.html" title=" " id=" " > HTML menu.html <title> </title> HTML main.html <title> </title> -9-

<BODY> <P> <A href="top.html">top</a> > <A href="syoukai.html"> </A> > </P> </BODY> -10-

<FORM> <FIELDSET> <LEGEND> </LEGEND> Word <INPUT type="checkbox"> <INPUT type="checkbox"> </FIELDSET> </FORM> <FORM> <FIELDSET> <LEGEND> </LEGEND><INPUT type="checkbox"> Excel <INPUT type="checkbox"> Lotus <INPUT type="checkbox"> </FIELDSET> </FORM> <FORM> <FIELDSET> <LEGEND> </LEGEND><INPUT type="checkbox" name=" "> PaintShop <INPUT type="checkbox"> Photoshop <INPUT type="checkbox"> </FIELDSET> </FORM> <FORM> <FIELDSET> Word <INPUT type="checkbox"> <INPUT type="checkbox"> Excel <INPUT type="checkbox"> Lotus <INPUT type="checkbox" name=" "> PaintShop <INPUT type="checkbox"> Photoshop <INPUT type="checkbox"> </FIELDSET> </FORM> -11-

-12-

-13-

<A href="#skip"> </A> <A name="skip">topic</a><br> -14-

<img src="photo.gif" alt=" "> <img src="top.gif" alt="top "> -15-

PDF Flash Adobe Reader Flash Player JavaScript Java HTML Flash -16-

-17-

-18-

Web BGM BGM -19-

GIF 20 1 20 URL: http://nab.or.jp/ -20-

lang <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <HTML lang="ja"> <HEAD> <META http-equiv="content-type" content="text/html; charset=shift_jis"> <META http-equiv="content-style-type" content="text/css"> <TITLE> </TITLE> </HEAD> title <span title=" ">chemistry</span> -21-

-22-

CMS Web Web JIS -23-

e-mail FAX -24-

Web 11 Web 11 WAV HTML NOFRAMES longdesc summary CAPTION TH TH TD headers TH addr INPUT id LABEL for title LINK A AREA FRAME FRAMESET APPLET OBJECT IMG ABBR ACRONYM alt IMG IMG AREA -25-

APPLET INPUT TEXTAREA INPUT NOSCRIPT NOEMBED OBJECT Fujitsu Accessibility Assistance http://design.fujitsu.com/jp/universal/assistance/ Web WebInspector ColorSelector ColorDoctor WebInspector WebInspector HTML CSS HTML -26-

ColorSelector ColorSelector ColorDoctor ColorDoctor Web -27-

http://webhelper.aao.ne.jp/index.jsp Web URL Web index.html Web -28-

Web Web HTML Web Web HTML HTML Web W3C W3C 1996 CSS1Cascading Style Sheets Level 1 Internet Explorer3.0 Netscape Navigator4.0-29-

-30-

-31-1 <html> <head> <title>pagestyle01</title> </head> <body> </body> </html> PageStyle01.html <body> <p> </p> </body> 1.5 <body> <p style="font-size: 1.5em;"> </p> </body> PageStyle01.html 1.5

color: ; 16 RGB <td style="color: red;"> </td> <td style="color: #FF0000;"> </td> 1 2 3 4-33-

2 HTML #00FF33 <html> <head> <title>pagestyle03</title> </head> <body> </body> </html> PageStyle03.html <body> <p> </p> </body> #00FF33 <head> <title>pagestyle03</title> <style type="text/css"> body{ background-color: #00FF33; } </style> </head> PageStyle03.html #00FF33-34-

3 <style type="text/css"> body{ background-color: #00FF33; } p{ color: #FFFFFF; font-size: 3em; } </style> PageStyle03.html #FFFFFF 3 <style type="text/css"></style> <style></style> <head></head> body { color : blue; } body { color : blue ; font-size : 1.2.em ; } 1.2-35-

font-size: ; <td style="font-size: 1.5em;"> </td> <td style="font-size: 12pt;"> </td> [ 1.5 ] [ 12 ] background-color: ; 16 RGB <body style="background-color: red;"> [ ] 3 <html> <head> <title>pagestyle04</title> </head> <body> <div> </div> <div> </div> </body> </html> PageStyle04.html <title>pagestyle04</title> <style type="text/css">.main_title { font-size: 2em; }.sub_title { font-size: 0.8em; } </style> </head> <div class="main_title"> <div class="sub_title"> -36-

PageStyle04.html ; <class=""></> class.menu { font-size: 1.5em; } <div class="menu"> </div> PageStyle04.html <html> <head> <style type="text/css">.main_title { font-size: 2em; background-color: #FFA500; }.sub_title { font-size: 0.8em; background-color: #FFA500; text-align: right; } </style> </head> <body> <div class="main_title"> </div> <div class="sub_title"> </div> PageStyle04.html </body> <html> -37-

4 #FFA500 2 0.9 style.css style.css.main_title { background-color: #FFA500; font-size: 2em; }.sub_title { background-color: #FFA500; font-size: 0.9em; text-align: right; } PageStyle05.html <html> <head> <title>pagestyle05</title> <link rel="stylesheet" href="style.css" type="text/css"> </head> <body> <div class="main_title"> </div> <div class="sub_title"> </div> </body> </html> PageStyle05-01.html <html> <head> <title>pagestyle05-01</title> <link rel="stylesheet" href="style.css" type="text/css"> </head> <body> <div class="main_title"> </div> </body> </html> -38-

PageStyle05.html PageStyle05-01.html PageStyle05.html PageStyle05-01.html <link rel="stylesheet" href="" type="text/css"> <link> HTML memo -39-

1 margin border padding -top-right-bottom-left margin-top margin-left padding-top padding-left width padding-bottom height padding-right margin-right margin-bottom padding margin width height InternetExplorer5.5 width height border padding 2 color: ; 16 RGB #0000FF <td style="color: #0000FF;"> </td> a-1.html -40-

text-decoration: ; overline underline line-through none <td style="text-decoration: overline;"> </td> <td style="text-decoration: underline;"> </td> <td style="text-decoration: line-through;"> </td> <td style="text-decoration: none;"> </td> a-2.html text-align: ; left center right <td style="text-align: left;"> </td> <td style="text-align: center;"> /td> <td style="text-align: right;"> </td> a-3.html -41-

vertical-align: ; top middle bottom <td style="vertical-align: top;"> </td> <td style="vertical-align: middle;"> /td> <td style="vertical-align: bottom;"> </td> a-4.html text-indent: ; <div style="text-indent: 1em;"> </div> a-5.html -42-

font-family: ; MS P <div style="font-family: 'MS P ';"> </div> <div style="font-family: 'MS P ';"> </div> b-1.html font-size: ; 15pt2em75% <div style="font-size: 15pt;"> </div> <div style="font-size: 2em;"> </div> <div style="font-size: 75%;"> </div> b-2.html font-weight: ; 100,200,300,400,500,600,700,800,900400 normalbold bolder lighter <div style="font-weight: boldt;"> </div> b-3.html -43-

font-style: ; italic normal <div style="font-style: normal;"> (normal)</div> <div style="font-style: italic;"> (italic)</div> b-4.html background-color: ; 16 RGB #0000FF <body style="background-color: #0000FF;"> c-1.html background-image: ; <div> back.gif <div style="background-image: url(back.gif);"> </div> c-2.html -44-

margin-top: ; margin-right: ; margin-bottom: ; margin-left: ; 50px 30px <div style="margin-top: 50px; margin-left: 30px;"> </div> d-1.html padding-top: ; padding-right: ; padding-bottom: ; padding-left: ; 30px 50px <div style="padding-top: 30px; padding-left: 50px;"> </div> d-2.html -45-

border-top-width: ; border-right-width: ; border-bottom-width: ; border-left-width: ; 10px 50px <div style="border-left-width: 50px; border-top-width: 10px;"> </div> d-3.html border-top-color: ; border-right-color: ; border-bottom-color: ; border-left-color: ; 16 RGB <div style="border-left-color: #FF0000; border-top-color: #FF0000;"> </div> d-4.html -46-

border-top-style: ; border-right-style: ; border-bottom-style: ; border-left-style: ; none hidden dotted dashed solid double groove ridge inset outset ridge <div style="border-left-syle: ridge; border-top-style: ridge;"> </div> d-5.html width: ; height: ; <div></div> 300px 50px <div style="width: 300px; height: 50px;"> </div> d-6.html -47-

list-style-type: ; none disc circle square decimail10 decimail-leading-zero0 10 lower-roman upper-roman lower-greek lower-alpha lower-latin upper-alpha upper-latin hebrew armenian georgian cjk-ideographic hiragana katakana hiragana-iroha katakana-iroha <ul style="list-style-type: square;"> <li> </li> e-11.html <ul style="list-style-type: upper-roman;"> <li> </li> e-11.html list-style-image: ; listmark.gif <ul style="list-style-image: url(listmark.gif);"> <li> </li> e-20.html -48-

list-style-position: ; outside inside <ul style="list-style-position: inside;"> <li> <br> </li> e-30.html sogo.htmlmain.css main.css margin-top 20pxmargin-left 40px margin-bottom 10px 2px dotted #AAAAAA -49-

Web JIS Web -50-

CD CD CD TOP CD index.html