授業 復習
<h1>写真をアップロード</h1> <form action="#" method="post" enctype="multipart/form-date"> <p>写真:<input type="file" name="picture"></p> <p><input type="submit" value="送信"></p> </form>
<h1>パスワード入力</h1> <form action="#" method="post"> <p>パスワード:<input type="password" name="password" size="10" maxlength="5" value="パスワード"></p> <p><input type="submit" value="送信"></p> </form>
<h1>チェックボックス</h1> <form action="#" method="post"> <p>スマートフォン: <input type="checkbox" name="mobile" value="1" checked>i Phone <input type="checkbox" name="mobile" value="1">Android <input type="checkbox" name="mobile" value="1">その他</p> <p><input type="submit" value="送信"></p> </form>
<form action="#" method="post"> <h1>ラジオボタン</h1> <p>性別：<input type="radio" name="sex" value="male" checked> 男性<input type="radio" name="sex" value="female">女性</p> <p><input type="submit" value="送信"></p> </form>
<html lang="ja"> <head> <meta charset="UTF-8"> <title></title> </head> <body> <form action="#" method="post"> <h1>お問い合わせフォーム</h1> <p>名前：<input type="text" name="name" size="20" maxlength="10" value="お名前"></p> <p>内容：<textarea name="subject" rows="8" cols="40">お問い合わせ内容</textarea></p> <…</form></body></html>
<html lang="ja"> <head> <meta charset="UTF-8"> <title></title> <link rel="stylesheet" href="style3.css"> </head> <body> <div id="container"> <div id="header"> <p>ここにheaderが入る</p> <div id="nav"> <ul> <li id="home"><a href="#"><span>home</span></a></li> <li id="food"><a href="#"><span>…</span></a></li></ul></div></div></div></body></html>
<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>Homepage Title</h1> <h2>サブタイトルサブタイトルサブタイトル</h2> </div> <div id="wrapper"> <div id="content"> <h3>コンテンツのタイト…</h3></div></div></div></body></html>
<html lang="ja"> <head> <title></title> <meta charset="utf-8"> <link rel="stylesheet" href="style.css"> </head> <body> <div id="container"> <div id="header">block A</div> <div id="wrapper"> <div id="content">block B</div> <div id="sidebar">block C</div> </div></div></body></html>
<html lang="ja"> <head> <title></title> <meta charset="utf-8"> <link rel="stylesheet" href="style.css"> </head> <body> <div id="content"> <p class="p1"> <img src="img/f3.gif" width="200" height="200" alt="pic">段落１のテキストです。段落１のテキストです。段落１のテキストです。</p> <p class="p2"> 段落2のテキストです。段落2のテキストです…</p></div></body></html>
<html lang="ja"> <head> <meta charset="UTF-8"> <title>ボタン</title> <link rel="stylesheet" href="style.css"> </head> <body> <ul> <li id="new"><a href="#">新着情報</a></li> <li id="info"><a href="#">お知らせ</a></li> <li id="item"><a href="#">製品情報</a></li> <li id="shop"><a href="#">店舗案内</a></li></ul></body></html>
@charset"UTF-8"; /* リセット */ body, div, ul, li { margin: 0; padding: 0; } ul { list-style: none; } a { text-decoration: none; } /* 全体 */ body { font-size: 18px; font-family: "Hiragino Kaku Gothic ProN", Meiryo, sans-serif; } #nav{ fon…
@charset"UTF-8"; /* リセット */ body,img{ margin: 0; padding: 0; } /* 全体 */ img{ position: absolute; top:50%; left: 50%; margin: -40px 0 0 -50px; }
<html lang="ja"> <head> <meta charset="UTF-8"> <title>リスト</title> <link rel="stylesheet" href="style.css"> </head> <body> <ul> <li><img src="img/f3.gif" width="200" height="200"><p>画像のキャプション</p></li> <li><img src="img/f3.gif" width="200" height="200"><p>画像のキャプション</p></li> <li></li></ul></body></html>
Q.ボタンのように機能するリンクを設定しなさい A.html <html lang="ja"> <head> <meta charset="UTF-8"> <title>ボタン</title> <link rel="stylesheet" href="style.css"> </head> <body> <ul> <li><a href="#">a-link-skblue</a></li> <li><a href="#">a-visited-turquoise</a></li> <li><a href="#">a-hover-coral</a></li> </ul></body></html>
