基金訓練(Webデザイン・プログラミング科)の68日目に行ってまいりました。
68日目は、PhotoshopとHTML&CSSプログラミングの実習です。
68日目の内容は下記のとおりです。
１．フォトショップでデザインしたページをコーディング
基金訓練に行ってきました。(57日目)、基金訓練に行ってきました。(63日目)で、
フォトショップを使って作成したWebページをコーディングしていきました。
フォトショップで画像のスライス
- 「スライスツール」を使ってスライスしたい画像を四角形で囲みます。
(通常スライスツールは、「切り抜きツール」を長押しすれば出てきます。) - スライスした画像の各角を拡大して、ちゃんと範囲に入っているかどうか、目視で確認し、違っていれば、バウンディングボックスの各辺をドラッグして修正します。
- スライスした画像を右クリックして、「スライスオプションを編集」をクリックし、「スライスオプションウインドウ」を開きます。
- 「スライスオプションウインドウ」の項目の中の「名前」を、保存したい名称にし、「OKボタン」を押します。
(その名前のついたファイル名でサーバーにアップするので、半角英数字にします。） - 「ファイルメニュー」→「Webおよびデバイス用に保存」で、「Webおよびデバイス用に保存ウインドウ」を開きます。
- 画面上で、画像ファイルにしたいスライスをクリックして選択します。
（選択したスライスの枠は金色になります。）
（複数選択したい時は、Shiftキーを押しながら2個目以降をクリックしてください。） - 「プリセット」で、保存する画像形式を選び保存ボタンを押し「保存ウインドウ」を開きます。
(写真やグラデーションのついた画像はJPEG 高、それ以外と背景が透明の画像は、PNG-24または、GIFを選択します。) - ｢設定｣で「その他」を選択し、「出力設定ウインドウ」を開きます。
- 「最適化ファイル｣の｢画像をフォルダーに保存｣のチェックをはずし、「OKボタン」を押して、「保存ウインドウ」に戻ります。
(任意のフォルダーへ画像ファイルを保存するため。) - ｢スライス｣で、「選択したスライス｣を選択します。
- 保存したいフォルダーを選んで、「保存ボタン」を押せば、ファイル作成完了です。
※背景を透明にしたい時は、背景の部分の画像はあらかじめNoShowにしておきます。
コーディング
今回は、テキストエディタとして、ドリームウィバーを使用しました。
- 「ファイルメニュー」→「新規」で、「新規ドキュメントウインドウ」を開きます。
- 「ページタイプ」を「HTML」、「レイアウト」を「なし」、「ドキュメントタイプ」を「XHTML 1.0 Transitional」にして、「作成ボタン」を押し、新規HTMLドキュメントを作成します。
- 「ファイルメニュー」→「保存」で、名前をつけて保存します。
- <head>部に、タイトルなどの必要事項を書き込みます。
- ID付のdivを作成して、ヘッダーやフッターなどにグループ分けします。
例
<body>
<div id="container">
<div id="head">
</div><!–#head end–>
<div id="navi">
</div><!–#navi end–>
<div id=contents>
<div id="contL">
</div><!–#contL end–>
<div id="contR">
</div><!–#contR end–>
</div><!–#contents end–>
<div id="foot">
</div><!–#foot end–>
</div><!–#container end–>
</body> - フォトショップから、テキストを、グループ分けしたdiv内の対応する位置にコピペし、ロゴや画像は、それがわかるような内容で、対応する位置にテキストで打ち込みます。
例
<div id="contL">
特集 ←（ここの見出しは画像ですが、代替にテキストを入れておきます。）
HTML特集
HTMLの特集です。
CSS特集
CSSの特集です。
</div><!–#contL end–> - グローバルナビなどをリストにします。
例
<div id="navi">
<ul>
<li>HOME</li>
<li>HTML講座</li>
<li>CSS講座</li>
<li>お知らせ</li>
</ul>
</div><!–#navi end–> - 「ファイルメニュー」→「新規」で、「新規ドキュメントウインドウ」を開きます。
- 「ページタイプ」を「CSS」」にして、「作成ボタン」を押し、新規CSSファイルを作成します。
- 「ファイルメニュー」→「保存」で、名前をつけて保存します。
- HTMLドキュメントにmetaタグとlinkタグを<head>内に記入して、CSSファイルと関連付けします。
例
<meta http-equiv="Content-Style-Type" content="text/css" />
<link rel="stylesheet" href="style.css" type="text/css" /> - CSSファイルで、基本的な体裁の設定をします。
例
body{
margin:0;
padding:0;
font-size:100%;
font-family:"メイリオ", "ＭＳ ゴシック";
font-style:normal;
text-align:center;
text-decoration:none;
list-type;none;
color:#ffffff;
border-style:none;
}
container{
margin-left:auto;
margin-right:auto;
}
※bodyの設定の中で、ブラウザデフォルトの設定をクリアするところは、base.cssとして、別ファイル
にする方法もあります。 - 画像をHTMLに記述していきます。
例
<div id="contL">
<img src="image1.gif" width="100" height="30px" alt="特集"/>
<dl>
<dt>
HTML特集</dt>
<dd>HTMLの特集です。</dd>
・
・
・ - 見出しタグを記述します。
例
<div id="contL">
<h2>s<img src="image1.gif" width="100" height="30px"
alt="特集"/></h2>
・
・
・ - CSSで、レイアウトを整えていきます。
グローバルナビのマークアップ
ナビボタンを、CSSを用いてマウスオーバーで変化させるためには、背景画像で記述する必要があります。
その為、imgタグで設定できるaltが使用できないので、画像に対応するテキストが無く（画像に文字を書き込んだ場合）、このままではSEOによくないといわれています。
そこで、その問題を解決する為に、リスト要素のテキストを残したまま、そのテキストを見えなくする手法を紹介します。
例
HTML部
<ul>
<li class="navi1"><a href="#">メニュー1</a></li>
<li class="navi2"><a href="#">メニュー2</a></li>
</ul>
CSS部
ul{
margin:0;
padding:0;
list-style:none;
overflow:hidden;
}
li{
margin-left:5px;
float:left;
text-indent:-9999px;
overflow:hidden;
}
li a{
display:block;
width:50px;
height:50px;
background-repeat:no-repeat;
}
li.navi1 a{
background-image:url(image/kero_b.png);
}
li.navi2 a{
background-image:url(image/kero_g.png);
}
li.navi1 a:hover{
background-image:url(image/kero_r.png);
}
li.navi2 a:hover{
background-image:url(image/kero_r.png);
}
上の赤文字部なし
上の赤文字部あり
備考
jQueryは、配られたプリントで習っており、下に紹介している教本には載っていません。
実習で使用している教本
