読者です 読者をやめる 読者になる 読者になる

求職者支援訓練webサイト制作科1月クラス

フェリカテクニカルアカデミー池袋の求職者支援訓練webサイト制作科1月クラスの授業解説ブログです。

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

Photoshop web制作

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

作業手順

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


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


f:id:yachin29:20150212084927p:plain


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

第1回実技テスト

f:id:yachin29:20170222151650p:plain



素材
http://yachin29.webcrow.jp/test/test_01.zip




使用テキスト

pickup stream

HOME
ABOUT
CONTACT

海岸のデコレーション

海岸には砂や貝殻しかないように思ってしまいますが、よく見ると草花も生えていることがわかります。ただし、海水や潮風、強い日差しなどの影響で、大きく育つものは見当たりません。その多くは小さく、地を這って伸びています。

こうした植物は「海浜植物」と呼ばれ、砂をかぶって埋もれても、茎が伸びてまた葉を出す仕組みになっています。

ところどころに顔を出す緑色の小さな葉っぱは、海岸をかわいくデコレーションしてくれます。海への道中で踏んづけてしまう前に、足元にあるものを観察してみるのもおもしろいですよ。

Main Menu

山と森林
海と海岸
都市と建築
地上と地下

Pickupstream
Copyright 絶対参照コピーマーク Pickupstream, all rights reserved.
広告を非表示にする

Photoshopでの文字ツールの使い方

Photoshop

文字ツールを使う

  • 文字入力(配置したい位置ではなく、別の開いているスペースで入力する)
  • 入力後、移動ツールで配置したい位置に置く
  • 見出しを書く時はクリックして文字を書き始める
  • 段落文を書きたい場合はドラッグで段落文の範囲を決める(禁則処理を「強い禁則」に選択すると、句読点などが行頭に来てしまうことを防ぐことができます)

行間・字間を調節する

  • 行間は文字サイズより少し大きめにする程度(例:23px/25px)
  • 字間を調節する際は、カーニングを「オプティカル」に設定


色々なツールを使い文字を見せる

  • 縦書
  • 自由変形
  • ワープテキスト
  • 境界線

など

練習素材

f:id:yachin29:20150226235722j:plain


使用するテキスト(実際に作業する際にはコピペせずにテキストツールを使って入力しましょう)

15時~LASTまではスイーツセットに出来ます!
季節のケーキ+ホットコーヒーで980円、ランチタイムはミニサイズが300円です。ぜひお試し下さい。

ホワイトチョコレート
ホワイトチョコをふんわりとしたくちどけのムースに。
甘さ控えめで男性にもおすすめ!
¥680円

洋梨の焼きカスタードタルト
洋梨とたっぷりカスタードクリームをいれて
焼き上げたタルトです。

完成

f:id:yachin29:20150226235808j:plain

Webの文字組み

Webの場合、紙媒体に比べると細かい文字組みは出来ませんが、それでも基礎に則って文字組みをおこなうことはデザインを行ううえでとても重要です。気をつけるポイントは多数ありますが、
最低限のことだけでも注意すれば、今より格段に文字を美しく見せることができます。
特に日本語の場合、1つの文章内にひらがな・カタカナ・漢字・全角英数字・半角英数字など様々な形の文字が混ざっている事があり、それぞれの特徴を知り、それに合わせた文字組みが必要になってきます。

  • ひらがな、カタカナは原則として詰める
  • 句読点などの記号も詰める
  • 括弧は一番細いフォントを選ぶ
  • 単位は小さな文字サイズにする
  • 助詞は一回り小さいフォントサイズにする


stocker.jp

2カラムの演習素材

CSS応用

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


ソースコード

<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>2カラムの演習</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<header>
<h1>インテリアショップ・カサブランカ</h1>
<p class="txt">家具・インテリアなら家具通販のカサブランカ。<br>北欧デザインのベッドなどのインテリアをお選びいただけます。</p>
<p class="photo"><img src="img/header.jpg" alt="#"></p>
</header>
<nav id="top_menu">
<ul>
<li><a href="#">HOME</a></li>
<li><a href="#">ABOUT</a></li>
<li><a href="#">CONTACT</a></li>
</ul>
</nav>

<div id="wrapper">
<div id="content">
<h2>くつろぎの空間を演出</h2>
<p>インテリアショップカサブランカへようこそ!<br>
ヨーロッパ家具・インテリアをイタリア・スペインより直輸入。<br>
居心地の良いダイニングルーム、心安らぐリビング、ベッドルーム。<br>
今、求められる快適空間をカサブランカはご提供します。</p>
<p><img src="img/bed.jpg" alt="#"></p>

<p>まるでフランス映画に出てくるようなスタイルのアイアンベッドです。こんなベッドに横たわるあなたはヒロインです。 プリンセスなハウススタイリングを演出するお道具として、お使いください。<br>
素材は質量感のあるロートアイアンを使用しております。マットはポケットコイルをご用意しております価格にはマットが含まれております。手作業で製作しているため、それぞれ微妙に表情が異なります。あらかじめご了承ください。</p>
</div>
<div id="sidebar">
<p><img src="img/ad.jpg" alt="#"></p>
<h2>CATEGORIES</h2>
<nav id="side_nav">
<ul>
<li><a href="#">ソファー</a></li>
<li><a href="#">ベッド</a></li>
<li><a href="#">テーブル</a></li>
<li><a href="#">キッチン</a></li>
</ul>
</nav>
</div>
</div>
<footer>
<div class="inner">
<p>CASA BLANCA</p>
<p><small>Copyright &copy; CASA BLANCA, all rights reserved.</small></p>
</div>
</footer>
</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 {
  vertical-align:bottom;
}


header {
  width:960px;
  margin:0 auto;
  padding-top:10px;
}
h1 {
  width:180px;
  height:46px;
  background:url(../img/logo.png) no-repeat;
  text-indent:100%;
  white-space:nowrap;
  overflow:hidden;
  float:left;
  margin-bottom:20px;
}
.txt {
  float:right;
  line-height:1.5;
  font-size:14px;
}
#top_menu {
  width:100%;
  height:50px;
  background:#CC0000;
}
#top_menu ul {
  width:960px;
  margin:0 auto;
  overflow:hidden;
  background:#993333;
}
#top_menu li {
  width:120px;
  height:50px;
  float:left;
}
#top_menu li a {
  display:block;
  text-align:center;
  line-height:50px;
  border-right:1px solid #FFFF99;
  color:#FFFFFF;
} 
#top_menu li a:hover {
  background:#CC0000;
}
#wrapper {
  width:960px;
  margin:0 auto;
  overflow:hidden;
}
#content {
  width:640px;
  float:left;
}
#content h2 {
  padding:40px 0 10px;
  color:#990000;
  border-bottom:1px solid #000000;
  margin-bottom:30px;
}
#content p {
  line-height:1.6;
  margin-bottom:20px;
}
#sidebar {
  width:300px;
  float:right;
}
#sidebar h2 {
  color:#990000;
  padding:40px 0 10px 0;
}
#sidebar p {
  margin:40px 0 10px;
}
#side_nav ul {
  height:200px;
}
#side_nav li {
  height:50px;
}
#side_nav li a {
  display:block;
  padding-left:30px;
  line-height:50px;
  color:#222;
  border-top: 1px solid #333333;
  background:url(../img/listmark.png) no-repeat left 50%;
}
#side_nav li:last-child a {
  border-bottom: 1px solid #333333;
}
#side_nav li a:hover {
  background:#FFF0F8 url(../img/listmark.png) no-repeat left 50%;
  }
footer {
  width:100%;
  height:100px;
  background:#CC0000;
}
.inner {
  width:960px;
  margin:0 auto;
  padding-top:20px;
}
footer p {
  color:#FFFFFF;
  padding:10px 0 10px 0;
}
広告を非表示にする

配色の基本

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月版

CSS応用

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/

広告を非表示にする