2013-07-01から1ヶ月間の記事一覧

H10 C10

<html> <head> <meta charset="UTF-8"> <title>H10 C10</title> <link rel="stylesheet" href="css/style_c10.css"> </head> <body> <div id="container"> <div id="header"> <h1 id="name">Typograpy.<span class="num">71</span></h1> <div id="nav"> <ul> <li id="home"><a href="#">HOME</a></li> </ul></div></div></div></body></html>

最古のRollover

H09 C09

<html lang="ja"> <head> <meta charset="UTF-8"> <title>無題ドキュメント</title> <link rel="stylesheet" href="css/style.css"> </head> <body> <div id="container"> <div id="header"> <h1>Computer Technology Groups</h1> <div id="nav"> <ul> <li id="eco"><a href="#"><span>エコロジー</span></a></li> </ul></div></div></div></body></html>

0723 授業の復習 sprite縦移動ナビ

<html lang="ja"> <head> <title></title> <link rel="stylesheet" href="css/style.css"> </head> <body> <div id="nav"> <ul> <li id="home"><a href="#"><span>ホーム</span></a></li> <li id="food"><a href="#"><span>カフェフード</span></a></li> <li id="drink"><a href="#"><span>カフェドリンク</span></a></li> …</ul></div></body></html>

0723 授業の復習 sprite横移動ナビ

<html lang="ja"> <head> <title></title> <link rel="stylesheet" href="css/style.css"> </head> <body> <div id="nav"> <ul> <li id="home"><a href="#"><span>ホーム</span></a></li> <li id="food"><a href="#"><span>カフェフード</span></a></li> <li id="drink"><a href="#"><span>カフェドリンク</span></a></li> …</ul></div></body></html>

H07 C07 下と同じものを作ろう

<html lang="ja"> <head> <meta charset="UTF-8"> <title>薬玉文様(くすだまもんよう)</title> <link rel="stylesheet" href="css/style.css"> </head> <body> <div id="container"> <div id="content"> <h1>薬玉文様(くすだまもんよう)</h1> <p>薬玉とは、薬・香料を玉にして錦の袋に入れ、造花や蓬・菖蒲などを飾り、五色の糸を長く垂らしたもの。古代中国で端午の節句に薬玉を柱などに掛け、邪気払いや長寿を祈願す…</p></div></div></body></html>

H06 C06 下と同じの作ろー

<html lang="ja"> <head> <meta charset="UTF-8"> <title>フンデルトヴァッサー・ハウス</title> <link rel="stylesheet" href="css/style.css"> </head> <body> <div id="container"> <div id="header"> <h1>フンデルトヴァッサー・ハウス</h1> <h2>ウィーンの市営住宅はこんなに元気だ!</h2> </div> <div id="wrapper"> </div></div></body></html>

H05 C05 下のものを作りましょ

<html lang="ja"> <head> <meta charset="UTF-8"> <title>プロヴァンス</title> <link rel="stylesheet" href="css/style.css"> </head> <body> <div id="container"> <div id="header"> <h1>provence</h1> <p><img src="img/header.gif" width="700px" height="120px"></p> </div> </div></body></html>

H03 C03 下のサイトを作れ

<html lang="ja"> <head> <meta charset="UTF-8"> <title>ガラスの靴の持ち主を捜しています!</title> <link rel="stylesheet" href="css/style.css"> </head> <body> <div id="container"> <h1><img src="img/main.gif" width="600px" height="445px"></h1> <div id="header"> <h2></h2></div></div></body></html>

Q26 下と同じのを作ろう!

<html lang="ja"> <head> <meta charset="UTF-8"> <title>Q26</title> <link rel="stylesheet" href="css/style.css"> </head> <body> <div id="container"> <div id="header"> <h1>Homepage Title</h1> <p>サブタイトルサブタイトルサブタイトル</p> </div> <div id="wrapper"> <div id="content"> <h2>コン…</h2></div></div></div></body></html>

Q25 下のような配置

<html lang="ja"> <head> <meta charset="UTF-8"> <title>Q25</title> <link rel="stylesheet" href="css/style.css"> </head> <body> <div id="wrapper"> <div id="blocka">ブロックA</div> <div id="blockb">ブロックB</div> <div id="blockc">ブロックC</div> <div id="blockd">ブロックD</div> </div> </body></html>

Q21 下のようになるように

<html lang="ja"> <head> <meta charset="UTF-8"> <title>Q21</title> <link rel="stylesheet" href="css/style.css"> </head> <body> <div id="nav"> <ul> <li id="news"><a href="#">新着情報</a></li> <li id="inform"><a href="#">お知らせ</a></li> <li id="product"><a href="#">製品情報</a></li> </ul></div></body></html>

Q19 下のような配置を作る

<html lang="ja"> <head> <meta charset="UTF-8"> <title>Q19</title> <link rel="stylesheet" href="css/style.css"> </head> <body> <div id="wrapper"> <div class="cap"> <p><img src="img/01.jpg" width="148px" height="148px"></p> <p>画像のキャプチャ1</p> </div> <div class="cap"> <p></p></div></div></body></html>

Q24 下のような配置

<html lang="ja"> <head> <meta charset="UTF-8"> <title>Q23</title> <link rel="stylesheet" href="css/style.css"> </head> <body> <div id="wrapper"> <div id="kumo1"><img src="img/kumo.jpg" width="199px" height="158px"> </div> <p id="p1">段落1のテキストです。段落1のテキストです。段落1のテキストです。</p> <p id="p2">段落…</p></div></body></html>

Q23

<html lang="ja"> <head> <meta charset="UTF-8"> <title>Q21</title> <link rel="stylesheet" href="css/style.css"> </head> <body> <div id="nav"> <ul> <li id="news"><a href="#">新着情報</a></li> <li id="inform"><a href="#">ニュース/お知らせ</a></li> <li id="product"><a href="#">製品情報</a></li> </ul></div></body></html>

Q22

<html lang="ja"> <head> <meta charset="UTF-8"> <title>Q22</title> <link rel="stylesheet" href="css/style.css"> </head> <body> <div id="nav"> <ul> <li id="news"><a href="#">新着情報</a></li> <li id="inform"><a href="#">ニュース/お知らせ</a></li> <li id="product"><a href="#">製品情報</a></li> </ul></div></body></html>

Q18

<html lang="ja"> <head> <meta charset="UTF-8"> <title>Q18</title> <link rel="stylesheet" href="styleQ18.css"> </head> <body> <div id="container"> <p><a href="#">f:id:web-mind:20130714223625j:image</a></p> </div> </body> </html> @charset "UTF-8"; /*リセット*/ body, div { margin: 0; paddin…

Q17 下のような配置にしなさい

<html lang="ja"> <head> <meta charset="UTF-8"> <title>Q17</title> <link rel="stylesheet" href="styleQ17.css"> </head> <body> <div id="container"> <h1><img src="img/03.jpg"></h1> <p>テキストの位置を指定します。</p> </div> </body> </html> @charset "UTF-8"; /*リセット*/ body, div, img { margin: 0; paddin…

Q16 これを作って!

<html lang="ja"> <head> <meta charset="UTF-8"> <title>Q16</title> <link rel="stylesheet" href="styleQ16.css"> </head> <body> <div id="container"> <h1>Background Design</h1> <p>Sharing your digital photos with family and friends is such an easy thing to do these days.</p> </div> </body></html>

Q12 ボタンのように機能するリンクを設定

<html lang="ja"> <head> <meta charset="UTF-8"> <title>ボタンのように機能するリンクを設定しなさい</title> <style> body,ul,li { margin: 0; padding: 0; } a { text-decoration: none; } body { font-family: "Hiragino Kaku Gothic ProN", Meiryo, sans-serif; padding: 50px 0 0 100px; } ul { width: 220px; list-styl</meta></head></html>…

Q11 リンクにマウスが乗った時に文字がオレンジ色になるよう指定

<html lang="ja"> <head> <meta charset="UTF-8"> <title>リンクにマウスが乗った時に文字がオレンジ色になるよう指定</title> <style> body { font-family: "Hiragino Kaku Gothic ProN", Meiryo, sans-serif; } h1 { font-size: 16px; } p a { border-bottom: 1px dotted skyblue; color: skyblue; } p a:hover { color: oran</meta></head></html>…

Q14 様々な文字の設定

<html lang="ja"> <head> <meta charset="UTF-8"> <title>様々な文字の設定</title> <style> p { padding: 0; margin: 0; } body { font-family: "Hiragino Kaku Gothic ProN", Meiryo, sans-serif; letter-spacing: -0.1em; font-weight: 500; } p#a { font-size: 100%; } p#b { font-size: 1em; } p#c { font-siz…</meta></head></html>

Q13 様々な枠線の設定

<html lang="ja"> <head> <meta charset="UTF-8"> <title>様々な枠線の設定</title> <style> body { font-family: "Hiragino Kaku Gothic ProN", Meiryo, sans-serif; width: 400px; font-size: 18px; } p#a { border: 1px solid; padding:5px } p#b { border: 3px solid; padding: 5px; } p#c { border: 1px solid…</meta></head></html>

Q10 bodyの背景色が「#3366CC」のとき、h1が白色で表示されるよう指定

h1の背景を白色にする場合 h1 { background-color: #FFFFFF; } h1の文字だけを白色にする場合 h1 { color: #FFFFFF; }

Q09 bodyを、プロパティ(文字サイズ:16px、文字色:#333333、書体:ゴシック体、行送り:1.5)で指定

body { font-size: 16px; color: #333333; font-family: "Hiragino Kaku Gothic ProN", Meiryo, sans-serif; line-height: 1.5; }

Q08 使用している要素が、h1、h2、h3、p、ul、li、img の場合のリセットCSSを記述

h1、h2、h3、p、ul、li、img { margin: 0; padding: 0; }

Q07 HTMLドキュメントと同一階層にある「cssフォルダー」内にある、「style.css」を読み込む記述

<link rel="stylesheet" href="css/style.css"></link>

Q06 コピーライトの表示

Copyright © CatCafé. All Rights Reserved. <p><small>Copyright &#169; CatCaf&#233;. All Rights Reserved.</small></p>

Q05 あたるを例に、にゃんこ別に表にまとめる

<table border="1"> <tr> <th>名前</th><th>オス・メス</th><th>特徴</th><th>性格</th><th>写真</th> </tr> <tr> <td>あたる</td><td>オス</td><td>大きな目と耳<br>まがったしっぽ</td><td>マイペース</td><td><image src="img/ataru.jpg"</td> </tr> </table>

Q04 Q03の内容にもっと見るボタンを追加!!

<html lang="ja"> <head> <meta charset="UTF-8"> <title>猫と遊べる池袋のカフェ CatCafe</title> </head> <body> <h1>CatCafeのにゃんこ紹介</h1> <h2>あたる(白キジトラ・オス)</h2> <p>目と耳が大きくてすばらしくイケメン。鳴き声もなかなかかわゆい。性格はいたってマイペース。 段ボール箱のかどや柱で爪とぎをするのが大好き。 </p> <p><image src="img/ataru.jpg"></p> <p>特徴<br> 大きな目と</p></body></html>…