授業 演習問題

h15 リキッドレイアウト

<html lang="ja"> <head> <meta charset="utf-8"> <title>リキッドレイアウト</title> <script src="http://ie7-js.googlecode.com/svn/version/2.1(beta4)/IE9.js"></script> </meta></head></html>

かわさきコンテンツアワード テンプレート

<html lang="ja"> <head> <meta charset="utf-8"> <title>かわさきコンテンツアワード2011</title> <link rel="stylesheet" href="css/style.css" media="all"> </head> <body> <div id="container"> <header> <h1><img src="img/header.jpg" width="750" height="308" alt="かわさきコンテンツアワード2011"></h1> </header> <nav> <…</nav></div></body></html>

JavaScriptを使って簡単な画像置換

onMouseOver = " this.src = ' images/◎◎.jpg ' " onMouseOut = " this.src = ' images/◎◎.jpg ' " <html> <head> <meta charset="utf-8"> <title>画像置換</title> <link rel="stylesheet" href="style.css" media="all"> </head> <body> <div> <h1>風景写真</h1> <p>※画像上へマウスを移動すると、その画像をカラーで表示します。</p> <ul> </ul></div></body></html>

H14 C14

<html lang="ja"> <head> <meta charset="utf-8"> <title>H14</title> <link rel="stylesheet" href="style.css"> </head> <body> <div id="container"> <header>header</header> <div id="wrapper"> <section id="left">section01</section> <section id="right">section02</section> <article>article</article></div></div></body></html>

H13 C13

<html lang="ja"> <head> <meta charset="utf-8"> <title>H13</title> <link rel="stylesheet" href="style.css"> </head> <body> <div id="wrapper"> <div id="main"> <h1> <img src="img/logo.gif" width="267" height="129" alt="Patisserie camellia"> </h1> <ul> <li><a href="#" class="info"><span>…</span></a></li></ul></div></div></body></html>

H12 C12

<html lang="ja"> <head> <meta charset="UTF-8"> <title>H12</title> <link rel="stylesheet" href="style.css"> </head> <body> <div id="container"> <div id="header"> <h1><img src="img/logo.gif" width="290" height="38" alt="サンプルスタイルシートカンパニー"></h1> <div id="nav"> <ul> <li id="top"></li></ul></div></div></div></body></html>

H10 C10

<html lang="ja"> <head> <meta charset="utf-8"> <title></title> <link rel="stylesheet" href="style.css"> </head> <body> <div id="container"> <div id="header"> <h1><span >Typograpy.</span>71</h1> </div> <div id="nav"> <ul> <li><a href="#"><span >HOME</span></a></li> <li><a href="#">BLO…</a></li></ul></div></div></body></html>

H09 C09

<html lang="ja"> <head> <meta charset="utf-8"> <title></title> <link rel="stylesheet" href="style.css"> </head> <body> <div id="container"> <div id="header"> <h1>Computer Technology Groups</h1> </div> <div id="nav"> <ul> <li><a href="#">エコロジー</a></li> <li><a href="#">コンピューター</a></li>…</ul></div></div></body></html>

H08 C08

<html lang="ja"> <head> <meta charset="utf-8"> <title>今月の本棚</title> <link rel="stylesheet" href="style.css"> </head> <body> <div id="header"> <h1><span >今月の本棚</span><br>推理小説</h1> <ul> <li><a href="#">ホーム</a></li> <li><a href="#">バックナンバー</a></li> </ul> </div> <div id="wrapper"> </div></body></html>

H11 C11

<html lang="ja"> <head> <title></title> <meta charset="utf-8"> <link rel="stylesheet" href="style.css"> </head> <body> <div id="container"> <div id="header"> <h1>Cafe' de la plante<br> <span >サブタイトルサブタイトルサブタイトル</span></h1> </div> <div id="nav"> <ul> <li><a href="#">トッ…</a></li></ul></div></div></body></html>