WEBサイト制作の勉強

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

既存サイトのトレース

<!doctype html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>フルスクリーンレイアウト</title>
<link rel="stylesheet" href="css/style.css">
</head>

<body>
<h1>ロゴ</h1>
<div class="top top-L">
<a href="#">
<div class="cap">
<h2>タイトル</h2>
<p class="txt">モードのハイライトをプレイバック!<br>VOGUE JAPAN撮りおろしのアーカイブビジュアル集。</p>
<p class="more">view more</p>
</div>
</a>
</div>
<div class="top top-R">
<a href="#">
<div class="cap">
<h2>タイトル</h2>
<p class="txt">モードのハイライトをプレイバック!<br>VOGUE JAPAN撮りおろしのアーカイブビジュアル集。</p>
<p class="more">view more</p>
</div>
</a>
</div>
<div class="btm btm-L">
<a href="#">
<div class="cap">
<h2>タイトル</h2>
<p class="txt">モードのハイライトをプレイバック!<br>VOGUE JAPAN撮りおろしのアーカイブビジュアル集。</p>
<p class="more">view more</p>
</div>
</a>
</div>
<div class="btm btm-C">
<a href="#">
<div class="cap">
<h2>タイトル</h2>
<p class="txt">モードのハイライトをプレイバック!<br>VOGUE JAPAN撮りおろしのアーカイブビジュアル集。</p>
<p class="more">view more</p>
</div>
</a>
</div>
<div class="btm btm-R">
<a href="#">
<div class="cap">
<h2>タイトル</h2>
<p class="txt">モードのハイライトをプレイバック!<br>VOGUE JAPAN撮りおろしのアーカイブビジュアル集。</p>
<p class="more">view more</p>
</div>
</a>
</div>
</body>
</html>


スタイルシート
>|css|@charset "utf-8";
/* CSS Document */

html,body,h1,h2,p {
margin:0;
padding:0;
line-height:1.0;
}

/*PCレイアウト*/
h1 {
width:160px;
height:160px;
background:url(../img/logo-0717.svg) no-repeat center center/cover;
position:absolute;
top:0;
right:0;
bottom:0;
left:0;
margin:auto;
z-index:1000;
text-indent:100%;
white-space:nowrap;
overflow:hidden;
}
.top {
width:50%;
height:50vh;
float:left;
position:relative;
overflow:hidden;
}
.btm {
width:33.33%;
height:50vh;
float:left;
position:relative;
overflow:hidden;
}
.top-L {
background:url(../img/L1.png) no-repeat center center/cover;
}
.top-R {
background:url(../img/L2.png) no-repeat center center/cover;
}
.btm-L {
background:url(../img/S1.png) no-repeat center center/cover;
}
.btm-C {
background:url(../img/S2.png) no-repeat center center/cover;
}
.btm-R {
background:url(../img/S3.png) no-repeat center center/cover;
}

/*キャプションレイヤー*/
.cap {
position:absolute;
top:0;
left:0;
width:100%;
height:50vh;
padding-top:100px;
background:rgba(255,0,51,0);
text-align:center;
color:#FFFFFF;
transition:0.2s;
}
.top:hover .cap {
padding-top:0;
background:rgba(255,0,51,1);
}
.btm:hover .cap {
padding-top:0;
background:rgba(255,0,51,1);
}
.cap h2 {
font-size:28px;
padding: 80px 0 50px;
}
.cap .txt {
font-size:18px;
margin-bottom:60px;
line-height:1.5;
}
.cap .more {
width:30%;
margin: 0 auto;
padding: 10px 0;
border-top: 1px solid #FC3;
border-bottom: 1px solid #FC3;
}

高解像度ディスプレイへの対応

Retinaディスプレイ

Retinaディスプレイの特徴は画面解像度の高さにある。iPhone 4の画面サイズは前モデルのiPhone 3GSと同じ3.5インチのままであるが、Retinaディスプレイの搭載によって解像度は320×480ピクセルから640×960ピクセルに、つまり倍になっている。

640×960ピクセルという解像度は「デバイスピクセル(dpx)」と呼ばれ、3.5インチの画面上で表現されるサイズがCSSピクセル(csspx)」と呼ばれています。

ディスプレイの高解像度化により、「デバイスピクセル」と「CSSピクセル」という二つの概念を分けて考える必要がでてきました。

サイトを制作する場合には、ビットマップで画像を作る際は「デバイスピクセル」を、CSSで幅・高さを指定する際は「CSSピクセル」を基準に作って行きます。


f:id:yachin29:20160330005936p:plain


また、「デバイスピクセル」を「CSSピクセル」で割った数値を「devicePixelRatio」と言います。
例 iPhone5は「デバイスピクセル(画面解像度)」が640px✕1136pxで、「CSSピクセル」が320px✕568pxなので「DevicePixelRatio」が2になります。



devicePixelRatio 1とdevicePixelRatio 2の異なる両方の解像度で画像を綺麗に表示するために、メディアクエリを使いコントロールします。その際に用いられるのが、
「-webkit-device-pixel-ratio」です。

@media only screen and (-webkit-min-device-pixel-ratio: 2),
       (min-resolution: 2dppx)  {
#header {
  background-image: url(XXX.png);
}
}

f:id:yachin29:20150622170415p:plain

f:id:yachin29:20150622170401p:plain





blog.webcreativepark.net
からの抜粋

今後のスマートフォンサイトデザインをどのようにしていけばよいかSNSで見かける悲鳴を拾い上げながらQ&A形式で答えて見たいと思います。

Q.1
iPhone 6の解像度が750×1334でdevice-pixel-ratioが2だとCSS解像度は375×667だけど横幅320pxでデザインしても大丈夫?

A.1
横幅320pxでデザインしても大丈夫。基本最近のスマホ対応では多解像度に対してリキッドでフィットするようにするのが主流。

リキッドの場合ベースデザイン320pxを375pxに広げて表現するのは難しくないが、ベースデザイン375pxを縮めて320pxで表現するのは至難の業なのでスマートフォンバイスでの最小幅である320pxでのデザインは当分続きます。

Q.2
iPhone 6の登場でスマホの横幅は360px以上が主流になるのに320pxでデザインするの?

A.2
iPhone 5sがターゲットデバイスから外れるまで320pxでデザインするのが続くと思う。結果としてAppleが横幅320pxを長い間死守していたことが320pxの呪縛として付きまとう形になった。

Q.3
iPhone 6 Plusのdevice-pixel-ratioは『3』。3倍画像でRetina対応したほうがよいの?

A.3
個人的にはコレまでどおり2倍画像のままでOK。すでに発売されているdevice-pixel-ratioが3のAndorid端末で検証したことがあるが3倍画像のほうが綺麗と認識できるものの、ファイルサイズなどのトレードオフを考えるとそこまで必死に対応することはない。(Web Clipアイコンはsizes="171x171"を追加してもいいかも)

結論
これまで通りでOK。

CSS3によるアニメーション・animation

CSS3によるアニメーションは大きく分けて、トランジション(transition)とアニメーション(animation)の2つに別ける事が出来ます。

CSS3におけるトランジション(transition)とアニメーション(animation)の違い


「transition」

  • 動かすために:hoverなどのきっかけが必要
  • トランジションでは実行後に元のプロパティ値に戻る
  • 比較的簡単な記述で動かす事が可能


「animation」

  • transitionより細かい設定が可能
  • 記述が複雑
  • 「@keyframes」の記述が必要

http://caniuse.com/などのサイトでブラウザサポート状況を確認する。

animation関連プロパティ

animation-name 必須

@keyframes で定義した名前を指定します。これを指定していないとアニメーションは実行されません。

animation-duration 必須

一回分のアニメーションを実行する時間の長さを指定します。

animation-timing-function

アニメーションのタイミングや進め方を指定します。
ease(初期値)-ゆっくり始まり、早くなり、ゆっくり終わる
ease-in -ゆっくり始まりだんだん早く
ease-out -早く始まり、遅くなる
ease-in-out -easeと似た感じ
linear -一定

weboook.blog22.fc2.com


animation-delay

要素が読み込まれてからアニメーションがいつ始まるかを指定します。初期値の 0 だとただちに実行されます。

animation-iteration-count (初期値は1)

アニメーションを繰り返す回数を数字で指定します。無限ループにするには infinite を指定。

animation-direction

アニメーションを繰り返す方向を指定します。

normal … 通常の方向で再生(初期値)
alternate … 奇数回で通常・偶数回で反対方向に再生(行って帰って行って帰って…という具合)
reverse … 逆方向に再生
alternate-reverse … alternate の逆方向に再生

animation-fill-mode

アニメーションの再生前後の状態を指定します。
none(初期値)
forwards … 再生後、最後のキーフレームの状態を保持
backwards … 再生前、最初のキーフレームの状態を適用
both … forwards と backwards の両方を適用



背景色が移り変わるアニメーション

body {
  background-color: #0CC;
  animation: bg-color 10s linear infinite;
}

@keyframes bg-color {
  0% { background-color: #0CC; }
  20% { background-color: #f1c40f; }
  40% { background-color: #1abc9c; }
  60% { background-color: #3498db; }
  80% { background-color: #9b59b6; }
  100% { background-color: #e74c3c; }
}

参考サイト

CSS3でアニメーション!transitionとanimationまとめ(サンプル付き) フラップイズム



CSS3アニメーションに挑戦!色が移り変わる背景を実装しよう | Webクリエイターボックス


www.nxworld.net




背景にグラデーションを掛けたアニメーション

f:id:yachin29:20151002002549j:plain


便利なジェネレーション

www.gradient-animator.com




SVGによるアニメーション

postd.cc

jakearchibald.com

バナーの制作

Webデザイナーとして任される最初の仕事として代表的なものがバナー広告の制作です。

バナーのサイズ

広告の場合、ある程度はサイズに規定があります。仕事の場合大抵クライアントの方から指定があります。1種類のバナーに対し様々なサイズを用意する場合もあるので、色々なサイズに適したレイアウトのパターンを覚えておきましょう。

300×250(Yahoo!/Google)PC/スマホ ※推奨

728×90(Yahoo!/Google)PC ※推奨

160×600(Yahoo!/Google)PC ※推奨

336×280(Google)PC ※推奨

320×50(Yahoo!/Googleスマホ ※推奨

320×100(Yahoo!/Googleスマホ ※推奨

文字を入れてみる

決めたサイズとメインカラーで背景レイヤーを作り、文言を入れてみる。

優先順位とジャンプ率

入れた文言に対し、訴求したい順に優先順位を決め、文字サイズやジャンプ率をここで決めましょう。

バナー全体のデザイン

フォントの種類や色、テーマに沿ったデザインを作っていきましょう。
中々アイデアが出ない場合は既存のバナーを参考にしましょう。

既存のバナー制作

既存のバナーをモデルにし、バナー画像を作成する。


ローソンフレッシュのバナー
サイズ:300x250

f:id:yachin29:20150116233657g:plain






通信制 科学技術学園高等学校のバナー
サイズ:300x250

f:id:yachin29:20161125092848j:plain



フリー素材

食材・料理や野菜・果物のフリー写真素材 無料画像のフード・フォト

www.pakutaso.com

Photoshopによるスライスとコーディング

既存のサイトを真似してコーディングしてみるのは、非常に良い練習なので、積極的にやりましょう。ただ、練習に向いているサイトとそうでないサイトがあるので、注意が必要です。

作業手順

1. 既存のサイトのキャプチャーを撮る
2. Photoshopで開き、各画像に沿ってガイドを引き、スライス
3. 見本を参考にコーディングしていく


http://yachin29.webcrow.jp/LOFT.zip


f:id:yachin29:20150212084927p:plain


index.html

<!doctype html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>スライスとコーディング</title>
<link rel="stylesheet" href="style.css">
</head>

<body>
<div class="container">
<header>
<h1>LOFT</h1>
<nav class="gnav">
<ul>
<li><a href="#"><img src="img/LOFT_nav01.gif" alt="sns一覧"></a></li>
<li><a href="#"><img src="img/LOFT_nav02.gif" alt="お店を探す"></a></li>
<li><a href="#"><img src="img/LOFT_nav03.gif" alt="メニューを見る"></a></li>
</ul>
</nav>
</header>

<div class="wrapper">
<div class="left">
<p><img src="img/LOFT_m1.jpg" alt=""></p>
<p><img src="img/LOFT_m2.jpg" alt=""></p>
<p><img src="img/LOFT_m3.jpg" alt=""></p>
</div>
<div class="right">
<ul>
<li><img src="img/LOFT_L01.jpg" alt=""></li>
<li><img src="img/LOFT_s01.jpg" alt=""></li>
<li><img src="img/LOFT_s02.jpg" alt=""></li>
<li><img src="img/LOFT_s03.jpg" alt=""></li>
<li><img src="img/LOFT_s04.jpg" alt=""></li>
<li><img src="img/LOFT_s05.jpg" alt=""></li>
<li><img src="img/LOFT_s06.jpg" alt=""></li>
<li><img src="img/LOFT_s07.jpg" alt=""></li>
<li><img src="img/LOFT_s08.jpg" alt=""></li>
<li><img src="img/LOFT_s09.jpg" alt=""></li>
<li><img src="img/LOFT_s10.jpg" alt=""></li>
<li><img src="img/LOFT_s11.jpg" alt=""></li>
<li><img src="img/LOFT_s12.jpg" alt=""></li>
<li><img src="img/LOFT_s13.jpg" alt=""></li>
<li><img src="img/LOFT_s14.jpg" alt=""></li>
</ul>
</div>
</div>
</div>
<footer><img src="img/LOFT_footer.jpg" alt=""></footer>
</body>
</html>

style.css

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

html,body,h1,p,ul,li {
  margin:0;
  padding:0;
}
ul {
  list-style:none;
}
a {
  text-decoration:none;
}
img {
  vertical-align:bottom;
}

body {
  background:#efa246;
  padding-top:9px;
}
.container {
  background:#eb8b36;
  width:960px;
  margin:0 auto 100px;
  overflow:hidden;
  position:relative;
}
header {
  width:120px;
  float:left;
}
h1 {
  width:120px;
  height:162px;
  background:url(img/LOFT_logo.gif) no-repeat;
  white-space:nowrap;
  text-indent:100%;
  overflow:hidden;
}
nav {
  width:120px;
  height:225px;
  position:absolute;
  bottom:0;
  left:0;
}
.wrapper {
  width:840px;
  float:right;
  overflow:hidden;
}
.left {
  width:240px;
  float:left;
  padding-top:9px;
}
.left p {
  margin:0 0 18px 12px;
}
.left p:last-child {
  margin-bottom:9px;
}
.right {
  width:600px;
  float:right;
}
.right ul {
  overflow:hidden;
}
.right li img {
  margin:9px 12px;
  float:left;
}
footer {
  width:100%;
  height:26px;
  background:#000000;
  text-align:right;
}


サイト制作のワークフローの一例
f:id:yachin29:20161020200618p:plain

レスポンシブデザイン基礎2

f:id:yachin29:20150520224634p:plain

レスポンシブWebデザイン(RWD)の制作

レスポンシブWebデザインでは、あらゆるデバイスに対して単一のWebページ(HTML)を使い、スクリーンサイズ(画面幅)を基準にCSSだけを切り替えてレイアウトを調整します。小さいスクリーンに対しては小さいスクリーンで見やすく操作しやすいレイアウトを、大きいスクリーンに対しては大きいスクリーンに適したレイアウトを提供します。





レスポンシブWebデザインは、「フルードグリッド(Fluid Grid)」「フルードイメージ(Fluid Image)」「メディアクエリー(Media Query)」の3つの技術的な要素で構成されます。

●フルードグリッド

 フルードグリッドは、Webページの要素を罫線や升目に沿って配置する「グリッドデザイン(Grid Design)」と、ブラウザーの横幅が変わってもレイアウトを維持したまま要素のサイズを調整する「フルードデザイン(Fluid Design)」を合わせたものです。レスポンシブWebデザインでは、最初にグリッドデザインによって部品や表示領域をpx単位で配置していき、レイアウトが整った後に、値を%に変換してフルードデザインに変更します。

●フルードイメージ

 フルードイメージは、レイアウトの大きさに追随して画像のサイズを拡大・縮小する手法で、CSSのみで実装できます。イギリスのコンサルティングファームClearleftのリチャード・ルター(Richard Rutter)氏によって提唱されました。

●メディアクエリー

 メディアクエリーは、画像解像度、ウィンドウの幅、デバイスの向きなどの指定条件にあわせて別々のCSSを適用する技術です。レスポンシブWebデザインではメディアクエリーを使ってスクリーンサイズに応じたCSSに切り替えます。

●ブレイクポイント

 ブレイクポイントとはデバイスサイズによってCSSを個別に適用させるために指定した画面サイズの値のことです。メディアクエリで指定します。ブレークポイントのデバイスサイズの値は特に決まっている訳ではなく、また、何分割にするのかも自由です。

メディアクエリーを使ったCSSの切り替えでは、CSSを切り替える条件である「ブレイクポイント(Break Point)」を決め、それぞれの条件に沿ったスタイルシートを記述していきます。

ブレイクポイントは決まった数や値がある訳ではありません。
例えばBootstrap3ではブレイクポインが4つあり、
1200px以上がPC(大画面)用
1199px~992pxがPC用
991px~768pxがタブレット
767px以下がスマホ
に分かれていましたが、

バージョンアップしたBootstrap4ではブレイクポイントが5つあり、
1200px以上がPC(大画面)用
1199px~992pxがPC用
991px~768pxがタブレット
767px~544pxがスマホ
543px以下がスマホ(小さいサイズ)用
に分かれました。これによって例えばiPhone 5, 6のポートレートランドスケープ時に、表示を切り替えることができるようになり、より柔軟にモバイル最適化が行えるようになりました。



今回のブレイクポイントは

ブレイクポイントは絶対的に決まった数値ではなく、その時々の要件や主要のデバイスサイズによって変わっていくので、数字を暗記するのではなく、意味を理解する必要があります。

CSSメディアクエリーの書き方

今回は1つのCSSファイル内にブレイクポイント毎にメディアクエリーを設定する方法で記述します。

@media (max-width:959px){

}


モダンブラウザーでは上記のように「@ media」のみでも動きますが、古いブラウザーにも対応させるには下記のような記述が必要です。

@media screen and (max-width:959px){

}

@media screen and (max-width:767px){ 


}
<!doctype html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>RWD基礎その2</title>
<meta name="viewport" content="width=device-width">
<style>
html,body,p {
  margin:0;
  padding:0;
}
#container {
  width:1000px;
  margin:0 auto;
}
header {
  width:1000px;
  height:100px;
  background:#F8108A;
}
nav {
  width:1000px;
  height:50px;
  background: #F5F421;
}
#wrapper {
  overflow:hidden;
}
#main {
  width:700px;
  height:400px;
  background: #28C6EF;
  float:left;
}
p#txt {
  font-size:24px;
  color:#FFF;
  margin-left:30px;
}
#sub {
  width:300px;
  height:400px;
  background: #FFAF03;
  float:right;
}
footer {
  width:1000px;
  height:50px;
  background: #787878;
}
@media screen and (max-width:999px) {
  /*タブレット*/
#container {
  width:100%;
  margin:0;
}
header {
  width:100%;
}
nav {
  width:100%;
}
#main {
  width:70%;
}
#sub {
  width:30%;
}
footer {
  width:100%;
}
}
@media screen and (max-width:767px) {
  /*スマホ用*/
#wrapper {
  overflow: visible;
}
#main {
  width:100%;
  height:400px;
  float:none;
}
#sub {
  width:100%;
  height:200px;
  float:none;
}
}
</style>
</head>
<body>
<div id="container">
<header></header>
<nav></nav>
<div id="wrapper">
<div id="main">
<p id="txt">テキストテキスト</p>
</div>
<div id="sub"></div>
</div>
<footer></footer>
</div>
</body>
</html>

レスポンシブデザイン基礎1

レスポンシブデザインとは?

レスポンシブWebデザイン(Responsive Web Design)とは、PC、タブレットスマートフォンなど、あらゆるデバイスに最適化したWebサイトを、単一のHTMLで実現する制作手法です。ブラウザーのスクリーンサイズを基準にCSSでレイアウトを調整することで、デバイスごとに専用サイトを用意することなく、マルチデバイスに対応したWebサイトを制作できます。

マルチデバイス対応にする必要性

この数年でスマートフォンからのネット利用者数、接続時間ともにものすごい勢いで増加しています。それに比べPCからの利用者は減少しています。国内の主要サイトもスマホからの利用者数の方がPCからの利用者より多くなっています。これは大手のサイトに限った事ではありません。このような状況を考えると、スマホファーストスクリーンという事が現実的に起こってきます。特にB to C向けのサイトに関してはマルチデバイス対応が必須です。

Googleが推奨するスマートフォンに最適化されたサイト構築

現在、Googleはマルチデバイス対応を強く推奨していて、対応したサイトの掲載順位を全世界的に引き上げています。


Google ウェブマスター向け公式ブログ: ウェブをさらにモバイル フレンドリーにするための取り組み


という事はGoogleが求めるスマートフォンに最適化されたサイト構築の方法をしっかりと理解する必要があります。
Googleのモバイルフレンドリーテストというサービスを使って、そのサイトがGoogleが求める方法で作られているか確認する事が出来ます。

ウェブマスター向けモバイルガイド
Welcome!  |  Search  |  Google Developers