WEBサイト制作の勉強

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

illustratorでWebサイトのカンプを作る

今回はillustratorでカンプを作ります。

f:id:yachin29:20160607201954j:plain



作例
http://yachin29.webcrow.jp/Cotorier/



まずはおおまかなレイアウトを決め、ワイヤーフレームを完成させます。ワイヤーフレームとは、Webページのおおまかなコンテンツ要素やレイアウトを示すものです。
作成する際はWebサイトとしての体裁や、情報の優先順位などを考えて、配置場所を考えながらレイアウトしていきます。
今回は、以下のコンテンツ要素を配置します。
この段階では細かいカラー設計はせず、グレースケールでカンプを制作していきましょう。


ヘッダー(サイトの名前やロゴ、目印になるものなど)
  • サイトの名前・ロゴ
  • タグライン
  • グローバルナビゲーション
メインのコンテンツ(見る人に伝えたいサイトの中身)
  • アイキャッチ画像
  • カフェの特徴の簡単な紹介と詳細へのリンク
  • メニューの一例(写真つきで数点)と詳細へのリンク
  • お知らせ(営業時間のお知らせなど)の新着リスト数点
  • 補助的なコンテンツ(補助的な情報や関連サイトの紹介など)
  • 営業時間・住所と詳細なアクセス方法へのリンク
  • ソーシャルアカウントへのリンク など
  • フッター(サイトの連絡先、著作権情報など)
  • コピーライト

使うテキスト

Cotorier Cafe

毎日の おいしいごはんと おまけをすこし

お店のこと
メニュー
アクセス

毎日食べたい、おうちみたいなごはんやおやつ

Cotorier Cafe(コトリエ カフェ)は、あなたのもうひとつの「おうち」に
なりたいごはんやさんです。毎日食べたくなるような、どこかホッとする
ごはんにおやつ、飲みものを揃えて、ゆっくりくつろげる空間でお迎えし
ます。気軽なおひるごはんに、お茶の時間に、会社帰りの晩ごはんに、
「ただいま」を心よりお待ちしています。

お店について

おすすめメニュー

すべてのメニュー

日替わりごはんセット
春野菜とあさりのチャウダー豆としらすのごはん、新ごぼうのきんぴら

週替わりカレー
甘辛たけのこカレー ゆでたまごつき

季節のおやつ
西か東か!さくらもち食べ比べ対決セット

ひとくち晩酌
今だけ!いちごごろごろサングリア


お店からのお知らせ
■ 2017-04-22 ゴールデンウィークの営業について

■ 2017-04-21 今週の日替わりメニュー(4/21 - 4/26)

■ 2017-04-14 今週の日替わりメニュー(414 - 4/19)

■ 2017-04-10 春限定のおやつがスタートしました!


こちらもどうぞ
Facebook
Twitter
Pinterest
Blog


店舗情報
地図・アクセス方法
住所 東京都杉並区高円寺南7丁目7-4 ことりやビル2F(東京メトロ丸ノ内線新高円寺駅から徒歩7分)
電話 03-0000-0000

営業時間 11:00 - 23:30(L.O. 23:00)
ランチタイム 11:00 - 15:00(L.O. 14:30)
定休日 日曜日・祝日

Copyright© Cotorier Cafe. All rights Reserved.

まずは環境設定をweb用にしましょう

  • [一般]メニューにある[キー入力]を「1px」に変更
  • [単位]メニューを選択し、設定できる4項目すべてを「ピクセル」に変更
  • [ガイド・グリッド]メニューを選択し、[グリッド]を「10px」、[分割数]を「10」に変更
新しいドキュメントを作る
  • [プロファイル]で「Web」を選択する
  • [サイズ]のオプションで[幅]を「1280px」、[高さ]を「1500px」にする
  • [新規オブジェクトをピクセルグリッドに整合]のチェックを外す

各要素を配置する

  • まずはcontainer要素を[幅]960px、[高さ]1500pxで作成する。
  • header部分は高さ100px
  • main部分の高さは400px
  • menu部分の高さは460px
  • info部分の高さは260px
  • access部分の高さは200px
  • footer部分の高さは80px

幅はすべて960px



次にテキストや画像を配置して行きますが、無造作に配置するのではなく、ガイドを使いグリッド状に配置して行きましょう。

960.gs


テキストを配置する

いったん[フォントサイズ]を「16px」、[行送り]を「24px」としておきます。これらの値は、ブラウザーで閲覧する際のテキストの標準的なサイズと、日本語フォントで可読性が保てる行間の標準的な数値です。後ほど見出しや本文などの用途によってそれぞれ調整します。

画像を配置する

メイン画像は自身で用意する。大きさは適宜。

f:id:yachin29:20160607003426j:plain


liginc.co.jp

<!doctype html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>カンプをコーディング</title>
</head>

<body>
<div id="container">
<header>
<h1>Cotorier Cafe</h1>
<p class="txt">毎日のおいしいごはんとおまけをすこし</p>
<p class="logo"><img src="img/logo.png" alt=""></p>
<nav>
<ul>
<li><a href="#">お店のこと</a></li>
<li><a href="#">メニュー</a></li>
<li><a href="#">アクセス</a></li>
</ul>
</nav>
</header>

<div id="main"></div>
<div id="menu"></div>
<div id="info"></div>
<div id="access"></div>
<footer></footer>
</div>
</body>
</html>

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

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

作業手順

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


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


f:id:yachin29:20150212084927p:plain

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

<body>
<div id="container">
<header>
<h1>LOFTのロゴ</h1>
<nav>
<ul>
<li id="sns"><a href="#">sns一覧</a></li>
<li id="shop"><a href="#">お店を探す</a></li>
<li id="menu"><a href="#">メニューを見る</a></li>
</ul>
</nav>
</header>

<div id="wrapper">
<div id="content">
<ul>
<li id="l-size"><img src="img/LOFT_l01.jpg" alt=""></li>
<li><img src="img/LOFT_s01.gif" alt=""></li>
<li><img src="img/LOFT_s02.jpg" alt=""></li>
<li><img src="img/LOFT_s03.gif" 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.gif" 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 id="sidebar">
<ul>
<li><img src="img/LOFT_m01.jpg" alt=""></li>
<li><img src="img/LOFT_m02.jpg" alt=""></li>
<li class="last"><img src="img/LOFT_m03.jpg" alt=""></li>
</ul>
</div>
</div>
</div>
<footer><img src="img/LOFT_footer.gif" alt=""></footer>
</body>
</html>
@charset "utf-8";
/* CSS Document */

html,body,div,header,nav,footer,h1,p,ul,li {
  margin:0;
  padding:0;
  line-height:1.0;
}
ul {
  list-style:none;
}
a {
  text-decoration:none;
}
img {
  border:none;
  vertical-align:bottom;
}

body {
  background:#efa246;
}
#container {
  background:#eb8b36;
  overflow:hidden;
  width:960px;
  margin: 0 auto 100px;
  position:relative;
}
header {
  width:120px;
  float:left;
}
h1 {
  width:120px;
  height:162px;
  background:url(img/LOFT_logo.gif) no-repeat;
  text-indent:100%;
  white-space:nowrap;
  overflow:hidden;
}
nav {
  position:absolute;
  bottom:0;
  left:0;
}
nav li#sns a {
  display:block;
  width:120px;
  height:45px;
  background:url(img/LOFT_nav01.gif) no-repeat;
  text-indent:100%;
  white-space:nowrap;
  overflow:hidden;
}
nav li#shop a{
  display:block;
  width:120px;
  height:90px;
  background:url(img/LOFT_nav02.gif) no-repeat;
   text-indent:100%;
  white-space:nowrap;
  overflow:hidden;
}
nav li#menu a {
  display:block;
  width:120px;
  height:90px;
  background:url(img/LOFT_nav03.gif) no-repeat;
   text-indent:100%;
  white-space:nowrap;
  overflow:hidden;
}
#wrapper {
  float:right;
  overflow:hidden;
}
#content {
  width:600px;
  background:#C08283;
  float:right;
}
#content ul {
  width:600px;
  overflow:hidden;
}
#content li {
  float:left;
  margin:9px 12px;
  width:96px;
  height:72px;
}
#content li#l-size {
  width:456px;
  height:342px;
}
#sidebar {
  width:240px;
  float:left;
}
#sidebar li {
  width:216px;
  height:162px;
  margin: 9px 12px 18px 12px;
}
#sidebar li.last {
  margin-bottom:9px;
}
footer {
  width:100%;
  height:26px;
  background:#000000;
  text-align:right;
}

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

CSSスプライト

CSSスプライトとは複数の画像を1つの画像にまとめる事でサイトの読み込み速度を速くする手法です。FacebookGoogleでも使われている手法です。

f:id:yachin29:20160322014753p:plain

 

メリット
画像の読み込みが1回で済むので、サイトの読み込み速度が速くなる

 

デメリット
サイズやデザインの更新が面倒
background-positionの理解が必要

今回はナビゲーションボタンにCSSスプライトを使ってみましょう
f:id:yachin29:20160322014851p:plain

 

 

広告を非表示にする

IE・EdgeでSVG画像が表示されない時に気をつけるポイント

f:id:yachin29:20170905125623j:plain

もちろんIE11もEdgeもSVG形式の画像をサポートしているので表示自体は問題なく出来ますが、やはりSafariChromeなどでは問題無く表示されるのに、IE11とEdgeでは表示されない、もしくは形が崩れている、なんて事が良くあります。

その場合に気をつけて欲しいポイントはSVGタグ内の「width」と「height」の記述です。
SVGの書き出し方によってはSVGタグ内の「width」と「height」が省略されてしまう場合があります。そういったSVGデータをIE11やEdgeで見ると、大きさが極端にずれていたり、表示されなかったり、という事が起こります。

このように「width」と「height」の値が省略されている場合は、追加で記述しましょう

<svg  x="0px" y="0px" viewBox="0 0 512 512" style="width: 256px; height: 256px;" >

このように「width」と「height」の値を追加します。

<svg  x="0px" y="0px" width="512px" height="512px" viewBox="0 0 512 512" style="width: 512px; height: 512px;" >


また、書き出し方によっては、viewBoxの値とstyleの値がずれている場合があるので、その場合は「width」と「height」を追加するだけでは無く、viewBoxの値とstyleの値と「width」「height」の値を揃えましょう。

<svg x="0px" y="0px" width="512px" height="512px" viewBox="0 0 512 512" style="width: 256px; height: 256px;" >

viewBoxの値とstyleの値と「width」「height」の値を揃える

<svg  x="0px" y="0px" width="512px" height="512px" viewBox="0 0 512 512" style="width: 512px; height: 512px;">

隠し文字の設定

ナビゲーションを画像にする場合、気をつけたいのがliに記述している文字の扱いです。今回は文字も含めて画像にしているので、このままでは画像の文字とliに記述している文字がダブってしまい、画像の文字が読めなくなってしまいます。

ここで絶対にやってはいけなのが画像の文字を見せる為にliに記述している文字を消すという行為です。表示的にはダブっている文字が消えて綺麗に見えますが、文章構造上liの中身が空という事になってしまうので、絶対にNG


文章構造上liの中身は必須なので、CSSの方で文字を見えなくさせる記述をします。
方法はいくつかあります。以前は「text-indent: -999em;」と指定し、ものすごく左の方に文字を移動させる、という方法もありましたが、
現在最も使われている方法は、文字を右にずらし見えなくさせるという方法です。

右にずらす方法

#nav li a {
  display: block;
  width: ボタン幅;
  height: ボタン高さ;
  background: url(背景画像のパス) no-repeat;
  white-space: nowrap;
  text-indent: 100%;
  overflow: hidden;
}

white-spaceプロパティは、ソース中の半角スペース・タブ・改行の表示の仕方を指定する際に使用します。
「 nowrap」はソース中の連続する半角スペース・タブ・改行を、1つの半角スペースとして表示し、ボックスの大きさが指定されている場合にも、自動的に改行されません。

広告を非表示にする

CSS演習問題

f:id:yachin29:20170810015813p:plain


今回の制作の仕様

  1. header要素の幅960px高さは350px
  2. header画像は自身で制作し、「CAFE de FELICA」の文字を画像に入れる
  3. h1はテキストを挿入し、cssで隠す
  4. ボタンは4つを均等の幅で設置し、高さは50px
  5. コンテント要素の幅650px 高さ500px
  6. フッター要素の高さ50px
  7. コンテント要素内の文章は回り込みをさせる
  8. 各要素の空き・色は適宜
  9. ナビゲーションボタンをホバーした際に文字色と背景色が変わるように
  10. cssファイルは外部リンクでリンクさせる事

使用するテキスト

CAFE de FELICA


毎日食べたい、おうちみたいなごはんやおやつ

CAFE de FELICAは、あなたのもうひとつの「おうち」になりたいごはんやさんです。
毎日食べたくなるような、どこかホッとするごはんにおやつ、飲みものを揃えて、ゆっくりくつろげる空間でお迎えします。
気軽なおひるごはんに、お茶の時間に、会社帰りの晩ごはんに、
「ただいま」を心よりお待ちしています。ただいま、夏限定のメニューを多数ご用意しております。
ぜひお越しください。

コピーライトマーク CAFE de FELICA


使用する画像
f:id:yachin29:20170810020015j:plain

header画像は自身で用意する事(サイズ960px X 350px)


f:id:yachin29:20170901172657j:plain

広告を非表示にする