Weitere ähnliche Inhalte Ähnlich wie webを飾る技術 (20) Kürzlich hochgeladen (10) webを飾る技術1. Webを飾る技術 第 6 回 変 ゼミ 2008/07/23 id:inajob http://d.hatena.ne.jp/inajob/ 5. HTMLを書いてみる <html> <head> <title>TestPage</title> </head> <body> <h1>HTML を書いてみる </h1> <p>p はパラグラフの P です。 </p> <hr /> <!-- 水平線 これはコメント --> </body> </html> <HTML> 6. もっとHTML <a href=” http://www.google.co.jp ”>go to Google</a> <table> <tr> <td>a</td> <td>b</td> <td>c</td> </tr> <tr> <td>foo</td> <td>bar</td> <td>hoge</td> </tr> </table> <ul> <li>apple</li> <li>peach</li> <li>orange</li> </ul> 8. CSSを書いてみる <html> <head> <title>TestPage</title> <style> h1{ color:red; } p{ border:solid; background-color:#ffffdd; } </style> </head> <body> <h1>HTML を書いてみる </h1> <p>p はパラグラフの P です。 </p> <hr /> <!-- 水平線 これはコメント --> </body> </html> {CSS} 9. {CSS} CSSを書いてみる2 <html> <head> <title>TestPage</title> <style> h1{ text-align:center; border:solid #ddaaaa; border-width:1px 1em 1px 1em; } p{ font-size:1.5em; padding:1em; background-color:#ddddff; } </style> </head> <body> <h1>HTML を書いてみる </h1> <p>p はパラグラフの P です。 </p> <hr> <!-- 水平線 これはコメント --> </body> </html> 同じページでも 見た目が全然違う 11. {CSS} CSSを書いてみる3 h1{ text-align:center; border:solid #ddaaaa; border-width:1px 1em 1px 1em; } div. main p{ color:red; } div# footer { text-align:right; font-size:x-small; } ============================== <h1>HTML を書いてみる </h1> <div class=” main ”> <p> ここに本文が書いてあったりする </p> </div> <div id=” footer ”> <p>powered by CSS</p> </div> 15. <XML> XSLTを書いてみる1 <DataSet> <Software> <title>eclipse</title> <language>java</language> </Software> <Software> <title>linux</title> <language>C</language> </Software> <Software> <title>apt</title> <language>perl</language> </Software> </DataSet> <?xml version="1.0" encoding="UTF-8"?> <xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform" > <xsl:output method="html" doctype-public="-//W3C//DTD HTML 4.01 Transitional//EN" doctype-system="http://www.w3.org/TR/html4/loose.dtd" /> <xsl:template match="/DataSet"> <html> <head> <title>test page</title> </head> <body> <xsl:for-each select="./Software"> <h1> <xsl:value-of select="title" /> </h1> <p> <xsl:value-of select="language" /> </p> </xsl:for-each> </body> </html> </xsl:template> </xsl:stylesheet> 16. XSLTを書いてみる2 <DataSet> <Software> <title>eclipse</title> <language>java</language> </Software> <Software> <title>linux</title> <language>C</language> </Software> <Software> <title>apt</title> <language>perl</language> </Software> </DataSet> <?xml version="1.0" encoding="UTF-8"?> <xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform" > <xsl:output method="text" encoding="Shift_JIS" /> <xsl:template match="/DataSet"> Sample Input <xsl:for-each select="./Software"> <xsl:value-of select="title" />,<xsl:value-of select="language" /><xsl:text> </xsl:text> </xsl:for-each> </xsl:template> </xsl:stylesheet> 18. JavaScriptを書いてみる <html> <head> <title>TestPage</title> </head> <body> <script> for(i=0;i<10;i++){ document.write(“<h1>”+i+”:Hello World</h1>”); } </script> </body> </html> for 文とか使えます document.write( ほげほげ ) は document クラスの write メソッド的なものを文字列を引数にして呼び出している 22. イベントハンドラ2 <html> <head> <title>TestPage</title> <script> function over(obj){ obj.style.backgroundColor=0xFF0000; } function out(obj){ obj.style.backgroundColor=0xFFFFFF; } </script> </head> <body> Point <span onmouseover="over(this)" onmouseout="out(this)" >Here</span>! </body> </html> マウスが乗っかると色が変わる ⇒ CSS にアクセスできる 27. スコープ var x =”global” function f(){ var x =”local”; alert( x ); // local } alert( x ); //global f(); alert( x ); //global var 重要 var x =”global” function f(){ x =”local”; alert( x ); // local } alert( x ); //global f(); alert( x ); //local グローバル function f