WEBサイト制作の勉強

WEBサイト制作の勉強の為の解説ブログです。

第6回実技試験|レスポンシブサイトの制作

  • モバイルファーストでレスポンシブサイトにする事(ブレイクポイントは自由)
  • ロゴはsvg形式にする事
  • flexboxを1箇所以上で使用する事
  • .containerの幅には最大値を指定する事
  • img要素をフルード化する事
  • 画像のホバーアニメーションにcssのfilter機能を使う事
  • css3のanimation機能を使う事
  • cssのカスタムプロパティを1つ以上指定する事
  • コピーライトの西暦部分を動的(2019年になったら表示が2019になるよう)にする
  • 適切な余白、文字の大きさを各メディアクエリー内で指定する事
PCレイアウト

f:id:yachin29:20181109113040j:plain




SPレイアウト
f:id:yachin29:20181109113115j:plain




参考サイト
http://yachin29.com/school/test-5/

CSS3 filterでの画像加工

今までPhotoshopで行っていた、ぼかしやグレースケールなどの加工がcssだけで可能になりました。
それにより、フェルタ毎に複数の画像を用意する必要がなくなります。



cssのfilterプロパティで出来る事

  • grayscale(グレースケール)
  • saturate(彩度)
  • sepia(セピア)
  • hue-rotate(色相)
  • invert(色の反転)
  • blur(ぼかし)
  • brightness(明るさ)
  • contrast(コントラスト)
  • drop-shadow(ドロップシャドウ)
grayscale(値)

値:0~100%
備考:値が大きいほど、画像の色が白黒に近づく

saturate(値)

値:0~上限なし
備考:値が大きいほど、色が鮮やかになる。値の上限が無く、例えば10000%という値も設定可能。

sepia(値)

値:0~100%
備考:値が大きいほど、色が黒褐色に近づく。

hue-rotate(値)

値:0deg~360deg(上限・下限なし)
備考:360deg(1周)で元の色に戻る(-360degでも同じ)

invert(値)

値:0~100%
備考:値が大きいほど、写真のネガっぽくなる。

blur(値)

値:0px~上限なし
備考:値が大きいほど、ぼかしの度合いが大きくなる。値の上限が無く、例えば1000pxという値も設定可能


brightness(値)

値:0~上限なし
備考:値が大きいほど、明るさが大きくなる。値を値の上限が無く、0.67といった少数での値を指定可能。ちなみに値を0にすると色は真っ黒になる。

drop-shadow(値1 値2 値3 rgba(値4,値5,値6,値7)

値1~3:下限上限なし
値4~6:0~255
値7:0~上限なし
備考:値1は横方向への影、値2は縦方向への影、値3は影のぼかし具合を表す
値4~6で色の指定する(色の三原色rgb)
値7で明るさを指定する









migo-media.com

モバイルファーストでのコーディング

<!doctype html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>北欧家具のECサイトをモバイルファーストでトレース</title>
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" href="css/style.css">
</head>

<body>
<header>
<div class="header-inner">
<h1><img src="img/logo.svg" alt="ロゴ"></h1>
<p class="burgur" id="btn"><span></span></p>
</div>
<nav>
</nav>
</header>

<div class="container">
<div class="main">
<div class="inner">
<div class="photo one"></div>
<div class="txt one"></div>
</div>
<div class="inner reverse">
<div class="photo two"></div>
<div class="txt two"></div>
</div>
<div class="inner">
<div class="photo three"></div>
<div class="txt three"></div>
</div>
<div class="inner reverse">
<div class="photo four"></div>
<div class="txt four"></div>
</div>
</div><!--/.main-->
<div class="one-col"></div>

<div class="three-col">
<div class="three-col-1">
<div class="three-col-photo"></div>
<div class="three-col-txt"></div>
</div>
<div class="three-col-2">
<div class="three-col-photo"></div>
<div class="three-col-txt"></div>
</div>
<div class="three-col-3">
<div class="three-col-photo"></div>
<div class="three-col-txt"></div>
</div>
</div><!--/.three-col-->
<footer></footer>
</div><!--/.container-->
</body>
</html>




スタイルシート

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

:root {
  --bg_color: #f0ede7;
}

/* http://meyerweb.com/eric/tools/css/reset/ 
v2.0 | 20110126
License: none (public domain)
*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
box-sizing:border-box;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
/*モバイルレイアウト*/
body {
  background:var(--bg_color);
}
header {
  height:55px;
  background:#e4dfd6;
  margin-bottom:10px;
  padding:5px;
}
.header-inner {
  display:flex;
  flex-direction:row-reverse;
  justify-content:space-between;
}
h1 {
  width:150px;
  margin-right:10px;
}
.burgur {
  width:60px;
  height:45px;
  background:#EB6062;
  position:relative;
}
.burgur span {
  display:block;
  width:20px;
  height:2px;
  background:#444;
  position:absolute;
  top:0;
  right:0;
  bottom:10px;
  left:0;
  margin:auto;
}
.burgur span:after {
  content:"";
  display:block;
  width:20px;
  height:2px;
  background:#444;
  position:absolute;
  top:20px;
  right:0;
  bottom:0;
  left:0;
  margin:auto;
}
.container {
  max-width:1366px;
  margin:0 auto;
}
.photo {
  height:30vh;
  background: url(../img/main01.jpg) no-repeat center center/cover;
}
div:nth-of-type(2) .photo {
  background: url(../img/main02.jpg) no-repeat center center/cover;
}
.photo.three {
  background: url(../img/main03.jpg) no-repeat center center/cover;
}
.photo.four {
  background: url(../img/main04.jpg) no-repeat center center/cover;
}
.txt {
  height:60vh;
  background:#c87f63;
  margin-bottom:10px;
}
.txt.two {
  background:#e1cfb9;
}
.txt.three {
  background:#dbdbdb;
}
.txt.four {
  background:#FFFFFF;
}
.one-col {
  height:80vh;
  background:#c7a96e;
  margin-bottom:10px;
}
.three-col-photo {
  height:25vh;
  background:url(../img/3col-01.jpg) no-repeat center center/cover;
}
.three-col-2>.three-col-photo {
  background:url(../img/3col-02.jpg) no-repeat center center/cover;
}
.three-col-3>.three-col-photo {
  background:url(../img/3col-03.jpg) no-repeat center center/cover;
}
.three-col-txt {
  height:50vh;
  background:#e4dfd6;
  margin-bottom:10px;
}
footer {
  height:80vh;
  background:#bed5db;
}

@media screen and (min-width:768px){
header {
  height:150px;
}
.container{
  padding:0 10px 10px 10px;
}
.inner {
  display:flex;
  flex-wrap: wrap;
}
.photo {
  width:calc(66.66% - 5px);
  height:80vh;
  margin:0 10px 0 0;
  background:url(../img/aw18.png) no-repeat 20px 20px, url(../img/main01.jpg) no-repeat center center/cover;
}
div:nth-of-type(2) .photo {
  background: url(../img/main02.jpg) no-repeat center center/cover;
}
.photo.three {
  background: url(../img/main03.jpg) no-repeat center center/cover;
}
.photo.four {
  background: url(../img/main04.jpg) no-repeat center center/cover;
}
.txt {
  width:calc(33.33% - 5px);
  height:80vh;
}
.inner.reverse {
  flex-direction:row-reverse;
}
.inner.reverse .photo {
  margin:0 0 0 10px;
}

.three-col-1,.three-col-2,.three-col-3 {
  display:flex;
}
.three-col-photo {
  width:50%;
  height:60vh;
}
.three-col-txt {
  width:50%;
  height:60vh;
}
}
@media screen and (min-width:901px){
.three-col {
  display:flex;
}
.three-col-1,.three-col-2,.three-col-3 {
  width:calc((100% - 20px) / 3);
  flex-direction:column;
}
.three-col-1,.three-col-2 {
  margin-right:10px;
}
.three-col-photo {
  width:100%;
  height:40vh;
}
.three-col-txt {
  width:100%;
  height:60vh;
}
}

高機能なフィルタリングjQueryプラグイン 「Shuffle.js」

vestride.github.io


デモページ

http://yachin29.com/school/shuffle/






jQuery

$(function() {
		$('#btn li').on('click', function() {
			var $this = $(this),
				$grid = $('#animationList');

			$('#btn .active').removeClass('active');
			$this.addClass('active');
			$grid.shuffle($this.data('group'));
		});

		$('#animationList').shuffle({
			group: 'all',
			speed: 700,
			easing: 'ease-in-out'
		});
	});
htmlタグを参照文字で書く
<li><a href="img/04.jpg" data-lightbox="photo" data-title="<a href="https://www.kirin.co.jp/" target="_blank">サイトへ"><img src="img/03-thum.jpg" alt=""></a></li>

を参照文字に直すと

<li><a href="img/04.jpg" data-lightbox="photo" data-title="&lt;a href=&quot;https://www.kirin.co.jp/&quot; target=&quot;_blank&quot;>サイトへ&lt;/a&gt;">テキスト</a></li>

index.html

<!doctype html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>フィルタリングとモーダルの組み合わせ</title>
<style>
html,body,h1,ul,li {
  margin:0;
  padding:0;
}
ul {
  list-style:none;
}
a {
  text-decoration:none;
  color:#222;
}
img {
  vertical-align:bottom;
}
.container {
  width:840px;
  margin: 0 auto;
}
h1 {
  padding:20px 0;
  margin-bottom:60px;
}
.g-nav ul {
  display:flex;
  margin-bottom:60px;
}
.g-nav li {
  margin-right:20px;
}
.g-nav li a {
  display:block;
  padding:10px;
  font-size:18px;
}
.g-nav li a:hover {
  background:#DDD;
}
.g-nav li.active {
  background:#DDD;
}
.grid li {
  width:200px;
  float:left;
  margin:5px;
}
</style>
<link rel="stylesheet" href="css/lightbox.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script src="js/jquery.shuffle.min.js"></script>
<script src="js/lightbox.js"></script>
<script>
$(function() {
		$('#btn li').on('click', function() {
			var $this = $(this),
				$grid = $('#animationList');
			$('#btn .active').removeClass('active');
			$this.addClass('active');
			$grid.shuffle($this.data('group'));
		});
		$('#animationList').shuffle({
			group: 'all',
			speed: 700,
			easing: 'ease-in-out'
		});
	});
</script>
</head>
<body>
<div class="container">
<header>
<h1>Shuffle.js</h1>
<nav class="g-nav">
<ul id="btn">
<li class="active" data-group="all"><a href="#">all</a></li>
<li data-group="html"><a href="#">HTML&amp;CSS</a></li>
<li data-group="js"><a href="#">JavaScript</a></li>
<li data-group="php"><a href="#">PHP</a></li>
<li data-group="banner"><a href="#">バナー</a></li>
</ul>
</nav>
</header>
<div class="content">
<ul class="grid" id="animationList">
<li data-groups='["html"]'><a href="img/model1.jpg" data-lightbox="image-1" data-title="&lt;a href=&quot; &quot; target=&quot;_blank&quot;>サイトへ&lt;/a&gt;"><img src="img/00.jpg" alt=""></a></li>
<li data-groups='["js"]'><a href="img/model.jpg" data-lightbox="image-1"><img src="img/02.jpg" alt=""></a></li>
<li data-groups='["php"]'><a href="img/model.jpg" data-lightbox="image-1"><img src="img/03.jpg" alt=""></a></li>
<li data-groups='["banner"]'><a href="img/model.jpg" data-lightbox="image-1"><img src="img/04.jpg" alt=""></a></li>
<li data-groups='["php"]'><a href="img/model.jpg" data-lightbox="image-1"><img src="img/03.jpg" alt=""></a></li>
<li data-groups='["js"]'><a href="img/model.jpg" data-lightbox="image-1"><img src="img/02.jpg" alt=""></a></li>
<li data-groups='["html"]'><a href="img/model.jpg" data-lightbox="image-1"><img src="img/01.jpg" alt=""></a></li>
<li data-groups='["html"]'><a href="img/model.jpg" data-lightbox="image-1"><img src="img/01.jpg" alt=""></a></li>
<li data-groups='["banner"]'><a href="img/model.jpg" data-lightbox="image-1"><img src="img/04.jpg" alt=""></a></li>
<li data-groups='["banner"]'><a href="img/model.jpg" data-lightbox="image-1"><img src="img/04.jpg" alt=""></a></li>
<li data-groups='["js"]'><a href="img/model.jpg" data-lightbox="image-1"><img src="img/02.jpg" alt=""></a></li>
<li data-groups='["js"]'><a href="img/model.jpg" data-lightbox="image-1"><img src="img/02.jpg" alt=""></a></li>
<li data-groups='["banner"]'><a href="img/model.jpg" data-lightbox="image-1"><img src="img/04.jpg" alt=""></a></li>
<li data-groups='["php"]'><a href="img/model.jpg" data-lightbox="image-1"><img src="img/03.jpg" alt=""></a></li>
<li data-groups='["html"]'><a href="img/model.jpg" data-lightbox="image-1"><img src="img/01.jpg" alt=""></a></li>
<li data-groups='["js"]'><a href="img/model.jpg" data-lightbox="image-1"><img src="img/02.jpg" alt=""></a></li>
</ul>
</div>
</div>
</body>
</html>

background-clipとtext-fill-colorを使ってcssを使って文字で画像を切り抜く

以前、Photoshopクリッピングマスクを使い、文字で画像を切り抜く加工を行いましたが、css3の「background-clip」と「text-fill-color」を使う事で同じような表現が出来るようになります。

background-clip

background-clipプロパティは、背景の適用範囲を指定する際に使用します。テキスト部分に背景画像を適応させたい場合、

-webkit-background-clip: text;

と指定します。
※注意 2017月12月現在、-webkit-のベンダープレフィックスが記述が必要です。



さらに

-webkit-text-fill-color: transparent;

「text-fill-color」を transparentに指定する事で文字色を透過にする事が出来ます。transparentの代わりに「color: rgba(0,0,0,0);」でもOKです。

h1 {
  background:url(img/bg.jpg) no-repeat center 75%/cover;
  width:100%;
  height:70vh;
  text-align:center;
  font-size:200px;
  line-height:70vh;
  position:absolute;
  top:0;
  left:0;
  -webkit-background-clip:text;/*テキストの形でクリッピングする*/
  -webkit-text-fill-color:transparent;/*テキストの塗りを透明に*/
  white-space:nowrap;
  text-indent:1em;
  animation:txt-anime 20s 0.5s linear infinite;
}

codepen.io


creativity-class.xyz

SEOに適した無限スクロールの制作

SEOに適した無限スクロールの導入

FacebookTwitterPinterestなどのソーシャルメディアサイトが使っている事で一躍有名になった無限スクロール(英: Infinite Scrolling)ですが、今でもシングルページを利用したウェブサイト、特にコンテンツの量が豊富なギャラリー的なサイトではよく見かけます。
しかし、よく見られるjQueryを使ったシンプルな無限スクロールはコンテンツをすべて1つのHTMLファイル上に記述しておいて、スクロールするたびに「display:block」と「display:none」を使って表示させていく、というものです。人が見る分にはこの形でも良いでしょうが、Googlebot に対してとなると話が変わってきます。

ご自身のサイトのニュース フィードやピンボードで、ユーザーの利便性を考えて無限スクロール(英語)を使用している方もいらっしゃるでしょう。しかし、Googlebot に対してとなると話が変わってきます。無限スクロールでは、クローラーがユーザーの行動(スクロールやボタンを押してさらにアイテムを読み込むなど)を常にエミュレートできるとは限らないため、フィードやギャラリー内のすべてのアイテムにアクセスできないことがあります。クローラーがアクセスできないコンテンツは、検索結果に表示されることもないでしょう。

無限スクロール ページからリンクされている個別のアイテムを検索エンジンがクロールできるようにするには、無限スクロールを分割した一連のページ群を生成するようにしましょう。

f:id:yachin29:20160216192134p:plain

Google ウェブマスター向け公式ブログ: 検索エンジンとの相性を考慮した無限スクロールのベストプラクティス


pushStateによるブラウザの履歴の更新

pushStateとは?

pushStateとは、HTML5でサポートされるAPIです。
ページを遷移せずHTML(の一部)を変えた場合でもブラウザに履歴を残し、また一意のURLを割り当てることが可能です。

HTMLの中身が変わってもAjaxはページを遷移しないのでURLが同じままです(#以下が入れ替わるだけで一意のURLとして処理しない)。

ブラウザの戻るボタンを押しても前のコンテンツを再び表示させることはできません。
本当に前のページに戻ってしまいます。

なのでGoogleは、クロール・インデックスできるように特殊な仕様をサポートしてくれたわけです。

しかしpushStateを使えば、Ajaxで変化させたそれぞれのコンテンツに対してユニークなURLを割り当てられるのです。

つまり検索エンジンにとってクロール・インデックスしやすくなります。

Googleの記事では、無限スクロールは次々にページを捲っていく事と同じとしている。そのため、無限スクロールで新しいコンテンツが表示される度にブラウザの履歴(URL)を更新しなければいけない。さらにスクロールでページを進んだり戻ったりする度にURLを更新させる必要があります。


さらにJavaScriptが切れている状態でも手動でページ遷移出来るような設定も取り入れ、検索エンジンとの相性を考慮した無限スクロールにカスタマイズしましょう。


www.suzukikenichi.com

digiday.jp


前回の内容を踏まえて、今回は検索エンジンが処理しやすい無限スクロールを作っていきましょう。

ポイント
・無限スクロールページを、JavaScript が無効でもアクセス可能な形にする。
・ページのタイトル・サイトURLの最適化
・コンテンツを細分化する事で表示スピードの向上

特にページのタイトルの最適化は非常に大事です。通常の無限スクロールは1枚のhtmlファイルに無数のコンテンツが記述されていますが、今回のようにhtmlファイルを細分化する事で、コンテンツに応じたより細かいタイトルやURLの設定が可能になります。


github.com

デモページ

http://yachin29.html.xdomain.jp/infini-scroll/

<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>jScroll</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div id="container">
<h1>無限スクロール</h1>
<div class="wrapper">
<div class="pic">
<p><img src="img/01b.jpg"></p>
</div>
<div class="text">
<h3>新・平家物語</h3>
<p>『新・平家物語』は、吉川英治の歴史小説の大作。1950年から1957年まで「週刊朝日」に連載された。現行版は吉川英治歴史時代文庫全16巻。<br>
題材は『平家物語』だけでなく、『保元物語』『平治物語』『義経記』『玉葉』など複数の古典をベースにしながら、より一貫した長いスパンで源平両氏や奥州藤原氏、公家などの盛衰を描いた長編作品。</p>
</div>
</div><!--/.wrapper-->
<a href="http://yachin29.webcrow.jp/infini-scroll/book2/" id="next">next</a>
</div><!--/#container-->

<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script src="js/jquery.clever-infinite-scroll.js"></script>
<script>
		$('#container').cleverInfiniteScroll({
			contentsWrapperSelector: '#container',
			contentSelector: '.wrapper',
			nextSelector: '#next',
		});
	</script>
</body>
</html>

ポートフォリオのテンプレート

ポートフォリオを作るに当たって、WordPressやBootstrapなどのフレームワークを使用する事も視野に入れておきましょう。
それぞれの長所・短所を理解し、自身にとって最も有効だと思う物を選択する事が大事です。

bootstrapのテンプレート

coliss.com


tetra-themes.com

HTML5&CSS3ベースのテンプレート

coliss.com


photoshopvip.net