webサイト制作の勉強|2017月7月クラスブログ

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

配色の基本

webサイトはおおまかに別けるとテキスト・画像・色の3つの情報から成り立っています。
3つの中でも色はユーザーに最初に伝わる情報なので、配色次第でサイトの第一印象が決まってしまいます。
初心者にとって配色は難しい部分ですが、まずは既存のサイトやサービスを良く調べ、一般的にその色が持つ印象やイメージをしっかりと理解し、上手く使いましょう。


www.slideshare.net


www.slideshare.net



補色

この中で1つだけ特に人気が出たカラーバリエーションがあります。それはどれでしょう?またどのような理由からでしょう。
f:id:yachin29:20160303140453j:plain



f:id:yachin29:20160303135303j:plain

配色ツール
nipponcolors.com



[ HUE / 360 ] The Color Scheme Application


Colours




参考サイト
satohmsys.info



www.find-job.net



Introduction - Material design - Material design guidelines


youtu.be

広告を非表示にする

font-familyの指定|2017年2月版

font-familyの指定

f:id:yachin29:20160726001758p:plain


font-familyとは表示される文字フォントの指定です。
基本的には表示させたいフォント(綺麗なフォント)から順に指定してきます。
注意が必要なのがwindowsで、windowsで使われる標準フォントはバージョンによって違うので、それを加味したフォント指定を行いましょう。

游書体

f:id:yachin29:20160726002331g:plain


游書体はWindows 8.1以降のWindowsおよび、OS X Mavericks以降のMacにバンドルされている、比較的新しいフォントです。

ただ、実際に指定してみると、Macでは綺麗なのに、Windowsでは文字がかすれたように見えて非常に読みづらくなってしまいます。
Macに搭載されている游ゴシックは「ミディアム」「ボールド」なのに対し、Windowsに搭載されているのは「細字」「標準」「中」「太字」(「中」は、Windows10から搭載)。
そのため、font-familyで「游ゴシック」と指定すると、Macでは「ミディアム」で表示されて綺麗なのに、Windowsでは「細字」で表示されるためにかすれてしまいます。
なので敢えて、「font-weight: 500;」の指定が必要になります。


ゴシック体での指定
font-family: "游ゴシック", YuGothic, "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", sans-serif;
font-weight: 500;
明朝体での指定
font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "MS P明朝", serif;


最新のブラウザーでは英語のみのフォント指定で大丈夫ですが、古いfirefoxでは英語での指定がNGなので日本語での指定も含めています

複数ページの作成

最近ではシングルページのサイトもよく見かけますが、ほとんどのサイトは複数ページをリンクさせていくという形でこちらの方が一般的です。
複数ページでサイトを作る際に気をつけないといけないのがフォルダー構成です。

以下のようにページ毎にフォルダーを作り、中のファイルは必ずindex.htmlという名前にしましょう。

f:id:yachin29:20160816004934j:plain


Google検索エンジン最適化スターターガイド

だいぶ古い情報ですが、webを作る際の大事なポイントがしっかりと書かれているので、必ず目を通しましょう。
http://static.googleusercontent.com/media/www.Google.com/ja//intl/ja/webmasters/docs/search-engine-optimization-starter-guide-ja.pdf


今回は4ページ構成のサイトを作ってみましょう。

使うテキスト

日本の四季
日本の気候は温暖でおだやかで、しかも春夏秋冬という四季にめぐまれています。
春には三寒四温、三日間寒さが続くと四日間暖かい日が続き、
そうしているうちに桜が咲き、夏が来る。
そして秋になり、また冬を迎える。
このように、日本の気候は少しづつ微妙に季節の顔を変えながら、こまやかに移り変わっていくのです。
春夏秋冬という四季に彩られた日本は、その恩恵ともいうべき、ゆたかな自然にもめぐまれ、その季節に応じたさまざまな文化を育んできたのです。






Copyright © Felica All Rights Reserved.






見本サイト
http://yachin29.webcrow.jp/season/

広告を非表示にする

CSSスプライト

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

f:id:yachin29:20160322014753p:plain

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

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

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

ソースコード

<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>1カラムレイアウトの復習</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="container">
<header>
<h1>Herb Kitchen</h1>
<p id="main_txt">イタリアの家庭料理のオリジナルレシピを紹介します。</p>
<nav>
<ul>
<li id="home"><a href="#">Home</a></li>
<li id="food"><a href="#">Food</a></li>
<li id="access"><a href="#">Access</a></li>
<li id="info"><a href="#">Info</a></li>
</ul>
</nav>
</header>
<div class="food_menu">
<h2>タコのカルパッチョ</h2>
<p><img src="img/food_01.jpg" alt="タコのカルパッチョ">
たこは低脂肪、低カロリーなだけでなく、コレステロールの上昇を抑える働きのあるタウリンが含まれます。<br>
レモン果汁などさわやかな酸味、セロリやかいわれ菜などの香りのある野菜を上手に加えると、塩分を抑えてもおいしいおつまみになります。<br>
たこのうまみを引き立てる、さわやかな青じそペーストはパスタやソテーのソースにも使えて便利な一品です。ニンニクや香草の香りが特長のソースは、素材の味をひき立てるビールや辛口の白ワインにピッタリ!スパークリングワインと合わせて、ちょっぴり気の効いた前菜としてもおすすめです。</p>
</div>

<div class="food_menu">
<h2>しらすのペペロンチーノ</h2>
<p><img src="img/food_02.jpg" alt="しらすのペペロンチーノ">
おうちでのランチはお手軽にすませたいですよね♪かつ、美味しければなおうれしい!今回は、ごはんの友のしらすを使った簡単パスタ、しらすのペペロンチーノをご紹介します。<br>
味付けはしらすの塩気とパスタの茹で汁を使います。ソースをあらかじめ作って茹で上がったパスタを絡めるので失敗知らずですよ。<br>
ペペロンチーノは基本の素材がダイレクトに出ます。スパゲティ、オイル、塩、にんにく、唐辛子。全てが上質だと出来上がりも素晴らしく違いますよ。</p>
</div>
<footer>
<p><small>Copyright &copy; <a href="#">Herb Kitcten Co.,Ltd.</a></small></p>
</footer>
</div>
</body>
</html>

スタイルシート

@charset "utf-8";
/* CSS Document */
html,body,h1,h2,p,small,ul,li {
  margin:0;
  padding:0;
  line-height:1.0;
}
ul {
  list-style:none;
}
a {
  text-decoration:none;
}
img {
  vertical-align:bottom;
}

/*レイアウト*/
body {
  background:url(img/bg.jpg) no-repeat right top;
}
#container {
  width:800px;
  margin: 0 auto;
}
header {
  margin-bottom:40px;
}
h1 {
  color: #339900;
  padding: 40px 0 20px;
  font-size:46px;
  font-weight:normal;
  font-family:Helvetica, Arial, sans-serif;
  letter-spacing:0.5em;/*文字間を空ける*/
}
#main_txt {
  margin-bottom:30px;
}
ul {
  width:800px;
  height:50px;
  overflow:hidden;
}
li {
  width:200px;
  height:50px;
  float:left;
}
li a {
  display:block;
  background: url(img/btn.png) no-repeat left top;
  line-height:50px;
  text-align:center;
  text-indent:100%;
  white-space:nowrap;
  overflow:hidden;
}
li#food a {
  background-position:-200px 0;
}
li#access a {
  background-position:-400px 0;
}
li#info a {
  background-position:-600px 0;
}
li#home a:hover {
  background-position:0 -60px;
}
li#food a:hover {
  background-position:-200px -60px;
}
li#access a:hover {
  background-position:-400px -60px;
}
li#info a:hover {
  background-position:-600px -60px;
}
h2 {
  color: #339900;
  border-left:20px solid #339900;
  padding-left: 15px;
  margin-bottom: 20px;
}
.food_menu {
  margin-bottom:40px;
}
.food_menu p {
  line-height:1.6;
}
.food_menu img {
  float: left;
  margin-right:10px;
}
footer p {
  padding-bottom:20px;
}
広告を非表示にする

2カラムレイアウトの演習

f:id:yachin29:20160318175839p:plain


使用するテキスト

卵料理カフェ Cockeyolly

Home
ニュース
メニュー
今月のおすすめ
オリジナル雑貨
マップ
メール

今月のおすすめ

きのこのオムライス

ふんわりアツアツのオムライスを、きのこたっぷりのドミグラソースでどうぞ。オムレツには新鮮な特選地卵を使って、ほんのり甘く仕上げています。:800円


シーフードスパゲッティシーフードスパゲッティ
バルサミコ風味

エビ・イカ・アサリの入ったシェフご自慢のスパゲッティです。バルサミコ酢と生クリームで作ったさっぱりソースをお楽しみください。:900円

©2017  卵料理カフェ Cockeyolly

使用する画像
http://yachin29.com/cockeyolly-img.zip


ソースコードの作例

<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>2カラムの練習</title>
<link rel="stylesheet" href="style.css">
</head>

<body>
<div id="container">
<header>
<h1>卵料理カフェ Cockeyolly</h1>
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">ニュース</a></li>
<li><a href="#">メニュー</a></li>
<li class="this"><a href="#">今月のおすすめ</a></li>
<li><a href="#">オリジナル雑貨</a></li>
<li><a href="#">マップ</a></li>
<li><a href="#">メール</a></li>
</ul>
</nav>
</header>

<div id="wrapper">
<div id="content">
<h2>今月のおすすめ</h2>

<div class="inner">
<h3>きのこのオムライス</h3>
<p class="txt">ふんわりアツアツのオムライスを、きのこたっぷりのドミグラソースでどうぞ。オムレツには新鮮な特選地卵を使って、ほんのり甘く仕上げています。<span>800円</span></p>
<p class="photo"><img src="img/photo01.jpg" alt="きのこのオムライス"></p>
</div>

<div class="inner">
<h3>シーフードスパゲッティバルサミコ風味</h3>
<p class="txt">エビ・イカ・アサリの入ったシェフご自慢のスパゲッティです。バルサミコ酢と生クリームで作ったさっぱりソースをお楽しみください。<span>900円</span></p>
<p class="photo"><img src="img/photo02.jpg" alt="シーフードスパゲッティバルサミコ風味"></p>
</div>
</div>
<footer>
<p><small>&copy;2017  卵料理カフェ Cockeyolly</small></p>
</footer>
</div>
</div>
</body>
</html>


スタイルシート

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

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

body {
  background:url(img/bg.png) repeat-y;
}
#container {
  width:800px;
}
header {
  width:180px;
  float:left;
}
h1 {
  width:82px;
  height:78px;
  margin: 20px auto;
  background:url(img/logo.gif) no-repeat;
  text-indent:100%;
  white-space:nowrap;
  overflow:hidden;
}
nav {
  width:180px;
  margin: 40px auto 0;
}
header li {
  height:40px;
}
header li a {
  display:block;
  color:#FFFFFF;
  text-align:center;
  line-height:40px;
  font-weight:bold;
}
header li.this a {
  color:#FFFF33;
}
header li a:hover {
  color:#FFFF33;
}
#wrapper {
  width:620px;
  padding-left:20px;
  box-sizing:border-box;
  float:right;
}
h2 {
  background:url(img/title.gif) no-repeat;
  width:231px;
  height:49px;
  text-indent:100%;
  white-space:nowrap;
  overflow:hidden;
  margin: 40px auto;
}

.inner {
  overflow:hidden;
  margin-bottom:20px;
}
h3 {
  color:#993300;
  border-left: 6px solid #FF6600;
  padding:5px;
  margin-bottom:20px;
}
p.txt {
  width:400px;
  float:left;
  line-height:1.6;
}
p.photo {
  width:185px;
  float:right;
}
footer {
  text-align:center;
  padding:20px 0;
  border-top: 1px solid #666666;

}

1カラムの復習

f:id:yachin29:20160806123753j:plain

使用テキスト

Herb Kitchen
イタリアの家庭料理のオリジナルレシピを紹介します。

タコカルパッチョ
画像
たこは低脂肪、低カロリーなだけでなく、コレステロールの上昇を抑える働きのあるタウリンが含まれます。
レモン果汁などさわやかな酸味、セロリやかいわれ菜などの香りのある野菜を上手に加えると、塩分を抑えてもおいしいおつまみになります。
たこのうまみを引き立てる、さわやかな青じそペーストはパスタやソテーのソースにも使えて便利な一品です。ニンニクや香草の香りが特長のソースは、素材の味をひき立てるビールや辛口の白ワインにピッタリ!スパークリングワインと合わせて、ちょっぴり気の効いた前菜としてもおすすめです。

しらすのペペロンチーノ
画像
おうちでのランチはお手軽にすませたいですよね♪かつ、美味しければなおうれしい!今回は、ごはんの友のしらすを使った簡単パスタ、しらすのペペロンチーノをご紹介します。
味付けはしらすの塩気とパスタの茹で汁を使います。ソースをあらかじめ作って茹で上がったパスタを絡めるので失敗知らずですよ。
ペペロンチーノは基本の素材がダイレクトに出ます。スパゲティ、オイル、塩、にんにく、唐辛子。全てが上質だと出来上がりも素晴らしく違いますよ
Copyright コピーライトマーク Herb Kitcten Co.,Ltd.




使用する画像

f:id:yachin29:20160806123909j:plain

f:id:yachin29:20160806123917j:plain

f:id:yachin29:20051013134629j:plain