2014-10-26
2014-10-26
2カラム演習課題★★★★
プロヴァンス
provence プロヴァンス(la Provence)は、フランス革命以前のフランスに置かれていた州のひとつであり、フランスの南東部に位置する。フランス王国併合前(15世紀末)にあった独立国(プロヴァンス伯爵領)の名前でもある。「プロヴァンス」の名称は、古代ローマ時代の属州(プロウィンキア、Provincia)であったことにちなみ、プロヴァンス語で"Provenco"や"Provenca"などとも呼ぶ。プロヴァンスの名は現在でも特に観光上の観点から親しまれている。 地域の区分としては、ローヌ川の左岸(東岸)とヴァール川の右岸とデュランス川の南側で区切られた一帯であり、現在の地域圏でいえばプロヴァンス=アルプ=コート・ダジュール地域圏の大部分に当たる。 (c)provence
エコロジー
Computer Technology Groups エコロジー コンピューター モバイル ショッピング お問い合わせ エコロジー エコロジーへの取り組み Computer Technology Groupsでは早くからエコロジーの研究に取り組んできました。自然エネルギーの活用もすすめており、二酸化炭素(CO2)の排出量を減らす努力もしています。専門家の招致、育成にも努め、来春には環境研究施設を設立する予定です。 地域の自然環境の育成にも努めています。植樹、植林活動から、公園の整備なども行っています。また、社内裏手には広くて気持ちのいい芝生の丘があり、一般にも開放しています。昼休みなどには、憩いの場として賑わっています。 商品のラインナップ 紙やプラスチック、コンピューター・パーツのリサイクルにも力を入れ、あらゆる面での活動をひろげています。リサイクル商品のラインナップも豊富で、オンラインのショッピングコーナーではもちろんのこと、各地域のリサイクルセンターでもお買い求めいただけます。 (C) Computer Technology Groups. All rights reserved.
基本
- 画像は適宜選択する
Homepage Title サブタイトルサブタイトルサブタイトル コンテンツのタイトル コンテンツの本文を記述します。コンテンツの本文を記述します。コンテンツの本文を記述します。コンテンツの本文を記述します。コンテンツの本文を記述します。コンテンツの本文を記述します。コンテンツの本文を記述します。コンテンツの本文を記述します。コンテンツの本文を記述します。コンテンツの本文を記述します。コンテンツの本文を記述します。コンテンツの本文を記述します。コンテンツの本文を記述します。コンテンツの本文を記述します。コンテンツの本文を記述します。コンテンツの本文を記述します。コンテンツの本文を記述します。コンテンツの本文を記述します。 コンテンツの本文を記述します。コンテンツの本文を記述します。コンテンツの本文を記述します。コンテンツの本文を記述します。コンテンツの本文を記述します。コンテンツの本文を記述します。コンテンツの本文を記述します。コンテンツの本文を記述します。 メニューのリンク1 メニューのリンク2 メニューのリンク3 メニューのリンク4 メニューのリンク5 メニューのリンク6 Copyright © AUTHOR NAME, All Rights Reserved.
常にブラウザの中央(天地左右均等)に表示
薬玉文様(くすだまもんよう) 薬玉とは、薬・香料を玉にして錦の袋に入れ、造花や蓬・菖蒲などを飾り、五色の糸を長く垂らしたもの。古代中国で端午の節句に薬玉を柱などに掛け、邪気払いや長寿を祈願する風習が、平安時代に日本へ伝わり貴族の間で行われるようになった。江戸初期以後は、薬玉が民間の女児の玩具として流行。小袖や帯に用いられるほか、吉祥柄のため七五三用などの祝着の文様としても好まれる。 ©2014 Historical Japan
Patisserie camellia
- positionを使ったレイアウト
- CSSを記述し以下のカンプのようにしなさい(ブラウザの中央揃えに表示する)
Patisserie camellia Information Menu Access Mail プリン ショートケーキ ワッフル コーヒー キャンドル イチゴプリン イチゴスムージー ヨーグルト ライト コーヒー キャンペーン情報
<!DOCTYPE html> <htmllang="ja"> <head> <metacharset="UTF-8"> <title>provence</title> <linkrel="stylesheet"href="css/style.css"> </head> <body> <divid="container"> <divid="header"> <h1>provence</h1> </div> <divid="wrapper"> <divid="content"> <p><imgsrc="img/illust.gif"width="250"height="196">プロヴァンス(la Provence)は、フランス革命以前のフランスに置かれていた州のひとつであり、フランスの南東部に位置する。フランス王国併合前(15世紀末)にあった独立国(プロヴァンス伯爵領)の名前でもある。「プロヴァンス」の名称は、古代ローマ時代の属州(プロウィンキア、Provincia)であったことにちなみ、プロヴァンス語で"Provenco"や"Provenca"などとも呼ぶ。プロヴァンスの名は現在でも特に観光上の観点から親しまれている。<br> 地域の区分としては、ローヌ川の左岸(東岸)とヴァール川の右岸とデュランス川の南側で区切られた一帯であり、現在の地域圏でいえばプロヴァンス=アルプ=コート・ダジュール地域圏の大部分に当たる。</p> </div><!-- /#content --> <divid="nav"> <ul> <liid="home"><ahref="#"><span>HOME</span></a></li> <liid="about"><ahref="#"><span>About Us</span></a></li> <liid="product"><ahref="#"><span>Works</span></a></li> <liid="shop"><ahref="#"><span>Access</span></a></li> <liid="access"><ahref="#"><span>Blog</span></a></li> <liid="contact"><ahref="#"><span>Contact Us</span></a></li> </ul> </div><!-- /#nav --> </div><!-- /#wrapper --> <divid="footer"> <p><small>(c)provence</small></p> </div><!-- /#footer --> </div><!-- /#container --> </body> </html>
@charset "UTF-8"; /* reset */ html, body, div, h1, p, ul, li { margin: 0; padding: 0; line-height: 1.0; } ul { list-style: none; } a { text-decoration: none; } img { border: none; vertical-align: bottom; } a { text-decoration: none; } body{ font-size: 14px; font-family: "Hiragino Kaku Gothic ProN", Meiryo, sans-serif; line-height:1.5; color: #666; } /* layout */ #container { width: 700px; margin: 20px auto; } #header { width: 700px; height: 120px; background-image: url(../img/header.gif); margin-bottom: 20px; } #wrapper { width: 700px; overflow: hidden; margin-bottom: 20px; } #nav { width: 200px; } #content { width: 480px; float: right; } #footer { clear: both; width: 700px; height: 61px; background-image: url(../img/footer.gif); } /* nav */ #nav li { margin-bottom: 3px; } #nav li a { display: block; width: 200px; height: 50px; } #nav li a span { visibility: hidden; } #nav li#home { background: url(../img/nav_bg001.gif) no-repeat; } #nav li#about { background: url(../img/nav_bg002.gif) no-repeat; } #nav li#product { background: url(../img/nav_bg003.gif) no-repeat; } #nav li#shop { background: url(../img/nav_bg004.gif) no-repeat; } #nav li#access { background: url(../img/nav_bg005.gif) no-repeat; } #nav li#contact { background: url(../img/nav_bg006.gif) no-repeat; } /* content */ #header h1 { color: #FFF; font-family: Georgia, "Times New Roman", Times, serif; padding: 36px 0 0 20px; } #content p img{ float: right; margin-left: 16px; } #footer p { color: #FFF; text-align: center; padding-top: 24px; }
<!DOCTYPE html> <htmllang="ja"> <head> <metacharset="UTF-8"> <title>エコロジーと環境問題</title> <linkrel="stylesheet"href="css/style.css"> </head> <body> <divid="container"> <h1class="head"lang="en">Computer Technology Groups</h1> <divid="nav"> <ul> <li><ahref="#">エコロジー</a></li> <li><ahref="#">コンピューター</a></li> <li><ahref="#">モバイル</a></li> <li><ahref="#">ショッピング</a></li> <li><ahref="#">お問い合わせ</a></li> </ul> </div><!-- /#nav --> <divid="content"> <h2><imgsrc="img/ecology.gif"alt="エコロジー"width="201"height="24"></h2> <divclass="section"> <h3>エコロジーへの取り組み</h3> <p> Computer Technology Groupsでは早くからエコロジーの研究に取り組んできました。自然エネルギーの活用もすすめており、二酸化炭素(CO2)の排出量を減らす努力もしています。専門家の招致、育成にも努め、来春には環境研究施設を設立する予定です。 </p> <p> 地域の自然環境の育成にも努めています。植樹、植林活動から、公園の整備なども行っています。また、社内裏手には広くて気持ちのいい芝生の丘があり、一般にも開放しています。昼休みなどには、憩いの場として賑わっています。 </p> </div> <divclass="section"> <h3>商品のラインナップ</h3> <p> 紙やプラスチック、コンピューター・パーツのリサイクルにも力を入れ、あらゆる面での活動をひろげています。リサイクル商品のラインナップも豊富で、オンラインのショッピングコーナーではもちろんのこと、各地域のリサイクルセンターでもお買い求めいただけます。 </p> </div> </div><!-- /.section --> <divid="footer"> <p><small> Copyright (C) Computer Technology Groups. All rights reserved. </small></p> </div><!-- /#footer --> </div><!-- /#container --> </body> </html>
@charset "UTF-8"; body, h1, h2, p, ul, li, div { margin: 0; padding: 0; } ul { list-style: none; } a { text-decoration: none; color: #4C904E; } img { border: 0; vertical-align: bottom; } body { color: #555555; font-size: 16px; font-family: "Hiragino Kaku Gothic ProN", Meiryo, sans-serif; line-height: 1.7; } #container { width: 500px; margin: 10px auto; } #nav { width: 500px; border-top: 1px solid #4C904E; border-bottom: 1px solid #4C904E; margin-bottom: 20px; } #nav ul { font-size: 14px; width: 476px; overflow: hidden; margin: 0 auto; } #nav li { float: left; } #nav li a { display: block; line-height: 40px; margin: 0 8px; } #nav li a:hover { text-decoration: underline; } #content { clear: both; margin-bottom: 40px; } h1 { height: 60px; font-size: 16px; font-family:Georgia, "Times New Roman", Times, serif; font-weight: bold; margin: 0 0 30px 0; padding-left: 60px; background: url(../img/logo.gif) no-repeat; } h2 { text-align:center; padding: 10px 0 22px 0; background-color: #4C904E; } h3 { color: #4C904E; font-size: 18px; margin:0 0 15px 0; padding:0 0 0 26px; background: url(../img/mark.gif) no-repeat left 5px; } .head { color: #4C904E; margin-bottom: 10px; } .section { width:500px; margin:2em auto 0 auto; } #footer { padding-top: 10px; border-top: 2px solid #4C904E; text-align: center; }
<!DOCTYPE html> <htmllang="ja"> <head> <metacharset="utf-8"> <title>2カラムレイアウト</title> <linkrel="stylesheet"href="css/style1.css"> </head> <body> <divid="container"> <divid="header"> <h1>Homepage Title</h1> <p>サブタイトルサブタイトルサブタイトル</p> </div><!-- /#header --> <divid="wrapper"> <divid="content"> <h2>コンテンツのタイトル</h2> <p>コンテンツの本文を記述します。コンテンツの本文を記述します。コンテンツの本文を記述します。コンテンツの本文を記述します。コンテンツの本文を記述します。コンテンツの本文を記述します。コンテンツの本文を記述します。コンテンツの本文を記述します。コンテンツの本文を記述します。コンテンツの本文を記述します。コンテンツの本文を記述します。コンテンツの本文を記述します。コンテンツの本文を記述します。コンテンツの本文を記述します。コンテンツの本文を記述します。コンテンツの本文を記述します。コンテンツの本文を記述します。コンテンツの本文を記述します。</p> <p>コンテンツの本文を記述します。コンテンツの本文を記述します。コンテンツの本文を記述します。コンテンツの本文を記述します。コンテンツの本文を記述します。コンテンツの本文を記述します。コンテンツの本文を記述します。コンテンツの本文を記述します。</p> </div><!-- /#content --> <divid="nav"> <ul> <li><ahref="#">メニューのリンク1</a></li> <li><ahref="#">メニューのリンク2</a></li> <li><ahref="#">メニューのリンク3</a></li> <li><ahref="#">メニューのリンク4</a></li> <li><ahref="#">メニューのリンク5</a></li> <li><ahref="#">メニューのリンク6</a></li> </ul> </div><!-- /#nav --> </div><!-- /#wrapper --> <divid="footer"> <small>Copyright © AUTHOR NAME, All Rights Reserved.</small> </div><!-- /#footer --> </div><!-- /#container --> </body> </html>
@charset "utf-8"; /* reset */ html, body, div, h1, h2, p, ul, li { margin: 0; padding: 0; line-height: 1.0; } ul { list-style: none; } a { text-decoration: none; } /* body */ body { color: #333; font-size: 16px; font-family: "Hiragino Kaku Gothic ProN", Meiryo, sans-serif; background: #E6E6E6; } /* layout */ #container { width: 760px; margin: 20px auto; padding: 15px; background: #FFF; } #header { height: 180px; margin-bottom: 30px; padding: 20px 0 0 20px; background: url(../img/header01.jpg) no-repeat; } #header h1 { font-size: 36px; font-family:Verdana, Geneva, sans-serif; margin-bottom: 15px; } #header p { font-size: 14px; } #wrapper { overflow: hidden; margin-bottom: 10px; } #content { width: 550px; float: left; } #content h2 { font-size: 18px; background: #C1F569; margin-bottom: 20px; padding: 12px 0 10px 1.0em; } #content p { line-height: 1.6; margin-bottom: 20px; } #nav { width: 180px; float: right; } #nav ul { border-top: 1px solid #AAA; } #nav li { font-size: 14px; border-bottom: 1px solid #AAA; } #nav li a { display: block; padding: 12px 0 10px 1.0em; font-weight: bold; } #nav li a:link, #nav li a:visited { color: #333; } #nav li a:hover { color: #F90; } #footer { padding: 10px; text-align: center; border-top: 1px solid #AAA; } #footer small { font-size: 12px; }
<!DOCTYPE html> <htmllang="ja"> <head> <metacharset="UTF-8"> <title>常にブラウザの中央(天地左右均等)に表示</title> <linkrel="stylesheet"href="css/style.css"> </head> <body> <divid="container"> <h1>薬玉文様<span>(くすだまもんよう)</span></h1> <p> 薬玉とは、薬・香料を玉にして錦の袋に入れ、造花や蓬・菖蒲などを飾り、五色の糸を長く垂らしたもの。古代中国で端午の節句に薬玉を柱などに掛け、邪気払いや長寿を祈願する風習が、平安時代に日本へ伝わり貴族の間で行われるようになった。江戸初期以後は、薬玉が民間の女児の玩具として流行。小袖や帯に用いられるほか、吉祥柄のため七五三用などの祝着の文様としても好まれる。 </p> <pclass="footer"><small>©2014 Historical Japan</small></p> </div><!-- /#container --> </body> </html>
body, div, h1, p, ul, li { margin: 0; padding: 0; } ul { list-style: none; } body { background: #000000 url(images/bg.gif) repeat ; background-color: #FFFFFF; font-family: "ヒラギノ明朝 ProN", "HG明朝E", "MS P明朝", "MS 明朝", serif; font-weight: bold; font-size: 15px; line-height: 1.6; } #container { width: 620px; height:440px; border: 15px solid #000000; background: #000000 url(images/image.jpg) no-repeat right bottom; position:absolute; margin: -220px 0 0 -310px; top: 50%; left: 50%; } h1 { width: 280px; color: #E4D669; font-size: 20px; margin: 0 0 20px 16px; padding-top: 15px; } h1 span { font-size: 16px; } p { width: 280px; color: #FFFFFF; margin-left: 16px; line-height: 1.8; } p.footer { font-size: 14px; color: #999999; margin-top: 80px; text-align: right; }
<!DOCTYPE html> <htmllang="ja"> <head> <metacharset="UTF-8"> <title>Patisserie camellia</title> <linkrel="stylesheet"href="css/style.css"> </head> <body> <divid="container"> <h1><imgsrc="img/logo.gif"alt="Patisserie camellia"width="267"height="129"></h1> <ul> <li><ahref="#"><imgsrc="img/m_info.gif"alt="Information"></a></li> <li><ahref="#"><imgsrc="img/m_menu.gif"alt="Menu"></a></li> <li><ahref="#"><imgsrc="img/m_access.gif"alt="Access"></a></li> <li><ahref="#"><imgsrc="img/m_mail.gif"alt="Mail"></a></li> </ul> <divid="imageph"> <imgsrc="img/photo01.jpg"alt="プリン"id="ph01"> <imgsrc="img/photo02.jpg"alt="ショートケーキ"id="ph02"> <imgsrc="img/photo03.jpg"alt="ワッフル"id="ph03"> <imgsrc="img/photo04.jpg"alt="コーヒー"id="ph04"> <imgsrc="img/photo05.jpg"alt="キャンドル"id="ph05"> <imgsrc="img/photo06.jpg"alt="イチゴプリン"id="ph06"> <imgsrc="img/photo07.jpg"alt="イチゴスムージー"id="ph07"> <imgsrc="img/photo08.jpg"alt="ヨーグルト"id="ph08"> <imgsrc="img/photo09.jpg"alt="ライト"id="ph09"> <imgsrc="img/photo10.jpg"alt="コーヒー"id="ph10"> </div> </div> <divid="campaign"><ahref="#"><imgsrc="img/campaign.gif"alt="キャンペーン情報"border="0"></a></div> </body> </html>
@charset "UTF-8"; body, div, h1, ul, li { margin: 0; padding: 0; } body { background: #5B3E1C; } img { border: none; vertical-align: bottom; } a { text-decoration: none; } #container { background: #FFF url(../img/shadow.gif) repeat-x left bottom; height: 410px; width: 800px; position: absolute; left: 50%; top: 50%; margin-left: -400px; margin-top: -205px; } #container h1 { position: absolute; left: 30px; top: 240px; } #container ul { position: absolute; left: 30px; top: 25px; } #container li { height: 30px; } #container li img { height: 25px; width: 94px; } #imageph img { position: absolute; height: 80px; width: 80px; } img#ph01 { left: 640px; top: 80px; height: 160px; width: 160px; } img#ph02 { left: 400px; top: 240px; height: 160px; width: 160px; } img#ph03 { left: 320px; top: 0px; height: 160px; width: 160px; } img#ph04 { left: 320px; top: 160px; } img#ph05 { left: 480px; top: 0px; } img#ph06 { left: 480px; top: 160px; } img#ph07 { left: 560px; top: 80px; } img#ph08 { left: 560px; top: 240px; } img#ph09 { left: 640px; top: 320px; } img#ph10 { left: 720px; top: 240px; } #campaign { width: 170px; height: 100px; position: absolute; left: 50%; top: 50%; margin-left: 245px; margin-top: -228px; } #campaign img { width: 170px; height: 100px; }