HTMLCSS_1章
|
|
|
- さゆり めいこ
- 5 years ago
- Views:
Transcription
1 HTML & CSS
2 1
3 html Win 5.5/6 Mac 5 Win7 Mac 7 Win 7/8.5 Mac 1/2 <html ""> </html> version <html> <head> <title>htmlcss</title> </head> HTML </body> </html> 2 head body
4 html head Win 5.5/6 Mac 5 Win7 Mac 7 Win 7/8.5 Mac 1/2 profile URI <head ""> </head> <html> <head> <title>htmlcss</title> </head> </body> </html> body title meta script 3
5 html body Win 5.5/06 Mac 5 Win7 Mac 7 Win 7/8.5 Mac 1/2 text link vlink alink background URI bgcolor <body ""> </body> <html> <head> <title>htmlcss</title> </head> <body bgcolor="#ffcccc"> </body> </html> 4 html head frameset
6 head title Win 5.5/6 Mac 5 Win7 Mac 7 Win 7/8.5 Mac 1/2 <title> </title> <html> <head> <title>htmlcss</title> </head> </body> </html> head meta script 5
7 head meta Win 5.5/6 Mac 5 Win7 Mac 7 Win 7/8.5 Mac 1/2 http-equiv HTTP name content <meta ""> <html> <head> <meta http-equiv="content-type" content="text/html; charset=shift_jis"> <title>htmlcss</title> </head> shift_jis </body> </html> <meta name="robots" content="index,follow"> <meta name="keywords" content="html,, CSS"> 6 head title script
8 hn Win 5.5/6 Mac 5 Win7 Mac 7 Win 7/8.5 Mac 1/2 align left center right justify <hn ""> </hn> <h1>1</h1> <h2>2</h2> <h3>3</h3> </body> div span p 7
9 div Win 5.5/6 Mac 5 Win7 Mac 7 Win 7/8.5 Mac 1/2 align left center right justify <div ""> </div> <div align="right" style="backgroundcolor: #9999cc"> 1 </div> </body> 8 span hn p
10 span Win 5.5/6 Mac 5 Win7 Mac 7 Win 7/8.5 Mac 1/2 <span ""> </span> <span style="backgroundcolor: #9999cc"></span> </body> body title 9
11 2
12 p Win 5.5/6 Mac 5 Win7 Mac 7 Win 7/8.5 Mac 1/2 <html <p ""> ""> </p> <html> align left center right justify <html> <head> <title>htmlcss</title> </head> <p title="">1</p> <p></p> </body> </html> 12 body hn div br
13 br Win 5.5/6 Mac 5 Win7 Mac 7 Win 7/8.5 Mac 1/2 <pre <br ""> ""> </pre> clear none left right all <html> <head> <title>htmlcss</title> </head> <p><br><br><br> </p> </body> </html> float clear 13
14 em Win 5.5/6 Mac 5 Win7 Mac 7 Win 7/8.5 Mac 1/2 <html <em> ""> </em> <html> <html> <head> <title>htmlcss</title> </head> <p><em></em> </p> </body> </html> 14 strong
15 strong Win 5.5/6 Mac 5 Win7 Mac 7 Win 7/8.5 Mac 1/2 <pre <strong> ""> </strong> </pre> <html> <head> <title>htmlcss</title> </head> <p><strong> </strong></p> </body> </html> em 15
16 blockquote Win 5.5/6 Mac 5 Win7 Mac 7 Win 7/8.5 Mac 1/2 <html <blockquote ""> ""> <html> </blockquote> cite URI <p> <blockquote cite=" </blockquote> </p> 16 q
17 q Win 5.5/6 Mac 5 Win7 Mac 7 Win 7/8.5 Mac 1/2 <pre <q ""> ""> </q> </pre> cite URI <p> <q cite=" jp/"> 2412 </q> </p> blockquote 17
18 del Win 5.5/6 Mac 5 Win7 Mac 7 Win 7/8.5 Mac 1/2 cite URI datetime <del ""></del> <p> <del datetime="2005/12/23"> </del> </p> 18 ins
19 ins Win 5.5/6 Mac 5 Win7 Mac 7 Win 7/8.5 Mac 1/2 cite URI datetime <ins ""></ins> <p> <ins datetime="2005/12/23"> </ins> </p> del 19
20 pre Win 5.5/6 Mac 5 Win7 Mac 7 Win 7/8.5 Mac 1/2 <pre ""> </pre> width <p> <pre> </pre> </p> </body> 20 sup sub
21 sup Win 5.5/6 Mac 5 Win7 Mac 7 Win 7/8.5 Mac 1/2 <sup ""> </sup> <p>10<sup>2</sup>=100</p> <p>100<sup>2</sup>=10000</p> </body> <sup style="fontsize:x-small"> pre sub 21
22 sub <sub> </sub> <p> H<sub>2</sub>O </p> </body> Win 5.5/6 Mac 5 Win7 Mac 7 Win 7/8.5 Mac 1/2 <sub style="fontsize:x-small"> pre sup 22
23 b Win 5.5/6 Mac 5 Win7 Mac 7 Win 7/8.5 Mac 1/2 <b> </b> <p> <b></b> </p> </body> <b style="color:#0099cc"> i big small 23
24 i Win 5.5/6 Mac 5 Win7 Mac 7 Win 7/8.5 Mac 1/2 <i> </i> <p> <i>piglet</i> </p> </body> <i style="color:#0099cc"> 24 b big small
25 big Win 5.5/6 Mac 5 Win7 Mac 7 Win 7/8.5 Mac 1/2 <big> </big> <p> <big>piglet</big> <big>eaglet </big> </p> </body> <big style="color:#0099cc"> b i small 25
26 small Win 5.5/6 Mac 5 Win7 Mac 7 Win 7/8.5 Mac 1/2 <small> </small> <p> piglet <small></small> </p> </body> <small style="color:#0099cc"> 26 b i big
27 tt Win 5.5/6 Mac 5 Win7 Mac 7 Win 7/8.5 Mac 1/2 <tt> </tt> <p>3</p> <tt> background-color: #ffffcc;<br> background-image: url( background-attachment: fixed;<br> </tt> </body> pre s u 27
28 s Win 5.5/6 Mac 5 Win7 Mac 7 Win 7/8.5 Mac 1/2 <s> </s> <p> piglet<s> </s> </p> </body> del tt u 28
29 u Win 5.5/6 Mac 5 Win7 Mac 7 Win 7/8.5 Mac 1/2 <u> </u> <p> piglet<u> </u> </p> </body> ins tt s 29
30 basefont Win 5.5/6 Mac 5 Win7 Mac 7 Win 7/8.5 Mac 1/2 size color face <basefont ""> <basefont size=5> <p>piglet </p> 30 <basefont size=5> <p style="font-size:18"> font
31 font Win 5.5/6 Mac 5 Win7 Mac 7 Win 7/8.5 Mac 1/2 size color face <font ""> </font> <font color="#333399"> <p>piglet </p> </font> <font color="#9999cc"> <p style="color:#9999cc"> basefont 31
32 hr Win 5.5/6 Mac 5 Win7 Mac 7 Win 7/8.5 Mac 1/2 align left center right noshade size width color <hr ""> <hr color="#333399"> piglet <hr color="#333399"> 32
33 center Win 5.5/6 Mac 5 Win7 Mac 7 Win 7/8.5 Mac 1/2 <center> </center> <center> piglet </center> </body> div 33
34 script Win 5.5/6 Mac 5 Win7 Mac 7 Win 7/8.5 Mac 1/2 type MIME language src URI charset <script ""> </script> <script type="text/javascript" language="javascript"> <!-- document.write(" ", navigator.appname," <br>"); document.write("", --> </script> navigator.appversion," <br>"); 34 noscript iframe
35 noscript Win 5.5/6 Mac 5 Win7 Mac 7 Win 7/8.5 Mac 1/2 <noscript> </noscript> <script type="text/javascript" language="javascript"> <!-- document.write( "", navigator.appname," <br>"); document.write( "", --> </script> navigator.appversion," <noscript> </noscript> <br>"); script 35
36 head style <head> Win 5.5/6 Mac 5 Win7 Mac 7 Win 7/8.5 Mac 1/2 type MIME <style ""> </style> <head> <title>htmlcss</title> <style type="text/css"><!-- h2{ font-size:16pt; color:red } p { font-size:10pt; color:brown } --> </style> </head> <h2></h2> <p></p> </body> 36 head
37 marquee Win 5.5/6 Mac 5 Win7 Mac 7 Win 7/8.5 Mac 1/2 direction left right loop behavior scroll alternate slide height width bgcolor hspace vspace scrolldelay scrollamount <marquee ""> </marquee> <marquee> </marquee> 37
38 blink Win 5.5/6 Mac 5 Win7 Mac 7 Win 7/8.5 Mac 1/2 <blink> </blink> <blink> </blink> 38 text-decoration
39 nobr Win 5.5/6 Mac 5 Win5 Mac 7 Win 7/8.5 Mac 1/2 <nobr> </nobr> <p> <nobr> </nobr> </p> white-space 39
40 3
41 ul Win 5.5/6 Mac 5 Win7 Mac 7 Win 7/8.5 Mac 1/2 <html <ul ""> > </ul> </html> type disc circle square <p></p> <ul type="square"> <li></li> <li></li> <li></li> <li></li> ol li 42
42 ol Win 5.5/6 Mac 5 Win7 Mac 7 Win 7/8.5 Mac 1/2 <html <ol ""> ""> </ol> <html> type 1 a A i I <p></p> <ol type="1"> <li>52</li> <li></li> <li></li> <li> </li> <li></li></ol> ul li 43
43 ulol li Win 5.5/6 Mac 5 Win7 Mac 7 Win 7/8.5 Mac 1/2 <li ""> </li> type uloltype value <p></p> <ul> <li type="circle"></li> <li type="square"></li> <li type="circle"></li> <li type="square"></li> <li type="circle"></li> ul ol 44
44 table Win 5.5/6 Mac 5 Win7 Mac 7 Win 7/8.5 Mac 1/2 summary align left center right width bgcolor background URI border bordercolor cellspacing cellpadding <table ""> </table> <table border="1" bordercolor="#0099cc"> <tr><td></td> <td></td> <td></td></tr> <tr><td>musical FROM CHAOS</td> <td> </td> <td>dvd</td></tr> <tr><td>dcprg & ROVO PAN-AMERICAN BEEF STAKE ART FEDERATION'S /SINO</td> <td> </td> <td>single</td> </tr> <tr><td>report FROM IRON MOUNTAIN</td> <td> </td> <td>album</td></tr> </table> 45
45 46 tr th td
46 table tr Win 5.5/6 Mac 5 Win7 Mac 7 Win 7/8.5 Mac 1/2 align left center right valign top middle bottom baseline bgcolor background URI <tr ""> </tr> <table width="400" align="center"> <tr align="center" bgcolor="#0099cc"> <td></td> <td></td> <td></td> </tr> <tr bgcolor="#ccffff"> <td>musical FROM CHAOS</td> <td> </td> <td>dvd</td> </tr> <tr bgcolor="#ccffff"> <td>dcprg & ROVO PAN-AMERICAN BEEF STAKE ART FEDERATION'S /SINO</td> <td> </td> <td>single</td> </tr> <tr bgcolor="#ccffff"> <td>report FROM IRON MOUNTAIN</td> <td> </td> <td>album</td> </tr> 47
47 48 table th td
48 tr th Win 5.5/6 Mac 5 Win7 Mac 7 Win 7/8.5 Mac 1/2 <th ""> </th> rowspan colspan nowrap width height bgcolor align left center right valign top middle bottom baseline <table border="1" bordercolor="#0099cc"> <tr bgcolor="#0099cc"> <th></th> <th></th> <th></th> </tr> <tr bgcolor="#ccffff"> <td>musical FROM CHAOS</td> <td> </td> <td>dvd</td> </tr> <tr bgcolor="#ccffff"> <td>dcprg & ROVO PAN-AMERICAN BEEF STAKE ART FEDERATION'S /SINO</td> <td> </td> 49
49 <td>single</td> </tr> <tr bgcolor="#ccffff"> <td>report FROM IRON MOUNTAIN</td> <td> </td> <td>album</td> </tr> </table> 50 table tr td
50 tr td Win 5.5/6 Mac 5 Win7 Mac 7 Win 7/8.5 Mac 1/2 <td ""> </td> rowspan colspan nowrap width height bgcolor align left center right valign top middle bottom baseline <table border="1" bordercolor="#0099cc"> <tr bgcolor="#0099cc"> <th></th> <th></th> <th></th> </tr> <tr bgcolor="#ccffff"> <td height="50">musical FROM CHAOS</td> <td> </td> <td rowspan="2">dvd</td> </tr> <tr bgcolor="#ccffff"> <td height="50">dcprg & ROVO PAN- AMERICAN BEEF STAKE ART FEDERATION'S /SINO</td> 51
51 <td> </td> </tr> <tr bgcolor="#ccffff"> <td height="50">report FROM IRON MOUNTAIN</td> <td> </td> <td>album</td> </tr> </table> 52 table tr th
52 html frameset Win 5.5/6 Mac 5 Win7 Mac 7 Win 7/8.5 Mac 1/2 rows cols border bordercolor frameborder 1yes 0no framespacing <frameset ""> </frameset> <html> <head> <title>htmlcss</title> </head> <frameset rows="20%,80%"> <frame name="menu" src="menu.html"> <frame name="main" src="main.html"> </frameset> frame noframes iframe 53
53 frameset frame Win 5.5/6 Mac 5 Win7 Mac 7 Win 7/8.5 Mac 1/2 name src URI noresize <frame ""> scrolling auto yes no frameborder marginwidth marginheight index.html <html> <head> <title>htmlcss</title> </head> <frameset rows="20%,80%"> <frame name="menu" src="menu.html"> <frame name="main" src="main.html"> </frameset> </html> menu.html <html> <head> <title></title> </head>
54 <body bgcolor="#708090"><center> <table width="300"> <tr> <td width="100"><font COLOR="#FFFFFF"> <a href="main.html">single</a></font> </td> <td width="100"><font COLOR="#FFFFFF"> <a href="main2.html">album</a></font> </td> <td width="100"><font COLOR="#FFFFFF"> <a href="main3.html">dvd</a></font> </td> </tr> </table> </center></body> </html> main.html <html> <head><title>single</title></head> <body bgcolor="gray"> <h3>single</h3> <p>dcprg & ROVO PAN-AMERICAN BEEF STAKE ART FEDERATION'S /SINO<br> <br></p> <p>dcprg:remix TIME<br> <br></p> <p>dcprg:remix PRAVDA<br> Release<br></p> 55
55 56 frameset noframes iframe
56 frameset noframes Win 5.5/6 Mac 5 Win7 Mac 7 Win 7/8.5 Mac 1/2 <noframes> </noframes> <html> <head> <title>htmlcss</title> </head> <frameset rows="20%,80%" frameborder="0"> <frame name="menu" src="menu.html"> <frame name="main" src="main.html"> <noframes> <p> </p> </body> </noframes> </frameset> </html> frameset iframe frame 57
57 iframe Win 5.5/6 Mac 5 Win7 Mac 7 Win 7/8.5 Mac 1/2 58 name src URI width height scrolling auto yes no frameborder 1 0 marginwidth marginheight align left center right <iframe ""> </iframe> <html> <head> <title>html&css</title> </head> <h3> DCPRG </h3> <iframe name="dics" src="main.html" width="400"> </iframe> </body>
58 59 frameset frame noframes
59 4
60 a Win 5.5/6 Mac 5 Win7 Mac 7 Win 7/8.5 Mac 1.2 <html <a ""> "" </a> > </html> name href URI target _self _blank _top _parent <h3>contents</h3> <p> <a href="contents/nikki.html">diary</a><br> <a href="contents/write.html">archive</a><br> <a href="contents/ballet.html">ballet</a><br> <a href="contents/author.html">author</a><br> </p> 62 link
61 head link Win 5.5/6 Mac 5 Win7 Mac 7 Win 7/8.5 Mac 1/2 <html <link ""> <html> href URI rel index.html <head> <link rel="stylesheet" type="text/css" href="main.css"> </head> main.css A:link { color : #1a4dcc ; text-decoration : none } A:visited {color: #0080e6 ; text-decoration: none } a 63
62 img Win 5.5/6 Mac 5 Win7 Mac 7 Win 7/8.5 Mac 1/2 <img ""> src URI alt align top right bottom left width height vspace hspace border <li type="circle"> <img src="image/nemu.jpg" align="top" alt=" " width="260" height="168"> 64 object
63 object Win 5.5/6 Mac 5 Win7 Mac 7 Win 7/8.5 Mac 1/2 data URI type MIME MIME align top right bottom left width height <object ""> </object> <p>flash</p> <object data="contents/slidersekkin.swf" width="400" height="100" type="application/x-shockwave-flash"> <param name="movie" value="slidersekkin.swf"> <param name="quality" value="high"> <param name="bgcolor" value="000000"> </object> param 65
64 object param Win 5.5/6 Mac 5 Win7 Mac 7 Win 7/8.5 Mac 1/2 name value valuetype value data refuri object type valuemime data MIME <param ""> <p>flash</p> <object data="contents/slidersekkin.swf" width="400" height="100" type="application/x-shockwave-flash"> <param name="movie" value="slidersekkin.swf"> <param name="quality" value="high"> <param name="bgcolor" value="0000ff"> </object> 66 object
65 form Win 5.5/6 Mac 5 Win7 Mac 7 Win 7/8.5 Mac 1/2 action method HTTP get / post enctype MIME MIME accept -charset accept MIME MIME name <form ""> </form> <form method="post" action="cgi-bin/res.cgi"> <p></p> <input type="text" name="comment" size="20" maxlength="20"> input button 67
66 input Win 5.5/6 Mac 5 Win7 Mac 7 Win 7/8.5 Mac 1/2 68 type text password checkbox radio submit reset file hidden image button name value size maxlength checked src URI accept MIME MIME disabled <input ""> </input> <form method="post" action="cgi-bin/res.cgi"> <p></p> <b></b><br> <input type="text" name="namae" size="20" maxlength="20"><br> <b></b><br>
67 <input type="text" name="comment" size="30" maxlength="30"><br> <hr> <b>q1</b><br><br> <br> <input type="radio" name="q1-1"> <br> <input type="radio" name="q1-2"><br> <input type="radio" name="q1-3" checked> <br> <input type="radio" name="q1-4"><br> <input type="radio" name="q1-5"><br> <hr> <input type="submit" value="submit"> <input type="reset" value="reset"> <p></p> </form> form button 69
68 button Win 5.5/6 Mac 5 Win7 Mac 7 Win 7/8.5 Mac 1/2 name value size maxlength checked src URI disabled <button ""> </button> <button type="submit" name="submit"> </button> <button type="reset" name="reset"> </button> 70 form input
69 select Win 5.5/6 Mac 5 Win7 Mac 7 Win 7/8.5 Mac 1/2 name size multiple disabled <select ""> </select> <p></p> <form method="post" action="cgi-bin/res.cgi"> <select name="food"> <option value="01"></option> <option value="02"></option> <option value="03"></option> <option value="04"></option> <option value="05"></option> </select> </form> form option 71
70 select option Win 5.5/6 Mac 5 Win7 Mac 7 Win 7/8.5 Mac 1/2 value selected disabled <option ""> </option> <p></p> <form method="post" action="cgi-bin/res.cgi"> <select name="food" size="5"> <option value="01"></option> <option value="02"></option> <option value="03"></option> <option value="04" selected></option> <option value="05"></option> </select> </form> 72 form select
71 textarea Win 5.5/6 Mac 5 Win7 Mac 7 Win 6/7/8.5 Mac 1 name rows cols wrap off hard soft disabled <textarea ""> </textarea> <form method="post" action="cgi-bin/res.cgi"> <p></p> <textarea rows="10" cols="60" name="comment" wrap="off"></textarea></form> form 73
72 label Win 5.5/6 Mac 5 Win7 Mac 7 Win 7/8.5 Mac 1/2 74 for id <label ""> </label> <form method="post" action="cgi-bin/res.cgi"> <p></p> <b></b><br> <input type="text" name="namae" size="20" maxlength="20"><br> <b></b><br> <input type="text" name="comment" size="30" maxlength="30"><br> <hr> <b>q1</b><br><br> <br> <label for="q1-1"></label> <input type="radio" id="q1-1" name=" "> <label for="q1-2"></label> <input type="radio" id="q1-2" name=""> <label for="q1-3"></label> <input type="radio" id="q1-3" name=""> <label for="q1-4"></label> <input type="radio" id="q1-4" name=""> <label for="q1-5"></label> <input type="radio" id="q1-5" name=""> <hr> <input type="submit" value="submit"> <input type="reset" value="reset"> <p></p> </form>
73 75 <label> <input type="radio" name=""> </label> from input
74 fieldset Win 5.5/6 Mac 5 Win7 Mac 7 Win 7/8.5 Mac 1/2 76 <fieldset> </fieldset> <form method="post" action="cgi-bin/res.cgi"> <p></p> <fieldset> <b></b><br> <input type="text" name="namae" size="20" maxlength="20"><br> <b></b><br> <input type="text" name="comment" size="30" maxlength="30"><br> </fieldset> <fieldset> <b>q1</b><br><br> <br> <label><input type="radio" name="q1-1"> </label><br> <label><input type="radio" name="q1-2"> </label><br> <label><input type="radio" name="q1-3"> </label><br> <label><input type="radio" name="q1-4"> </label><br> <label><input type="radio" name="q1-5"> </label><br> </fieldset> <fieldset> <input type="submit" value="submit"> <input type="reset" value="reset"> <p></p> </fieldset> </form>
75 77 form input
76 5
77 color Win 5.5/6 Mac 5 Win7 Mac 7 Win 7/8.5 Mac 1/2 { color: } <head> <style type="text/css"> <!-- h3 {color: # } p {color: black} --> </style> </head> <h3>1st FULL Album REPORT FROM IRON MOUNTAIN</h3> <p>m-1.catch22 M-2.PLAYMATE AT HANOI M-3.S M-4.CORCLE/LINE~HARD CORE PEACE M-5.Hey Joe M6.MIRROR BALLS </p> 80 font background-color
78 font-family Win 5.5/6 Mac 5 Win7 Mac 7 Win 7/8.5 Mac 1/2 serif sans-serif cursive { font-family : } fantasy monospace <head> <style type="text/css"> <!-- h3 {font-family: serif } p {font-family:sans-serif } --> </style> </head> <h3>1st FULL Album REPORT FROM IRON MOUNTAIN</h3> <p>m-1.catch22 M-2.PLAYMATE AT HANOI M-3.S M-4.CORCLE/LINE~HARD CORE PEACE M-5.Hey Joe M6.MIRROR BALLS </p> font-size font 81
79 font-style Win 5.5/6 Mac 5 Win7 Mac 7 Win 7/8.5 Mac 1/2 normal italic { font-style : } oblique <head> <style type="text/css"> <!-- h3 {font-family:serif } p {font-family:sans-serif; font-style:italic } --> </style> </head> <h3>1st FULL Album REPORT FROM IRON MOUNTAIN</h3> <p>m-1.catch22 M-2.PLAYMATE AT HANOI M-3.S M-4.CORCLE/LINE~HARD CORE PEACE M-5.Hey Joe M6.MIRROR BALLS <br><br> DCPRG</p> 82 font-family font
80 font-variant Win 5.5/6 Mac 5 Win7 Mac 7 Win 7/8.5 Mac 1/2 { font-variant: } normal small-caps <head> <style type="text/css"> <!-- h3 {font-variant:small-caps } p {font-family:sans-serif} --> </style> </head> <h3>1st Full Album Report From Iron Mountain</h3> <p>m-1.catch22 M-2.PLAYMATE AT HANOI M-3.S M-4.CORCLE/LINE~HARD CORE PEACE M-5.Hey Joe M6.MIRROR BALLS <br> font text-transform 83
81 font-weight Win 5.5/6 Mac 5 Win7 Mac 7 Win 7/8.5 Mac 1/2 normal bolder bold lighter { font-weight: } <head> <style type="text/css"> <!-- h3 {font-weight:bold} p {font-weight:bold} --> </style> </head> <h3>1st FULL Album REPORT FROM IRON MOUNTAIN</h3> <p>m-1.catch22 M-2.PLAYMATE AT HANOI M-3.S M-4.CORCLE/LINE~HARD CORE PEACE M-5.Hey Joe M6.MIRROR BALLS <br> 84 font-style font
82 font-size Win 5.5/6 Mac 5 Win7 Mac 7 Win 7/8.5 Mac 1/2 { font-size : } xx-smallx-small1.2 x-largelarge1.2 x-smallsmall1.2 xx-largex-large1.2 smallmedium1.2 largemedium1.2 medium largerfont-size1.2 smallerfont-size1.2 <head> <style type="text/css"> <!-- h3 {font-size:large} p {font-size:x-small} --> </style> </head> <h3>1st FULL Album REPORT FROM IRON MOUNTAIN</h3> <p>m-1.catch22 M-2.PLAYMATE AT HANOI M-3.S M-4.CORCLE/LINE~HARD CORE PEACE font font-weight 85
83 font Win 5.5/6 Mac 5 Win7 Mac 7 Win 7/8.5 Mac 1/2 { font-size: } <head> <style type="text/css"> <!-- h3 {font:small-caps 20pt serif} p {font:11pt monospace} --> </style> </head> <h3>1st FULL Album Report From Iron Mountain</h3> <p>m-1.catch22 M-2.PLAYMATE AT HANOI M-3.S M-4.CORCLE/LINE~HARD CORE PEACE M-5.Hey Joe M6.MIRROR BALLS <br> 86 font-family font-weight font-size
84 text-indent Win 5.5/6 Mac 5 Win7 Mac 7 Win 7/8.5 Mac 1/2 { text-indent: } <head> <style type="text/css"> <!-- h3 {font:18pt} p {text-indent:10px} --> </style> </head> <h3>1st FULL Album Rreport From Iron Mountain</h3> <p>m-1.catch22 M-2.PLAYMATE AT HANOI M-3.S M-4.CORCLE/LINE~HARD CORE PEACE M-5.Hey Joe M6.MIRROR BALLS <br> text-align text-decoration 87
85 text-align Win 5.5/6 Mac 5 Win7 Mac 7 Win 7/8.5 Mac 1/2 left right {text-align: } center justify <head> <style type="text/css"> <!-- h3 {text-align:right} p {text-align:center} --> </style> </head> <h3>1st FULL Album Rreport</h3> <p>m-1.catch22 M-2.PLAYMATE AT HANOI M-3.S M-4.CORCLE/LINE~HARD CORE PEACE M-5.Hey Joe M6.MIRROR BALLS <br> 88 text-indent text-decoration
86 text-decoration Win 5.5/6 Mac 5 Win7 Mac 7 Win 7/8.5 Mac 1/2 none underline overline { text-decoration: } line-through blink <head> <style type="text/css"> <!-- h3 {text-decoration:underline}.henkou {text-decoration:line-through} --> </style> </head> <h3>1st FULL Album REPORT FROM IRON MOUNTAIN</h3> <p>m-1.catch22 M-2.PLAYMATE AT HANOI M-3.S M-4.CORCLE/LINE~HARD CORE PEACE M-5.Hey Joe M6.MIRROR BALLS <span class="henkou"> Release, PCD ,000(w/o TAX)</span></p> text-indent text-align 89
87 text-transform Win 5.5/6 Mac 5 Win7 Mac 7 Win 7/8.5 Mac 1/2 none capitalize {text-transform: } lowercase uppercase <head> <style type="text/css"> <!-- h3 {text-transform:uppercase} p {text-transform:lowercase} --> </style> </head> <h3>1st FULL Album REPORT FROM IRON MOUNTAIN</h3> <p>m-1.catch22 M-2.PLAYMATE AT HANOI M-3.S M-4.CORCLE/LINE~HARD CORE PEACE M-5.Hey Joe M6.MIRROR BALLS Release, PCD ,000(w/o TAX)</p> 90 font-variant
88 word-spacing Win 5.5/6 Mac 5 Win7 Mac 7 Win 7/8.5 Mac 1/2 { word-spacing : } normal <head> <style type="text/css"><!-- h3 {word-spacing:12pt} p {word-spacing:20pt}--> </style> </head> <h3>1st FULL Album REPORT FROM IRON MOUNTAIN</h3> <p>m-1.catch22 M-2.PLAYMATE AT HANOI M-3.S M-4.CORCLE/LINE~HARD CORE PEACE M-5.Hey Joe M6.MIRROR BALLS Release, PCD ,000(w/o TAX)</p> <p>dcprg </p> text-indent text-align 91
89 white-space Win 5.5/6 Mac 5 Win7 Mac 7 Win 7/8.5 Mac 1/2 normal1 nowrap1 pre {white-space: } <head> <style type="text/css"> <!-- p {white-space: nowrap} --> </style> </head> <h3>1st FULL Album REPORT FROM IRON MOUNTAIN</h3> <p>m-1.catch22 M-2.PLAYMATE AT HANOI M-3.S M-4.CORCLE/LINE~HARD CORE PEACE M-5.Hey Joe M6.MIRROR BALLS Release, PCD ,000(w/o TAX)</p> 92 text-indent text-align
90 border-top-style Win 5.5/6 Mac 5 Win7 Mac 7 Win 7/8.5 Mac 1/2 none hidden solid double2 dashed { border-top-style : } dotted groove ridge inset outset <head> <style type="text/css"><!-- p { border-top-style:double ; border-top-width:5px ;}--> </style></head> <h3>1st FULL Album REPORT FROM IRON MOUNTAIN</h3> <p>m-1.catch22 M-2.PLAYMATE AT HANOI M-3.S M-4.CORCLE/LINE~HARD CORE PEACE M-5.Hey Joe M6.MIRROR BALLS</p> border-top-color 93
91 border-top-width Win 5.5/6 Mac 5 Win7 Mac 7 Win 7/8.5 Mac 1/2 thin thick {border-top-width: } medium <head> <style type="text/css"> <!-- p { border-top-style:dotted ; border-top-width:thick } --> </style> </head> <h3>1st FULL Album REPORT FROM IRON MOUNTAIN</h3> <p>m-1.catch22 M-2.PLAYMATE AT HANOI M-3.S M-4.CORCLE/LINE~HARD CORE PEACE M-5.Hey Joe M6.MIRROR BALLS</p> 94 border-top-style border-top-color
92 border-top-color Win 5.5/6 Mac 5 Win7 Mac 7 Win 7/8.5 Mac 1/2 { border-top-color : } <head> <style type="text/css"><!-- p { border-top-width:5px ; border-top-style:solid ; border-top-color:#cc0099}--> </style> </head> <h3>1st FULL Album REPORT FROM IRON MOUNTAIN</h3> <p>m-1.catch22 M-2.PLAYMATE AT HANOI M-3.S M-4.CORCLE/LINE~HARD CORE PEACE M-5.Hey Joe M6.MIRROR BALLS</p> <p> Release, PCD ,000(w/o TAX)</p> border-top-style border-top-width 95
93 border-top Win 5.5/6 Mac 5 Win7 Mac 7 Win 7/8.5 Mac 1/2 { border-top: } <head> <style type="text/css"> <!-- p { border-top:8px dashed #cc0099} --> </style> </head> <h3>1st FULL Album REPORT FROM IRON MOUNTAIN</h3> <p>m-1.catch22 M-2.PLAYMATE AT HANOI M-3.S M-4.CORCLE/LINE~HARD CORE PEACE M-5.Hey Joe M6.MIRROR BALLS</p> <p> Release, PCD ,000(w/o TAX)</p> 96 border-top-width border-top-style border-top-color
94 border-style Win 5.5/6 Mac 5 Win7 Mac 7 Win 7/8.5 Mac 1/2 none hidden solid double2 dashed { border-style: } dotted groove ridge inset outset <head> <style type="text/css"><!-- p { border-width:6px ; border-color:#cc0099 ; border-style:outset}--> </style></head> <h3>1st FULL Album REPORT FROM IRON MOUNTAIN</h3> <p>m-1.catch22 M-2.PLAYMATE AT HANOI M-3.S M-4.CORCLE/LINE~HARD CORE PEACE M-5.Hey Joe M6.MIRROR BALLS</p> border-width border-color 97
95 border-width Win 5.5/6 Mac 5 Win7 Mac 7 Win 7/8.5 Mac 1/2 thin thick { border-width: } medium <head> <style type="text/css"> <!-- p { border-width:2px ; border-color:#cc0099 ; border-style:dotted} --> </style> </head> <h3>1st FULL Album REPORT FROM IRON MOUNTAIN</h3> <p>m-1.catch22 M-2.PLAYMATE AT HANOI M-3.S M-4.CORCLE/LINE~HARD CORE PEACE M-5.Hey Joe M6.MIRROR BALLS</p> border-style border-color 98
96 border-color Win 5.5/6 Mac 5 Win7 Mac 7 Win 7/8.5 Mac 1/2 { border-color : } <head> <style type="text/css"> <!-- p { border-width:4px ; border-color:#9999ff ; border-style:solid} --> </style> </head> <h3>1st FULL Album REPORT FROM IRON MOUNTAIN</h3> <p>m-1.catch22 M-2.PLAYMATE AT HANOI M-3.S M-4.CORCLE/LINE~HARD CORE PEACE M-5.Hey Joe M6.MIRROR BALLS</p> <p> Release, PCD ,000(w/o TAX)</p> border-style border-width 99
97 border Win 5.5/6 Mac 5 Win7 Mac 7 Win 7/8.5 Mac 1/2 { border: } <head> <style type="text/css"> <!-- h3 { border:4px #cc0099 dashed} p { border:4px #9999ff dashed} --!> </style> </head> <h3>1st FULL Album REPORT FROM IRON MOUNTAIN</h3> <p>m-1.catch22 M-2.PLAYMATE AT HANOI M-3.S M-4.CORCLE/LINE~HARD CORE PEACE M-5.Hey Joe M6.MIRROR BALLS</p> 100 border-style border-width border-color
98 6
99 background-color Win 5.5/6 Mac 5 Win7 Mac 7 Win 7/8.5 Mac 1/2 { background-color: } <head> <style type="text/css"> <!-- h3 {background-color: #99cccc } p {background-color: #ffcccc} --> </style> </head> <h3>1st FULL Album REPORT FROM IRON MOUNTAIN</h3> <p>m-1.catch22 M-2.PLAYMATE AT HANOI M-3.S M-4.CORCLE/LINE~HARD CORE PEACE M-5.Hey Joe M6.MIRROR BALLS </p> 102 color
100 background-image Win 5.5/6 Mac 5 Win7 Mac 7 Win 7/8.5 Mac 1/2 { background-image: } <head> <style type="text/css"> <!-- body {background-image: url(image/sora.jpg) } --> </style> </head> <h3>1st FULL Album REPORT FROM IRON MOUNTAIN</h3> <p>m-1.catch22 M-2.PLAYMATE AT HANOI M-3.S M-4.CORCLE/LINE~HARD CORE PEACE M-5.Hey Joe M6.MIRROR BALLS </p> background-attachment backgroun d-repeat background-position 103
101 background-attachment { background-attachment: } scroll fixed Win 5.5/6 Mac 5 Win7 Mac 7 Win 7/8.5 Mac 1/2 <head> <style type="text/css"> <!-- body {background-image: url(image/01.jpg); background-attachment:fixed } --> </style> </head> <h3>1st FULL Album REPORT FROM IRON MOUNTAIN</h3> <p>m-1.catch22 M-2.PLAYMATE AT HANOI M-3.S M-4.CORCLE/LINE~HARD CORE PEACE M-5.Hey Joe M6.MIRROR BALLS </p> <h3>1st FULL Album REPORT FROM IRON MOUNTAIN</h3> 104 background-image background-repeat background-position
102 background-repeat Win 5.5/6 Mac 5 Win7 Mac 7 Win 7/8.5 Mac 1/2 repeat repeat-x { background-repeat: } repea-y no-repeat <head> <style type="text/css"><!-- body {background-image: url(image/01.jpg); background-attachment:fixed; background-repeat:no-repeat}--> </style> </head> <h3>1st Full Album REPORT FROM IRON Mountain</h3> <p>m-1.catch22 M-2.PLAYMATE AT HANOI M-3.S M-4.CORCLE/LINE~HARD CORE PEACE M-5.Hey Joe M6.MIRROR BALLS <br> background-image background-atta chment background-position 105
103 background-position Win 5.5/6 Mac 5 Win7 Mac 7 Win 7/8.5 Mac 1/2 { background-position: } top bottom left right center: <head><style type="text/css"><!-- body {background-image: url(image/01.jpg); background-attachment:fixed; background-repeat:no-repeat; background-position:right bottom} --></style></head> <h3>1st FULL Album REPORT FROM IRON MOUNTAIN</h3> <p>m-1.catch22 M-2.PLAYMATE AT HANOI M-3.S M-4.CORCLE/LINE~HARD CORE PEACE 106 background-image background-atta chment background-repeat
104 background Win 5.5/6 Mac 5 Win7 Mac 7 Win 7/8.5 Mac 1/2 { background: } <head><style type="text/css"><!-- body {background:#ffcc66 url(image/shippo.jpg) fixed no-repeat bottom right}--> </style></head> <h3>1st FULL Album REPORT FROM IRON MOUNTAIN</h3> <p>m-1.catch22 M-2.PLAYMATE AT HANOI M-3.S M-4.CORCLE/LINE~HARD CORE PEACE M-5.Hey Joe M6.MIRROR BALLS <br> background-color backgroundimage background-attachment background-repeat background-position 107
105 7
106 margin-top Win 5.5/6 Mac 5 Win7 Mac 7 Win 7/8.5 Mac 1/2 { margin-top: } <head> <style type="text/css"> <!-- h3 {background-color: #ffcc66; margin-top:100px } --> </style> </head> <h3>1st FULL Album REPORT FROM IRON MOUNTAIN</h3> <p>m-1.catch22 M-2.PLAYMATE AT HANOI M-3.S M-4.CORCLE/LINE~HARD CORE PEACE M-5.Hey Joe M6.MIRROR BALLS </p> 110 margin-bottom margin-right margin-left
107 margin-bottom Win 5.5/6 Mac 5 Win7 Mac 7 Win 7/8.5 Mac 1/2 { margin-bottom: } <head> <style type="text/css"> <!-- h3 {background-color: #ffcc66; margin-bottom:80px } --> </style> </head> <h3>1st FULL Album REPORT FROM IRON MOUNTAIN</h3> <p>m-1.catch22 M-2.PLAYMATE AT HANOI M-3.S M-4.CORCLE/LINE~HARD CORE PEACE M-5.Hey Joe M6.MIRROR BALLS </p> margin-top margin-right margin-left 111
108 margin-right Win 5.5/6 Mac 5 Win7 Mac 7 Win 7/8.5 Mac 1/2 { margin-right: } <head> <style type="text/css"> <!-- h3 {background-color: #ffcc66; margin-right:50px } --> </style> </head> <h3>1st FULL Album REPORT FROM IRON MOUNTAIN</h3> <p>m-1.catch22 M-2.PLAYMATE AT HANOI M-3.S M-4.CORCLE/LINE~HARD CORE PEACE M-5.Hey Joe M6.MIRROR BALLS </p> 112 margin-top margin-bottom margin-left
109 margin-left Win 5.5/6 Mac 5 Win7 Mac 7 Win 7/8.5 Mac 1/2 { margin-left: } <head> <style type="text/css"> <!-- h3 {background-color: #ffcc66; margin-left:50px } --> </style> </head> <h3>1st FULL Album REPORT FROM IRON MOUNTAIN</h3> <p>m-1.catch22 M-2.PLAYMATE AT HANOI M-3.S M-4.CORCLE/LINE~HARD CORE PEACE M-5.Hey Joe M6.MIRROR BALLS </p> margin-top margin-bottom margin-right 113
110 margin Win 5.5/6 Mac 5 Win7 Mac 7 Win 7/8.5 Mac 1/2 { margin: } <head> <style type="text/css"> <!-- h3 {background-color: #ffcc66; margin:80px } --> </style> </head> <h3>1st FULL Album REPORT FROM IRON MOUNTAIN</h3> <p>m-1.catch22 M-2.PLAYMATE AT HANOI M-3.S M-4.CORCLE/LINE~HARD CORE PEACE M-5.Hey Joe M6.MIRROR BALLS </p> 114 margin-top margin-bottom margin-right margin-left
111 padding-top Win 5.5/6 Mac 5 Win7 Mac 7 Win 7/8.5 Mac 1/2 { padding-top: } <head> <style type="text/css"> <!-- h3 {background-color: #ffcc66; padding-top:30px } --> </style> </head> <h3>1st FULL Album REPORT FROM IRON MOUNTAIN</h3> <p>m-1.catch22 M-2.PLAYMATE AT HANOI M-3.S M-4.CORCLE/LINE~HARD CORE PEACE M-5.Hey Joe M6.MIRROR BALLS </p> padding-bottom padding-left padding-right 115
112 padding-bottom Win 5.5/6 Mac 5 Win7 Mac 7 Win 7/8.5 Mac 1/2 { padding-bottom: } <head> <style type="text/css"> <!-- h3 {background-color: #ffcc66; padding-bottom:30px } --> </style> </head> <h3>1st FULL Album REPORT FROM IRON MOUNTAIN</h3> <p>m-1.catch22 M-2.PLAYMATE AT HANOI M-3.S M-4.CORCLE/LINE~HARD CORE PEACE M-5.Hey Joe M6.MIRROR BALLS </p> 116 padding-top padding-right padding-left
113 padding-right Win 5.5/6 Mac 5 Win7 Mac 7 Win 7/8.5 Mac 1/2 { padding-right: } <head> <style type="text/css"> <!-- h3 {background-color: #ffcc66; padding-right:30px } --> </style> </head> <h3>1st FULL Album REPORT FROM IRON MOUNTAIN</h3> <p>m-1.catch22 M-2.PLAYMATE AT HANOI M-3.S M-4.CORCLE/LINE~HARD CORE PEACE M-5.Hey Joe M6.MIRROR BALLS </p> padding-top padding-bottom padding-left 117
114 padding-left Win 5.5/6 Mac 5 Win7 Mac 7 Win 7/8.5 Mac 1/2 { padding-left: } <head> <style type="text/css"> <!-- h3 {background-color: #ffcc66; padding-left:30px } --> </style> </head> <h3>1st FULL Album REPORT FROM IRON MOUNTAIN</h3> <p>m-1.catch22 M-2.PLAYMATE AT HANOI M-3.S M-4.CORCLE/LINE~HARD CORE PEACE M-5.Hey Joe M6.MIRROR BALLS </p> 118 padding-top padding-bottom padding-right
115 padding Win 5.5/6 Mac 5 Win7 Mac 7 Win 7/8.5 Mac 1/2 { padding: } <head> <style type="text/css"><!-- h3 {background-color: #ffcc66; padding:30px } --> </style> </head> <h3>1st FULL Album REPORT FROM IRON MOUNTAIN</h3> <p>m-1.catch22 M-2.PLAYMATE AT HANOI M-3.S M-4.CORCLE/LINE~HARD CORE PEACE M-5.Hey Joe M6.MIRROR BALLS </p> padding-top padding-bottom padding-right padding-left 119
116 position Win 5.5/6 Mac 5 Win7 Mac 7 Win 7/8.5 Mac 1/2 static relative 2 { position: } absolute 3 fixed <head><style type="text/css"><!-- h3 {background-color: #ffcc66; position:absolute; top:100px; left:80px} p {background-color: #ccff33;}--> </style></head> <h3>1st FULL Album REPORT FROM IRON MOUNTAIN</h3> <p>m-1.catch22 M-2.PLAYMATE AT HANOI top right bottom left 120
117 top Win 5.5/6 Mac 5 Win7 Mac 7 Win 7/8.5 Mac 1/2 { top: } <head> <style type="text/css"><!-- h3 {background-color: #ffcc66; position:relative; top:50px; left:80px} p {background-color: #ccff33;}--> </style></head> <h3>1st FULL Album REPORT FROM IRON MOUNTAIN</h3> <p>m-1.catch22 M-2.PLAYMATE AT HANOI M-3.S M-4.CORCLE/LINE~HARD CORE PEACE M-5.Hey Joe M6.MIRROR BALLS</p> position left right bottom 121
118 right Win 5.5/6 Mac 5 Win7 Mac 7 Win 7/8.5 Mac 1/2 { right: } <head> <style type="text/css"><!-- h3 {background-color: #ffcc66; position:relative; top:50px; right:80px} p {background-color: #ccff33;}--> </style> </head> <h3>1st FULL Album REPORT FROM IRON MOUNTAIN</h3> <p>m-1.catch22 M-2.PLAYMATE AT HANOI M-3.S M-4.CORCLE/LINE~HARD CORE PEACE M-5.Hey Joe M6.MIRROR BALLS</p> 122 position left top bottom
119 bottom Win 5.5/6 Mac 5 Win7 Mac 7 Win 7/8.5 Mac 1/2 { bottom: } <head><style type="text/css"><!-- h3 {background-color:#ffcc66; position:absolute; bottom:140px; left:100px} p {background-color: #ccff33;position:absolute; bottom:80px; left:200px} div {position:absolute; bottom:80px; left:auto}--></style></head> <div> <img src="image/shippo3.jpg"></div> <p>m-1.catch22 M-2.PLAYMATE AT HANOI M-3.S M-4.CORCLE/LINE~HARD CORE PEACE M-5.Hey Joe M6.MIRROR BALLS</p> <h3></h3> position top right left 123
120 left Win 5.5/6 Mac 5 Win7 Mac 7 Win 7/8.5 Mac 1/2 { left: } <head><style type="text/css"><!-- h3 {background-color:#ffcc66; position:absolute; top:10px; bottom:auto; left:100px} p {background-color: #ccff33; position:absolute; top:170px; bottom:auto; left:100px} div {position:absolute; top:40px; bottom:auto; left:100px} --> </style></head> <div><img src="image/shippo3.jpg"></div> <p>m-1.catch22 M-2.PLAYMATE AT HANOI M-3.S M-4.CORCLE/LINE~HARD CORE PEACE M-5.Hey Joe M6.MIRROR BALLS</p> <h3></h3> 124 position top right bottom
121 float Win 5.5/6 Mac 5 Win7 Mac 7 Win 7/8.5 Mac 1/2 left right none { float: } <style type="text/css"><!-- h3 {background-color:#ffcc66} p {background-color: #ccff33} div {float:right;}--> </style></head> <h3></h3> <div><img src="image/shippo3.jpg"></div> <p>shippo no kimochi shippo no kimochi shippo no kimochi shippo no kimochi shippo no kimochi shi clear 125
122 clear Win 5.5/6 Mac 5 Win7 Mac 7 Win 7/8.5 Mac 1/2 left both/ right none { clear: } <style type="text/css"><!-- h3 {background-color:#ffcc66} p {background-color: #ccff33;clear:right} div {float:right;}--></style></head> <h3></h3> <div><img src="image/shippo3.jpg"></div> <p>shippo no kimochi shippo no kimochi shippo no kimochi shippo no kimochi shippo no kimochi shi 126 float
123 overflow Win 5.5/6 Mac 5 Win7 Mac 7 Win 7/8.5 Mac 1/2 visible 1 scroll { overflow: } hidden auto 2 <style type="text/css"><!--.div1 {background-color:#ffcc66; width:260px;height:100px; overflow:scroll;}--> </style></head> <h3>1st FULL Album Report From Iron Mountain</h3> <p class="div1">m-1.catch22 M-2.PLAYMATE AT HANOI M-3.S M-4.CORCLE/LINE~HARD CORE PEACE M-5.Hey Joe M6.MIRROR BALLS width height 127
124 display Win 5.5/6 Mac 5 Win7 Mac 7 Win 7/8.5 Mac 1/2 none run-in block table inline inline-table list-item { display: } <style type="text/css"><!--.dis1 {display:list-item ; margin-left :20px;}--> </style></head> <h3>1st FULL Album Rreport From Iron Mountain</h3> <p><span class="dis1">m-1.catch22</span> <span class="dis1">m-2.playmate AT HANOI</span> <span class="dis1">m-3.s</span> 128 visibility
125 visibility Win 5.5/6 Mac 5 Win7 Mac 7 Win 7/8.5 Mac 1/2 visible hidden { visibility: } collapse <head> <style type="text/css"><!-- h3 {background-color:#ffcc66}.div {float:right; visibility: hidden} --></style></head> <h3></h3> <div class="div"> <img src="image/shippo3.jpg"></div> <div>shippo no kimochi shippo no kimochi shippo no kimochi shippo no kimochi shippo no kimochi shi</div> display 129
126 vertical-align Win 5.5/6 Mac 5 Win7 Mac 7 Win 7/8.5 Mac 1/2 baseline text-top top middle bottom { vertical-align: } text-bottom super sub <p><img src="image/shippo3.jpg" style="vertical-align:top"></p> <p><img src="image/shippo3.jpg" style="vertical-align:middle"></p> <p><img src="image/shippo3.jpg" 130 float clear
127 width Win 5.5/6 Mac 5 Win7 Mac 7 Win 7/8.5 Mac 1/2 { width: } <head> <style type="text/css"> <!-- p {background-color:#ffcc66; width:260px;} --> </style> </head> <h3>1st FULL Album Rreport From Iron Mountain</h3> <p>m-1.catch22 M-2.PLAYMATE AT HANOI M-3.S M-4.CORCLE/LINE~H height 131
128 height Win 5.5/6 Mac 5 Win7 Mac 7 Win 7/8.5 Mac 1/2 { height: } <head> <style type="text/css"> <!-- p {background-color:#ffcc66; width:260px;height:200px;} --> </style> </head> <h3>1st FULL Album Rreport From Iron Mountain</h3> <p>m-1.catch22 M-2.PLAYMATE AT HANOI M-3.S M-4.CORCLE/LINE~H 132 width
129 line-height Win 5.5/6 Mac 5 Win7 Mac 7 Win 7/8.5 Mac 1/2 {line-height: } <head> <style type="text/css"> <!-- p {line-height:20pt} --> </style> </head> <h3>1st FULL Album REPORT FROM IRON MOUNTAIN</h3> <p>m-1.catch22 M-2.PLAYMATE AT HANOI M-3.S M-4.CORCLE/LINE~HARD CORE PEACE M-5.Hey Joe M6.MIRROR BALLS Release, PCD ,000(w/o TAX)</p> font-family font-size 133
130 8
131 list-style-image Win 5.5/6 Mac 5 Win7 Mac 7 Win 7/8.5 Mac 1/2 { list-style-image: } <head> <style type="text/css"> <!-- li {list-style-image: url(image/entry.gif);line-height:30px} --> </style> </head> <ul><li>m-1.catch22</li> <li>m-2.playmate AT HANOI</li> <li>m-3.s</li> <li>m-4.corcle/line~hard CORE PEACE</li> <li>m-5.hey Joe</li> <li>m6.mirror BALLS</li> </ul> 136 list-style-position list-style
132 list-style-position Win 5.5/6 Mac 5 Win7 Mac 7 Win 7/8.5 Mac 1/2 { list-style-position: } inside outside <head> <style type="text/css"><!-- li {list-style-position: inside}--> </style> </head> <h3></h3> <ul> <li> 24</li> <li> 43 </li> </ul> list-style-image list-style 137
133 list-style Win 5.5/6 Mac 5 Win7 Mac 7 Win 7/8.5 Mac 1/2 { list-style: } <head> <style type="text/css"><!-- li {list-style:url(image/entry.gif) outside}--> </style> </head> <h3></h3> <ul> <li> 24</li> <li> 43 </li> </ul> 138 list-style-image list-style-position
134 table-layout Win 5.5/6 Mac 5 Win7 Mac 7 Win 7/8.5 Mac 1/2 { table-layout: } auto fixed <table border="1" bordercolor="#0099cc" style="width:300px;table-layout:fixed"> <tr> <td></td> <td></td> <td></td> </tr> <tr> <td>musical FROM CHAOS</td> <td> </td> <td>dvd</td> border-collapse border-spacing 139
135 border-collapse Win 5.5/6 Mac 5 Win7 Mac 7 Win 7/8.5 Mac 1/2 { border-collapse: } collapse separate <table border="1" bordercolor="#0099cc" style="border-collapse:collapse"> <tr> <td></td> <td></td> <td></td> </tr> <tr> <td>musical FROM CHAOS</td> <td> </td> <td>dvd</td> 140 table-layout border-spacing
136 border-spacing { border-spacing: } <table border="1" style="border-spacing:10 4; background-color:#ffcc99"> <tr> <td></td> <td></td> <td></td> </tr> <tr> <td>musical FROM CHAOS</td> <td> </td> <td>dvd</td> Win 5.5/6 Mac 5 Win7 Mac 7 Win 7/8.5 Mac 1/2 table-layout border-callapse 141
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.
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
~/WWW-local/compIID (WWW IID ) $ mkdir WWW-local $ cd WWW-local $ mkdir compiid 3. Emacs index.html n (a) $ cd ~/WWW/compIID
10 10 10.1 1. 2. 3. HTML(HyperText Markup Language) Web [ ][ ] HTML Web HTML HTML Web HTML ~b08a001/www/ ( ) ~b08a001/www-local/ ( ) html ( ) 10.2 WWW WWW-local b08a001 ~b08a001/www/ ~b08a001/www-local/
address 連絡先 可 lang xmlns applet Javaアプレット - EMOBILE 非対応 area イメージマップ alt shape "default" coords href nohref tabindex accesskey target "_self" 可 XHTML
Appendix_A EMOBILE XHTML, HTML タグ対応表 印のおよび属性はモバイルブラウザで使用できます で示す項目は一部の端末で使用できません 可 で示す項目は視覚的効果がないなど 条件付きで使できます A a アンカー href charset hreflang type name 可 XHTML 未定義 rel rev shape coords tabindex accesskey
6 2 s µ µµµ µµµµ µ µ h µs µ µµµµ µ µ µ s mµµµµµ µµµ µµ µ u m µmµµµµµ µµ µ µ µ µ µ µ µ µ s 1
6 1 6 (1) (2) HTML (3) PDF Copy&Paste 1 Web 1 Web Web 1 Web HTML 6 2 s µ µµµ µµµµ µ µ h µs µ µµµµ µ µ µ s mµµµµµ µµµ µµ µ u m µmµµµµµ µµ µ µ µ µ µ µ µ µ s 1 6 3 1.1 HTML Web HTML(Hyper Text Markup Language)
6 2 1
6 1 6 (1) (2) HTML (3) 1 Web HTML 1 Web 1 Web Web 6 2 1 6 3 1.1 HTML(XHTML) Web HTML(Hyper Text Markup Language) ( ) html htm HTML XHTML(XHTML 1.0 Transitional)
要素にフォーカスが当たったときは 例えば以下のように記述する input:focus{} 疑似要素 p:first-lin{ } 一行目だけ p:first-letter{} 最初の文字だけ要素の前や後に付け加えるには 以下のように記述する p:before{content:" 記号や文字 ";}
css とは web ページを構築する上で 主に見た目にかかわる部分を記述するものである 記述方法は html の に直接書く方法 のタグに一つ一つ書く方法と 別の ファイルとして書いておく方法がある 1つ目の方法は タグを に記述して起き その中に css で記述する 2つ目の方法は 例えば
Web
Web 1 1 1........................... 1 2 Web...................... 1 3...................... 3 4........................ 4 5........................... 5 i............................ 5 ii iii..........................
立ち読みページ
6 6 46. 47. 48. 49. 50. 51. 52. 53. 146 148 150 152 154 158 160 162 6 46 Web ( ) table tr td th >> HTML
次のように編集を行う 1. 改行を挿入するには <br> タグ 例 ) 世界の都市めぐり <br> ~~~あれこれをご紹介します <br> ~~~ 名所めぐり <br> ~~~ヨーロッパの町並み <br> 2. 段落を区切るには <p> ~ </p> タグ 例 )<p> 世界の都市めぐり </p>
第 1 回目のタグ 1. Web ページ ( ホームページ ) の作成メモ帳 ( テキストエディタ ): ウィンドウズに付属しているソフトテキストエディタ メモ帳 を開くには : スタートボタンをクリック プログラムポイント アクセサリ メモ帳を選ぶ ブラウザ (Web ページの閲覧ソフト Internet Explorer): ウィンドウズに付属しているソフトが必要とする homepage.html
World Wide Web =WWW Web ipad Web Web HTML hyper text markup language CSS cascading style sheet Web Web HTML CSS HTML
Web 工学博士大堀隆文 博士 ( 工学 ) 木下正博 共著 World Wide Web =WWW Web ipad Web Web HTML hyper text markup language CSS cascading style sheet Web Web HTML CSS HTML ii HTML CSS CSS HTML HTML HTML HTML Eclipse Eclipse Eclipse
教材ドットコムオリジナル教材
問題 次の画面写真を参考にソースを組みなさい 画像素材は次のサイトにある http://www.kyouzai.com/kenshu/index.htm トップ 大学 専門学校授業 10 月 31 日画像素材 ファイル名 :index.htm( フレーム定義ファイル ) menu.htm( 左フレーム表示 メニューページ ) top.htm( 右フレーム表示 似顔絵イラスト表示ページ ) touroku.htm(
インターネット社会の発展
インターネット入門 第 8 回 Web ページの作成法 総合情報学部情報科学科榊原道夫, 河野敏行, 大西荘一 目次 1. Web ページの作成 2. タグによる作成手順 3. HTML の基本 4. 作ってみよう 5. スタイルシートの利用 Web ページの作成 作成に必要なアプリケーション HTML エディター 専用ソフト テキストエディター 画像編集ソフト コンテンツ作成ソフト Flash ファイル転送ソフト
経営論集2011_07_小松先生.indd
20 1 2010 103 125 HTML+CSS HTML CSS CMS Web CMS CMS CMS CMS DreamWeaver Web Web CMS Web Web CSS Web Eclipse HTML CSS Web Web HTML CSS Web HTML CSS Web HTML CSS Web 1 Web Web HTML Web 103 HTML+CSS Web HTML
1 JIS X 8341-3:2016 WCAG2.0 http://waic.jp/docs/wcag2/understanding.html WCAG2.0 http://waic.jp/docs/wcag2/techs.html 2 ... 1... 3... 6 1.1... 6 1.2... 7... 8 1.1.1... 8 1.2.1... 13 1.2.2... 14 1.2.3...
id, クラスで指定 (#id 名,.class 名 ) 4. 様々なセレクタ a,b :a と b を指定 a b :a の下の階層の b を指定 a>b :a の直下の b を指定 a+b :a の次の b を指定 ab :a かつ b を指定 5. 属性セレクタ a[b] :a タグ内で b
![id, クラスで指定 (#id 名,.class 名 ) 4. 様々なセレクタ a,b :a と b を指定 a b :a の下の階層の b を指定 a>b :a の直下の b を指定 a+b :a の次の b を指定 ab :a かつ b を指定 5. 属性セレクタ a[b] :a タグ内で b](/thumbs/91/105346023.jpg "id, クラスで指定 (#id 名,.class 名 ) 4. 様々なセレクタ a,b :a と b を指定 a b :a の下の階層の b を指定 a>b :a の直下の b を指定 a+b :a の次の b を指定 ab :a かつ b を指定 5. 属性セレクタ a[b] :a タグ内で b")
CSS まとめ 1. CSS とは? ホームページを作る技術の一つで, 見た目の記述をするもの. W3C で作成されており,W3C のサイトで仕様を確認できる. 2. CSS が記述できる場所 1 style タグで記述 (html 内に記述 ) する. 2 style 属性で記述 (html 内に記述 ) する. 3 外部ファイルで記述する.( 一般的な方式であり, 以下, この方式の説 明 )
ホームページ作成に必要なソフト 1. ブラウザ : ホームページを画面上に表示するためのソフトウェア 現在よく使われるのは Microsoft Internet Explorer と Netscape Navigator の 2 種類がある 2. テキストエディタ : テキストファイルと呼ばれる 文
ホームページ作成 1. HTML 言語によるホームページ作 成 2. ホームページ作成ソフト IBM : ホー ムページビルダー Microsoft FrontPage 1 ホームページ作成に必要なソフト 1. ブラウザ : ホームページを画面上に表示するためのソフトウェア 現在よく使われるのは Microsoft Internet Explorer と Netscape Navigator の 2
Microsoft Word - 教材WebページのHTML5及びCSS3の解説
教材 Web ページの HTML5 及び CSS3 の解説.docx Page 6 3 Contents の解説 3.1 IE9 の画面 教材 Web ページの HTML5 及び CSS3 の解説.docx Page 7 3.2 画面構成 3.3 HTML5(menu.html)
PowerPoint Presentation
HTML5 Level.1 Markup Professional HTML5 Level.2 Application Development Professional http://www.html5exam.jp/ @html5cert https://www.facebook.com/html5exam
! "#$%&'()*+,-. STUV WXYZ[\]^_`abcdefghijklmno pqrstuvwxyz{ }~ ƒ ˆ Š Œ Ž š œ žÿ ª«±²³ µ ¹º»¼½¾ ÀÁÂÃÄ ÅÆÇÈÉÊËÌÍÎÏÐ
![! #$%&'()*+,-. STUV WXYZ[\]^_`abcdefghijklmno pqrstuvwxyz{ }~ ƒ ˆ Š Œ Ž š œ žÿ ª«±²³ µ ¹º»¼½¾ ÀÁÂÃÄ ÅÆÇÈÉÊËÌÍÎÏÐ](/thumbs/91/105561973.jpg "! #$%&'()*+,-. STUV WXYZ[\]^_`abcdefghijklmno pqrstuvwxyz{ }~ ƒ ˆ Š Œ Ž š œ žÿ ª«±²³ µ ¹º»¼½¾ ÀÁÂÃÄ ÅÆÇÈÉÊËÌÍÎÏÐ")
6 1 6 (1) (2) HTML (3) PDF Copy&Paste 1 Web 1 Web Web 1 Web HTML ! "#$%&'()*+,-. /0123456789:;?@ABCDEFGHIJKLMNOPQR STUV WXYZ[\]^_`abcdefghijklmno pqrstuvwxyz{ }~ ƒ ˆ Š Œ Ž š œ žÿ ª«±²³ µ ¹º»¼½¾ ÀÁÂÃÄ
スタイルシートでデザインを整えよう
スタイルシートでデザイン (2) CSS (Cascading Style Sheets) ここまで HTML は文章の意味的な役割を記述するもので 表示はブラウザ次第であることを強調してきました あるブラウザでの表示方法を前提に HTML で見た目を制御しようとすると 他の環境では意味が通じにくい 相互運用性の低い情報となってしまいます Web の表現を作者が指定するには HTML ではなく スタイルシートという別の機能をもちいます
Taro-CSS.jtd
CSSCascading Style Sheet 1. CSS CSSCascading Style Sheet HTML XHTML, XML HTML CSS HTML/XHTML/XML CSS HTMLXHTML CSS XML CSS 2. CSS HTML/XHTML CSS HTML CSS XML XSL-FO XSLT+CSS CSS Web Web HTML 3. HTML HTML
SNS 14,917,000,000 10,780,000 SNS 8,850,000,000 14,900,000 MobileSpace 8,000,000,000 3,000,000 SNS 6,000,000,000 6,000,000 3,863,000,000 22,100,000 3,790,000,000 8,970,000 i i 3,500,000,000 6,000,000 2,001,000,000-1,900,000,000
websample 1 2 websample index.html
Web HTML Web 1 2 3 4 5 6 7 1 2 3 4 5 6 websample 1 2 websample index.html -1-1 HTML index.html html head /head body /body /html body table border="1" /table /body table border="" /table table /table table
Web 設計入門
Web デザイン実践 #4-1 CSS(2) D.Mitsuhashi 1 HTML5 コンテンツモデル D.Mitsuhashi 2 コンテンツモデル HTML5 の要素は意味の上で 7 つのカテゴリに分けられる コンテンツモデルから 要素の中に何を含んでよいかが決定される 参考 W3C: HTML5 content models http://www.w3.org/tr/html5/dom.html#content-models
07_経営論集2010 小松先生.indd
19 1 2009 105 123 Web Web Web Web World Wide Web WWW OS 1990 WWW Web HTML CSS JavaScript Web 1 WWW 2 Web Web 3 Web 4 HTML5 5 Web Web 3 1970 WWW HTML Web WWW WWW WWW WWW WWW 105 Web WWW 2 Web 1 1 NTT NTT
ボタンのトランジション 1 トランジションを利用して ボタンを作ってみましょう ボタンを工夫することでひときわ光る web ページにすることができます もう Illustrator や Photoshop でボタンの画像を作る必要はありません JavaScript でスクリプトを書く必
1252-1 ボタンのトランジション 1 トランジションを利用して ボタンを作ってみましょう ボタンを工夫することでひときわ光る web ページにすることができます もう Illustrator や Photoshop でボタンの画像を作る必要はありません JavaScript でスクリプトを書く必要もありません すべて CSS3 の機能だけで作成されています サンプル CSS1 形と色が変化するリンクボタン
Cascade Style Sheet
SmartDoc Cascade Style Sheet http://k-sek01.t-komazawa.ac.jp/ (CSS) CSS HTML 1. HTML HTML HTML 2. HTML 3. HTML CSS. class :link :visited :visited :hover :active 1. { : ; } 2. ":" 3. h1 { font-size: 24pt;
untitled
FONT FACE=" " /FONT hp11.html FONT FACE=" " /FONT FONT FACE=" " HTML HP10.html HTML HTML HTML html head title /title font face=" " size="5" /fontbr font face=" " size="5" /fontbr font size="5" /fontbr
HTML HTML HTML 4.1 4.2 4.3 4.4 14 15 16 17
1 11 13 2 11 27 3 12 11 HTML HTML HTML 4.1 4.2 4.3 4.4 14 15 16 17 WWW(World Wide Web) HTML(HyperText Markup Language) HTML HTML HTML HTML - 1 - .1 HTML (V)(C) HTML - 2 - HTML HTML OS Windows 2.1 HTML
EC 千葉のホームページで使用している CSS CSSスタイルシート ( 外部記載 ) /* == 標示枠背景に壁紙設置 ( 全画面共通 )======= */ body { background-ima
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 CSSスタイルシート ( 外部記載 ) /* == 標示枠背景に壁紙設置 ( 全画面共通 )======= */ body background-image: url("../images/wallpaper1.gif"); /* == 記事記入枠 container ( 全画面共通 )=========
css.pdf
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 , , HTML HTML&CSS
r6.dvi
13 1 WYSIWYG/ 2013.5.21 1 WYSIWYG/ (LaTeX HTML+CSS ) 2 Web 3 ( GUI) 4 Web (1) 5 Web (2) 1 1.1 ( ) ( ) 1 1: / ( 1) ( ) ( ) 1 1 ( 2) / (text editor) Emacs Windows Mac OS X Unix ( ) (script) 2: 1.2??? 1 (
padding( パディング ) padding プロパティでボックスの内側の余白を指定します この部分の内側には背景 ( 背景色や背景画像 ) を表示できます border( ボーダー ) border プロパティでボックスの境界線を指定します ボーダーには色 太さ 線の種類を指定できます 画像で
1111 基本のボックス (margin, width, height, border, background) CSS3 アニメーション ( およびトランジション ) の基本はボックスです このボックスに色を付けたり ボックスにテキスト ( 文字 ) や画像を入れて ボックスを移動 回転 2D 変形 3D 変形してアニメーションを作ります では先ずボックスを作ってみましょう 基本的なボックスは下の四角形のようなものです
1
6. スタイルシートとは 6.1. デザインはスタイルシートで 1 学期は ホームページを作成するための HTML の基礎と コンテンツのパーツである画像を加工 作成する基本的な技術を学びました 次のステップとして ホームページに多くの色を統一的に付けたり レイアウト配置を細かく設定するための方法を学んでいきます HTML でも色やサイズを指定したりする方法を学びましたが ホームページの保守性などの面から
Ｗｅｂデザイン論
2008 年度松山大学経営学部開講科目 情報コース特殊講義 Web デザイン論 檀裕也 (dan@cc.matsuyama-u.ac.jp) http://www.cc.matsuyama-u.ac.jp/~dan/ 前回の提出物 今回の実習課題を制作し Web サーバにアップロードせよ 宛先 : dan@cc.matsuyama-u.ac.jp 件名 : Web デザイン #17_ 課題 本文 :
untitled
2005 HP -1-2005 8 29 30 HP 1 ( ) 1. Web 2. HTML HTML 1 PDF HTML 1 Web HTML http://www.media.ritsumei.ac.jp/kodais2005 2 2.1 WWW HTML Hyper Text Markup Language) HTML Web HTML Internet Explorer http://www.ritsumei.ac.jp
年刊EDP 2003
1 2 3 HDD HDD HDD HDD ( 4 !!! ( )!! HDD ( )!! ( )!!(ry YU-SHOW!!!!!!!! HxH 5 HDD ( 0123-456-789 ( e 6 PC PC psd 7 8 YO! WebPage http://mode.jp/ PowerTone 9 A4 Canon PIXUS850i 1,440dpi 720dpi A4 10 etc
<h1> 悠々シニアライフ </h1> <h2> 悠々シニアライフのページへようこそ!</h2> 趣味の写真や旅行記などを楽しみながらホームページにまとめています どうぞご覧ください ホームページ作成初心者ですが <br> よろしくお願いします <br> 拙い文章ですが <br> その点もよろしくお
HTML/CSS 入門テキスト 作成 : 武本健一改定 :05.11.13 1 HTML の基本 (1) 基本タグ renshu1.html 悠々シニアライフのトップページ 悠々シニアライフ (2) 見出し renshu2.html 悠々シニアライフのトップページ 悠々シニアライフ 悠々シニアライフのページへようこそ!
overflow プロパティの指定は 親ボックスのスタイルに記述します overflow プロパティは position プロパティ (position: static; 以外 ) の指定がされていなと適用されません ボックスの外にはみ出た部分を表示させたくないときに hidden を使用します サ
1225-6 練習 6 Overflow The Stage(overflow) ピエロの玉乗りがステージの外から入って外へ出て行くトランジションを作ってみましょ う Hover ボタンの上をマウスポインター ( カーソル ) で hover すると ピエロの玉乗りが ステージの外から入って外へ出て行きます 動きの仕組み このトランジションは 次の3つの動きの組み合わせで動きます 1 ピエロとボールの横方向の動き
ホームページ制作 基礎編 (HTML5 CSS3 コーディング )
ホームページ制作 基礎編 (HTML5 CSS3 コーディング ) ホームページ制作 基礎編 ホームページ制作 基礎編 目次 はじめに 5 はじめに... 5 本教材について 5 WEB サイト制作の概要... 5 Web サイト制作の流れ 5 サイト制作に必要なプログラミング言語 6 HTML 7 HTML について... 7 HTML について 7 HTML の記述方法 7 HTML の解説 8
r6.dvi
14 1 WYSIWYG/ 2014.5.27 1 WYSIWYG/ (LaTeX HTML+CSS ) 2 Web 3 ( GUI) 4 Web (1) 5 Web (2) 1 1.1 ( ) ( ) 1 1: / ( 1) ( ) ( ) 1 1 ( 2) / (text editor) Emacs Windows Mac OS X Unix ( ) (script) 2: 1.2??? 1 (
<4D F736F F D A957A A A8FEE95F18F88979D DEC90AC E646F63>
情報処理 C (P.1) 情報処理 C (2011 年度 ) ホームページの作成 http://open.shonan.bunkyo.ac.jp/~ohtan/ テキストエディタ ( メモ帳 TeraPad など ) でHTMLファイルを作成する HTML(Hyper Text Markup Language ) ホームページを記述するための言語のこと テキストエディタの起動 (TeraPad の場合
SVG 6 ( 3) I(SVG) 2017/5/30 HTML (1) 1 2 4 5 6 サンプル CSS1 入力フィールドの輪郭 (outline) のトランジション 入力フィールドをクリックすると変化します InputOutlineTransition の説明 HTML の記述 (InputOutlineTransition.html) id 属性 field の div 要素を作り
1250 アウトラインのトランジション outline は入力フィールドの輪郭を赤くして目立たせるなど ユーザーインターフェースとして使用されることが多い機能です outline はボックスに指定して border と同じようにトランジションさせることもできますが あまり使われることはないかもしれません outline には border と違って 角の半径を指定して丸くする機能はありません 入力フィールドをクリックすると変化します
サンプル CSS OutlineAnimation.html の説明 HTML の記述 (OutlineAnimation.html) id 属性 stage の div 要素を作り その中に div 要素でボックスを記述します id 属性 div1 の div 要素を記述し 中にテキストで Out
1339 アウトラインのアニメーション outline は入力フィールドの輪郭を赤くして目立たせるなど ユーザーインターフェースと して使用されることが多い機能です また outline でボックスの輪郭をアニメーションさ せることもできますが あまり使われることはないかもしれません アニメーションで変化させることができる outline 関係のプロパティ outline-color animation
大メニューをマウスカーソルで hover すると 半透明の小メニューが上から伸びてきます 小メニューを hover すると メニューの背景色とテキストの色が変わります NaviMenuAnime01 の説明 HTML の記述 (NaviMenuAnime01.html) id 属性 menu-box
1337-1 メニューのアニメーション (1) animation プロパティを利用して メニューの中でアニメーションを動かしてみましょう メニューを工夫することでひときわ光る web ページにすることができます もう Flash でアニメーションを作る必要はありません JavaScript でスクリプトを書く必要もありません サンプル CSS1 メニューバーの中を動くアニメーション メニューバーの中に太陽系宇宙を入れてみました
インターネットマガジン2003年11月号―INTERNET magazine No.106
M o v a b l e T y p e text/template & css design : visual design : layout adjustment : http://www.b-architects.com/ http://internet.impress.co.jp/im/200311mt/ 98 +++ internet magazine 2003.11 +++ 1 Part.1
Webクリエイター能力認定試験 上級 問題集（HTML 4.01対応） 採点基準
上級模擬試験 No. 自由問題採点基準 Web クリエイター能力認定試験上級模擬試験 No. 自由問題採点基準 ファイル名が誤っている場合も採点を行い 部分で減点する. スタイルシートの編集 (style.css) () body が正しく設定されている ( 誤り 箇所につき 点減点 最大 点まで減点 ) body{ color:#000000; background:#ffffff url("../images/gaikan.jpg")
■新聞記事
情報処理 C (P.1) 情報処理 C ホームページ作成入門 テキストエディタ ( メモ帳 TeraPad など ) でHTMLファイルを作成する HTML(Hyper Text Markup Language ) ホームページを記述するための言語のこと テキストエディタの起動 (TeraPad の場合 ) [ スタート ]-[ プログラム ]-[ テキストエディタ ]-[TeraPad] をクリック
SGML HTML XML Markup Language Web HTML HTML SGML Standard Generalized Markup Language Markup Language DTD Document Type Definition XML SGML Markup Language HTML XML HTML XML JavaScript JAVA CGI HTML Web
about かみのごうや たいち 大阪府出身 東京都在中 28歳 うお座 O型 ゾウと写真が好き 2xup.org を管理
CSS Taichi Kaminogoya 2007-03-24T13:30:00+09:00 about かみのごうや たいち 大阪府出身 東京都在中 28歳 うお座 O型 ゾウと写真が好き 2xup.org を管理 CSS photo by timlovesbrian. http://www.flickr.com/photos/cmsspork/417022096/ http://creativecommons.org/licenses/by/3.0/
_IMv2.key
飯島基 文 customb2b@me.com $ ssh ladmin@im.example.com $ cd /Library/Server/Web/Data/Sites/Default/ $ git clone https://github.com/msyk/inter-mediator.git
メニューのトランジション 1 (text-overflow) トランジションを利用して 面白い個性的なメニューを作ってみましょう web ページもぐっと引き立つでしょう ここで紹介するメニューも Illustrator や Photoshop でメニューの画像を作る必要はありません J
1253-1 メニューのトランジション 1 (text-overflow) トランジションを利用して 面白い個性的なメニューを作ってみましょう web ページもぐっと引き立つでしょう ここで紹介するメニューも Illustrator や Photoshop でメニューの画像を作る必要はありません JavaScript でスクリプトを書く必要もありません すべて CSS3 の機能だけで作成されています
HTML のタグを使ったホームページ作成 第 1 章 HTML 文書の基本 1. タグの基本 HTML 文書は普通の文章とタグで構成される タグは半角英数字で書く 文字 のように開始タグ (< >) と終了タグ () で囲む オプションをつけることもできる 2. 基本構成 ( 下線のタグは必ず書きます ) タイトル
演習室の PC のハードディスクには演習で作成したデータは保管できません 各 PC の ネットワーク接続 ショートカットからメディア情報センターのサーバーにアクセスしてください 演習名 使用するフォルダ 演習 1 Z: Web データ管理 演習 1 演習 2 Z: Web データ管
Web データ管理 HTML+CSS (5) (2 章 ) 2011/11/2( 水 ) 1/30 演習室の PC のハードディスクには演習で作成したデータは保管できません 各 PC の ネットワーク接続 ショートカットからメディア情報センターのサーバーにアクセスしてください 演習名 使用するフォルダ 演習 1 Z: Web データ管理 20111102 演習 1 演習 2 Z: Web データ管理
27短01研01斉藤.indd
WordPress を用いたホームページ作成 Making a homepage using the WordPress 斎藤敏之 Toshiyuki SAITOH キーワード 1. はじめに WordPress WordPress PC PC WordPress HTML CSS HTML CSS WordPress 2.HTMLとCSSの基礎 HTML CSS World Wide Web Consortium
子ボックスや孫ボックスなどに position: absolute; と指定すると それぞれ親ボックスに対する絶対位置で配置できるので親ボックスの上に複数の子ボックスや孫ボックスを重ねて配置することができます トランジションやアニメーションを作成するときに非常に便利なので覚えておきましょう top
1116 位置の記述方法について (position, top, right, bottom, left) ここまでの説明では ボックスの大きさを変えると その後ろや下にある他のボックスの位置が移動してしまいました それは margin プロパティが隣接するボックスとの間の空白を指定しているからです position プロパティを使用すると ボックスの配置位置を指定して位置を固定させたり 移動できるようにすることができます
CONTENTS 0 /JSP 13 0.1 Web 14 1 HTML Web 21 1.1 Web HTML 22 1.2 HTML 27 1.3 Web 33 1.4 HTML 43 1.5 46 1.6 47 1.7 48 2 Web 51 2.1 Web 52 2.2 Web 54 2.3 Web 59 2.4 65 2.5 68 2.6 75 2.7 76 2.8 77 3 81 3.1
ように記述をします div1 要素 span 要素 2 個 div3 要素 span 要素 4 個 div5 要素 span 要素 1 個 div7 要素 span 要素 2 個 div2 要素 span 要素 1 個 div4 要素 span 要素 2 個 div6 要素 span 要素 2 個
1238-2 円形グラデーションのトランジション ラディアルグラデーションのトランジション W3C 仕様では background-image プロパティは transition プロパティでのトランジションや後で アニメーション編 に出てくる animation プロパティでのアニメーションができないようになっています ラディアルグラデーションの radial-gradient( ) 関数と repeating-radial-gradient(
CSSの基礎
Webページの 見 た 目 を 定 義 する 視 覚 のための 言 語 CSS ファイル 視 覚 表 現 関 連 付 ける HTML ファイル 論 理 構 造 CSSの 基 礎 CSSの 記 述 方 法 基 本 的 な 形 セレクタ{ プロパティ1: 値 ; プロパティ2: 値 ; セレクタの 種 類 タイプセレクタ CSSの 記 述 HTML CSSを 適 用 する 箇 所 CSSを 記 述 する
インターネットマガジン1999年11月号―INTERNET magazine No.58
+CD-ROM A N S W E R function mysearch (num, text) { ocument.forms[num].elements[0].value=text; ocument.forms[num].submit();
JavaScript 演習 2 1
JavaScript 演習 2 1 本日の内容 演習問題 1の解答例 前回の続き document.getelementbyid 関数 演習問題 4 イベント処理 基本的なフォーム テキストボックスの入力値の取得 演習問題 5 演習問題 1 prompt メソッドと document.write メソッドを用いて, ユーザから入力されたテキストと文字の色に応じて, 表示内容を変化させる JavaScript
ch31.dvi
1 1 1.1 1.1.1 ( ) ( 1.1 ): [ ] [ ] CPU[ + ] [ ] CPU( ) ( 1 2 1 1.1: ( 1.1 ): ( ) [ ] ( )[ ] + ( ) (+ ) ( ) ( ) 1.1. 3 1.2: ( ) ( ) ( 1.2) 4 1 1.3: 120m/ (432km/h) 0.5 2m/ 1 ( 1 ) ( ) ( ) ( 1.3) 1.1. 5
背景の線形グラデーションをアニメーションのように見せる方法は 前章の #div4 ボックスと同じ方法です ( 注 )Safari (webkit 系ブラウザ ) と Chrome(Webkit にも対応 ) は テキストの輪郭や色を -webkit-text-stroke-width -webkit
1329-2 Linear Gradation のアニメーション (2) 背景 (background) を線形グラデーション (Linear Gradation) のアニメーションにして みましょう W3C 仕様では background-image プロパティは transition プロパティでのトランジションや animation プロパティでのアニメーションができないようになっています linear-gradient(
388-356697252-2.pdf
専修大学 ネットワーク情報学部 2012年度 特殊演習 (Webプログラミング) 新居雅行 / Masayuki Nii 2 HTML/CSS 2012 4 23 1 2-1 Web 2 2-1 80 SSL Apache WindowsIIS Internet Information Server HTTP HyperText Transfer Protocol HTML HTML 1 1 [ URI]
Color Change
1229 Text の 3D トランジション (rotatex, rotatey) テキストが 3D で変形するトランジションを作ってみましょう Hover ボタンの上をマウスポインター ( カーソル ) で hover すると テキストが 3D で 変化するトランジションが動きます プロパティ transform: rotatex( ) rotatey( ) 要素を 3D 回転するときに指定します
X Working Draft
X 8341-3 2004 Working Draft 2.11 3 24 5 2 1 ... 2 1.... 4 2.... 4 3.... 4 4.... 5 5. JIS X8341-3 5 "... 6 5.1... 6 5.1.a... 6 5.1.b... 9 5.2...11 5.2.a...11 5.2.b... 14 5.2.c... 21 5.2.d... 23 5.2.e...
_勉強会_丸山さつき_v3
CSS 2019/6/21 1 CSS CSS CSS!2 CSS Web!3 CSS HTML CSS CSS!4 CSS!5 !6 Id class id class CSS!7 !8 body 16px p 16px px, rem, em, %!9 !10 body 16px p 16px 1 CSS!11 !12 CSS CSS!13 CSS 4 CSS 1. OOCSS 2. SMACSS
Web 設計入門
情報処理技法 ( マルチメディアと表現 )I 第 12 回 CSS によるレイアウトデザイン (2) D.Mitsuhashi 1 クロスブラウジング D.Mitsuhashi 2 クロスブラウジング ブラウザや OS によって レンダリングには少なからず差異が存在する 同じソースで記述しても 表示が異なる場合がある なるべく 表示の差異を最小化し, 共通の視覚的デザインを提供すべき D.Mitsuhashi
第6回 CSS入門（つづき）
Slide URL https://vu5.sfc.keio.ac.jp/slide/ Web 情報システム構成法第 6 回 CSS 入門 ( 続き ) 萩野達也 (hagino@sfc.keio.ac.jp) 1 CSS の役割 HTML に表現を与える 背景 色, 画像, 画像の繰り返し 文字 色, 種類, 太さ, 傾き, 大きさ 文書 整列 ( 左揃え, 中央揃え, 右揃え, 均等割り付け )
Web プログラミング 1 HTML+CSS (3) (2 章 ) 2013/5/8( 水 ) 演習室の PC のハードディスクには演習で作成したデータは保管できません 各 PC の ネットワーク接続 ショートカットからメディア情報センターのサーバーにアクセスしてください (Z ドライブとして使用で
Web プログラミング 1 HTML+CSS (3) (2 章 ) 2013/5/8( 水 ) 演習室の PC のハードディスクには演習で作成したデータは保管できません 各 PC の ネットワーク接続 ショートカットからメディア情報センターのサーバーにアクセスしてください (Z ドライブとして使用できます ) 演習名 使用するフォルダ 演習 1 Z: Web プログラミング 1 20130508 演習
Sushi Web ページの編集 Card 1 of 10 3 パソコンの画面上で ブラウザとテキストエディタを横に並べます ブラウザ テキストエディタ 4 5 テキストエディタで 自分の自己紹介になるように変更します 変更したらテキストを保存します ( ファイル > 保存 ) 保存したら F5 を
はじめての Web サイト Sushi Web ページの編集 Card 1 of 10 1 これから新しい Web ページを作ります! 今回は本のリストを作りますが HTML を使えば何でも好きな Web ページが作れます! まず http://coderdojo-hiroshima.com/my-first-website-ja.zip から HTML のソースファイルをダウンロードします my-first-website
Web09
情報処理技法 ( マルチメディアと表現 )I 第 9 回 CSS(1) D.Mitsuhashi 1 HTML と CSS D.Mitsuhashi 2 HTML と CSS の役割 HTML 書の構造を すための 語 CSS 書に視覚デザインを与える 語 HTML( 構造化 書 ) が 組みとすると, CSS( スタイルシート ) は外装にあたる D.Mitsuhashi 3 HTML に CSS
演習室の PC のハードディスクには演習で作成したデータは保管できません 各 PC の ネットワーク接続 ショートカットからメディア情報センターのサーバーにアクセスしてください (Z ドライブとして使用できます ) 演習名 使用するフォルダ 演習 1 Z: Web データ管理 演習
Web データ管理 JavaScript (4) (4 章 ) 2012/1/11( 水 ) 1/22 演習室の PC のハードディスクには演習で作成したデータは保管できません 各 PC の ネットワーク接続 ショートカットからメディア情報センターのサーバーにアクセスしてください (Z ドライブとして使用できます ) 演習名 使用するフォルダ 演習 1 Z: Web データ管理 20120111 演習
PowerPoint プレゼンテーション
3 Webデザイナーに求められる知識 優秀な HTML, CSS, 画像編集, JavaScript, jquery, XML, 色 彩理論, LL, データベース, SEO, SMO, EFO, コピーラ イティング, テキストライティング, イラストレー ション, Flash, ディレクション能力, プロジェクトマ ネジメント, Logo作成, Typography, サーバ管理, PHP, Perl,
Border Width と記述します id 属性 div3 の div 要素を記述し 中にテキストで Border Radius と記述します id 属性 div4 の div 要素を記述し 中に span 要素を1つ記述しその中にテキストで Border All<br />(Color,Widt
1338-1 ボーダーのアニメーション (1) border のアニメーションは web ページを作るときにボタンのアニメーションとして使えそ うです アニメーションで変化させることができる border 関係のプロパティ border-color animation で色を滑らかに変化させることができます border-width animation で幅を滑らかに変化させることができます border-radius
2 / 16 HTML=HyperText Markup Language( ハイパーテキストマークアップランゲージ ) ブラウザ (Chrome) での表示 ソースの表示 ( メモ帳 /TeraPad) HTML <========= =========>
1 / 16 第 11 回セミナー / 全 12 (2014/8/28) HP の基本的構造の理解とページ構成の工夫 これだけはマスターしておきたい HTML 厳選タグ迷子を生まないためのリンクの配置 ( 読ませる工夫 ) Web 作成の基本ツール Web ブラウザ Chrome FireFox Opera (Internet Explorer) Chrome Firefox Opera https://www.google.com/intl/ja/chrome/browser/features.html
Web データ管理 HTML+CSS (3) (2 章 ) 2011/10/19( 水 ) 湘南工科大学講義資料 Web データ管理 (2011) 阿倍 1/23
Web データ管理 HTML+CSS (3) (2 章 ) 2011/10/19( 水 ) 1/23 演習室の PC のハードディスクには演習で作成したデータは保管できません 各 PC の ネットワーク接続 ショートカットからメディア情報センターのサーバーにアクセスしてください (Z ドライブとして使用できます ) 演習名 使用するフォルダ 演習 1 Z: Web データ管理 20111019 演習
Oracle HTML DBのテンプレート・カスタマイズ
Oracle HTML DB 2003 10 Oracle HTML DB... 3... 3... 5... 5 1:... 6 2:... 6 3: 2... 7... 8... 8... 8 CSS JavaScript... 10 HTML DB... 11... 11 Oracle HTML DB 2 Oracle Corporation Customizing Templates in
コンピュータ中級B ～Javaプログラミング～ 第3回 コンピュータと情報をやりとりするには?
Copyright (C) Junko Shirogane, Tokyo Woman's Christian University 2011, All rights reserved. 1 コンピュータ 2C ~ マルチメディア ~ 第 3 回 Web ページを作成するには? ( スタイルシート ) 人間科学科コミュニケーション専攻 白銀純子 Copyright (C) Junko Shirogane,
How to Make Web Pages Masafumi Taira, Hiroshi Kawamata, Takashi Kosuge, Kiyoharu Hashimoto and Kazuyuki Nigorikawa Engineering Department High Energy
How to Make Web Pages Masafumi Taira, Hiroshi Kawamata, Takashi Kosuge, Kiyoharu Hashimoto and Kazuyuki Nigorikawa Engineering Department High Energy Accelerator Research Organization 1.... 1 1-1.... 1
1 1 1............................ 1 2............................ 1 3 HTML5 CSS3................... 2 4........................ 2 2 3 1...............
1 1 1............................ 1 2............................ 1 3 HTML5 CSS3................... 2 4........................ 2 2 3 1.............................. 3 2........................... 3 3......................
1 1 1.1............................. 1 1.2....................... 1 2 HTML 2 2.1 web HTML......................... 2 2.1.1 HTML.................... 2
XHTML DOM JavaScript 2 2008 7 1 1 1 1.1............................. 1 1.2....................... 1 2 HTML 2 2.1 web HTML......................... 2 2.1.1 HTML.................... 2 2.1.2 HTML.........................
Microsoft PowerPoint - 04WWWとHTML.pptx
船舶海洋情報学 九州大学工学府海洋システム工学専攻講義資料担当 : 木村 04. WWW と HTML WWW(World Wide Web) インターネットの情報をハイパーテキスト形式で参照できる情報提供システム HTML などのコンテンツを HTTP プロトコルで転送 インターネット クライアント PC WWW の情報を画面に表示するクライアントソフトウエア :WEB ブラウザ Internet
ブロックの 1 文字目のを変更する セレクタ : first-letter { 1 文字目のを指定するフォントや文字色 背景色 枠線などの ブロックの 1 文字目を字下げする text-indent: 字下げ幅段落の1 文字目の字下げ幅を指定する em( 標準 1em) px( ピクセル ) pt(
演習室の PC のハードディスクには演習で作成したデータは保管できません 各 PC の ネットワーク接続 ショートカットからメディア情報センターのサーバーにアクセスしてください (Z ドライブとして使用できます ) Web プログラミング 1 HTML+CSS (4) (2 章 ) 2013/5/15( 水 ) 演習名 使用するフォルダ 演習 1 Z: Webプログラミング1 20130515 演習
1
...1...37 1 HTML4.01 Transitional Frameset DOCTYPE 5.1.a 2 Windows Shift_JIS Linux Unix EUC jp meta 5.1.a 3 5.1.a JIS cm cc kg alt 4 5.4.a 5.4.a 5 alt alt alt alt alt alt="" alt 6 5.4.b 5.4.b 7 8 5.3.a
オリエンテーション
課題 14 ホームページを作る ( 発展 ) top 目次 1. 画像ファイルを縮小して表示する教材 A01,A02... 1 2. 文字の書式を設定する ( フォント, サイズ, 行間 ) 教材 A03... 3 3. 文章表示の横幅を指定する, テキストを右寄せにする教材 A04... 5 4. 見出しに背景色を付けて白抜きで表示する教材 A05... 7 5. ページの背景色を設定する教材 A06...
ホームページの作成
HTML5,CSS 資料 HTML5 HTML の文法 HTML(Hyper Text Markup Language) は, 文章の部分を Tag( タグ ) と呼ばれる命令で挟んでいく タグは ... 開始終了のように開始タグと終了タグ一対のペアになっている. タグは, 挟まれた部分がどのような情報であるかを示している 属性としてさらに細かい設定を開始タグの中に書き込むことができる
3 CSS について Cascading Style Sheets(CSS カスケーディング スタイル シート カスケード スタイル シート) とは HTML や XML の要素をどのように修飾 ( 表示 ) するかを指示する W3C による仕様の一つ 文書の構造と体裁を分離させるという理念を実現す
HTML/CSS 1 HTML について Hyper Text Markup Language( ハイパーテキストマークアップランゲージ ) 略記 略称:HTML( エイチティーエムエル ) とは ウェブ上のドキュメントを記述するためのマークアップ言語である Web 作成基本プログラミング用語であり C 言語のようなプログラミングとは違い 文章の中に記述することでさまざまな機能を記述設定することができる
JavaScript の使い方
JavaScript Release10.5 JavaScript NXJ JavaScript JavaScript JavaScript 2 JavaScript JavaScript JavaScript NXJ JavaScript 1: JavaScript 2: JavaScript 3: JavaScript 4: 1 1: JavaScript JavaScript NXJ Static
m_sotsuron
iphone Web 0848066 1. 1 1 1 2 iphone 2 3 2 4 3 2. 3 1 3 2 iphone Web 6 3 HTML 10 4 CSS 12 5 iphone 14 6 15 7 16 8 ipad 18 3. 22 iphone Web Web 2 iphone Web iphone iphone Web iphone Web PC 1 2000 iphone
1 1 1........................... 1 2.............................. 1 3........................ 2 2 3 1...................... 3 2.....................
CSS 0348085 1 1 1........................... 1 2.............................. 1 3........................ 2 2 3 1...................... 3 2..................... 3 3........................... 5 3 CSS
動させることはできません 少し工夫が必要になります 元の画像を移動すれば反射画像 も一緒についてきますが 反射画像だけが移動するように見せたいので 元の画像の上に は黒色のボックスを覆い被せます ReflectAnime1 の説明 HTML の記述 (ReflectAnime1.html) id 属
1333 Reflection の効果 -webkit-box-reflect プロパティをアニメーションに利用してみましょう Reflection は Safari (webkit 系ブラウザ ) と Chrome(webkit にも対応 ) のみで動かすことができます 2013 年 12 月現在 W3C で Reflection の仕様が Working Draft( 草案 ) となっています
目次 はじめに... 1 CSS?... 3 CSS の例... 4 CSS の基本の形... 5 HTML で CSS を読み込む... 7 <link> タグを置く ( ファイルを読み込む )... 9 <style> タグを置く ( スタイルを直接埋め込む ) セレクタ... 11
CSS について ( 概要 ) 作成日 : 2016/01/21 作成者 : 西村 はじめに この資料は HTML がある程度 ( 少しでも ) わかる人に CSS の仕組みを少しだけわかってもらえるように書いています この資料では 下記を説明します CSS とは何か CSS の基本の形 CSS の読み込み方 セレクタとは何か / 最低限覚えるとよいセレクタ プロパティと値 / 最低限覚えるとよいスタイル
2
storetool 2 3 4 1 storetool 1-1 6 1-2 1 7 8 1-3 1 9 1-4 10 1 11 1-5 12 1-6 1 13 14 2 storetool 2-1 16 2 17 2-2 1. 2. 3. 4. 5. 18 6. 7. 2 19 20 3 storetool 3-1-1 22 1. 3 2. 1. 2. 23 1. 2. 24 3 25 1. 2.
Network Computing の基礎
CSS Cascading Style Sheets Cascading = Style Sheets = CSS WEB HTML CSS 2 HTML h1 p CSS 3 CSS CSS HTML sample1.html CSS HTML sample2.html CSS CSS sample2.css CSS
ブログ制作教材
ブログ作成 2 3 id integer unique primary key not null auto_increment koshinbi integer title varchar(100) honbun text category_id interger ( 以下前と同じ ) id kiji_id koshinbi name com_honbun
インターネットマガジン1996年12月号―INTERNET magazine No.23
26 INTERNET magazine 1996/12 HTML S jhttp://www.microsoft.com/truetype/css/gall ery/spec2.htm S jhttp://www.hidaho.com/c/ S jhttp://www.microsoft.com/ie/most/howto/lay out/winston/wclub.htm
( )
2016 13H018 1 1 2 2 3 4 3.1............................................... 4 3.2 ( ).................................... 5 4 6 4.1........................................ 6 4.2..................... 6 5
* この 確認問題解答 / 演習問題解答 は, 書籍 HTML 演習 HTML5 版 ( 発行 : 株式会社 SCC) の ダウンロード用 [ 別冊 ] として, 当該書籍の読者に限定して提供しています - 2 -
![* この 確認問題解答 / 演習問題解答 は, 書籍 HTML 演習 HTML5 版 ( 発行 : 株式会社 SCC) の ダウンロード用 [ 別冊 ] として, 当該書籍の読者に限定して提供しています - 2 -](/thumbs/86/93726242.jpg "* この 確認問題解答 / 演習問題解答 は, 書籍 HTML 演習 HTML5 版 ( 発行 : 株式会社 SCC) の ダウンロード用 [ 別冊 ] として, 当該書籍の読者に限定して提供しています - 2 -")
HTML 演習 HTML5 版 別冊 確認問題解答 演習問題解答 1-1A CShogo Nakajima 2017 * この 確認問題解答 / 演習問題解答 は, 書籍 HTML 演習 HTML5 版 ( 発行 : 株式会社 SCC) の ダウンロード用 [ 別冊 ] として, 当該書籍の読者に限定して提供しています - 2 - 確認問題解答 / 演習問題解答 第 1 章 確認問題 1.1 (1)