2014-03-17

Javascriptを使った画像置換&Photoshopポラロイド風加工

f:id:sophisticatedweapon:20140317112042j:plain

Javascriptを使った画像置換：作成所要時間50分

画像採取、サイズ変更、レイアウト、Javascript

サムネイルをマウスオーバーで画像拡大表示

f:id:sophisticatedweapon:20140317123628j:plain

f:id:sophisticatedweapon:20140317125013j:plain

Javascriptを使った画像置換：作成所要時間20分

画像採取、サイズ変更、レイアウト、Javascript

サムネイルをマウスオーバーでカラー画像表示

f:id:sophisticatedweapon:20140317144718j:plain

Photoshopポラロイド風加工：作成所要時間５分

画像採取、写真加工、台紙加工

<!DOCTYPE html>

<head>

<style>

.imgbox {

margin: 0 auto;

width: 825px;

}

.mainimg {

float: left;

margin-right: 10px;

}

.thumbnail img {

margin: 0 10px 5px 0;

}

</style>

</head>

<body>

</div>

</div>

</body>

</html>

/////////////////////////////////////////////////////////////////////////////

<!DOCTYPE HTML>

<html>

<head>

<style>

#content {

margin: 0 auto;

width: 970px;

text-align: center;

font-family:

"ヒラギノ明朝 Pro W3",

"Hiragino Mincho Pro",

serif;

}

.img img{

margin:10px 10px;

}

</style>

</head>

<body>

<p>※画像上へマウスを移動すると、その画像をカラー表示できます。</p>

<p>

</p>

</div>

</div>

</body>

</html>

2014-03-17

テスト回答

【１】

【２】

【３】

1010

【４】

パイナップル

【５】

【６】

[1][2]

【７】

キー

【８】

.name

【９】

[] →　{ }

【１０】

document.write('あけましておめでとう！');

window.alert('今年もよろしく。');

</script>

【１１】

【１２】

【１３】

【１４】

var year = 365;

var day = 24;

var time = 60;

var minute = 60;

var ans = year * day * time * minute;

document.write('<h1>1年は',ans,'秒です。<\/h1>');

</script>

【１５】

document.write('<h1>長いメッセージの場合は、<br>');

document.write('改行します。<\/h1>');

</script>

【１６】

prompt('好きな花は？');

</script>

【１７】

var age;

age = prompt( '年齢を入力してください',20 );

if ( age >= 20 ) alert('あなたは成人ですね');

</script>

【１８】

<h1>お問い合わせフォーム</h1>

<p>内容；<textarea name="memo" rows="5" cols="40">お問い合わせ内容</textarea></p>

【１９】

<h1>ラジオボタン</h1>

<p>性別：

</p>

【２０】

<h1>チェックボックス</h1>

<p>スマートフォン：

<label><input type="checkbox" name="hoby" value="iPhone" checked>iPhone</label>

<label><input type="checkbox" name="hoby" value="Andoroid">Andoroid</label>

</p>

【２１】

<h1>パスワード入力</h1>

<p>パスワード：

</p>

【２２】

<h1>写真をアップロード</h1>

<p>写真：

</p>

2014-03-15

JavaScriptによる画像置換

f:id:sophisticatedweapon:20140315143202j:plain

JavaScriptによる画像置換：作成所要時間100分

Photoshopでサイズ変更と台紙作成、JavaScript

///////////以下、ソースコード////////////////////////////////////////////////////////////

<!DOCTYPE html>

<head>

<title>氷と雪の風景</title>

<style>

html, body, div, img, {

margin: 0;

padding: 0;

line-height: 1.0;

font-family:

"Hiragino Kaku Gothic Pro",

Meiryo,

sans-serif;

}

img {

border: none;

vertical-align: bottom;

}

.imgbox {

width: 620px;

margin: 50px auto;

}

.thumnail {

width: 610px;

padding-left: 50px;

}

.thumbnail img {

margin-right: 10px;

}

.mainimg {

width: 600px;

height: 600px;

margin-top: 10px;

padding-top: 15px;

background: url(img/back.jpg) no-repeat center -15px;

text-align: center;

}

</style>

</head>

<body>

</div>

</div>

</div>

</body>

</html>

2014-03-14

JavaScriptの練習

エラーチェックのためChromeで表示させ、要素を検証（consoleタブ選択

var：変数宣言　メモリに格納する

a=a+10　と　a+=10　は同義　　+=間にスペースは入れない

a++　１ずつ増やす

Array：配列

console.log()　プログラムの途中経過の確認に都度使用する

ダイアログボックス

prompt( メッセージ, デフォルトの値 )

文字列を数値に変換

parseInt( )

・TIPS

Dreamweaber

[Ctrl] + [space]　でスクリプトの候補表示

2014-03-13

フォームの基本構造

f:id:sophisticatedweapon:20140313134812j:plain

フォーム作成：作成所要時間30分程度

グーグルフォームでフォーム作成&共有設定

http://www.kanzaki.com/docs/html/htminfo31.html

参考サイト

・TIPS

GET：情報を隠さず明示

POST：封筒の中に入っている情報

/////////////以下、ソースコード/////////////////////////////////////////

<!DOCTYPE html>

<head>

<title>フォームの練習</title>

<style>

#myform table {

width: 600px;

border: 1px solid #333;

border-collapse: collapse;

}

th, td {

border: 1px solid #CCC;

padding: 10px;

}

th {

background: #F4FFDD;

text-align: right;

}

</style>

</head>

<body>

<table>

<tr><th>メールアドレス</th><td><p>メールアドレス：<input type="text" name="email" size="30"></p></td></tr>

<tr><th>性別</th><td><p>性別：

<tr><th>好きな色</th><td><p>好きな色：

</p></td></tr>

<tr><th>趣味</th><td><p>趣味：

</p></td></tr>

<tr><th>お住まいの地域</th><td><p>

<option value="">以下の地域から選択してください</option>

</select>

</p></td></tr>

</table>

</p>

</body>

</html>

2014-03-11

Illustrator描画&Photoshop境界線の調整

f:id:sophisticatedweapon:20140311141630j:plain

各種オブジェクト作成：作成所要時間1分程度

Illustrator

矢印の作成

四角のオブジェクトを２つ重ねる

オブジェクト→パス→平均

パスファインダ→結合

Photoshop

・境界線を調整（背景と切り取りたい画像が髪の毛など細かい場合

エッジの検出：3px（解像度の高い画像だとエッジの検出pxを上げる

不要なカラーの除去：ﾚ点

・TIPS

ファッション誌の切り抜き写真とロケ写真の違い

ロケ写真は着た感じをつかむため（外向き

切り抜き写真は買ったときの感じをつかむため（内向き　手元に届いた場合を想像

購買要素

必然性と言い訳

言い訳を用意してあげると購入意欲が高まる

例：限定品だから、セール品だから

いらないものを買わせるのが商売

2014-03-10

CSS演習

f:id:sophisticatedweapon:20140310125220j:plain

ウェブページ作成：作成所要時間100分程度

・TIPS

レイアウトに際しては、 p から設定し始める

p が決まると他の部分が決めやすい

共通項が決まれば他が決まっていく

border-radius: 55px / 45px;

数値は角に接する円の半径

イラストレーターの角丸の四角の内接円と同じ考え方

smallなどのインラインレベル要素は

display: block;

を使用することでpaddingなどの設定を上手く反映させることができる

http://www.css5days.com/day02/blockinline.html

↑インラインレベル要素とブロックレベル要素の詳しい説明サイト

他の項目も分かりやすく書かれている

http://csspro.digitalskill.jp/%E3%83%81%E3%83%A5%E3%83%BC%E3%83%88%E3%83%AA%E3%82%A2%E3%83%AB/css/css-id-class-%E9%81%95%E3%81%84/

ID と Class の違い

2014-03-10

Webサイト制作科受講生の方へ

http://www.alexa.com/

http://www.similarweb.com/

世界各国のトラフィックが高いサイトを見つけることができます。

Webサイト巡りのご参考まで。

http://webkaru.net/php/

記事が新しく、わかりやすく書かれている

PHP初心者向け

2014-03-08

課題用WebサイトをJimdoで作成

講義の課題として、Webサイトを100件レビューすることとなったため下記開設

Webサイト制作科 | Webサイトレビュー

残り5ヶ月弱の期間で着実に進めて行こうと思います。

2014-03-08

ブログ開設前にGmailへ書き溜めたものの転記

windows　無料エディタ　クレシェントイブ

#　ヌルリンク

ページ内でのリンクは必ずhttp:// をいれずに入力する

↑

検索で上位表示するためには、検索エンジンのデータ取得を簡易にすることで評価される

FireFox　のアドオン

html　validator　をインストールする

FireFox　アドオン

Webdeveｌoper　インストール

ページは、上→右→下→左　の順に作成。

文字の高さ＝アセンダ（アクセント幅）＋ミーンハイト（英大文字幅）

　　　＋ベースライン（英小文字幅）＋ディセンダ（ｇやｐなどの表示幅）

スタイルシートビジュアルサンプル辞典：参考文献

line-height　1.7　ぐらいが理想（日本語の場合）

ブラウザが補正する数値のリセットが重要

margin　の指定は　上→右→下→左の順に数値を入力する。

margin　の相殺：　項目の上下表示については、

上下のmarginを意識せずに数値設定可能　　

例えば、上項目の下マージンとし下項目の上マージンは、

上項目の下マージンを意識せずに数値入力する

//////////////////////////////////////////////////////////////////////////////////////////////////

グラデーション：立体視の効果を得る

擬似クラス：Webページ上でマウスに反応する機能

li　と　li a　の違い

li　は文字列、　li a　はマウスに反応する機能も含めた意味（文字列の上に重なった機能

li a{

display: block;

文字を面で捉えるための命令

//////////////////////////////////////////////////////////////////

書体：C/Windows/Fonts

2014-03-08

Webサイト制作に関わる色使い

・基調色（ベースカラー

・強調色（アクセント

・アソート色（なじませ

上記以外は、写真を上手く使う

写真には邪魔するような色を使うべきではない

補色を利用することで、人に安心感を与える

例えば、お茶のペットボトルの緑には必ず赤がアクセントとして入っている

白黒ではっきりと見えるものは、色を反映させてもはっきり見える

迷ったら青と黄をベースとアクセントに使用する

青：自然にないもので、本能的に貴重と感じる色

黄：青の補色となる色

青と黄の組み合わせは、商用利用で必ず売れる色

例えば、プレミアムモルツ　飽きさせないために赤を基調とした商品も織り交ぜる

虹色は七色　音階に準えている

白：未来を意味する

黒：過去を意味する

明度：時間軸と関係する

彩度：エネルギー軸と関係する

still life：エネルギーがない状態　彩度がない

そこに色があるものを描くことで強調できる

黒があると、黄土色が金色に見える

5W1Hを意識して色使いを決める

いつ・・・季節感　四季を意識した色使い

どこで

だれが

なにを

なぜ

どのように

ゲシュタルトの法則：人間がモノを知覚するときの脳の働きに関する理論

人間は見えないものを見ようとする　わざと隠すことで興味を引く

池田益男：絵画評に優れる

イコン：宗教画　いまのアイコン

http://hue360.herokuapp.com/

色の使い方の参考になるサイト

[Shift] + クリックで選んだ色が背景色になる

・TIPS

SEO対策としてサイトタイトルのつけ方が重要

重要キーワード + 助詞 + カテゴリ | 具体的な名詞（ユニークなもの

　　　　　　　↑てにをは↑

風が吹けば桶屋が儲かる

モノを売るためには、理由付けが必要

風が吹けば・・・

←　売るためにこの間の理由を埋めていくことが必要

・・・桶屋が儲かる

2014-03-07

CSSレイアウト実践　企業系ウェブページ作成

f:id:sophisticatedweapon:20140307144532j:plain

ウェブページ作成：作成所要時間200分程度

ウェブで画像素材選定、Photoshop画像編集、ナビボタン作成、CSSレイアウト

・TIPS

div要素：グループ化するため

どこからどこまでなのか、名前をつける

アウトライン：見出しのツリー構造

検索エンジンが重視するもので、これが破綻しているとSEO対策に不利

////////////////////////以下、ソースコード////////////////////////////

<!DOCTYPE html>

<head>

<title>課題：企業系サイト</title>

</head>

<body>

<h1><em>サンプルスタイルシートカンパニー</em></h1>

<ul>

<li id="top"><a href="#"><em>トップページ</em></a></li>

<li id="sol"><a href="#"><em>ソリューション</em></a></li>

<li id="par"><a href="#"><em>パートナー</em></a></li>

<li id="cus"><a href="#"><em>カスタマー</em></a></li>

<li id="con"><a href="#"><em>お問い合わせ</em></a></li>

</ul>

</div>

<h2><em>あなたにとっての最高のパートナーであるために</em></h2>

</div>

<h3>弊社について</h3>

<h4>スタイルシートによるレイアウトで、<br>表現力と機能性が共存したサイトを構築。</h4>

<p>サンプルスタイルシートカンパニーでは、ウェブサイトの構築にスタイルシートによるレイアウトを採用しています。そのため、視覚的に美しい表現力だけでなく、ユーザーにとって使いやすい機能性とを合わせ持ったウェブサイトを提供することができます。</p>

<p class="link"><a href="#">ソリューションへ</a></p>

<h4>ウェブサイトを成功に導く、<br>構造設計とインターフェース構築を武器に。</h4>

<p>100件あまりのウェブサイト構築経験から培った企画・開発力をバックボーンにもつ、サンプルスタイルシートカンパニー。競争に勝ち抜くための構造設計と、インターフェース構築を武器に、お客様のウェブサイトを成功に導くお手伝いをします。</p>

<p class="link"><a href="#">実績紹介へ</a></p>

</div>

<h3>ニュースリリース</h3>

<dl>