2013-07-01から1ヶ月間の記事一覧
Jimdoでブログ作成 素敵なWebデザインの政治サイト100 http://rika1014.jimdo.com/
Jimdoでブログ作成 素敵なWebデザイン100 ｜ Webの中は日曜日 http://rika1014.jimdo.com/
<html lang="ja"> <head> <meta charset="UTF-8"> <title>池袋の猫カフェ｜CatCafe</title> <link rel-"stylesheet" href="style.css"> </head> <body> <h1>CatCafeのにゃんこ紹介</h1> <ul> <li>あたる（白キジトラ・オス）</li> </ul> <p>目と耳が大きくてすばらしくイケメン。鳴き声もなかなかかわゆい。性格はいたってマイペース。 段ボール箱のかどや柱で爪とぎをするのが大好き。</p> </body></html>
Q8 body,h1,h2,h3,p,ul,li,img { margin: 0; padding: 0; }Q9 body { font-size: 16px; color: #333333; font-family: "Hiragino Kaku Gothic ProN", Meiryo, sans-serif; line-height: 1.5; }Q10 body { font-size: 16px; color: #333333; font-family: "Hi…
Q12 <html lang="ja"> <head> <meta charset="UTF-8"> <title>復習（2）文字と背景Q12</title> <style> body,ul,li,a { margin: 0; padding: 0; font-family: "Hiragino Kaku Gothic ProN", Meiryo, sans-serif; } #nav { font-size: 18px; font-weight: bold; margin:50px 0 0 50px; } #nav ul { list-style-type: …</meta></head></html>
HTML <html lang="ja"> <head> <meta charset="UTF-8"> <title>復習（2）文字と背景Q13</title> <link rel="stylesheet" href="style.css" > </head> <body> <p class="sample1">テキストの囲みを表現したい[標準]</p> <p class="sample2">テキストの囲みを表現したい[線の太さ]</p> <p class="sample3">テキストの囲みを表現したい[線のカラー]</p> </body></html>
HTML <html lang="ja"> <head> <meta charset="UTF-8"> <title>復習（2）文字と背景Q14</title> <a link href="style.css"> </head> <body> <p class="sample1">アクセシビリティに配慮した文字を指定したい[100%]</p> <p class="sample2">アクセシビリティに配慮した文字を指定したい[1em]</p> <p class="sample3">アクセシビリティに配慮した文字を指定したい[16px]</p> </body></html>
HTML <html lang="ja"> <head> <meta charset="UTF-8"> <title>復習（2）文字と背景Q15</title> <a link href="style.css"> </head> <body> <div id="sample1"> <p>複数行の文章がひとつのかたまりとして表示されている場合、行と行の間隔を「行間｝と見なします。行間が狭いとたくさんの情報量を詰め込むとができますが、読みづらくなる場合があります。逆に行間を広くすると余白が</p></div></body></html>…
<html lang="ja"> <head> <meta charset="UTF-8"> <title>復習（3）画像と背景Q16</title> <style> body,h1,p,img { margin: 0; padding: 0; } body { font-family: "Hiragino Kaku Gothic ProN", Meiryo, sans-serif; background-color: #696969; background-image: url(img/01.gif); background-repeat:repeat-y; …</meta></head></html>
<html lang="ja"> <head> <meta charset="UTF-8"> <title>復習（3）画像と背景Q17</title> <style> body,p { margin: 0; padding: 0; } body { background-image:URL(img/sp01.jpg); background-repeat:no-repeat; bachground-position:50px 100px; } p { margin-left:450px; } </style> </head> <body> <p>テキストの位置を…</p></body></html>
HTML <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> <li id="company"><a href="#">会社案内</a></li> </ul> <|| CSS >|| ul{ width: 180px; border-top: 1px dotted #7fffd4; } li{ height: 4…
HTML <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> <li id="company"><a href="#">会社案内</a></li> </ul>CSS ul { width: 200px; } li { list-style-type: none; height: 40px; margin-bott…
<html lang="ja"> <head> <meta charset="UTF-8"> <title>レイアウト</title> <style> body,div { margin: 0; padding: 0; } ul{ width: 100px; } li{ height: 78px; padding: 1px; list-style-type: none; } #new{ background: #FF0000; } #info{ background: #FFA300; } #item{ background: #97C500; } #shop{…</meta></head></html>
<html lang="ja"> <head> <meta charset="UTF-8"> <title>レモン</title> <style> #lemon { width: 122px; height: 100px; margin: 50% auto; } </style> <body> <div id="lemon"> <img src="img/lemon.jpg" width="122" height="100" alt="レモン"> </div> </body> </html>
