デイサービスのデザインカンプ
Logo

デイサービスのデザインカンプ

Favorite
Credit
デザイナー
デイサービスのデザインカンプ-1
Share
Behind The Scenes
デイサービスのデザインカンプ-1

デイサービスのデザインカンプ

訓練校の課題にて制作しました、架空のデイサービスセンターのサイトです。 作業時間240分です。 デザインからコーディングまで行いました。 カンプ通りの再現には8割程しか至らなかったですが、実際のコーディングは下記の通りとなります。 <!doctype html> <html> <head> <meta charset="utf-8"> <title>キョウリツ・デイサービス</title> <style type="text/css"> p , h1 , h2, h3, ul, ol, body{ padding: 0px; margin: 0; color: #554b4b; } img { vertical-align: bottom; border-style: none; } ul, ol { list-style-type: none; } main { display: block; } body { font-family: "Arial Black", Gadget, sans-serif; font-size: 0.9em; background-color: #fbfff1; } header { width: 1024px; height: 100%; margin-left: 0px; } header .logo { margin: 20px 40px; } header p { float: left; } header h3 { padding-top: 0px; float: right; } .top.clearfix p img { padding: 20px; text-align: center; } nav { background-repeat: repeat-x; width: 720px; float: right; margin-top: 50px; } nav ul { } nav li { float: left; margin: 0 3px; } .top { display: block; text-align: center; margin-left: 40px; } .top h1 { font-size: 1.3em; color: #5cb4c3; text-align: center; margin-top: 100px; } .top .img { /* [disabled]margin-right: 800px; */ float: left; width: 400px; margin-left: 20px; margin-top: 50px; padding: 20px; text-align: center; } .top .text { text-align: left; clear: none; float: right; padding-top: 100px; padding-right: 300px; } .clearfix:after { content: ""; display: block; clear: both; } .calender { text-align: center; float: left; /* [disabled]width: 300px; */ padding: 20px; /* [disabled]height: 280px; */ } .calender p img { border-bottom: 1px solid #000000; border-top: 1px solid #000000; } .calender h2 { padding: 20px; color: #554b4b; text-align: center; font-size: 1.3em; background-repeat: no-repeat; background-color: blue; background-position: 50% 50%; } .info h2 { padding: 20px; color: #554b4b; text-align: center; background-image: url(url); font-size: 1.3em; } .info { float: right; padding-top: 20px; padding-bottom: 20px; margin-top: 0px; } .infotext { background-image: url(img/info.png); padding: 20px; background-size: 150% 150%; background-color: #fbfff1; } .info p { margin-top: 5px; margin-right: 5px; margin-left: 5px; margin-bottom: 5px; background-repeat: no-repeat; } .centermenu { margin-left: 150px; margin-right: 150px; margin-top: 100px; } .subbanner { margin-left: 80px; margin-right: 40px; margin-top: 80px; } .subbanner .banner1 { float: left; margin-top: 20px; } .subbanner .banner2 { float: right; margin-right: 120px; } footer { clear: both; text-align: center; padding-top: 10px; padding-left: 50px; } footer .logo { float: left; margin-top: 50px; padding: 30px; margin-left: 100px; } footer .text { margin-left: 100px; margin-top: 10px; margin-bottom: 0px; padding-left: 30px; text-align: left; } footer a { color: #293D2E; text-decoration: none; text-align: center; } footer a:hover { color: #166706; } </style> </head> <body> <header> <p class="logo"><img src="img/logo.png" width="153" height="109" alt=""/></p> <h3><img src="img/tel.png" width="284" height="54" alt=""/> </h3> <nav> <ul type="disc"> <li><img src="img/btn-home.png" width="80" height="26" alt=""/></li> <li><img src="img/btn-info.png" width="81" height="26" alt=""/></li> <li><img src="img/btn-day.png" width="96" height="26" alt=""/></li> <li><img src="img/btn-map.png" width="122" height="26" alt=""/></li> <li><img src="img/btn-price.png" width="99" height="26" alt=""/></li> <li><img src="img/btn-meal.png" width="56" height="26" alt=""/></li> <li><img src="img/btn-flow.png" width="134" height="26" alt=""/></li> </ul> </nav> </header> <main> <div class="top clearfix"> <p><img src="img/header.png" width="1021" height="507" alt=""/></p> <h1>私たちの願い</h1> <p class="img"><img src="img/concept.png" width="415" height="340" alt=""/></p> <p class="text">「ダミーテキスト」親譲りの無鉄砲で<br> 小供の時から損ばかりしている。小学校に居る時分<br> 学校の二階から飛び降りて一週間ほど<br> 腰を抜かした事がある。<br> なぜそんな無闇をしたと聞く人があるかも知れぬ。<br> 別段深い理由でもない。<br> 新築の二階から首を出していたら、<br> 同級生の一人が冗談に、いくら威張っても、<br> そこから飛び降りる事は出来まい。弱虫やーい。と<br> 囃したからである。小使に負ぶさって帰ってますと答えた。</p> </div> <div class="centermenu clearfix"> <div class="calender"> <h2>カレンダー</h2> <p><img src="img/calender.png" width="283" height="225" alt=""/></p> </div> <div class="info"> <h2>新着情報</h2> <div class="infotext"> <p>20.01.20 次回説明会のお知らせ</p> <p>20.01.13 2020年度入居者募集スタートしました。</p> <p>20.01.01 あけましておめでとうございます。</p> <p>20.01.01 □□□□□□□□□□□□□□□□</p> <p>20.01.01 □□□□□□□□□□□□□□□□</p> </div> </div> </div> <div class="subbanner clearfix"> <h2 class="banner1"><img src="img/kengaku.png" width="600" height="270" alt=""/></h2> <div class="sidemenu"> <h2 class="banner2"><img src="img/recruit .png" width="373" height="246" alt=""/></h2> <h2 class="banner2"><img src="img/contact.png" width="314" height="57" alt=""/></h2> </div> </div> </main> <footer> <p class="logo"><img src="img/logo.png" width="100" height="71" alt=""/></p> <p>&nbsp;</p> <p>&nbsp;</p> <p>&nbsp;</p> <p class="text">キョウリツ・デイサービス</p> <p class="text">住所:東京都中野区東中野0-1-2<br> 電話番号:0120-××××-××××<br> FAX:03-××××-××××</p> <p><a href="#">HOME</a> <a href="#">施設案内</a> <a href="#">施設の一日</a> <a href="#">施設周辺MAP</a> <a href="#">ご利用料金</a> <a href="#">お食事</a> <a href="#">ご利用のながれ</a></p> <p><span class="text">Copyright (c) 職業訓練課題. All Rights Reserved.</span></p> </footer> </body> </html>
Favorite
Credit
デザイナー
Share
Do you like the work?
Get in touch with
k.kiyohara
or create your own now!