読者です 読者をやめる 読者になる 読者になる

WEBサイト制作の勉強|フェリカテクニカルアカデミー

WEBサイト制作の勉強の為の解説ブログ。東京池袋のフェリカテクニカルアカデミーでは求職者支援訓練の一環として、WEBサイト制作を学ぶことができます。

レスポンシブサイトのナビボタンを画像で作る

レスポンシブデザイン

前回の授業で作ったギャラリー部分とスライダーにナビゲーションを追加します。
レスポンシブサイトのナビゲーションを画像で作る場合、レスポンシブを加味した画像作りを心がけましょう。
また、今回のナビゲーションボタンの画像はCSSスプライトで作ります。
さらに参考サイトであるキリンのサイト同様、ボタンをホバーしたら、ボタン下部に▲とボーダーが出てくる設定にしましょう。


参考画像
f:id:yachin29:20160906003642p:plain

f:id:yachin29:20160906003714p:plain


nav要素の高さ:50px
li要素の高さ:30px
ホバーしたら出てくるborderの幅:3px

今回のポイント

以前はPC用とSP用に2つのnav要素を用意して、display:block と display:none で表示・非表示をコントロールしていましたが、今回は1つのnav要素でPC・SP共に使いまわす方法を取ります。もちろん「display:none」がNGでは無いですが、安易に「display:none」を使うのを辞めようという流れがあるのも事実です。
なので、ケース・バイ・ケースで常に両方の選択肢を持てるようにしましょう。


<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>レスポンシブでのCSSスプライト</title>
</head>

<body>
<nav class="pc-nav">
<ul>
<li class="nav1"><a href="#">商品情報</a></li>
<li class="nav2"><a href="#">キャンペーン</a></li>
<li class="nav3"><a href="#">エンタメ</a></li>
<li class="nav4"><a href="#">CSV活動</a></li>
<li class="nav5"><a href="#">企業情報</a></li>
<li class="nav6"><a href="#">お客様相談室</a></li>
</ul>
</nav><!--/pc-nav-->
</body>
</html>

既存サイトのトレース ニュースリリース部分

レスポンシブデザイン

f:id:yachin29:20170217123900j:plain


このようなニュースリリース部分はレスポンシブを考えるとul要素を使ってコーディングする方が簡単に出来るので、多くの場合はul・liで組まれていますが、文章構造的にはdl要素を使う方が良いでしょう。
なので、今回はdl要素を使って実際にコーディングして行きます。

ポイント
  • ddがdtの下に回り込まないようにする
  • dtとddで行数が違う場合にレイアウトが崩れないようにする
  • dtとddの高さを1行目で合わせる

文章構造

<div class="inner">
<div id="news">
<h2>ニュースリリース</h2>
<dl>
<dt>2017年2月16日</dt>
<dd><a href="#">「ブルックリン ラガー」の飲食店向け大樽・家庭向け缶をキリンビール社が全国で発売</a></dd>
<dt>2017年2月16日</dt>
<dd><a href="#">「よなよなエール」(ヤッホーブルーイング社)の大樽を、キリンビール社が全国の飲食店にて販売開始</a></dd>
<dt>2017年2月16日</dt>
<dd><a href="#">「CLUB SVB」を創設</a></dd>
<dt>2017年2月15日</dt>
<dd><a href="#">「キリン 午後の紅茶」×「グリコ ポッキー」のコラボ第3弾 史上初「道頓堀グリコサイン」に「午後の紅茶」登場!?</a></dd>
<dt>2017年2月14日</dt>
<dd><a href="#">「カッシェロ・デル・ディアブロ」のキャンペーンを3月14日(火)より開始!~絶対もらえる!悪魔の晩餐グルメキャンペーン~</a></dd>
<dt>2017年2月9日</dt>
<dd><a href="#">「キリン 午後の紅茶 ストレートティー」500ml紙パック3月7日(火)リニューアル発売</a></dd>
<dt>2017年2月9日</dt>
<dd><a href="#">「シャトー・メルシャン マリコ・ヴィンヤード シラー 2013」、「同 マリコ・ヴィンヤード ソーヴィニヨン・ブラン 2015」、「同 北信シャルドネ RGC 千曲川左岸収穫 2015」が「Asian Wine Review 2017」にて金賞を受賞</a></dd>
</dl>
</div>

<div id="new_info">
<h2>新着情報</h2>
<dl>
<dt>2017年2月14日</dt>
<dd><a href="#">「キリン サプリ レモン」を新発売!(2月14日発売)</a></dd>
<dt>2017年2月14日</dt>
<dd><a href="#">「ワールドセレクション」を新発売!(2月14日発売)</a></dd>
<dt>2017年2月14日</dt>
<dd><a href="#">「キリン 氷結®ストロング 佐藤錦」を新発売!(2月14日発売)</a></dd>
<dt>2017年2月14日</dt>
<dd><a href="#">キリンクイズ検定-第21回 キリン 午後の紅茶 いちごティー編- クイズに答えてキリン 午後の紅茶 いちごティーを当てよう!</a></dd>
<dt>2017年2月14日</dt>
<dd><a href="#">『キリン淡麗 絶対もらえるキャンペーン』情報公開!</a></dd>
<dt>2017年2月13日</dt>
<dd><a href="#">「CSV活動」トップをリニューアル!</a></dd>
<dt>2017年2月7日</dt>
<dd><a href="#">キリン食生活文化研究所 あなたのくらしのアンケート「自由時間の過ごし方」公開中!</a></dd>
</dl>
</div>
</div>

今のトレンドを知る

Webデザイン

物を作る上で、必ずしもその時々のトレンドを盲目的に取り入れれば万事OKという訳でないですが、選択肢の1つとして知っておく事はとても大事です。
特にポートフォリオなどに「ツカミ」として、最新のトレンドを取り入れる事で、面接などでアピール出来るので、場合によっては積極的に取り入れる事も必要です。
一言でトレンドと言っても、色の使い方からタイプグラフィー、レイアウト、アニメーションの動きなど、多岐に渡って語られている場合が多く、その全てを取り入れるのは不可能なので、まずは俯瞰的に眺めて、ポイント・ポイントで取り入れそうなものは取り入れていくようにしましょう。


特に最近のトレンドの1つである「分割、スプリットレイアウト」はポートフォリオにも向いているレイアウトでもあるので、ぜひ参考にしてみましょう。

f:id:yachin29:20170215112552p:plain


tympanus.net




2017年のトレンドまとめ

photoshopvip.net


photoshopvip.net


coliss.com

Google画像検索風のjQuery

jQueryプラグイン

Google画像検索っぽいスライドにするjQuery(レスポンシブ対応)

Googleで画像検索した際に表示される、サムネイルをクリックすると詳細エリアが広がり画像の情報が出てくるやつです。

一応、レスポンシブ対応にもなっていますが、しっかり対応させるには画像処理をひと手間加えた方が良いと思います。
若干入れ子構造が複雑ですが、シンプルで使い易いよく出来たjQueryです。ポートフォリオなどサムネイルを沢山表示したい場合に非常に有効です。またテキストエリアも容易に編集出来るので、説明文なども簡単に入れる事が出来ます。


「<li>」や「<img>」などのインライン要素に対して
HTMLソース上でタグ間を改行させると半角スペースほどの空白(余白)が発生してしまい、扱いに困ることがあります。今回はコメントアウトを入れる事で改行しないようにしています。

デモページ

画像素材

<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>Google画像検索風スライダー</title>
<meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=0">
<link href="css/style.css" rel="stylesheet">
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
<![endif]-->
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="js/GoogleImgSearch.js"></script>
</head>
<body>
<header>
<h1>jQuery GoogleImgSearch UI</h1>
</header>

<div id="container">
<ul class="listCover">
	<li class="listItem">
		<img src="img/01.jpg" alt="">
		<div class="selfRep">
			<div class="selfRepInner">
				<div class="secLeft"><img src="img/01.jpg" alt=""></div>
				<div class="secRight"><p>エリア【1】のダミーテキスト。エリア【1】のダミーテキスト。エリア【1】のダミーテキスト。</p>
        <div class="view">VIEW</div>
        </div><!--/.secfRight-->
			</div><!--/.selfRepInner-->
		</div><!--/.selfRep-->
	</li><!--
  --><li class="listItem">
		<img src="img/02.jpg" alt="">
		<div class="selfRep">
			<div class="selfRepInner">
				<div class="secLeft"><img src="img/02.jpg" alt=""></div>
				<div class="secRight"><p>エリア【2】のダミーテキスト。エリア【2】のダミーテキスト。エリア【2】のダミーテキスト。エリア【2】のダミーテキスト。</p></div>
			</div><!--/.selfRepInner-->
		</div><!--/.selfRep-->
	</li><!--
	--><li class="listItem">
		<img src="img/03.jpg" alt="">
		<div class="selfRep">
			<div class="selfRepInner">
				<div class="secLeft"><img src="img/03.jpg" alt=""></div>
				<div class="secRight"><p>エリア【3】のダミーテキスト。エリア【3】のダミーテキスト。エリア【3】のダミーテキスト。エリア【3】のダミーテキスト。エリア【3】のダミーテキスト。エリア【3】のダミーテキスト。エリア【3】のダミーテキスト。</p></div>
			</div><!--/.selfRepInner-->
		</div><!--/.selfRep-->
	</li><!--
	--><li class="listItem">
		<img src="img/04.jpg" alt="">
		<div class="selfRep">
			<div class="selfRepInner">
				<div class="secLeft"><img src="img/04.jpg" alt=""></div>
				<div class="secRight"><p>エリア【4】のダミーテキスト。エリア【4】のダミーテキスト。エリア【4】のダミーテキスト。エリア【4】のダミーテキスト。エリア【4】のダミーテキスト。エリア【4】のダミーテキスト。</p></div>
			</div><!--/.selfRepInner-->
		</div><!--/.selfRep-->
	</li><!--
	--><li class="listItem">
		<img src="img/05.jpg" alt="">
		<div class="selfRep">
			<div class="selfRepInner">
				<div class="secLeft"><img src="img/05.jpg" alt=""></div>
				<div class="secRight"><p>エリア【5】のダミーテキスト。エリア【5】のダミーテキスト。エリア【5】のダミーテキスト。エリア【5】のダミーテキスト。エリア【5】のダミーテキスト。エリア【5】のダミーテキスト。エリア【5】のダミーテキスト。エリア【5】のダミーテキスト。</p></div>
			</div><!--/.selfRepInner-->
		</div><!--/.selfRep-->
	</li><!--
	--><li class="listItem">
		<img src="img/06.jpg" alt="">
		<div class="selfRep">
			<div class="selfRepInner">
				<div class="secLeft"><img src="img/06.jpg" alt=""></div>
				<div class="secRight"><p>エリア【5】のダミーテキスト。エリア【5】のダミーテキスト。エリア【5】のダミーテキスト。エリア【5】のダミーテキスト。エリア【5】のダミーテキスト。エリア【5】のダミーテキスト。エリア【5】のダミーテキスト。エリア【5】のダミーテキスト。</p></div>
			</div><!--/.selfRepInner-->
		</div><!--/.selfRep-->
	</li><!--
	--><li class="listItem">
		<img src="img/07.jpg" alt="">
		<div class="selfRep">
			<div class="selfRepInner">
				<div class="secLeft"><img src="img/07.jpg" alt=""></div>
				<div class="secRight"><p>エリア【5】のダミーテキスト。エリア【5】のダミーテキスト。エリア【5】のダミーテキスト。エリア【5】のダミーテキスト。エリア【5】のダミーテキスト。エリア【5】のダミーテキスト。エリア【5】のダミーテキスト。エリア【5】のダミーテキスト。</p></div>
			</div><!--/.selfRepInner-->
		</div><!--/.selfRep-->
	</li><!--
	--><li class="listItem">
		<img src="img/08.jpg" alt="">
		<div class="selfRep">
			<div class="selfRepInner">
				<div class="secLeft"><img src="img/08.jpg" alt=""></div>
				<div class="secRight"><p>エリア【5】のダミーテキスト。エリア【5】のダミーテキスト。エリア【5】のダミーテキスト。エリア【5】のダミーテキスト。エリア【5】のダミーテキスト。エリア【5】のダミーテキスト。エリア【5】のダミーテキスト。エリア【5】のダミーテキスト。</p></div>
			</div><!--/.selfRepInner-->
		</div><!--/.selfRep-->
	</li><!--
	--><li class="listItem">
		<img src="img/09.jpg" alt="">
		<div class="selfRep">
			<div class="selfRepInner">
				<div class="secLeft"><img src="img/09.jpg" alt=""></div>
				<div class="secRight"><p>エリア【5】のダミーテキスト。エリア【5】のダミーテキスト。エリア【5】のダミーテキスト。エリア【5】のダミーテキスト。エリア【5】のダミーテキスト。エリア【5】のダミーテキスト。エリア【5】のダミーテキスト。エリア【5】のダミーテキスト。</p></div>
			</div><!--/.selfRepInner-->
		</div><!--/.selfRep-->
	</li><!--
	--><li class="listItem">
		<img src="img/10.jpg" alt="">
		<div class="selfRep">
			<div class="selfRepInner">
				<div class="secLeft"><img src="img/10.jpg" alt=""></div>
				<div class="secRight"><p>エリア【5】のダミーテキスト。エリア【5】のダミーテキスト。エリア【5】のダミーテキスト。エリア【5】のダミーテキスト。エリア【5】のダミーテキスト。エリア【5】のダミーテキスト。エリア【5】のダミーテキスト。エリア【5】のダミーテキスト。</p></div>
			</div><!--/.selfRepInner-->
		</div><!--/.selfRep-->
	</li><!--
	--><li class="listItem">
		<img src="img/11.jpg" alt="">
		<div class="selfRep">
			<div class="selfRepInner">
				<div class="secLeft"><img src="img/11.jpg" alt=""></div>
				<div class="secRight"><p>エリア【5】のダミーテキスト。エリア【5】のダミーテキスト。エリア【5】のダミーテキスト。エリア【5】のダミーテキスト。エリア【5】のダミーテキスト。エリア【5】のダミーテキスト。エリア【5】のダミーテキスト。エリア【5】のダミーテキスト。</p></div>
			</div><!--/.selfRepInner-->
		</div><!--/.selfRep-->
	</li><!--
	--><li class="listItem">
		<img src="img/12.jpg" alt="">
		<div class="selfRep">
			<div class="selfRepInner">
				<div class="secLeft"><img src="img/12.jpg" alt=""></div>
				<div class="secRight"><p>エリア【5】のダミーテキスト。エリア【5】のダミーテキスト。エリア【5】のダミーテキスト。エリア【5】のダミーテキスト。エリア【5】のダミーテキスト。エリア【5】のダミーテキスト。エリア【5】のダミーテキスト。エリア【5】のダミーテキスト。</p></div>
			</div><!--/.selfRepInner-->
		</div><!--/.selfRep-->
	</li><!--
	--><li class="listItem">
		<img src="img/13.jpg" alt="">
		<div class="selfRep">
			<div class="selfRepInner">
				<div class="secLeft"><img src="img/13.jpg" alt=""></div>
				<div class="secRight"><p>エリア【5】のダミーテキスト。エリア【5】のダミーテキスト。エリア【5】のダミーテキスト。エリア【5】のダミーテキスト。エリア【5】のダミーテキスト。エリア【5】のダミーテキスト。エリア【5】のダミーテキスト。エリア【5】のダミーテキスト。</p></div>
			</div><!--/.selfRepInner-->
		</div><!--/.selfRep-->
	</li><!--
	--><li class="listItem">
		<img src="img/14.jpg" alt="">
		<div class="selfRep">
			<div class="selfRepInner">
				<div class="secLeft"><img src="img/14.jpg" alt=""></div>
				<div class="secRight"><p>エリア【5】のダミーテキスト。エリア【5】のダミーテキスト。エリア【5】のダミーテキスト。エリア【5】のダミーテキスト。エリア【5】のダミーテキスト。エリア【5】のダミーテキスト。エリア【5】のダミーテキスト。エリア【5】のダミーテキスト。</p></div>
			</div><!--/.selfRepInner-->
		</div><!--/.selfRep-->
	</li><!--
	--><li class="listItem">
		<img src="img/15.jpg" alt="">
		<div class="selfRep">
			<div class="selfRepInner">
				<div class="secLeft"><img src="img/15.jpg" alt=""></div>
				<div class="secRight"><p>エリア【5】のダミーテキスト。エリア【5】のダミーテキスト。エリア【5】のダミーテキスト。エリア【5】のダミーテキスト。エリア【5】のダミーテキスト。エリア【5】のダミーテキスト。エリア【5】のダミーテキスト。エリア【5】のダミーテキスト。</p></div>
			</div><!--/.selfRepInner-->
		</div><!--/.selfRep-->
	</li><!--
	--><li class="listItem">
		<img src="img/16.jpg" alt="">
		<div class="selfRep">
			<div class="selfRepInner">
				<div class="secLeft"><img src="img/16.jpg" alt=""></div>
				<div class="secRight"><p>エリア【5】のダミーテキスト。エリア【5】のダミーテキスト。エリア【5】のダミーテキスト。エリア【5】のダミーテキスト。エリア【5】のダミーテキスト。エリア【5】のダミーテキスト。エリア【5】のダミーテキスト。エリア【5】のダミーテキスト。</p></div>
			</div><!--/.selfRepInner-->
		</div><!--/.selfRep-->
	</li><!--
	--><li class="listItem">
		<img src="img/17.jpg" alt="">
		<div class="selfRep">
			<div class="selfRepInner">
				<div class="secLeft"><img src="img/17.jpg" alt=""></div>
				<div class="secRight"><p>エリア【5】のダミーテキスト。エリア【5】のダミーテキスト。エリア【5】のダミーテキスト。エリア【5】のダミーテキスト。エリア【5】のダミーテキスト。エリア【5】のダミーテキスト。エリア【5】のダミーテキスト。エリア【5】のダミーテキスト。</p></div>
			</div><!--/.selfRepInner-->
		</div><!--/.selfRep-->
	</li><!--
	--><li class="listItem">
		<img src="img/18.jpg" alt="">
		<div class="selfRep">
			<div class="selfRepInner">
				<div class="secLeft"><img src="img/18.jpg" alt=""></div>
				<div class="secRight"><p>エリア【5】のダミーテキスト。エリア【5】のダミーテキスト。エリア【5】のダミーテキスト。エリア【5】のダミーテキスト。エリア【5】のダミーテキスト。エリア【5】のダミーテキスト。エリア【5】のダミーテキスト。エリア【5】のダミーテキスト。</p></div>
			</div><!--/.selfRepInner-->
		</div><!--/.selfRep-->
	</li><!--
	--><li class="listItem">
		<img src="img/19.jpg" alt="">
		<div class="selfRep">
			<div class="selfRepInner">
				<div class="secLeft"><img src="img/19.jpg" alt=""></div>
				<div class="secRight"><p>エリア【5】のダミーテキスト。エリア【5】のダミーテキスト。エリア【5】のダミーテキスト。エリア【5】のダミーテキスト。エリア【5】のダミーテキスト。エリア【5】のダミーテキスト。エリア【5】のダミーテキスト。エリア【5】のダミーテキスト。</p></div>
			</div><!--/.selfRepInner-->
		</div><!--/.selfRep-->
	</li><!--
	--><li class="listItem">
		<img src="img/20.jpg" alt="">
		<div class="selfRep">
			<div class="selfRepInner">
				<div class="secLeft"><img src="img/20.jpg" alt=""></div>
				<div class="secRight"><p>エリア【5】のダミーテキスト。エリア【5】のダミーテキスト。エリア【5】のダミーテキスト。エリア【5】のダミーテキスト。エリア【5】のダミーテキスト。エリア【5】のダミーテキスト。エリア【5】のダミーテキスト。エリア【5】のダミーテキスト。</p></div>
			</div><!--/.selfRepInner-->
		</div><!--/.selfRep-->
	</li><!--
	--><li class="listItem">
		<img src="img/21.jpg" alt="">
		<div class="selfRep">
			<div class="selfRepInner">
				<div class="secLeft"><img src="img/21.jpg" alt=""></div>
				<div class="secRight"><p>エリア【5】のダミーテキスト。エリア【5】のダミーテキスト。エリア【5】のダミーテキスト。エリア【5】のダミーテキスト。エリア【5】のダミーテキスト。エリア【5】のダミーテキスト。エリア【5】のダミーテキスト。エリア【5】のダミーテキスト。</p></div>
			</div><!--/.selfRepInner-->
		</div><!--/.selfRep-->
	</li><!--
	--><li class="listItem">
		<img src="img/23.jpg" alt="">
		<div class="selfRep">
			<div class="selfRepInner">
				<div class="secLeft"><img src="img/23.jpg" alt=""></div>
				<div class="secRight"><p>エリア【5】のダミーテキスト。エリア【5】のダミーテキスト。エリア【5】のダミーテキスト。エリア【5】のダミーテキスト。エリア【5】のダミーテキスト。エリア【5】のダミーテキスト。エリア【5】のダミーテキスト。エリア【5】のダミーテキスト。</p></div>
			</div><!--/.selfRepInner-->
		</div><!--/.selfRep-->
	</li><!--
	--><li class="listItem">
		<img src="img/24.jpg" alt="">
		<div class="selfRep">
			<div class="selfRepInner">
				<div class="secLeft"><img src="img/24.jpg" alt=""></div>
				<div class="secRight"><p>エリア【5】のダミーテキスト。エリア【5】のダミーテキスト。エリア【5】のダミーテキスト。エリア【5】のダミーテキスト。エリア【5】のダミーテキスト。エリア【5】のダミーテキスト。エリア【5】のダミーテキスト。エリア【5】のダミーテキスト。</p></div>
			</div><!--/.selfRepInner-->
		</div><!--/.selfRep-->
	</li><!--
	--><li class="listItem">
		<img src="img/25.jpg" alt="">
		<div class="selfRep">
			<div class="selfRepInner">
				<div class="secLeft"><img src="img/25.jpg" alt=""></div>
				<div class="secRight"><p>エリア【5】のダミーテキスト。エリア【5】のダミーテキスト。エリア【5】のダミーテキスト。エリア【5】のダミーテキスト。エリア【5】のダミーテキスト。エリア【5】のダミーテキスト。エリア【5】のダミーテキスト。エリア【5】のダミーテキスト。</p></div>
			</div><!--/.selfRepInner-->
		</div><!--/.selfRep-->
	</li><!--
	--><li class="listItem">
		<img src="img/26.jpg" alt="">
		<div class="selfRep">
			<div class="selfRepInner">
				<div class="secLeft"><img src="img/26.jpg" alt=""></div>
				<div class="secRight"><p>エリア【5】のダミーテキスト。エリア【5】のダミーテキスト。エリア【5】のダミーテキスト。エリア【5】のダミーテキスト。エリア【5】のダミーテキスト。エリア【5】のダミーテキスト。エリア【5】のダミーテキスト。エリア【5】のダミーテキスト。</p></div>
			</div><!--/.selfRepInner-->
		</div><!--/.selfRep-->
	</li><!--
	--><li class="listItem">
		<img src="img/27.jpg" alt="">
		<div class="selfRep">
			<div class="selfRepInner">
				<div class="secLeft"><img src="img/27.jpg" alt=""></div>
				<div class="secRight"><p>エリア【5】のダミーテキスト。エリア【5】のダミーテキスト。エリア【5】のダミーテキスト。エリア【5】のダミーテキスト。エリア【5】のダミーテキスト。エリア【5】のダミーテキスト。エリア【5】のダミーテキスト。エリア【5】のダミーテキスト。</p></div>
			</div><!--/.selfRepInner-->
		</div><!--/.selfRep-->
	</li><!--
	--><li class="listItem">
		<img src="img/28.jpg" alt="">
		<div class="selfRep">
			<div class="selfRepInner">
				<div class="secLeft"><img src="img/28.jpg" alt=""></div>
				<div class="secRight"><p>エリア【5】のダミーテキスト。エリア【5】のダミーテキスト。エリア【5】のダミーテキスト。エリア【5】のダミーテキスト。エリア【5】のダミーテキスト。エリア【5】のダミーテキスト。エリア【5】のダミーテキスト。エリア【5】のダミーテキスト。</p></div>
			</div><!--/.selfRepInner-->
		</div><!--/.selfRep-->
	</li><!--
	--><li class="listItem">
		<img src="img/29.jpg" alt="">
		<div class="selfRep">
			<div class="selfRepInner">
				<div class="secLeft"><img src="img/29.jpg" alt=""></div>
				<div class="secRight"><p>エリア【5】のダミーテキスト。エリア【5】のダミーテキスト。エリア【5】のダミーテキスト。エリア【5】のダミーテキスト。エリア【5】のダミーテキスト。エリア【5】のダミーテキスト。エリア【5】のダミーテキスト。エリア【5】のダミーテキスト。</p></div>
			</div><!--/.selfRepInner-->
		</div><!--/.selfRep-->
	</li><!--
	--><li class="listItem">
		<img src="img/30.jpg" alt="">
		<div class="selfRep">
			<div class="selfRepInner">
				<div class="secLeft"><img src="img/30.jpg" alt=""></div>
				<div class="secRight"><p>エリア【5】のダミーテキスト。エリア【5】のダミーテキスト。エリア【5】のダミーテキスト。エリア【5】のダミーテキスト。エリア【5】のダミーテキスト。エリア【5】のダミーテキスト。エリア【5】のダミーテキスト。エリア【5】のダミーテキスト。</p></div>
			</div><!--/.selfRepInner-->
		</div><!--/.selfRep-->
	</li>
</ul><!--/.listCover-->
</div>
</body>
</html>
style.css
@charset "utf-8";
/* CSS Document */
/* reset */
html, body, div, h1, h2, h3, h4, h5, h6,p, blockquote, pre, 
address,ul, ol, li, dl, dt, dd,table, th, td, form, fieldset {
  margin: 0;
  padding: 0;
  line-height: 1.0;
  font-family:
    "Hiragino Kaku Gothic ProN",
    Meiryo, 
    sans-serif;
}
table {
  border-collapse: collapse;
  border-spacing: 0;
}
ul, ol {
  list-style: none; /* マーカーを消す */
}
a {
  text-decoration: none; /* 下線を消す */
}
img {
  border: 0;
}
img, input {
  vertical-align: bottom;
}

/*レイアウト*/

body {
	overflow-y: scroll;
}
*html body {overflow-y: auto;} /* IE6 */
*:first-child+html body {overflow-y: auto;} /* IE7 */

h1 {
	margin-bottom: 20px;
	padding: 15px 0;
	background: #000;
	color: #fff;
	font-size: 18px;
	font-weight: bold;
	text-align: center;
}

/* .listCover
------------------------- */
.listCover {
	margin: 0 auto;
	text-align: left;
}

/* .listItem
------------------------- */
.listCover .listItem {
	padding: 10px 0;
	text-align: center;
	display: inline-block;
	*display: inline;
	*zoom: 1;
	cursor: pointer;
}
.listCover .listItem img {
	width: 300px; /*サムネイルの大きさ*/
}
.listCover .active {
	background: url(../img/activeArrow.gif)  no-repeat bottom center;
}
.listCover .listItem .selfRep {
	display: none;
}

/* .expandField
------------------------- */
.expandField {
	padding: 0;
	width: 100%;
	text-align: left;
	display: block;
	background: #333;
	float: left;
	position: relative;
	overflow: hidden;
}
.expandField .btnClose {
	top: 10px;
	right: 0;
	width: 60px;
	height: 60px;
	display: block;
	background: url(../img/close.png) no-repeat top left;
	position: absolute;
	overflow: hidden;
	cursor: pointer;
}
.expandField .btnPrev {
	top: 120px;
	left: 0;
	width: 60px;
	height: 60px;
	display: block;
	background: url(../img/prev.png) no-repeat top left;
	position: absolute;
	overflow: hidden;
	cursor: pointer;
}
.expandField .btnNext {
	top: 120px;
	right: 0;
	width: 60px;
	height: 60px;
	display: block;
	background: url(../img/next.png) no-repeat top left;
	position: absolute;
	overflow: hidden;
	cursor: pointer;
}
.expandField .selfRepInner {
	padding: 20px 50px;
	text-align: center;
	position: relative;
}
.expandField .selfRepInner .secLeft,
.expandField .selfRepInner .secRight {
	width: 50%;
	float: left;
}
.expandField .selfRepInner .secLeft {
	text-align: center;
}
.expandField .selfRepInner .secRight {
	text-align: left;
	width: 40%;
	color: #fff;
}
.secRight p {
  font-size: 16px;
  line-height: 1.2em;
}

.view{
  border:1px solid white;
  border-radius: 5px;
  padding:10px 0;
  width:60%;
  text-align: center;
  margin: 160px auto;
  transition: 0.3s ease-in-out;
}
.view:hover{
  background-color:white;
  color: #333;
  cursor: pointer;
}



/* ===========================================
	SizeAdjustment
=========================================== */
@media screen and (max-width: 959px) {
	.expandField .selfRepInner .secLeft img {
		width: 80%;
	}
}
@media screen and (max-width: 640px) {
	.expandField .selfRepInner .secLeft {
		display: none;
	}
	.expandField .selfRepInner .secRight {
		width: 100%;
		float: none;
	}
}

/* =======================================
	ClearFix
======================================= */
.listCover:before,
.listCover:after,
.expandField .selfRepInner:before,
.expandField .selfRepInner:after {
	content: " ";
	display: table;
}
.listCover:after,
.expandField .selfRepInner:after {clear: both;}
.listCover,
.expandField .selfRepInner {*zoom: 1;}
GoogleImgSearch.js
// JavaScript Document

$(function(){
	var setList = $('.listCover'),
	setItem = $('.listItem'),
	setReplace = $('.selfRep'),
	listBaseWidth = 200,
	thumbOpacity = 0.8,
	expandHeight = 340,
	expandFadeTime = 300,
	expandEasing = 'linear',
	switchFadeTime = 1000,
	switchEasing = 'linear';

	setList.each(function(){
		var targetObj = $(this);

		var findItem = targetObj.find(setItem),
		findElm = targetObj.find(setReplace);

		// リストアイテムクリック
		findItem.click(function(){
			if($(this).hasClass('active')){
				closeExpandActive = targetObj.find('.expandField');
				closeExpandActive.stop().animate({height:'0',opacity:'0'},expandFadeTime,expandEasing,function(){
					closeExpandActive.remove();
				});
				findItem.removeClass('active');
			} else {
				var setExpand = $('.expandField'),
				findExpand = targetObj.find(setExpand),
				thisElm = $(this).find(setReplace).html();

				// 展開ボックス制御
				if(0 < findExpand.size()){
					findExpand.empty().html(thisElm);
					$(this).after(findExpand).next().append('<span class="btnPrev"></span><span class="btnNext"></span><span class="btnClose"></span>');
					var setReplaceInner = $('.selfRepInner'),
					findInner = targetObj.find(setReplaceInner);
					findInner.css({opacity:'0'}).stop().animate({opacity:'1'},switchFadeTime,switchEasing);
				} else {
					$(this).after('<li class="expandField">' + thisElm + '</li>').next().css({height:'0', opacity:'0'}).stop().animate({height:expandHeight, opacity:'1'},expandFadeTime,expandEasing).append('<span class="btnPrev"></span><span class="btnNext"></span><span class="btnClose"></span>');
				}

				// スクロール位置調整
				var thisOffset = $(this).find('img').offset();
				$('html,body').animate({scrollTop:(thisOffset.top-10)},200,'linear');

				// 操作ボタン動作
				function switchNext(){
					var setActiveN = targetObj.find('.active');
					setActiveN.each(function(){
						var listLenghN = findItem.length,
						listIndexN = findItem.index(this),
						listCountN = listIndexN+1,
						findItemFirst = findItem.first();

						if(listLenghN == listCountN){
							findItemFirst.click();
						} else {
							$(this).next().next().click();
						}
					});
				}
				function switchPrev(){
					var setActiveP = targetObj.find('.active');
					setActiveP.each(function(){
						var listLenghP = findItem.length,
						listIndexP = findItem.index(this),
						listCountP = listIndexP+1,
						findItemLast = findItem.last();

						if(1 == listCountP){
							findItemLast.click();
						} else {
							$(this).prev().click();
						}
					});
				}
				function switchHide(){
					closeExpand = targetObj.find('.expandField');
					closeExpand.stop().animate({height:'0',opacity:'0'},expandFadeTime,expandEasing,function(){
						closeExpand.remove();
					});
					findItem.removeClass('active');
				}

				$(this).addClass('active').siblings().removeClass('active');

				var btnPrev = targetObj.find('.btnPrev'),btnNext = targetObj.find('.btnNext'),btnClose = targetObj.find('.btnClose');
				btnPrev.click(function(){switchPrev();});
				btnNext.click(function(){switchNext();});
				btnClose.click(function(){switchHide();});

			}
		});

		// サムネイルロールオーバー
		var agent = navigator.userAgent;
		if(!(agent.search(/iPhone/) != -1 || agent.search(/iPad/) != -1 || agent.search(/iPod/) != -1 || agent.search(/Android/) != -1)){
			findItem.hover(function(){
				$(this).stop().animate({opacity:thumbOpacity},200);
			},function(){
				$(this).stop().animate({opacity:'1'},200);
			});
		}

		// リキッド操作
		function listAdjust(){
			var ulWrap = targetObj.width(),
			ulNum = Math.floor(ulWrap / listBaseWidth),
			liFixed = Math.floor(ulWrap / ulNum);
			findItem.css({width: (liFixed)});
		}
		$(window).resize(function(){listAdjust();}).resize();
		$(window).load(function(){setTimeout(function(){listAdjust();},200);}); // for IE8
	});
});


詳しい説明はこちら
black-flag.net

header部分の制作

レスポンシブデザイン

以前、既存のサイトをモデルにしてレスポンシブサイトを制作し、jQueryプラグインを使いトップにスライダーを導入しましたが、モデルサイトに最も近い形のスライドショーを導入したパターンが今回のやつです。


今回のスライドショーの主なポイント

ブラウザー幅一杯にスライドを表示させる
左右の画像は半透明のブラーがかかっている
レスポンシブサイトなので、フリックにも対応


レスポンシブ対応サイト制作wideslider版
black-flag.net

広告を非表示にする

既存サイトのトレース キリン編

レスポンシブデザイン

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



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


f:id:yachin29:20170210120838p:plain


www.kirin.co.jp





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