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

WEBサイト制作の勉強|フェリカテクニカルアカデミー

WEBサイト制作の勉強の為の解説ブログ。東京池袋のフェリカテクニカルアカデミーでは求職者支援訓練の一環として、WEBサイト制作を学ぶことができます。

クリッピングマスクとレイヤーマスク

Photoshop

画像のマスク処理

f:id:yachin29:20151002001709j:plain
マスク処理とは、特定の部分のみを表示し、それ以外の部分を表示しないようにする画像処理のことをいいます。



Photoshopには、クリッピングマスクとレイヤーマスクという2つの「マスク機能」があります。この2つのマスク機能を使い分けることによって、より効率的にデザインをすることが可能です。


クリッピングマスク

f:id:yachin29:20151002002549j:plain

クリッピングマスクは、切り抜きをしたいレイヤーのすぐ下にあるレイヤーの形に切り抜くことができます。
切り抜きは、文字でも図形でも手書きの図形でも可能です。
クリッピングマスクを作る場合は、レイヤーの順番に注意が必要です。

  • 切り抜きたいレイヤーが上
  • 切り抜きたい形が下のレイヤー

レイヤーマスク

選択範囲からマスクを作成します。
ブラシ・消しゴムなどでマスクの形を変更できるため、細かい微調整をしたい場合に向いています。
また、グラデーションツールを使う事で、徐々に変わる画像合成などが可能です。


f:id:yachin29:20151002010808p:plain



liginc.co.jp

CSS基礎2

CSSの基礎で一番解りにくいのが、marginとpaddingの違いです。

margin

marginとは要素の外側に出来る隙間の事です。

padding

paddingとは要素の内側に出来る隙間です。

言葉にすると一見簡単に思えますが、実際にレイアウトしてみるとシンプルなレイアウトではどちらでも結果として思い通りの形になるケースが多いため、上手く使い分けが出来ないままなんとなく使い続け、いざ複雑なレイアウトを始めると、使い分けが出来ていないせいで苦労する、というケースをよく目にします。なので、今のうちからmarginとpaddingの違いをしっかりと理解しておきましょう。


marginとpaddingは共に4つの方向別に指定する事が出来ます。

margin-top
margin-bottom
margin-left
margin-right

padding-top
padding-bottom
padding-left
padding-right

また、ショートハンドという省略した形でコーディングしていく機会も多いので、ショートハンドの形も一緒に覚えて行きましょう。


border ・・・ ボーダーのスタイル・太さ・色を指定する

borderプロパティは、ボーダーのスタイル・太さ・色をまとめて指定する際に使用します。 スタイル・太さ・色のうち、指定する値を任意の順序でスペースで区切って記述します。
borderは指定出来る事が多く、一度にすべてを覚えるのは大変です。最初はよく使用する物に限定して覚えて行きましょう。

borderの種類

solid=1本線で表示されます。
dashed=破線で表示されます。
dotted=点線で表示されます。

borderの幅

pxで指定

borderの色

文字色や背景色と同様、カラーコードやカラーネームで指定します。


borderもmarginとpadding同様ショートハンドでの指定が一般的なので、ショートハンドでの指定を覚えておきましょう。

h1 {
  border:solid 3px #FF0000;
}

f:id:yachin29:20160720132056g:plain


http://yachin29.com/photoshop2.zip

リセットCSSの概念

HTML+CSS

各ブラウザ(IEFireFoxChromesafariなど)は、要素毎にデフォルトでスタイルを独自にもっており、ブラウザーによって表示が異なる場合があります。それらをリセットするスタイルシートを一般的に「リセットCSS」と呼びます。
元々持っているブラウザーのデフォルトスタイルを有効に使っていこうという考え方もありますが、ブラウザー間の表示誤差(例えば、ブラウザ毎に文字サイズが変わったり、余白の広さが変わったりなど)に悩まされることも多々あり、それを解消するために一度まっさらな状態にリセットしてから CSS を書き始める、という考え方です。


リセットCSSの記述

リセットCSSの記述方法は色々あり、絶対的な物があるわけでありません。ネット上から既存のリセットCSSをダウンロードして、使用する場合もありますが、まずは1個づつ意味をしっかりと理解し、慣れてきたら徐々に複雑な物を使用して行きましょう。


/* reset */
HTMLで使用しているセレクター名 {
  margin: 0;
  padding: 0;
  line-height: 1.0;
  font-family:
    "Hiragino Kaku Gothic ProN",
    Meiryo, 
    sans-serif;
}

ブラウザーのデフォルトスタイルではol、ul にそれぞれ黒丸と番号が付いてしまいます。
それらを消す場合は以下の記述をリセットCSSに追加しましょう。

ul, ol {
  list-style: none; /* マーカーを消す */
}

さらに以下の記述も追加しましょう。

a {
  text-decoration: none; /* 下線を消す */
}
img {
  border: 0;/* リンクが設定されたimgにつくborderを消す */
}
img, input {
  vertical-align: bottom;
}

リセットCSSの例

/* reset */
html, body, div, h1, h2, h3, h4, h5, h6, p, ul, ol, li, dl, dt, dd, table, th, td {
  margin: 0;
  padding: 0;
  line-height: 1.0;
  font-family:
    "Hiragino Kaku Gothic ProN",
    Meiryo, 
    sans-serif;
}
table {
  border-collapse: collapse;
  border-spacing: 0;
}
ul, ol {
  list-style: none; /* マーカーを消す */
}
a {
  text-decoration: none; /* 下線を消す */
}
img {
  border: 0;
}
img, input {
  vertical-align: bottom;
}

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なので日本語での指定も含めています。

CSS基礎

HTML+CSS

CSSCascading Style Sheets

CSSとは、HTMLの要素をどのように修飾(表示)するかを指示する、W3Cによる仕様の一つ。HTMLによる文書構造と体裁を分離させるという理念を実現する為に提唱されたスタイルシートの具体的な仕様の一つ。

h1やpなどの意味付けはHTML

色や大きさやレイアウトなどはCSS


www.csszengarden.com


エンベットによる記述方法
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title></title>
<style>
</style>
</head>
<body>
</body>	
</html>
外部ファイルによる記述方法
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
</body>	
</html>

CCSの記述ルール

f:id:yachin29:20160308130715g:plain


最初に覚えるべきプロパティ

  • color = 文字の色
  • font-size = 文字の大きさ
  • background-color = 背景の色
  • width = 横幅
  • height = 高さ
  • margin = 要素の外側の空き
  • padding = 要素の内側の空き
  • border = 線の種類・太さ・色を指定する
主な線の種類
  • solid = 1本線で表示されます。
  • double = 2本線で表示されます。
  • dashed = 破線で表示されます。
  • dotted = 点線で表示されます。


www.tagindex.com

マークアップの復習

HTML+CSS

では実際にマークアップをしてみましょう。

新規ファイルを作る

ファイルを新規作成する場合は、[ファイル]メニュー →[新規作成]を選択します。

ファイルの保存

まず中身を記述する前に必ずファイルの保存をしましょう。ファイルを保存する場合は、[ファイル]メニュー →[名前を付けて保存]を選択し、[ファイルの種類]を選択し、ファイル名を入力します。この時必ず[ファイルの種類]はHTMLファイルを選択します。

上書き保存

ファイルを上書き保存する場合は、[ファイル]メニュー →[上書き保存]を選択(または、[上書き保存]ボタンをクリック)します。しかし、いちいちメニューからコマンドを選んでいると作業効率が悪いので、授業ではショートカットを積極的に使っていきます。保存のショートカットは「Ctrl」+「S」なので必ず覚えておきましょう。


マークアップのルール

  • 開始タグ 「<」と「>」の間に「要素」を書く。
  • 終了タグ「」の間に「要素」を書く。

<h1>一番重要な見出し</h1>


HTMLの基本形

  • 「html」~「/html」 は、そのルールで記述するための「箱」
  • 「head」~「/head」ブラウザに内容のルールを伝える(ブラウザでは不過視、コンピューターに向けた情報)
  • 「body」~「/body」 閲覧者に内容の意味を伝える(ブラウザでは可視、人間に向けた情報)
<html>
<head>

</head>
<body>

</body>
</html>

この時大事なのは上から順に書いて行くのではなく、構造と意味を理解し、各タグ毎に記述していきます。


タイトルを追加する
<html>
<head>
<title>はじめてのHTML入力練習</title>
</head>
<body>

</body>
</html>

今回覚えるタグ(要素)

  • h1~h6 見出し(h1,h2,h3,h4…と、数が大きくなるほど見出しは小さくなります)
  • 段落(文章)
  • ul(unordered list) 順不同リスト
  • ol(ordered list) 順序が決まっているリスト
  • li リストタグ (ul もしくは ol と一緒に使います)

画像の挿入とリンク

画像を挿入されるには「img」タグを使用します。

<img src="画像の置いてある場所"  alt="代替え文字">

img = image
src = source

ハイパーリンク

リンクの無いWebサイトはこの世界に存在しません。リンク=webと言っても良いので、しっかりと理解し覚えておきましょう。

テキストリンク
<a href="移動先の住所(パス)">テキストリンク</a>

a:anchor
href:hyper reference


画像リンク
<a href="移動先の住所(パス)"><img src="画像の置いてある場所" alt="代替え文字"></a>
メールリンク
<a href="mailto:メールアドレス">お問い合わせ</a>

相対パス絶対パス

パスには相対パス絶対パスの2つがあります。この2つの違いをしっかりと理解する事がWeb初学者とって1番大事な事です。

相対パス

ハードディスクなどでファイルやフォルダの所在を示す文字列(パス)の表記法の一つで、起点となる現在位置から、目的のファイルやフォルダまでの道筋を記述する方式。上位フォルダを「..」であらわす。
ひとつ上の階層を表すには「../」を使います。


絶対パス

絶対パスとは、http://から始まるアドレス(URL)を使ってファイルの場所を指定することです。この絶対パスは、おもに他のサイトにリンクしたりする場合に使います。

Photoshop 基礎

Photoshop

Photoshopとはビットマップ画像データを編集するソフトです。
ビットマップ画像とは、ピクセル(小さな四角)を用いて表現していく画像形式の事です。簡単に言うとPhotoshopで作られた物はすべて小さな点の集合体です。

Photoshopの基本的な使い方

Photoshopで行う作業は大きく別けると以下の3つ

  • 画像を作る。
  • 画像を補正する。
  • 画像を加工する。

Photoshopの初期化
目的は、無駄に消費されているメモリの記憶をリセットすること。
アイコンをダブルクリック等で起動。
このとき[Ctrl]+[Alt]+[Shift]を押したままに。
Adobe Photoshop設定ファイルを削除しますか?」とダイアログがでる。

  • カラー設定は「Web・インターネット用 - 日本」
  • 環境設定で注意する所は「単位・定規」Webは必ずPixelに。
  • ヒストリーの数を増やすと便利だが、増やし過ぎるとメモリーが足りなくなる。


・選択範囲を取る

  • 選択ツール
  • 自動選択ツール
  • マグネット選択ツール

などで選択範囲を取る。
微調整はクイックマスクモードで作業する。




・画像間の移動
別のファイルに選択範囲を切り取って移動

  1. 「練習_1」→「sky.psd」と「ダッキー.psd」を開く。
  2. 「ダッキー.psd」の中から選択範囲を決める。
  3. 「選択ツール」で選択範囲を「tsky.psd」の画面の上に移動する。
  4. ダッキーちゃんをちょうど良い大きさに「自由変形」で変更する。




・ビネット効果



素材データ

既存サイトのトレース フッター部分とメガドロップダウンメニューの作成

レスポンシブデザイン

フッター部分の制作

PC時のレイアウト
f:id:yachin29:20160908003351j:plain

スマホ時のレイアウト
f:id:yachin29:20160908003504j:plain

<footer>
<div class="inner">
<ul>
<li><a href="#">商品情報</a></li>
<li><a href="#">○○○○○○</a></li>
<li><a href="#">○○○</a></li>
<li><a href="#">○○○</a></li>
</ul>
<ul>
<li><a href="#">キャンペーン</a></li>
<li><a href="#">○○○○○○○</a></li>
<li><a href="#">○○○○○</a></li>
</ul>
<ul>
<li><a href="#">エンタメ・レシピ</a></li>
<li><a href="#">○○○○</a></li>
<li><a href="#">○○○○○○○</a></li>
<li><a href="#">○○○○○○○○</a></li>
<li><a href="#">○○○○○○</a></li>
<li><a href="#">○○○○○</a></li>
<li><a href="#">○○○○</a></li>
</ul>
<ul>
<li><a href="#">CSV活動</a></li>
<li><a href="#">○○○○○○○</a></li>
<li><a href="#">○○○○○○○</a></li>
<li><a href="#">○○○○○○○○</a></li>
<li><a href="#">○○○○○○</a></li>
<li><a href="#">○○○○○○</a></li>
</ul>
<ul>
<li><a href="#">企業情報</a></li>
<li><a href="#">○○○○○○○○</a></li>
<li><a href="#">○○○○○○○○</a></li>
<li><a href="#">○○○○</a></li>
<li><a href="#">○○○○</a></li>
</ul>
<ul>
<li><a href="#">お客様相談室</a></li>
<li><a href="#">○○○○○○○</a></li>
<li><a href="#">○○○○○○○○○○</a></li>
<li><a href="#">○○○○○○○</a></li>
<li><a href="#">○○○○○○○</a></li>
<li><a href="#">○○○○○○○○</a></li>
</ul>
</div>
</footer>

最後にPC用のナビにメガドロップダウンメニューを入れます

f:id:yachin29:20160908004023p:plain

<nav class="pc-nav">
<ul>
<li class="nav1"><a href="#">商品情報</a>
<div class="Wrap">
<div class="wrapInner">
</div><!-- /.wrapInner -->
</div><!-- /.Wrap -->
</li>

メガドロップダウンメニューのjQuery

$(function(){
  $('.pc-nav > ul > li').hover(function(){
    Panel = $(this).children('.Wrap');
    Panel.each(function(){
    Panel.css({display:'block',opacity:'0'}).stop().animate({opacity:'1'},200);
    });
  },function(){
    Panel.css({display:'none'});
  });
});