sei2 のすべての投稿

大阪で、機械設計、Webデザイン、Webプログラミングの仕事を個人でしております。
職業訓練

基金訓練に行ってきました。(68日目)

コメントする


基金訓練(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は、配られたプリントで習っており、下に紹介している教本には載っていません。




職業訓練

基金訓練に行ってきました。(67日目)

コメントする


基金訓練(Webデザイン・プログラミング科)の67日目に行ってまいりました。
67日目は、jQueryの実習です。

67日目の内容は下記のとおりです。

１．表示・非表示のメソッドを使って、アコーディオンメニューを作成

slideDown、slideUpメソッドを使って、アコーディオンメニューを作成します。

プログラム例

script部
$(‘dt’).mouseover(function(){
　　$(this).addClass(‘mouseover’);
});
$(‘dt’).mouseout(function(){
　　$(this).removeClass(‘mouseover’);
});
$(‘dt’).click(function(){
　　$(‘dd:visible’).slideUp(500,function(){
　　　　$(‘dd:hidden’).prev().removeClass(‘menuOpen’);
　　});
　　if($(this).next().css(‘display’)==’none’){
　　　　$(this).next().slideDown();
　　　　$(this).addClass(‘menuOpen’);
　　}
});

ｃｓｓ部
dl{
width:200px;
border:solid 0px #555;
color:#838383;
}
dt{
background-color:#F8DAD6;
height:20px;
cursor:pointer;
border-bottom:solid 2px #ffffff;
padding-left:5px;
line-height:20px;
}
dd{
width:185px;
border-left:solid 5px #00ff00;
border-bottom:solid 2px #ffffff;
background-color:#FDF2F0;
padding:5px;
display:none;
}
dt .last{
border-bottom:none;
}
.mouseover{
background-color:#ffff00;
font-weight:bold;
font-size:120%;
}
.menuOpen{
border-left:solid 5px #00ff00;
border-bottom:none;
font-weight:bold;
font-size:120%;
}

HTML部
<dl>
<dt>メニュー1</dt>
<dd>内容1内容1内容1内容1内容1内容1内容1内容1内容1内容1内容1内容1</dd>
<dt>メニュー2</dt>
<dd>内容2内容2内容2内容2内容2内容2内容2内容2内容2内容2内容2内容2内容2内容2内容2内容2</dd>
<dt class="last">メニュー3</dt>
<dd>内容3内容3内容3内容3内容3内容3内容3内容3</dd>
</dl>

説明

$(‘dd:visible’)

可視状態にあるdd要素を示すセレクター。
（例の場合、開いているタブのテキスト部。)

$(‘dd:hidden’).prev()

非表示状態にあるdd要素の一つ前の要素を示すセレクター。
(例の場合、閉じているタブのｄｔ要素。)

$(this).next()

イベント対象の要素の次の要素を示すセレクター。
(例の場合、クリックされたｄｔ要素の次のｄｄ要素。)

結果

２．animate()メソッド

CSSプロパティを指定して、アニメーションで要素を、表示したり非表示にしたりします。

書式

$(‘セレクター’).animate(CSSプロパティ,スピード,動き,function(){
　　　　　　アニメーションが終わった時の処理
});

プログラム例

script部
$(‘.box’).click(function(){
　　$(this).animate({’top’:’100px’},1000);
　　$(this).animate({’left’:’100px’},500);
　　$(this).animate({’left’:’25px’,’top’:’25px’},2000);
});

ｃｓｓ部
.box{
　　width:30px;
　　height:30px;
　　background-color:#00ff00;
　　position:absolute;
　　left:25px;
　　top:25px;
　　cursor:pointer;
　　text-align:center;
　　line-height:30px;
}

HTML部
BOXをクリック！
<div class="box">BOX</div>

説明

$(this).animate({’top’:’100px’},1000);

イベント対象の要素を、CSS top:100px まで、1秒(1000ミリ秒)でアニメーションします。

結果

３．animate()メソッドの動きのプラグイン

easingプラグインを使って、変化のある動きのアニメーションが可能です。

書式

$(‘セレクター’).animate(CSSプロパティ,

　　　　　　{duration:スピード,easing:’関数名’},

　　　　　　function(){アニメーションが終わった時の処理}

);
<head>部に
<script type="text/javascript" src="jquery.easing.1.3.js"></script>
を記述します。srcは、プラグインのファイルの場所を指定します。
※プラグインのダウンロードは、
http://gsgd.co.uk/sandbox/jquery/easing/
からします。

プログラム例

script部
$(‘.box’).click(function(){
$(this).animate({’top’:’100px’},
　　　　　　{duration:1000,easing:’easeOutBounce’}
);
$(this).animate({’left’:’100px’},
　　　　　　{duration:1000,easing:’easeOutElastic’}
);
$(this).animate({’left’:’25px’,’top’:’25px’},
{duration:1000,easing:’easeInExpo’}
);
});

ｃｓｓ部
.box{
　　width:30px;
　　height:30px;
　　background-color:#00ff00;
　　position:absolute;
　　left:25px;
　　top:25px;
　　cursor:pointer;
　　text-align:center;
　　line-height:30px;
}

HTML部
BOXをクリック！
<div class="box">BOX</div>

説明

$(this).animate({’top’:’100px’},
　　　　　　{duration:1000,easing:’easeOutBounce’}
);

イベント対象の要素を、CSS top:100px まで、1秒(1000ミリ秒)で関数easeOutBounceを使用して、アニメーションします。
※easingプラグインの関数を使った動きは、
http://semooh.jp/jquery/cont/doc/easing/
で、見ることができます。

結果


備考

jQueryは、配られたプリントで習っており、下に紹介している教本には載っていません。




職業訓練

基金訓練に行ってきました。(66日目)

コメントする


基金訓練(Webデザイン・プログラミング科)の66日目に行ってまいりました。
66日目は、jQueryの実習です。

66日目の内容は下記のとおりです。

１．フォーカスイベント(その2)

前回の入力フォームに、未記入の時、警告するようにします。

プログラム例

script部
$(‘input’).focus(function(){
　　$(this).addClass(‘focused’);
});
$(‘input’).blur(function(){
　　$(this).removeClass(‘focused’);
　　if($(this).val()==”){
　　　　$(this).addClass(‘uninput’);
　　　　$(this).next().html(‘ 未入力！’);
　　}
　　else{
　　　　$(this).removeClass(‘uninput’);
　　　　$(this).next().html(”);
　　}
});

ｃｓｓ部
.focused {background-color:#ccffff;}
.uninput {background-color:#ffc0cb;}
span {color:#ff0000;font-weight:bold;}

HTML部
氏名：<input type="text" /><span></span><br />
メールアドレス：<input type="text" /><span></span><br />

説明

if($(this).val()==”){1}　else{2}

イベント対象のタグのvalueの値が空文字列のとき、1を実行し、それ以外は、2を実行します。
(例の場合、イベント対象のタグとはフォーカスが当たっているinputタグを指します。)

$(this).next().html(‘ 未入力！’);

イベント対象のタグの次のタグの中身を　未入力！　に書き換えます。
(例の場合、イベント対象の次のタグとは、spanタグを指し、中身とは、spanタグで囲まれた文字列を指します。)

結果

２．表示・非表示を切り替えるメソッド

アニメーションで要素を、表示したり非表示にしたりします。

メソッド

show()メソッド
表示するためのメソッドです。
hide()メソッド
非表示にするためのメソッドです。
slideDown()メソッド
上から徐々に表示するためのメソッドです。
slideUpメソッド
下から徐々に非表示にするためのメソッドです。
slideToggleメソッド
slideDown、slideUpを繰り返すためのメソッドです。
fadeIn
フェードインで表示するためのメソッドです。
fadeOut
フェードアウトで非表示にするためのメソッドです。

書式

$(‘セレクター’).show(スピード,function(){
　　　　　　アニメーションが終わった時の処理
});

３．表示・非表示のメソッドを使って、タブメニューを作成

前回の入力フォームに、未記入の時、警告するようにします。

プログラム例

script部
$(‘.tab1’).mouseover(function(){
　　$(this).addClass(‘focused’);
});
$(‘.tab1’).mouseout(function(){
　　$(this).removeClass(‘focused’);
});
$(‘.tab2’).mouseover(function(){
　　$(this).addClass(‘focused’);
});
$(‘.tab2’).mouseout(function(){
　　$(this).removeClass(‘focused’);
});
$(‘.text1’).show();
$(‘.tab1’).click(function(){
　　$(‘#text div’).hide();
　　$(‘.text1’).slideDown();
});
$(‘.tab2’).click(function(){
　　$(‘#text div’).hide();
　　$(‘.text2’).slideDown();
});

ｃｓｓ部
#tab div{
　　width:50px;
　　height:20px;
　　padding:5px;
　　text-align:center;
　　cursor:pointer;
　　float:left;
}
.tab1,.text1{
　　background-color:#9F6;
}
.tab2,.text2{
　　background-color:#FCC;
}
#text div{
　　width:110px;
　　padding:5px;
　　display:none;
　　clear:both;
}
.focused{
　　color:#F00;
　　font-weight:bold;
　　font-size:120%;
}

HTML部
<div id="tab">
<div class="tab1">タブ1</div>
<div class="tab2">タブ2</div>
</div>
<div id="text">
<div class="text1">タブ1の内容。タブ1の内容。タブ1の内容。タブ1の内容。タブ1の内容。</div>
<div class="text2">タブ2の内容。タブ2の内容。タブ2の内容。タブ2の内容。タブ2の内容。</div>
</div>

説明

CSS部　#text div{display:none;}

ページを読み込んだ時、#text　div　を非表示にします。

$(‘.text1’).show();

ページを読み込んだ時、.text　を表示します。

$(‘#text div’).hide();

#text　div　を非表示にします。

$(‘.text1’).slideDown();

.text1　を上からアニメーションしながら表示します。

結果


備考

jQueryは、配られたプリントで習っており、下に紹介している教本には載っていません。