練習
<!DOCTYPE HTML> <html lang="ja"> <head> <meta charset="utf-8"> <title>CSS09</title> <style type="text/css"> *{ margin: 0 ; padding: 0 ; list-style-type:none; } body{ } #container{ width:600px; height:800px; border-left:solid 5px #CCCCCC; border-right:solid 5px #CCCCCC; margin-left:400px; } box{ width:480px; height:500px; } h1{ } h2{ margin-left:65px; color:#903; background:#E7E7E7; width:480px; margin-bottom:3px; } h3{ margin-left:50px; width:480px; color:#903; background:#E7E7E7; } p{ width:500px; margin-left:50px; color:#C03; padding:5px; } address{ } </style> </head> <body> <div id="container"> <h1><img src="css08_images/images/main.gif"></h1> <div id="box"> <h2>川崎アゼリア・オープン懸賞 パソコンでご応募する方は</h2> <p>下記の「応募規約」、「個人情報のお取り扱いについて」をお読みいただき、 ご同意いただける方は「はい」をクリックし、応募フォームにお進みください。</p> <h3>【応募規約】</h3> <p> ○パソコンでのご応募は、お一人様一回限り（複数ご応募いただいた場合は最終応募のみ有効）とさせていただきます。 ※但し、郵便ハガキでのご応募は、ハガキ１通を１口として、お一人様何口でもご応募できます。 ○川崎アゼリアで同時期に行われる他のキャンペーンと重複して当選することはできません。</p> <p> ○当選後の権利譲渡、換金はできません。 ○応募の際の必要事項に、不備や虚偽があった場合は、無効になります。 ○ご応募は日本国内在住の方に限らせていただきます。 ○応募受付の確認、抽選結果に関するお問合せには、お受けいたしかねますのでご了承ください。 ○景品の”ガラスの靴”は、11月17日から12月25日まで川崎アゼリア街内（サンライト広場）に展示した靴となりますので、予めご了承ください。また、サイズは23.5ｃｍとなります。</p> <h3>【個人情報のお取扱いについて】</h3> <p>ご応募にあたり、ご記入いただいた個人情報（郵便番号、住所、氏名、電話番号、年齢）は、当社にて適切に管理し、ご当選の場合の景品受け渡し、及び個人を識別できない統計情報として、応募状況の傾向把握に利用します。当社は、上記の目的範囲内で、個人情報の取り扱いを外部の第三者に委託することがあります。この場合、個人情報の漏洩等が無いよう、業務委託契約に基づく適切な管理を行います。</p> <h3>【個人情報のお取扱いについて】</h3> <p><a href="">（川崎アゼリアプライバシーポリシー)</a></p> <h3>上記の内容に同意して応募しますか？</h3> <img src="css08_images/images/b_yes.gif"> <img src="css08_images/images/b_no.gif"> <address> <img src="css08_images/images/footer.gif"> </address> </div> </div> </body> </html>
練習
<!doctype html> <html lang="ja"> <head> <meta charset="utf-8"> <title>練習</title> <style type="text/css"> body{ } #container{ width:800px; height:800px; margin: 0 auto ; } #header{ width:800px; height:200px; } #sidebar{ width:200px; height:400px; float:100px; } #content{ width:600px; height:400px; float:right; position:absolute; top:208px; right:275px; } #footer{ width:800px; height:200px; background-color:#CCC; float:200px; } p{ margin-top:20px; } </style> </head> <body> <div id="container"> <div id="header"> </div> <div id="sidebar"> </div> <div id="content"> </div> <div id="footer"> </div> </body> </html>
練習
<|html|
インテリアショップ a Interior
インテリアショップ「a Interior」での商品入荷情報、イベント、HPの更新など。
インテリアについての「想い」を感じてください。
店内のイメージ写真と会社案内。
家具・雑貨をはじめとした取り扱い商品の一部をご紹介しています。
「a Interior」までの交通機関のご案内です。
スタッフの「ブログ」です。
インテリアや雑貨・家具、その他に関するお問い合せはこちらまで。
練習3
<!doctype html> <html lang="ja"> <head> <meta charset="utf-8"> <title>構造主義の四銃士</title> <link rel="stylesheet" href="css/base.css" type="text/css" media="screen, print"> <style type"text/css"> <!-- @charset "UTF-8"; body { font-size: 0.875em; } .content { margin: 0 0 25px 10px; width: 500px; } h1 { color: #036; font-size: 1.6em; margin: 0 0 10px 0; padding: 5px 35px 10px 16px; background-color: #EAEAEA; border: 1px solid #000; } ul { list-style-image: url(images/mark.gif); } --> </style> </head> <body> <div class="content"> <h1>構造主義の四銃士</h1> <p>言語学に限られていた「構造主義」の理説ををそれぞれの分野で展開し、後の世代に多大な影響を与えたのは次の４人です。</p> <ul> <li>ミシェル・フーコー</li> <li>ロラン・バルト</li> <li>クロード・レヴィ＝ストロース</li> <li>ジャック・ラカン</li> </ul> <p>生まれた順番は、次の通りです。</p> <ol> <li>ジャック・ラカン</li> <li>クロード・レヴィ＝ストロース</li> <li>ロラン・バルト</li> <li>ミシェル・フーコー</li> </ol> </div> <div class="content"> <h1>それぞれの功績</h1> <dl> <dt>ミシェル・フーコー</dt> <dd>構造論的な手法による歴史分析を通して、西欧的人間像の系譜を明らかにした</dd> <dt>ロラン・バルト</dt> <dd>言語＝文化が社会の中で「制度」として人々に及ぼす影響を分析した</dd> <dt>クロード・レヴィ＝ストロース</dt> <dd>構造言語学の考え方を人類学の中に導入して構造主義の方法を確立</dd> <dt>ジャック・ラカン</dt> <dd>「フロイトに還れ」を合言葉に、独自の精神分析学理論を展開</dd> </dl> </div> </body> </body> </html> *1338921198*練習2 <!doctype html> <html lang="ja"> <head> <meta charset="utf-8"> <title>エコロジー＆環境問題</title> <link rel="stylesheet" href="css/base.css" type="text/css" media="screen, print"> <style type"text/css"> <!-- @charset "UTF-8"; * { margin:0; padding:0; } body { font-family: "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", Meiryo, "メイリオ", Osaka, "MS P Gothic", "ＭＳ Ｐゴシック", sans-serif; font-size: 1.0em; text-align: center; } h1 { font-size: large; color: #FFF; margin: 20px 0; padding: 20px 0; background-color: #9ACF9C; } p { font-size: 0.875em; line-height: 1.5; color: #555; text-align: left; margin: 0 0 20px 0; } address { font-size: 0.7em; font-style: normal; color: #55924F; text-align: center; padding-top: 8px; border-top: solid 9px #9ACF9C; } h1, p, address { width: 480px; margin: 0 auto; } --> </style> </head> <body> <h1>エコロジーへの取り組み</h1> <p> エコロジーや環境問題への関心は、年々高くなっています。<br> Computer Technology Groupsでは早くからエコロジーの研究に取り組んできました。自然エネルギーの活用もすすめており、二酸化炭素（CO2）の排出量を減らす努力もしています。<br> 専門家の招致、育成にも努め、来春には環境研究施設を設立する予定です。 </p> <p> また、紙やプラスチック、コンピューター・パーツのリサイクルにも力を入れ、あらゆる面での活動をひろげています。<br> リサイクル商品のラインナップも豊富で、オンラインのショッピングコーナーではもちろんのこと、各地域のリサイクルセンターでもお買い求めいただけます。 </p> <address>Copyright (C) Computer Technology Groups. All rights reserved.</address> </body> </html> *1338921121*練習１ <!doctype html> <html lang="ja"> <head> <meta charset="utf-8"> <title>正しく構造化されたHTMLの例（CSSが適用されている場合）</title> <link rel="stylesheet" href="css/base.css" type="text/css" media="screen, print"> <style type="text/css"> <!-- #shopping { border: 1px solid #CCC; font-size: small; padding: 10px; width: 400px; } #shopping h2 { background-color: #06C; padding: 3px; color: #FFF; margin: 0; font-size: small; font-weight: normal; } #shopping ul { list-style-type: none; margin: 0; padding: 0; } #shopping li { border-bottom: 1px dotted #CCC; padding: 3px; margin: 0; } --> </style> </head> <body> <div id="shopping"> <h2>今日買った物</h2> <ul> <li>豚肉</li> <li>じゃがいも</li> <li>たまねぎ</li> <li>にんじん</li> </ul> </div> </body> </html>
【CSS02】練習
<!DOCTYPE html> <html lang="ja"> <head> <meta charset ="utf-8" > <title>【CSS02】</title> <style type="text/css"> <!-- h1{ color:#025AB4; background:#E22D7C; } h2{ color:#C6CE3D; background:#A7D58C; } p{ color:#CB322C; background:#039CFF; } body{ color:#D1A59C; background:#F9F8F4; } --> </style> </head> <body> <h1>About wine</h1> <h2>Chianti Classico Riserva</h2> <p>1435年創業の由緒あるワイン醸造メーカーの名家マッツェイが所有するぶどう園は、いたるところにローマ時代の遺跡が残る小さな集落にあります。<br> 15世紀から現在に至るまで、キャンティワインの造り手たちの先導者であり続けるマッツェイの歴史は、キャンティワインの歴史といっても過言ではありません。キャンティの最高峰と呼ばれるマッツェイは、もっぱら地元の人のために造られる量り売りを飲んでいたぼくにとって、憧れのワイナリーでした。当時はおじいちゃんになったら飲めるかなと思っていましたが、こうして日本で、ましてや自分の店のリストに加えることができるなんて驚きです。</p> </html>
私の好きなデザイン
私の好きなデザインその1 セックスピストルズのアルバムのジャケット [f:id:hansolostar1810:20120531203727j:image] 私の好きなデザインその２ ベルアンドセバスチャンのアルバムジャケット [f:id:hansolostar1810:20120531224056j:image] 私の好きなデザインその３ ヴァセリンズのアルバムジャケット [f:id:hansolostar1810:20120531224057j:image] 私の好きなデザインその４ シドバレットのジャケット [f:id:hansolostar1810:20120531225101j:image]
■
<html> <head> <title> 【CSS02】</title> </head> <body> about wine chianti classico riserva 1435年創業の由緒あるワイン醸造メーカーの名家マッツェイが所有するぶどう園は、いたるところにローマ時代の遺跡が残る小さな集落にあります。 15世紀から現在に至るまで、キャンティワインの造り手たちの先導者であり続けるマッツェイの歴史は、キャンティワインの歴史といっても過言ではありません。キャンティの最高峰と呼ばれるマッツェイは、もっぱら地元の人のために造られる量り売りを飲んでいたぼくにとって、憧れのワイナリーでした。当時はおじいちゃんになったら飲めるかなと思っていましたが、こうして日本で、ましてや自分の店のリストに加えることができるなんて驚きです。 </body> </html>
