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

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

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/

広告を非表示にする

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

Positionを使ったレイアウト

見本
f:id:yachin29:20150206105158j:plain


作例

index.html

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Patisserie camellia</title>
<link href="style.css" rel="stylesheet">
</head>
<body>
<div id="container">
<header>
<h1>Patisserie camellia</h1>
<ul>
<li id="info"><a href="#">Information</a></li>
<li id="menu"><a href="#">Menu</a></li>
<li id="access"><a href="#">Access</a></li>
<li id="mail"><a href="#">Mail</a></li>
</ul>
</header>
<div id="content">
<ul>
<li id="ph01"><img src="img/photo01.jpg" alt="プリン"></li>
<li id="ph02"><img src="img/photo02.jpg" alt="ショートケーキ"></li>
<li id="ph03"><img src="img/photo03.jpg" alt="ワッフル"></li>
<li id="ph04"><img src="img/photo04.jpg" alt="コーヒー"></li>
<li id="ph05"><img src="img/photo05.jpg" alt="キャンドル"></li>
<li id="ph06"><img src="img/photo06.jpg" alt="イチゴプリン"></li>
<li id="ph07"><img src="img/photo07.jpg" alt="イチゴスムージー"></li>
<li id="ph08"><img src="img/photo08.jpg" alt="ヨーグルト"></li>
<li id="ph09"><img src="img/photo09.jpg" alt="ライト"></li>
<li id="ph10"><img src="img/photo10.jpg" alt="コーヒー"></li>
<li id="camp"><img src="img/campaign.gif" alt="キャンペーン情報"></li>
</ul>
</div>
</div>  <!--/container-->
</body>
</html>


スタイルシート

@charset "utf-8";
/*   -リセット-  */
html, body, div, h1,p,ul, ol, li, p {
  margin: 0;
  padding: 0;
  line-height: 1.0;
  font-family:
    "Hiragino Kaku Gothic ProN",
    Meiryo, 
    sans-serif;
}
ul, ol {
  list-style: none; /* マーカーを消す */
}
a {
  text-decoration: none; /* 下線を消す */
}
img {
  border: 0;
  vertical-align: bottom;  /* 画像の下の隙間を無くす */
}

/*   -レイアウト-  */
body {
  background: #5B3E1C;
}
#container {
  background: #FFF url(img/shadow.gif) repeat-x left bottom;
  width: 800px;
  height: 410px;
  position: absolute;
  top:0;
  right:0;
  bottom:0;
  left:0;
  margin:auto;
}
header {
	width: 300px;
	height: 400px;
	position: absolute;
	top: 0;
	left: 0;
}
h1 {
  width: 267px;
  height: 129px;
  background: url(img/logo.gif) no-repeat;
  position: absolute;
  left: 30px;
  top: 240px;
	/*隠し文字*/
  text-indent: 100%;
  white-space: nowrap;
  overflow: hidden;
}
header ul {
	width: 94px;
	height: 100px;
  position: absolute;
  left: 30px;
  top: 25px;
}
header ul li a {
  display: block;
	width: 94px;
	height: 25px;	
  /*隠し文字*/
   text-indent: 100%;
   white-space: nowrap;
   overflow: hidden;


}
li#info a {
	background: url(img/info.gif) no-repeat;
}
li#info a:hover {
	background: url(img/info_h.gif) no-repeat;
}
li#menu a{
	background: url(img/menu.gif) no-repeat;
}
li#menu a:hover{
	background: url(img/menu_h.gif) no-repeat;
}
li#access a {
	background: url(img/access.gif) no-repeat;
}
li#access a:hover {
	background: url(img/access_h.gif) no-repeat;
}
li#mail a {
	background: url(img/mail.gif) no-repeat;
}
li#mail a:hover {
	background: url(img/mail_h.gif) no-repeat;
}


#content {
	width: 480px;
	height: 400px;
	position: absolute;
	top: 0;
	right: 0;
}

#content li {
	position: absolute;
}

li#photo1 {
  width: 160px;
  height: 160px;
	top: 80px;
	left: 320px;

}
li#photo2 {
  width: 160px;
  height: 160px;
	bottom: 0;
	left: 80px;
}
li#photo3 {
  width: 160px;
  height: 160px;
  left: 0;
  top: 0;
}
li#photo4 {
  width: 80px;
  height: 80px;
  left: 0;
  top: 160px;
}
li#photo5 {
  width: 80px;
  height: 80px;
  top: 0;
  left: 160px;
}
li#photo6 {
	width: 80px;
	height: 80px;
  left: 160px;
  top: 160px;
}
li#photo7 {
	width: 80px;
	height: 80px;
  left: 240px;
  top: 80px;
}
li#photo8 {
	width: 80px;
	height: 80px;
  left: 240px;
  top: 240px;
}
li#photo9 {
	width: 80px;
	height: 80px;
  left: 320px;
  bottom: 0;
}
li#photo10 {
	width: 80px;
	height: 80px;
  top: 240px;
	right: 0px;
}
li#cam {
	width: 170px;
	height: 100px;
	top: -23px;
	right: -15px;
}

ナビゲーションボタンを画像に置き換える

ナビゲーションボタンを画像に置き換え、2カラムレイアウトに組み込みましょう。

index.html

<!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></header>
<nav>
<ul>
<li id="home"><a href="#">Home</a></li>
<li id="food"><a href="#">Food</a></li>
<li id="info"><a href="#">Info</a></li>
<li id="access"><a href="#">Access</a></li>
</ul>
</nav>
<div id="content"></div>
<div id="sidebar"></div>
<footer></footer>
</div>
</body>
</html>
@charset "utf-8";
/* CSS Document */
/*リセット部分*/
html,body,ul,li {
  margin:0;
  padding:0;
  line-height:1.0;
}
ul {
  list-style:none;
}
a {
  text-decoration:none;
}

/*レイアウト部分*/
#container {
  width:800px;
  margin:0 auto;
}
header {
  width:800px;
  height:300px;
  background:url(img/header.png) no-repeat;
}
ul {
  width:800px;
}
li {
  width:200px;
  height:50px;
  float: left;
}
li a {
  display:block;
  line-height:50px;
  text-align:center;
  color:#222;
  border-right:1px solid #000;
  text-indent:100%;
  white-space:nowrap;
  overflow:hidden;
}
li#home a {
  background:url(img/home.png) no-repeat;
}
li#food a {
  background:url(img/food.png) no-repeat;
}
li#info a {
  background:url(img/info.png) no-repeat;
}
li#access a {
  background:url(img/access.png) no-repeat;
}
li#home a:hover {
  background:url(img/home_h.png) no-repeat;
}
li#food a:hover {
  background:url(img/food_h.png) no-repeat;
}
li#info a:hover {
  background:url(img/info_h.png) no-repeat;
}
li#access a:hover {
  background:url(img/access_h.png) no-repeat;
}
li:last-child a {
   border-right: none;
}
#content {
  width:600px;
  height:400px;
  background:#0099CC;
  float:left;
}
#sidebar {
  width:200px;
  height:400px;
  background:#FF3333;
  float:right;
}
footer {
  width:800px;
  height:100px;
  background:#663366;
  clear:both;
}