webサイト制作の勉強|1月ブログ

webサイト制作の勉強に関する解説ブログです。

既存サイトのトレース

既存のサイトをトレースする事は、非常に勉強になるので、積極的にやって行きましょう。



今回のようにコンテンツの多いコーポレートサイトは細かい箇所の処理が多く、PCで見せる物とSPで見せる物を明確に分け、しっかりとしたUI・UX設計が必要になってきます。
今までの授業で学んだ事の全てが必要になって来るので、復習の意味も込めて作って行きましょう。


f:id:yachin29:20170210120838p:plain


www.kirin.co.jp

このサイト制作のポイント

  • メガドロップダウンメニューの導入
  • レスポンシブでのcssスプライト
  • フルスクリーンのキーヴィジュアルスライダー
  • レスポンシブでのグリッドレイアウトの見せ方
  • アコーディオンメニューのUI設計

などなど


生徒の作例
模倣サイト|KIRIN



まずはギャラリー部分のレスポンシブでのグリッドレイアウトの見せ方を考えながら作って行きましょう。

PCレイアウト

f:id:yachin29:20170612194943p:plain

スマホレアアウト

f:id:yachin29:20170612195020p:plain


index.html

<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>コーポレート模擬サイト</title>
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" href="css/style.css">
</head>

<body>
<div class="inner">
<ul id="grallery">
<li class="photo01 size-2x2"><a href="#">grallery01</a></li>
<li class="photo02 size-2x1"><a href="#">grallery02</a></li>
<li class="photo03 size-1x1"><a href="#">grallery03</a></li>
<li class="photo04 size-1x1"><a href="#">grallery04</a></li>
<li class="photo05 size-2x1"><a href="#">grallery05</a></li>
<li class="photo06 size-1x1"><a href="#">grallery06</a></li>
<li class="photo07 size-1x1"><a href="#">grallery07</a></li>
<li class="photo08 size-1x1"><a href="#">grallery08</a></li>
<li class="photo09 size-1x1"><a href="#">grallery09</a></li>
<li class="photo10 size-1x1"><a href="#">grallery10</a></li>
<li class="photo11 size-1x1"><a href="#">grallery11</a></li>
</ul>
</div>
</body>
</html>


style.css

@charset "utf-8";
/* CSS Document */

html,body,h1,h2,h3,h4,p,ul,ol,li,dl,dt,dd {
  margin:0;
  padding:0;
  line-height:1.0;
  font-family:"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, sans-serif;
}
ul,ol {
  list-style:none;
}
a {
  text-decoration:none;
  color:#222;
}
img {
  border:none;
  vertical-align:bottom;
}
.inner {
  max-width:960px;
  margin:0 auto;
}
/*ギャラリー部分*/
#grallery {
  overflow:hidden;
  padding:10px;
  box-sizing:border-box;
}
#grallery li {
  width:168px;
  height:168px;
  float:left;
  margin:10px;
  border:1px solid #BBB;
  box-sizing:border-box;
}
#grallery li a {
  display:block;
  width:100%;
  height:100%;
  text-indent:100%;
  white-space:nowrap;
  overflow:hidden;
  opacity:1;
  transition:opacity linear 0.3s;
}
#grallery li a:hover {
  opacity:0.6;
}
#grallery li.size-2x2 {
  width:356px;
  height:356px;
}
#grallery li.size-2x1 {
  width:356px;
  height:168px;
}
#grallery li.photo01 a {
  background:url(../img/image_800.jpg) no-repeat center/cover;
}
#grallery li.photo02 a {
  background:url(../img/image_802.jpg) no-repeat center/cover;
}
#grallery li.photo03 a {
  background:url(../img/image_804.jpg) no-repeat center/cover;
}
#grallery li.photo04 a {
  background:url(../img/image_754.jpg) no-repeat center/cover;
}
#grallery li.photo05 a {
  background:url(../img/image_803.jpg) no-repeat center/cover;
}
#grallery li.photo06 a {
  background:url(../img/image_750.png) no-repeat center/cover;
}
#grallery li.photo07 a {
  background:url(../img/image_223.png) no-repeat center/cover;
}
#grallery li.photo08 a {
  background:url(../img/image_560.jpg) no-repeat center/cover;
}
#grallery li.photo09 a {
  background:url(../img/image_670.png) no-repeat center/cover;
}
#grallery li.photo10 a {
  background:url(../img/image_805.jpg) no-repeat center/cover;
}
#grallery li.photo11 a{
  background:url(../img/image_806.png) no-repeat center/cover;
}
/*PC時は非表示*/
#grallery li.photo11 {
  display:none;
}
@media screen and (max-width:959px) {

/*ギャラリー部分*/

#grallery {
  padding:1%;
}
#grallery li {
  width:18%;
  height:0;
  padding-bottom:18%;
  margin:1%;
}
#grallery li.size-2x2 {
  width:38%;
  height:0;
  padding-bottom:38%;
}
#grallery li.size-2x1 {
  width:38%;
  height:0;
  padding-bottom:18%;
}

#grallery li a,#grallery li.size-2x2 a {
  width:100%;
  height:0;
  padding-bottom:100%;
}
#grallery li.size-2x1 a {
  width:100%;
  height:0;
  padding-bottom:50%;
}
}

@media screen and (max-width:640px) {
#grallery li.photo01 a {
  background:url(../img/image_801.jpg) no-repeat center/cover;
}
#grallery li {
  width:48%;
  height:0;
  padding-bottom:48%;
  margin:1%;
}
#grallery li.size-2x2,#grallery li.size-2x1 {
  width:98%;
  height:0;
  padding-bottom:48%;
}
#grallery li.size-2x2 a {
  width:100%;
  height:0;
  padding-bottom:50%;
}
/*スマホ時は表示*/
#grallery li.photo11 {
  display: block;
}
}