utf-8文字化け(html)

utf-8のhtmlをUPするとき間違ってシフトJISでUPしたとき
中国語みたいな文字になってしまったとき



↓ここのFLASHの部分でどうにかなる？！

●Googleの検索結果のサマリーが文字化け
http://www.shtml.jp/mojibake/google.html

Fireworks アンカーポイント

●アンカーポイントの追加

まずは、追加する図形の「グループを解除」
(右クリックで選択)

あとは、ペンツールで追加したい線の上をクリック

JavaScript エラー Dreamweaver

■開くたびに、もしくは保存するたびにスクリプトエラーがでる。

解決方法
ファイルキャッシュの削除

ユーザ設定フォルダから削除する。

場所：
C:\Documents and Settings\ユーザー名\Application Data\Adobe\Dreamweaver バージョン\ja_JP\Configuration

ここから『WinFileCache-ｘｘｘｘｘ.dat』　※ｘｘｘｘｘ部分は使用環境により異なる
削除するとなおる場合がある。


Configurationの名前を変更(バックアップをとっておくため)すると、ユーザ設定フォルダが初期化される。

エクセル作業【税込価格を計算/小数点以下切捨て】

新しいセル？を挿入

=ROUNDDOWN(A1*1.05,0)

FLASHでつくる喜び 初心者向けの勉強本

FLASHって複雑な動きとか、ランダムな動きとかやりたい！！でもわかんない！

って人におすすめ。

読んでて楽しい。わかりやすいし、

自分の作ったものが、自由に動き出したときの喜びといったらない。

キャーって叫んじゃうくらい、うれしい。

読んでみて！この本を応用して色々できるよ。一冊まるまる読んだのはこの本だけ。

AS3勉強したいなら、(初心者)この本一押しです。

↓↓↓↓

簡単な占いつくってみたよ。この本のおかげサマサマ。

→占い

javaスクリプトがわかんなかったけど、jQueryできた

一言で言うなら、わかりやすい！

Javaスクリプトはちんぷんかんぷんだったけど、jQueryできた

ちゃんと意味を理解しないと、前に進めなかったのに！

他にもAS3を勉強していたということもったかもだけど、

jQueryって何でもできるんだな･･･

CSS3がブラウザで対応してなくてもjQueryを使ったらきく！！

しかも、ソースが短くて素敵★そんな魅了を手に入れることが出来る一冊！！

わかりやすい丁寧で、初心者にはとってもオススメだよ！マジで。

↓↓↓↓

テキストリンク 背景 テキストずらす 字下げ

◆字下げを使って、テキストリンクの背景に指定した画像から
改行した二行目もそろえる

text-indent:-1em;　※emは１字



→改行したテキストリンクの2行目にpadding-leftが効かないときに


.クラス名{
padding-left:12px;←背景の矢印とか分ずらす
text-indent:-1em;
}
.クラス名 a{
color:#ff8800;
background:背景　矢印とか;
}


※アンダーラインが背景にかぶることはない。

html5 基礎の基礎

どんどん新しくなってもううんざり。

『html5』を勉強しなきゃなんだけど、新しいことを又詰め込むのか･･･

憂鬱な気持ちをやんわりと紐解いてくれるのがこの一冊！！マジでおすすめ。

え？こんなに簡単だったの？ってくらい頭を抱え込んでいたのが何だったのか･･･

と思えてしまった一冊！！アマゾンのレビューも参考にして！！

右脳人間の人には相性いいかも！(私が右脳人間だから･･･)

↓↓↓↓

html5に関する作業メモ

figcaption　行間きかない　スマートフォン

display:block;で回避。


◆アドレスタグにイタリックがかかる。ななめになる。

スタイルシートで

address {
font-style:normal;
}

参考サイト↓
http://template.b-cures.net/dl/stylecss/index9.html

◆Dreamweaverテンプレートにすると文字化け
諦める。テンプレートのみの文字化け回避はあったけど、
編集可能領域が文字化けする。

ライブラリーでわける

ライブラリーも勝手にタグがはいるので削除。

◆テーブルのcellpaddingとcellspacingのかわりになるもの
border-collapse： separate;
border-spacing:： 0px 0px;



◆線にグラデーション
キャンバスでもできるが、空要素になる。
特に線に意味が無い場合は、divでやる

自分のHPに検索機能をつける

◆google

http://www.1kara.net/knowhow/search.php


◆複数のCSSをjQueryでかくとき

http://www.nk0206.com/life/2009/10/jquerycss.html

角丸 シャドウ 【CSS3】

◆角丸
border:5px solid #ffcc99;
border-radius:5px;
-moz-border-radius:5px;
-webkit-border-radius:5px;



◆シャドウ
box-shadow:1 px 1 px 5 px #000;
-moz-box-shadow:1 px 1 px 5 px #000;
-webkit-box-shadow:1 px 1 px 5 px #000;

:横　縦　ぼかし　＃色;


横を『0』にすると両サイドに影ができる。

綺麗だった比率は　： 0 0 0.2em ＃色；
※IEだと、0ゼロにすると消える…
↓
解決策を探すのが面倒なので、IEだけ背景にいれるしかない。

とっても親切参考サイト↓
http://www.tagindex.com/stylesheet/filter/glow.html
http://www.htmq.com/style/filter.shtml

IE7と8 『ie-css3』がうまくいかないとき 【CSS3】

◆『ie-css3』がうまくいかないとき『角丸』

→CSS3で指定したところが、消えた
原因↓
背景の色の指定
なぜか、背景の色を指定したいとき、一番下に表示される。

CSS3プラス
position:relative;
z-index:1;

と、かくと直った。




◆IE用にまとめたCSSをつくってみる。

スタイル名{
position:relative;
z-index:1;
behavior: url(ie-css3.htc);
}


何気に動く、IE8・IE7は動いた。IE9は知らない。

※注意点

置くところは、CSS3でかいたCSSより上に置かないとできない。
一番上らへんに置けば問題ない。今のところ角丸だけ？

＜例＞
{IE用にまとめたCSS}
｛角丸してねCSS3｝



『PIE.htc』を使うと、↑これらはいらない。

displayBOX 【CSS3】

◆簡単にレイアウト




A…display:box;（★）

BとC…box-flex:●●;→比率
　　　　box-ordinal-group：●●；→順番



（★）…-moz-とか、つくところが違うので注意！！


IEとオペラは見れない。

各ブラウザで見えるようにする。【HTML5】

◆ベンダープレフィックス

IE→-ms-

Firefox→-moz-

Safari→-webkit-

Chrome→-webkit-

opera→-0-


今の段階では全部付けておいた方がいい。
後で、消す。

IEは、ほぼ無視する。付けても使えない。.htcを使っても使いたいの使えない。
IEだけ別でつくる。

※IE以外は簡単なCSS3なら最新版はだいたい見れた。display:BOX;はなくちゃ見れない。

CSS 【HTML5】

◆角丸
border-radius(ラディウス)


◆影を付ける(ボタン)

親切サイト→CSS3でドロップシャドウを作る『box-shadow』プロパティのまとめ｜MONODEZ


CSS3をIEに対応させてくれる？？↓
http://www.hislab.net/blog/2010/12/ie-css3.html

IE対策 【HTML5】

これをコピーするだけ
→http://remysharp.com/

IE7IE8は見れたIE9は？




----------とっても親切参考サイト---------
・html5をIEに対応させるには | yoseyama Blog
http://www.yoseyama.jp/blog/2011/01/html5ie.html

追加された要素 【HTML5】

◆文章構造化の為に追加された要素一覧

※注：右側のコメントはなんとなく覚えるための私的なものです。

header…ID="head"と指定していたところ+セクションの中に入れることで意味もまた違ってくる
footer…ID="foot"と指定していたところ+セクションの中に入れることで意味もまた違ってくる
nav…ID="navi"と指定していたところ
section…見出しがあるものをすべてこれで囲む
article…ただの記事・独立したもの　※これは入れ子に出来ない
aside…サブナビ・関連性の低いもの
address…プロフィールや連絡先、お問い合わせなど
→ページの中で使うと、その内容の連絡先
→フッターに入れると、ページ全体の連絡先

hgroup…見出しをまとめたりする
figure(フィギア)…画像
figcaption(フィグキャプション)…画像のキャプション※勝手に改行される
↑figure(フィギア)の中に入れるのが正解らしい
mark…重要なもの、検索で引っかかったみたいになるらしい色が付く
rudy…ふりがながつくもの
rt…↑のそのふりがなそのもの
rp…↑のふりがなに対応していないものに使う
time…時間・日付とか

ｈｔｍｌ5のメモ

◆末尾に『/』スラッシュを入れなくなくてもよくなったもの

<img > <ｂｒ>
<inqut><link>



そのほかいろいろあるけどあんまりつかわない。
hrとか

◆終了タグの省略

<li>※ulとかにはいってるから

<dt>※ｄｌにはいってるから
<dd>※ｄｌにはいってるから

<p>

<tr>※tableにはいってるから
<th>※tableにはいってるから
<td>※tableにはいってるから



引用符を省略…HTML5になれるまでは、無理して省略しなくてもいいや

pdf 色が変わる 画像じゃない

◆画像でもないのに、色が変わってしまう原因

グラデーションが邪魔してる。

要らないグラデは消す。

Dreamweaver プレビュー コピぺ 代替テキスト 消す

Dreamweaverのプレビュー画面で画像をコピペすると、イメージの説明がでてくるのを消す

【環境設定】→【アクセシビリティ】の挿入時に属性を表示：イメージのチェックボックスを消す。

最近知った、くっついてるCSS

.text.text2{
margin:4px;
}

意味↓
＜div class=" text　text2"＞

複数指定されているCSSにだけ、指定するとき


例でいうと、

＜div class=" text　text2　text3"＞←これにはかからない。

＜div class=" text "＞＜ｐ　class＝”text2”＞←これにもかからない。

＜div class=" text　text2"＞←これだけ、かかる


★CSS側で、スペースで離れていれば、『.text　.text2』

.textの中の.text2に○○やってねの意味になる。

.text　.text2｛ｘｘｘｘｘ｝


※ちなみに、IDは複数指定できません。


-----------とっても親切サイト-----------

・小粋空間
http://www.koikikukan.com/archives/2011/06/16-000616.php

ブラシツールについて 【※photshop】

◆パッとみ何が何だかわからないブラシツールについて

↓画像左側にいっぱい項目があるが、重要なのは『シェイプ』と『その他』らしい








-----------------　ブラシいろいろ　-------------------

鉛筆のブラシ↓
・Photoshopでリアルな鉛筆ブラシを作る方法 | 彦左虎肉丸
http://konikugan.com/?p=182

フォームについて 《ラベル-label-》

●記述方法は2パターン


【パターン1】…全部囲む《★》

＜label＞＜input type="checkbox" /＞その他＜/label＞




【パターン2】…項目をlabelで囲んでforを指定、inputタグに、同じIDをかく

＜label　for="RR"＞その他＜/label＞
＜input type="checkbox" id="RR" /＞




《★》パターン①の方が簡単
　　　↓
なぜ、他のサイトはパターン②の方をつかってるのか
　　　↓
対応していないブラウザがあるらしい
　　　↓
調べた結果

IE6以外は全部つかえた。


さよならIE6と考えるとパターン①でも全然OK！


---確認ブラウザ---2011,08,03
*Win
IE8・7・6
firefox 5.0

*Mac
safari 4.1.3
firefox 3.6.13
opera 9.64





そもそもlabelは必要なのか…

とっても納得サイト↓↓↓

・labelタグの必要性 | フォーム改善のプロ
http://www.form-keeper.com/efo-blog/in-form/input-label-necessihttp://www.blogger.com/img/blank.gifty/


チェックボックスやラジオボタンには絶対あったほうがいい。…使う側としては。。

EFO…入力フォーム最適化のこと

見た目は何にもかわらないが、入力する側が入力しやすくなる




参考サイト

・とほほ　-ラベル
http://www.tohoho-web.com/html/label.htm

・HTMLタグ/フォームタグ/部品とラベルを関連付ける - TAG index Webサイト
http://www.tagindex.com/html_tag/form/label.html

フォームのnameタグなんかで使う名前

◆名前【name】
フルネーム
*neme

名字と名前で分かれてる時
*lastname/firstname
*name_field_last/name_field_first
*name01/name02

読み・カタカナ
*↑のに『Kana』をプラス。　
*↑のに『read』をプラス。


◆性別【name／value】
*gender/gender1・gender2
*gender/男性・女性


◆年代【name／value】
*age/10代・20代


◆生年月日【name】
*year/month/day


◆郵便番号【name】
*zip
*zip_code

分かれてる時
*zip01／zip02


◆住所【name】
*address


◆電話番号
*tel

分かれてる時
*tel1/tel2/tel3


◆メールアドレス
*mail
*mail_address


◆都道府県【name／value】
*area/01・02・03…
*area/北海道・青森…


◆内容【name】
*query
*comment

フォームについて ※【jQuery】 その③

フォームについて　※【jQuery】　その①
フォームについて　※【jQuery】　その②

◆：input

(jQuery専用フィルター)
一括して、inputを選択。

*どんな時に使うのか？
入力している欄に色をつけたりする※すべてのinputタグに

フォーカスとブラーをつかう。



⇒フォーカスしたら背景の色を●色にかえてね。
⇒フォーカスしてなかったら背景の色は無しで

◆：text

(jQuery専用フィルター)
一括して、type="text"を選択。

◆：password

(jQuery専用フィルター)
type="password"を選択。

◆：radio

(jQuery専用フィルター)
一括して、type="radio"を選択。
※この場合、ラベルのIDで指定したりなんかします。

◆：checkbox

(jQuery専用フィルター)
一括して、type="checkbox"を選択。

*どんな時に使うのか？
『全てチェック』するときなど

◆：checked

(jQuery専用フィルター)
チェックの入っているものを選択。

◆：submit

(jQuery専用フィルター)
type="submit"または”image”だけを選択。

◆：image

(jQuery専用フィルター)
type="image"を選択。
*どんな時に使うのか？
『マウスオーバー』した時に画像を変える。CSSでもできるけど...どっとがいいのかは不明

◆：reset

(jQuery専用フィルター)
type="reset"を選択。

◆：button

(jQuery専用フィルター)
type="button"を選択。

◆：file

(jQuery専用フィルター)
type="file"を選択。

◆：selected

(jQuery専用フィルター)
選択されているものを選択。

ファイル比較

同じようなファイルの内容の違うところを見やすくしてくれる。

『WinMerge』というソフトをインストールしてくる。

WinMerge 【日本語版】→窓の社より

＜例＞
比較したいテキストデータファイルをドラックドロップさせればOK！
 勝手に違う部分に色がつく。


Dreamweaverをつかってる時にで比較したいなら、

比較したいファイル2つ選択して右クリック【ローカルファイルの比較】とすると
『WinMerge』が開く

※アプリケーションの設定が必要→WinMergeU.exe




詳しくは↓↓とっても親切サイト

・ファイルを比較するなら「WinMerge」 | バシャログ。
http://c-brains.jp/blog/wsg/10/07/15-105429.php

DreamweaverでCSSを改行すると、インデントされるのをなくす

【表示】→【コードビューオプション】→【自動インデント】のチェックを外す。

ぴったり左につく。

Dreamweaverアップグレード ショートカット移動 設定

Dreamweaverアップグレードしたときに、
前のバージョンで設定したショートカットをそのまま持ってくる方法。

※普通に設定しなくてもたぶんショートカットは同じ設定が追加されてる。





確認してみて、もし・・・できなかったら↓↓↓



PC：win XP

DreamweaverCS4からDreamweaver5.5へアップグレード

【マイコンピュータ】→【OS(C:)】→【Documents and Settings】→【ユーザー名】→【Application Data】→【Adobe】→【Dreamweaver CS4】→【ja_JP】→【Configuration】→【Menus】→【Custom Sets】※自分で作ったファイルがある(ｘｍｌ)

↑↑これを同じ手順で、【Dreamweaver CS5.5】にコピペ、環境設定で設定

win7の場合は、【Documents and Settings】がないので↓

【マイコンピューター】→【Users】→【ユーザー名】→【AppData】→【Roaming】→【Adobe】・・・・





xpとwin7の違いがわかりやすい表になってる↓↓

Windows Vista／7のユーザー・プロファイル・フォルダの場所は？ － ＠IT
http://www.atmarkit.co.jp/fwin2k/win2ktips/1207docset2usr/docset2usr.html

Dreamweaverアップグレード スニペット移動 設定

Dreamweaverアップグレードしたときに、
前のバージョンで設定したスニペットをそのまま持ってくる方法。

PC：win XP

DreamweaverCS4からDreamweaver5.5へアップグレード

【マイコンピュータ】→【OS(C:)】→【Documents and Settings】→【ユーザー名】→【Application Data】→【Adobe】→【Dreamweaver CS4】→【ja_JP】→【Configuration】→【Snippets】→【ユーザー設定(※自分で作ったフォルダ)】

↑↑これを同じ手順で、【Dreamweaver CS5.5】にコピペ


参考サイト↓↓
http://blog.prostaff1.com/website/dreamweaver/242/


win7の場合は、【Documents and Settings】がないので↓

【マイコンピューター】→【Users】→【ユーザー名】→【AppData】→【Roaming】→【Adobe】・・・・

『Snippets』のフォルダがない場合…Dreamweaver起動、スニペットに新しいフォルダを追加するとでてくる

特殊文字一覧

とっても親切サイト↓↓

・ハートなどの記号「♥♡♣♦♠」の入力方法 | コリス
http://e-words.jp/p/r-htmlentity.html


さらに詳しく・見やすく載ってる↓↓

・みんなの知識【ちょっと便利帳】 使いたいときの HTML特殊文字 & 機種依存文字 - 矢印 & 矢印に使える記号、使えそうな記号
http://www.benricho.org/symbol/tokusyu_02_arrow.html

フォームについて ※【jQuery】 その②

→フォームについて　※【jQuery】　その①
フォームについて　※【jQuery】　その③

◆submit

＜input　type="submit" /＞のボタンを押して（送信ボタン）
データがaction指定してるURLに飛ぶ前に、実行したい処理があるときにつかう

*どんな時に使うのか？
必須項目に入力されてないとき赤字で「入力されてませんよ」などいれたいとき


※入力・未入力によって違う処理なのでそんなときは⇒if文を使います。

＜例＞
項目がはいってないとき、送信しないでね。入ってない項目には注意書き？いれてね。
　↓↓↓
$("form").submit(function(){　//送信する前に
if(＄（”input[name='name’]”）.val（）＝＝””){　//inputのname="name"が空だったら
＄（”input[name='name’]”）.CSS("border","1px solid red")
.after("＜span＞名前抜けてます。＜／span＞")；
//borderを赤くして、後ろに名前ぬけてます。っていれてね
＄（”span”）.css(”color”,”red”);//そんでもってspanは赤で
return false; //送信はキャンセルしてね【★】これを忘れると、送信されます。
}
}）


この変な[]について⇒

【★】送信キャンセルする、の意。


名前がはいってなくて、送信ボタンを押すたびに、テキストがついかされないように
if文の中に、さらにif文を追加します。
↓↓↓

if(＄（”input[name='name’]”）.val（）＝＝””){//空で
if（＄（”span”）.css(”color”)!="red"）｛//spanが赤じゃなかったら追加してね
＄（”input[name='name’]”）.CSS("border","1px solid red").after("＜span＞名前抜けてます。＜／span＞")；
＄（”span”）.css(”color”,”red”);//そんでもってspanは赤で
return false;
｝
}

『!=』って何？⇒


※動かないときは、jQueryのバージョンを確認してみたりする。

FireworksからIllustratorにパスをもってく

もってくことはできないので、

Fireworksを別名で保存、Illustratorで保存。

逆に、イラレのデータをFireworksで開くのは、普通にできます。

JQueryで小ウィンドウ

http://e2designer.seesaa.net/article/154966640.html


閉じるボタンは↓
http://blue.ribbon.to/~rei/html/jv_14.html

演算子一覧

◆計算をする演算子

『+』・・・足し算★

『-』・・・引き算

『*』・・・掛け算

『/』・・・割り算

『++』・・・1足す/カウントする

『--』・・・1引く/カウントダウンする


★『+』は、文字列同士の連結にもつかう。
＜例＞
”わたしは” +●●●+ ”です。”

◆代入する演算子

『+=』・・・足して代入

『-=』・・・引いて代入

『*=』・・・掛けて代入

『/=』・・・割って代入

『%=』・・・割ったあまりを代入

◆比較演算子

『A==B』・・・AとBが等しい/等価式

『A!=B』・・・AとBが違うかどうか

『A＜B』・・・BよりAが小さい/AがB未満

『A＜＝B』・・・AがBより小さい、もしくはBと同じ/AがB以下

『A＞B』・・・BよりAが大きい

『A＞＝B』・・・AがBより大きい、もしくはBと同じ/AがB以上

◆論理演算子

『!B』・・・B以外

『A&&B』・・・AとB両方

『A||B』・・・AもしくはBどちらか

★論理演算子を使った例はこちら→

◆特殊演算子

『AinB』・・・B（オブジェクト）にA（プロパティ）があるかないか




そのほかの演算子↓
・とほほのJavaScriptリファレンス
http://www.tohoho-web.com/js/operator.htm

・演算子一覧表 - Access - Office.com
http://office.microsoft.com/ja-jp/access-help/HA010235862.aspx

Flash traceを使って取得した数字を確認

【制御】→【ムービープレビュー】

出力にtraceで指定したものが表示される。

集中力がほしいとき

残像トレーニング
（眠い時にも有効）

---------------サイト↓---------------
・脳を活性化させ集中力を高める残像メンタルトレーニングで能力アップ
httphttp://www.blogger.com/img/blank.gif://www.zanzotraining.com/10/trial.html

googleAnalytics から自分を外す

◆googleAnalytics（グーグルアナリティクス）から自分を外す方法

とっても親切サイト↓↓↓

http://sem-labo.net/blog/2009/08/13/0133/

IE6 マージン -マイナス 消える

_position: relative;


参考サイト
http://webcache.googleusercontent.com/search?q=cache:YTBNn3w0GxgJ:polka-diary.seesaa.net/article/115217597.html+IE%E3%80%80margin+%E3%82%92%E3%83%9E%E3%82%A4%E3%83%8A%E3%82%B9&cd=1&hl=ja&ct=clnk&gl=jp&source=www.google.co.jp

フォームについて ※【jQuery】 その①

→フォームについて　※【jQuery】　その②
フォームについて　※【jQuery】　その③

◆val

入力されている値や選択されている値を取得・変更

＜例＞
$("#mail_ad").text($("input").val()+"に送信します。")；

mail_adのinputの入力されているのを習得して、『に送信します。』と付け加えて変更される


＜例＞
$("#kakunin").text($("select").val())；

kakuninのテキストがselectで選択されている値に変更される。※テキストエリアでもできます。



.val()→値を取得

.val(””)→値が空

◆val（""）

入力された値を削除する、クリアする。

クリアボタンをつくって、そのボタンを押すとクリアされる。
※＜/form＞タグの中に＜button＞をいれるとファイルがありませんとでるので注意
＜button＞タグが飛んでしまうのは、type=""を指定していないから
”button”⇒ボタンとしてだけの機能
”submit”⇒実行ボタン
"reset”⇒リセットボタン

◆focus

フォーム部分が選択（マウスやTabで）されたのを感知して処理を実行してくれる
★メソッドチェーンと＄（this）をつかう

＜例＞
*html側*
＜p id="name"＞名前＜input type="text"＞＜/p＞

＄("#name input").val（”ここに入力”）.css("color","#cccccc")
.focus(function(){
$(this).val("").css("color","000000")});
フォーカスされたら処理してね

※CSSを操作するときは、スタイルシートで操作されるCSSをつくっとかないと動かない。
※ドットで繋がってるのがメソッドチェーン

フォームの中に”ここに入力”という文字を薄く入れといて、
入力しようとすると消えて、さらに、入力した文字は濃くなっている


注：フォーカスされるたびに消えてしまう。のをどうにかするために…↓↓
一回のフォーカスのみにしてね【one】をつかう。1回だけ
フォーカスの部分をone();の中に入れる
【one】のかき方はこちら→

イベント発生の条件→focus
イベント発生した時の処理→val（””）と色変更


＄("#name input").val("ここに入力").css("color","#cccccc")
.one("focus",function(){$(this).val("").css("color","000000")}）;

.one("発生条件",function(){発生時の処理}）;

◆blur（ブラー）

フォーム部分の選択（マウスやTabで）がは外れたのを感知して処理を実行してくれる


*どんな時に使うのか？
フォーカスが外れたときの処理を変えたいとき。

⇒フォームの入力/未入力によって処理を変えたい時は

if文をつかう。if文について→

もし、フォーカスされても入力されなかったら、文字表示しといてね。
　↓↓↓
※メソッドチェーンで↑のｊｓ（focus）につなげます。
.bluer(function（）｛

if（$(this).val()==""){　//もしフォームが空だったら
※同じ処理なので↑のｊｓ（focus）をそのままコピペします。
}

｝)；

◆change

入力された内容を感知する（フォーカスが外れたら感知します。）

*どんな時に使うのか？
選択が変更されたら、テキストの項目を変更したいとき。


セレクトボックスと一緒につかいます。
↓↓↓

optionタグにvalueに入れたテキストを読み込む

*ｈｔｍｌ側*
＜select＞
＜option value="いちばん"＞いちばん＜/option＞
＜option　value="にばん"＞にばん＜/option＞
＜option　value="さんばん"＞さんばん＜/option＞
＜/select＞

＜ｐ＞＜span＞いちばん ＜/span＞＜input・・・省略


セレクトボックスが変更されたら、セレクトボックスのvalueを＃Chanのspanにテキストかえてね　
　↓↓↓↓

*ｊｓ側*
＄(function（）｛
＄(”select”).change(function（）｛
＄(”＃chan span”).text(＄(this).val（）);
｝);

｝);

※テキストを変更するだけでなく、追加して項目を増やすこともできる。と思う

フォームのおさらい ※HTML

お問い合わせなどのフォームは＜form＞タグで囲みます。
＜form＞xxx＜/form＞

*＜form＞タグの属性
・action(アクション)…実行されるcgi
・method(メソッド)…サーバにデータを送るときの形式

※method、→POSTとGETの違い。
送信内容を送るフォームは、POSTをよく使う。＜form　action="xxx.cgi" method="post"＞xxx＜/form＞
※postは大文字でも小文字でもどっちでもいい



*＜form＞タグの中に入れるタグ＜input＞＜select＞＜textarea＞
中に入れるタグにはnameをつけて、わかりやすくしとく、
チェックボックス・ラジオボタンはvalueで。

・＜input /＞(インプット)*type属性でいろいろ
閉じタグいらない

普通のテキスト
type＝”text”

入力したものを見えなくする
type＝”password”

ファイルをアップロードする『参照』ボタン
type＝”file”

チェックボックス
type＝”checkbox”

ラジオボタン
type＝”radio”
※ラジオボタンは1つしか選べません。
※nameで同じ名前にします。

cgiを実行ボタン
type＝”submit”（★）

削除ボタン
type＝”reset”（★）

ボタンをイメージに
type＝”imae” src="画像パス"


（★）ボタンのテキストをかえたいときは『value＝”名前”』です。

テキストエリアなどで、初期値を入れたい場合→「value＝"例)名前を入れてください"」
あくまでも初期値なので、入力がなくてもフォーカスされると消えます。

「入力のヒント」を入れたい場合は、placeholder属性を使う
（HTML5より、ブラウザによって使えないところあり）

↑入力されるまで入力のヒントがでます。



▼▼　html側/プレビュー　▼▼




・＜select＞～＜/select＞(セレクト)…セレクトボックス
selectにnameをつけて、optionにvalueで。
選択項目は＜option＞～＜/option＞

<label>年齢：
  <select name="age">
    <option value="age_10">10代</option>
    <option value="age_20">20代</option>
    <option value="age_30">30代</option>  
    <option value="age_40">40代</option>
  </select>
</label>

・＜texterea＞～＜/texterea＞(テキストエリア)…テキスト入力
横幅⇒cols
縦幅⇒rows(行数)






---------------------参考サイト---------------------
・とほほ
http://www.tohoho-web.com/html/form.htm

googleブログにアンケートを設置する方法

【アカウント設定】から

【ドキュメント】
※先に、設定で日本語にしないと英語でわからない。
※とりあえず、日本語にしてから設定を再度開くと、日本語になってる。




------------------参考サイト------------------
↓↓とっても親切
・Googleドキュメントでアンケートフォームを作る方法
http://www.kagua.biz/seisaku/googledocs.html

CGIをちょっとやってみる。

フォームのやる気が出ないのはcgiがわからないから
　　↓↓↓

◆そもそもcgiで何ができるのか

お問合せ/掲示板/買い物カゴ…etc
参考サイト：『とほほ』

◆よく出てくるPerlってなにか

Perlっていうプログラミング用語を使ってcgiが出来あがるらしい
…ということは、Perlを覚えればいい？

◆Perlについて

参考サイト：『とほほ』参考に何も考えずにかいてみる

テキストエディタはTeraPad
保存すると、○○.txtとなるので、○○.cgiと保存。色変わる



＃!perlのパス※空白・空行はいれちゃいけないらしい
￥ｎは、たぶん改行
print:"★★";perlの構文。
※この中で、""(ダブルクォーテーション)を使いたい時は￥で囲ってあげる。

…そう考えると、
htmlのタグをprelでかこってあげている状態

◆CGIを動作させるために

サーバに上げないと動かないらしい…
ローカルで確認したいので、Apache(アパッチ)をインストールする。

インストール方法はこちら↓とってもとっても親切、写真付き
《 Apacheインストール - Apache入門 》
http://www.adminweb.jp/apache/install/
※保存場所を忘れたら、【マイコンピュータ】で"Apache"を検索する

インストールし終わったら、
Perlを動かすためにActivePerl(アクティブパール) をインストール※↓ちょっと古いけど問題ない
《 WindowsでCGIを動作させる - Web Liberty 》
http://www.web-liberty.net/improve/setup/index.html
※インストールし終わったら、再起動して、インストール出来てるかの確認


さっき、『とほほ』で真似て作ったcgiのperlのパスを変更して、
Apacheインストールを確認した時のURLにcgi-bin/test.cgiを足すとみれました。
<例>http://localhost/cgi-bin/test.cgi




....作業環境ができたので、後は、パールの勉強です。
『とほほ』で基礎知識をよむ

…今の時代は、perlじゃなくて、PHPらしい。。。。

なので、perlインストールをPHPインストールに変更する。

参考サイト
・PHPインストール - PHPインストールと初期設定
http://www.phpbook.jp/install/install/

one unbind live ※【jQuery】

◆one

★かき方
＄（"p"）.one("イベント発生の条件",function(){イベント発生したときの処理})

処理したいイベントに対して一回だけだよの意。
↓
ということは、発せさせたいイベントがあっての『one』
oneのみでつかうことはない。…と思う。

◆unbind

★かき方
＄（"p"）.one("イベント発生の条件")

◆live

★かき方
＄（"p"）.one("イベント発生の条件",function(){実行される処理})

イベント発生の条件一覧
・click
・dblclick
・mouseUP
・mousedown
・posedown
・mouseover
・mouseout
・mousemove




イベント一覧→

イラレ 木のつくり方

楕円(何でもいい)→　①【ジグザグ】→　②【ラフ】

①【効果】→【パスの変形】→【ジグザグ】
②【効果】→【パスの変形】→【ラフ】
*効果をパスに？する方法はこちら

だいたい三角に組み合わせて、木を足す。


結果↓






-------------------------参考サイト-------------------------

・Illustrator（イラストレーター）で簡単な木を描く
http://kohtguchi.at.webry.info/200612/article_1.html

ファビコンをつくる

ファビコンのサイズ→16px×16pxの正方形

※大きく作っても縮小されて表示される

◆作業手順

①16px×16pxサイズの画像を作る(gifまたはpng)


②簡単に変換してくれる
『アイコン（icon）変換ツール - Favicon Converter』
http://favicon.qfor.info/c/

③ファイル名をかえて、HTML側(head)に↓↓↓とかく。
＜link rel="SHORTCUT ICON" href="ファイル名.ico" /＞
※＜＞は大文字になってるので、コピペしてから半角に

で終わり






--------------------参考サイト----------------------
・Favicon Japan!! -ファビコン作成方法-
http://www.favicon.jp/favicon_create/

・ホームページ作成ガイド/お気に入りアイコン（ファビコン）の作り方 - TAG index Webサイト
http://www.tagindex.com/hp_guide/img/favicon.html

変な透過gifのURLがそのまま入る。

いつのまにか、というのが
文章を無視してはいっている。

Firefox4にしらかららしい…？↓和訳しないとよめません。
http://www.cbtechnews.com/2011/04/how-to-remove-httpwwwbloggercomimgblank.html


調べてもわからなかったので、
初めてgoogleのヘルプフォーラムに投稿してみました。↓↓
http://www.google.co.jp/support/forum/p/blogger/thread?tid=4741592b2b5c599d&hl=ja


googleのヘルプフォーラム
https://www.google.com/support/forum/p/blogger?hl=ja

toggle(トグル)※【jQuery】

クリックされるたびに交互に切り替える。設定してある処理が最後まで終わったら最初に戻る。

toggleはイベントclickとかと同じように使う。

＄（”セレクタ”）.toggle(function(){★★★})；


『,』(カンマ)でくぎって、複数指定することができる。

↓↓↓

＄（”セレクタ”）.toggle(function(){★★★}//処理①
,function(){★★★}//処理②
,function(){★★★})；//処理③




コレを使ってタブメニューをつくりたかったが、
どっかのライブラリを使いたくないので諦める。

.clickを使って簡単なタブメニューをつくる。→



イベント一覧→


-------------参考サイト---------------
toggleを使ってこんなこと出来るんです。

*メニュー編
・style-typeスタイルタイプ
http://style-type.net/simple/2011/03/jquery-toggle.html

・トグルスイッチ
http://appling.jp/docs/toggle-switch/

・jQueryを使ったタブメニューの実装サンプルまとめ
http://5am.jp/jquery/jquery_ui_tabs/

Dreamweaver コピペとかすると、突然 全選択される。

ワークスペースのレイアウトをいじってるとなるらしい。

デフォルトに直すとおさまる？？

【ウィンドウ】→【ワークスペースのレイアウト】


-----------------参考サイト-----------

・Dreamweaver コピー・切り取りの一部選択が全選択になってしまうバグ
http://zennihonhumidaisyoukouunndoukyoukai.com/archives/20110512/115/

Dreamweaverプレビュー clearfixがきかない

★今までのやり方

・イラっとするので諦めて、下のdivにclearをかけとく。
＜div class="cl"＞

・空のボックスとおいとく、UP時に一括削除
＜div class="cl"＞＜/div＞＜！--//後で消す--＞


★最近発見したやりかた
プレビュー用にCSSに追加

CSSに↓
.clearfix{ overflow:hidden;}のみ
※ｃｓ5.5はいらないときもある。普通にみれる

UP時に消す。あっても特に問題ない。


※高さを指定しないと、消えます。(ｃｓ4)

最近のclearfixについて

★ずいぶん昔に調べたclearfix
→フローと解除について


★最近まで使っていたclearfix
↓
.clearfix:after{
height:0;
visibility:hidden;
content:".";
display:block;
clear:both;
}


★最近？ちょっと短くなったclearfix
↓
.clearfix {width:100%;}もしくは、.clearfix {zoom:1;}※
.clearfix:after{
content: "";
display: block;
clear: both;
}


※IE6、IE7ではこれがないと回り込む


MACのブラウザでも確認済み


★Dreamweaverプレビューしたらclearfixがきかないくずれた。

→解決方法はこちら


----------------------参考サイト----------------------

・float解除の決定版。clearfixを考えたら、進化した。
http://kojika17.com/2011/04/floatclearfix.php

jQuery応用編

◆画像とテキストの切替

左のボタンをクリックすると、右の写真の”ALTとテキスト”部分が変わる。


html側



js側

クリックしたら、リンクの『hrefとテキスト』をイメージの『srcとALT』にいれてね。そんでもって、イメージの『ALT』をイメージしたのテキストにいれてね。の意。


※リンクのテキストは、CSSで見えなくさせる。


★＄（this）をつかうときに気をつけること。


最初に、＜a＞タグの中の＜img＞のALTをテキストにいれようとした。
が、＄（this）は、イベントが発生した要素を習得してくれるので＜a＞タグの中に
属性がないので、読み込んではくれなかった。.attrだからダメだったのかも？？



★メソッドチェーンで気をつけること

どのセレクターに対して、命令するのか、ちゃんと理解すること



画像が、ただのサムネイルでいいとき*は、もっと簡単になる。→画像切り替え
リンクタグにいれない。ｓｒｃはそのまま、ALTをテキストにいれる。
*サムネイルと、普通サイズの画像が同じ場合

ブログ内検索ができなくなったときに

解決方法見つからず、↓応急処置

◆新しく、追加する。貼りつける。

【ガジェット追加】→【HTML/JavaScript】

下記、サイトのソースに自分のドメイン部分を修正して貼りつける。


・適当えんじにあ
http://mfsocket.blogspot.com/2010/06/google_16.html


とっても親切なサイト↑↑

Dreamweaver 文字化けについて

日本語が文字化けしてしまうのをなおす。
そもそも文字コードがいまいちわからない。

◆文字コードの種類

デフォルト：UTF-8(utf-8)
日本語EUC(euc-jp)
日本語シフトJIS(shift_jis)

★HTMLの＜meta＞タグの中に＜meta charset="●●"＞

◆文字コード違い

utf-8…よく使われ、多言語に対応
euc-jp…Unix系でつかわれる*
shift_jis…Windowsの標準

*Unix系って？
OS、OSの種類(Windows/mac/Unix)
プログラムで技術を開発するためのものらしい
詳しくはここ→回答者NO.19の人


一番わかりやすかった参考サイト：kus/ウェブリブログ
http://kus3.at.webry.info/201105/article_12.html

“utf-8"にしとけば、問題ない。

※裏側のプログラムがeucで書かれていて、　組み合せる場合、HTML側もeucでかくらしい。
※日本語の入ったプログラムをかくとき、eucを使っていた。　今は、utf-8でかくのが主流らしい。
※携帯サイトは、シフトJISのみ。(スマートフォンを除く)

※ｊｓファイルの日本語がｈｔｍｌで文字化けするときは、
テキストエディタなどで開いて、文字コードをUTF-8で再度読み込む。
書いてあった日本語は文字化けするので、バックをとっておいて、読み込んだ後にコピペ

◆文字化けしたページを開いてしまったときに直す方法

【修正】→【ページプロパティ】→【タイトル/エンコーディング】→【エンコーディング】を変更、リロード

◆CSS文字コードの指定

＠charset "ここに入れる";　※jsにはありません。

CSSファイルをコメントアウト内（/**/）に日本語で記述するとIEのみ効かない部分が出てくる。
バージョンは不明、”文字コード”を指定してあげると回避する？

ｈｔｍｌ5の理解

◆何が変わったのか

・記述がちょっと簡単になった。
・大文字と小文字の区別がない。
・html側での装飾がなくなった。
(例：strong→太字にならなくなった、意味は同じ)
　すべてCSS／CSS3でやる。
　装飾がすべてできるようにCSS3がどんどんでてくる。

・W3Cの仕様だけど、WHATWG(ワットダブルジー)
.あと3年くらいには主流になってくる？？
・高度な文書構造が可能に
・的確なリスティング広告が可能に
・フォーム機能がすごい
・動画や音声の配信が手軽になった
・javascriptを使って2D・3Dもできちゃう
・APIで位置情報の取得
・スマートフォンはｈｔｍｌ5で


変わったけど、過去のものを躍起になって書き換える必要はにらしい。
ブラウザでサポートしてくれるらしい。

各ブラウザがｈｔｍｌ5をどれくらいサポートしてるのかどうかなど知りたい時は↓
http://www.findmebyip.com/litmus/
…CSS3は大分使えるみたいだ

◆とりあえずコピペ

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>javascript</title>
<script src="js/test.js" ></script>
<link rel="stylesheet" href="css/style.css">
</head>
<body>


ここに内容

</body>
</html>

◆基礎のきそ～だから何がどんなふうに変わったのか～

【今までのhtml】
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

↓↓↓長ったらしい宣言がこれだけに…

【html5】
<!doctype html>


------

【今までのhtml】
<html xmlns="http://www.w3.org/1999/xhtml"
xml:lang="ja" lang="ja">
↓↓↓長ったらしいhtml要素が…

【html5】
<html lang="ja" >




最終的に↓↓↓


<!doctype html>
<html lang="ja">
<head>
メタタグ
タイトルタグ
</head>

と、なってメタタグの変更は、
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />↓

<meta charset=utf-8" >※utf-8にしないと、文字化けの恐れがあります。

それ以外は、そのままで。

次に、javaスクリプトとCSSを指定する。scriptとlinkのtyp属性が省略できます。

↓↓

<script src="js/jquery.js">

<link rel="stylesheet" href="css/common.css" >
↑linkは閉じタグがいりません！ｂｒ（改行）にもいらなくなりました。



▼よくわからなかったもの【基準言語の指定】
<meta http-equiv="content-style-type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">

↑多分かく必要がないみたい→とほほより

チェックしてもエラーがでるので削除


◆HTML5チェックhttp://nuevvo.com/labs/html5-validator-bookmarklet/





---------------------　参考サイト　--------------------------

「HTML5でサイトをつくろう」
http://www.html5-memo.com/first-html5/html5-001/
HTML5リファレンス
http://www.htmq.com/html5/index.shtml
HTML5とは？変わるWebと注目の新要素 HTML5.0の情報サイト
http://www.html5-guide.com/add/layout/section.html

印刷時の背景画像が二重になったりする

◆大きい背景(background-image)が改ページごとに頭から表示される

これだ！っていう解決策は今のところ無し。

★解決策として

印刷用に、ページ全体のjpgを印刷時にだけ表示させる。
表示されているページをdisplay：none；にして、jpgをjQueryで読み込む。

backgroundを極力使わない。
使っても細かく切る。さらに、改ページを微調整↓

強制的に前で改ページさせる
#CSS｛page-break-before:always;｝

◆プリント用CSSについて

CSSの最後にmedia=”print”といれる。
＜link rel="stylesheet" href="dummy.css" type="text/css" media="print" /＞

ダブルクリックしたとき ※【jQuery】

クリックしたときに、一番初めのクリックを無効にする。
しないと＜a＞のリンク先にとぶ。

クリックのときは、『return false』と最後にかくが、
クリックしたら『return false』とかく。


メソッドチェーンを使って、つなげてかく。

分かりやすく色づけしてみる


→イベント一覧に戻る

＄（this）

★イベントが発生した要素を習得してくれる。

◆＄（this）を使って、画像の切替をしてみる

↓HML側

※このPタグの画像をリストのテキストリンクで切り替える。

▼普通に指定したとき
aタグを指定（順番）して、ひとつひとつに、この画像にとんでくださいねと命令している。


↓↓
▼$（this）を使ってみる

クリックされた＜a＞（イベント発生）に対して、その要素を使って命令している。


※テキストリンクの＜a＞はこんな感じに指定しておく。
＜a href＝”img01.jpg”＞イメージ01です。＜/a＞

◆どうやって使うのか、どこに置くのか

イベントクリックで、イメージの切替をしたとき
.attr（”src”,”img01.jpg”）
※クリックしたらsrcにimg01.jpgを差し替えてね。の意
↓
これを＄（this）を使うと…
.attr(”src”,$（this）.attr(”href”))
※クリックしたら、クリックしたhrefをsrcに差し替えてね。の意

テキストリンクの場合、altもテキストリンクをそのまま入れることもできる
.attr(”alt”,＄$（this）.text());




HTML側の要素をかくだけで、自動的にそのものの要素を習得してくれる



★その他、thisとの違い

簡単に言うと、jQueryオブジェクトとして使うときは→$(this)


--参考サイト↓--

jQueryの$(this)とthisの違い : ずっと工事中
http://blog.livedoor.jp/eeu/archives/55307897.html

マウスを使った画像の切替 《改》 ※【jQuery】

◆クリックすると画像が切り替わる

※左の小さい画像をクリックすると、大きい画像が差し替わる

★js側

$(function(){
$("#main_img li a").click(function(){
$("#img_in img").attr("src",$(this).attr("href"));
return false;
    });
});

＜a＞タグのhrefに飛んでしまわないために、命令した後で、
return false;といれる。※注：リンクが二つの場合は、二つ必要。

普通にjsをかいていくと、とっても長くなってしまうので、
みじかくするために＄（this）を使う。

★HTML側

<h1>ただの画像切り替え</h1>
<ul>
<li><a href="img/img01_w.jpg"><img src="img/navi01.gif" ></a></li>
<li><a href="img/img02_w.jpg"><img src="img/navi02.gif" ></a></li>
<li><a href="img/img03_w.jpg"><img src="img/navi03.gif" ></a></li>
</ul>

<p id="img_in"><img src="img/img03_w.jpg" width="200" height="150" alt=""></p>

クリックする画像のリンク先を差し替える画像にする。

◆マウスが上にくるときにアニメーションっぽく画像が切り替わる

※左の小さい画像にマウスがくると、大きい画像が差し替わる

*考え方*

→画像を重ねて、手前を薄くする。

★HTML側　※上の切替と同じ

<h1>ただの画像切り替え</h1>
<ul>
<li><a href="img/img01_w.jpg"><img src="img/navi01.gif" ></a></li>
<li><a href="img/img02_w.jpg"><img src="img/navi02.gif" ></a></li>
<li><a href="img/img03_w.jpg"><img src="img/navi03.gif" ></a></li>
</ul>

<p id="img_in"><img src="img/img03_w.jpg" width="200" height="150" alt=""></p>

★CSS側 ※画像を重ねる

#img_in{
position:relative;
}

#img_in img{
position:absolute;
left:0;
top:0;
}

★js側

$(function(){
$("#main_img li a").mouseover(function(){
$("#img_in img").before("<img src='"+$(this).attr("href")+"' >");
$("#img_in img:last").fadeOut("fast",function(){$(this).remove()});
}).click(function(){return false});
});

マウスが上にきたら、大きい画像の前にそのリンク先（href）の画像をいれてね、そんでもって、後ろにあるのを薄くしてね、したら消して、小さい画像をクリックしてもリンクさきにとばさないでね。の意。

mouseover…マウスが上にきたら
before…前に追加
fadeOut…フェードアウト　※ページ一番下

↑詳しくはｺﾁﾗ

※画像の重なり方が前から下になっていくので最後の画像（:last）をつかう。

◆fadeInとfadeOut（透明度）

fadeIn…だんだん表示
fadeOut…だんだん非表示

-----------------------------------＜例＞----

＄（"セレクタ"）.fadeOut（”スピード””コールバック関数”）；

---------------------------------------------


▼スピードについて
早い（fast）、普通（特に指定なし・normal）、遅い（slow）

→コールバック関数とは？

CSSで角丸【radius】

border-radius:3px;
-moz-border-radius:3px;
-webkit-border-radius:3px;



参考サイト
http://allabout.co.jp/gm/gc/24004/2/

作業ブログに追加したclass一覧

.post h4→（margin-bottom、0）

googleブログに、ファイルをアップロードする方法

◆ファイルのダウンロードボタンをつけたいとき

グーグルブログにデータをアップロードさせる方法がわからなかったから↓


------------参考サイト------------

iKnowHow/ブログ用に外部サーバを用意（Googleサイト）
http://iknowhow-blog.blogspot.com/2011/02/google.html
↑とてもわかりやすい

----------------------------------

グーグルサイトを作ってそこへアップロード、
アップロードしたデータのテキストリンク（ダウンロード）のURLを
ブログのリンクにはりつける


テスト



※新しいページをつくるとき、使用するテンプレートを【キャビネット】にする（作った後でも変更可能）

＜li＞に＜img＞入れたときの間隔

●リストに画像のリンクを追加したときにできる、隙間をどーにかするCSS

＜li＞＜a＞＜img　alt＝”リスト”＞＜/a＞＜/li＞
＜li＞＜a＞＜img　alt＝”リスト”＞＜/a＞＜/li＞
＜li＞＜a＞＜img　alt＝”リスト”＞＜/a＞＜/li＞
＜li＞＜a＞＜img　alt＝”リスト”＞＜/a＞＜/li＞

＜li＞にline-height:0;
＜img＞にvertical-align:bottom;

※＜li＞をくつけなくてもIEでちゃんとみれる。
※＜img＞のborder：0；も忘れずに。。


その他のやり方メモ（前回）→

メソッドチェーン

◆複数の命令をする。

同じセレクターに対して、それぞれ違う命令をするときに一つにまとめる、ドット『.』でつなげる

---

＄（”p”）.before（”＜h1＞見出し＜/h1＞”）；
＄（”p”）.after（”＜p＞テキスト2＜/p＞”）；

　　　　　　↓↓↓
＄（”p”）.before（”＜h1＞見出し＜/h1＞”）.after（”＜p＞テキスト2＜/p＞”）；

---

結果↓
＜h1＞見出し＜/h1＞
＜p＞テキスト＜/p＞
＜p＞テキスト2＜/p＞

イベントについて ※【jQuery】

◆イベントについて

どこにかくのか、基本形式の中にイベントをかいて、そのまた中に、内容が入る

＄（function（）｛
＄（”ボタン”）.click(★）；
｝）；　注：ブルーは基本形式です。

↓↓★
function（）｛
&(”画像”).attr（”src”,”image02.jpg”）；｝

◆クリック【click】

クリックしたら○○○を実行する。

画像切り替えについてはこちら

◆ダブルクリック【dblclick】

クリックしたら○○○を実行する。

※ダブルクリックするときの注意点

◆トグル【taggle】

開閉メニュー/クリックするたびに何かがおこるもの(順番)

◆マウスイベント

マウスを押したとき・はなしたとき、を実行する。【mousedown/mouseup】
マウスが上にきたとき・はずれたとき、を実行する。【mouseover/mouseout】
マウスの動きに合わせて【mousemove】

◆【one】

イベントに対して一回だけ

◆アンバインド【unbiｎd】

イベントを取消

◆【live】

将来追加される要素

CSSの制御

◆.css　クラスのプロパティを操作する

※セレクターで＜ｐ＞タグのclassBBBを指定しています。

---

.css(”color”,”red”)※カンマで区切る

---

＜例＞
【html】
＜ｐ　class＝”BBB”＞テキスト＜/ｐ＞
【css】
p.BBB｛color:＃blue;｝
↓↓↓
【html】
＜ｐ　class＝”BBB”＞テキスト＜/ｐ＞

◆.css　複数のクラスのプロパティを操作する

---

(”p.BBB”).css({
color:”yellow”,
backgroundcolor:”red”})

---

※CSSとは記述が違うので注意
※（ｶｯｺ）の中に｛｝をいれる



※プロパティの値を取得するには【.css(”プロパティ名”)】

HTML、CSSの操作(命令)→

class属性、追加と削除 ※【jQuery】

◆.addClass　クラスの追加※複数指定する場合はスペースで区切る

※セレクターで＜ｐ＞タグを指定しています。

---

.addClass(”BBB”)

---

＜例＞
＜ｐ＞テキスト＜/ｐ＞
↓
＜ｐ　class＝”BBB”＞テキスト＜/ｐ＞

◆.removeClass　クラスの削除※複数指定する場合はスペースで区切る

※セレクターで＜ｐ＞タグを指定しています。

---

.removeClass(”BBB”)

---

＜例＞
＜ｐ　class＝”BBB”＞テキスト＜/ｐ＞
↓
＜ｐ＞テキスト＜/ｐ＞

◆クラス名、の変更は.attrでできる。

.attrはこちら
HTML、CSSの操作(命令)→

.attrを使って他に出来ることの例えメモ

◆リンク先の変更

①セレクターで（”a”）を指定
②（”href”,”xxx.html”）←変更したいURL

◆テキストのカラーの切替

①セレクターで（”p”）を指定
②（”class”,”text_red”）←変更したいclass（テキストのカラー指定してある）




HTML、CSSの操作(命令)→


　

思いつく属性

◆属性名と属性値

★＜img ＞
＜src＝”画像のURL”width=”100”height=”100”class＝”クラス名”alt=”画像”＞
↓↓
＜img src＝”画像のURL”width=”100”height=”100”class＝”クラス名”alt=”画像”＞

疑似クラスとの違い-jQuery独自のフィルター-

◆liに対して、first-childとfirstを同じ指定にしてみる

★疑似（”li:first-child”）　　　★独自（”li:first”）

↑全ての最初にかかる 　　　　　　　　↑ 最初の最初にかかる

◆liに対して、last-childとlastを同じ指定にしてみる

★疑似（”li:last-child”）　　　★独自（”li:last”）

↑全ての最後にかかる 　　　　　　　　↑ 最後の最後にかかる

※ID、classをつけてあげれば、疑似クラスも独自フィルターと同じ効果になる。


独自フィルターについてに戻る→

ネット上で共通のフォルダをもつ

『Dropbox』

http://www.getdropbox.jp/







　

Dreamweaver/検索時間の短縮

◆【クローク】検索するときに、範囲にいれない。

バックアップ用のデータなど、検索時に検索範囲にいれたくないとき

①ファイルもしくはフォルダの選択

②【右クリック】→【クローク】→【クロークの実行】




　

ベッキー メールの振り分け

◆メールの振り分け

新規作成でフォルダをつくる
　↓
フォルダを右クリック
　↓
フォルダへ振り分けルール
　↓
設定する

設定し終わったら、追加→ＯＫ




　

IE7 のみにCSS

◆IE7のみ

＃main｛マージン：5ｐｘ；｝

*:first-child+html クラス名{
マージン：10ｐｘ；
}


※すぐ下に！かく

横にスクロール

↓最初から自分でつくれる？かも
・[作って学ぶ！jQuery] 第4回 ページスクロールを作って学ぶ | バシャログ。
http://c-brains.jp/blog/wsg/10/04/28-105237.php


↓プラグイン？みたい
・横移動有りでスムーズにスクロールさせる方法
http://coliss.com/articles/build-websites/operation/javascript/296.html



↓横スクロールの海外サイト
http://hobolobo.net/
　

難しい高の字

◆「髙（はしごたか）」
＆#39641;


・HTML で難しい漢字を表示させる
http://members3.jcom.home.ne.jp/ta-higu/memo/kanji_code.html





　

HTML、CSSの操作(命令) ※【jQuery】

※必ず、基本形式の中に↓をいれる。そのままじゃ使えない。

◆.text

※セレクターで＜ｐ＞タグを指定しています。
テキストの変更（まるまる差し替え）

---

.text(”変更できました。”)
※変更する内容の部分を空にすると、取得できます。【.text()】

---

＜例＞
＜p＞変更できます。＜/p＞
↓
＜p＞変更できました。＜/p＞

◆.html

※セレクターで＜ｐ＞タグを指定しています。
タグを含むテキストの変更

---

.html(”＜div＞変更できました。＜/div＞”)
※変更する内容の部分を空にすると、取得できます。【.html()】

---

＜例＞
＜p＞変更できます。＜/p＞
↓
＜p＞＜div＞変更できました。＜/div＞＜/p＞
タグそのものを置き換える場合は↓

◆.prepend/.append　HTML要素（タグ）内に挿入

※セレクターで＜ｐ＞タグを指定しています。
前に挿入

---

.prepend("＜span＞前に追加＜/span＞")

---

【例】
＜ｐ＞＜span＞前に追加＜/span＞テキスト＜/ｐ＞

後ろに追加

---

.append（”strong”）

---

【例】
＜ｐ＞テキスト＜span＞後ろに追加＜/span＞＜/ｐ＞

◆.before/.after　HTML要素（タグ）の前、または後ろに挿入

※セレクターで＜ｐ＞タグを指定しています。
前に挿入

---

.before(”＜p＞前に挿入＜/p＞”)

---

【例】
＜h1＞前に挿入＜/h1＞
＜ｐ＞テキスト＜/ｐ＞

要素の後ろに挿入

---

.after(”＜p＞後ろに挿入＜/p＞”)

---

【例】
＜ｐ＞テキスト＜/ｐ＞
＜p＞後ろに挿入＜/p＞

◆.perpendTo/appendTo　もともとあるHTML要素（タグ）を指定したHTML要素（タグ）内に移動

※元々の状態＜ｐ＞テキスト＜/ｐ＞＜strong＞移動＜/strong＞
前に移動

---

.perpendTo(”strong”)

---

【例】
＜ｐ＞＜strong＞移動＜/strong＞テキスト＜/ｐ＞

後ろに移動

---

.appendTo(”strong”)

---

【例】
＜ｐ＞テキスト＜strong＞移動＜/strong＞＜/ｐ＞

◆insertBefore/insertAfter　もともとあるHTML要素（タグ）を指定したHTML要素（タグ）の前後に移動

※元々の状態＜ｐ＞テキスト＜/ｐ＞＜strong＞移動＜/strong＞
前に移動

---

.insertBefore(”strong”)

---

【例】
＜strong＞移動＜/strong＞＜ｐ＞テキスト＜/ｐ＞

後ろに移動

---

.insertAfter(”ｐ”)

---

【例】
＜strong＞移動＜/strong＞＜ｐ＞テキスト＜/ｐ＞

◆.wrap　他の要素で囲む

※セレクターで＜ｐ＞タグを指定しています。

---

.wrap(”＜div＞＜/div＞”)

---

＜例＞
＜div＞＜p＞テキスト＜/p＞＜/div＞

◆.replaceWith　置き換え（タグ含む）

※セレクターで＜ｐ＞タグを指定しています。

---

.replaceWith(”＜div＞変更できました。＜/div＞”)

---

＜例＞
＜p＞変更できます。＜/p＞
↓
＜div＞変更できました。＜/div＞
※.htmlは、指定したタグ内しか変更できません

◆.remove　要素（タグ）の削除

※セレクターで＜ｐ＞タグの＜strong＞を指定しています。

---

.remove()

---

＜例＞
＜p＞＜strong＞削除します＜/strong＞テキスト＜/p＞
↓
＜p＞テキスト＜/p＞

◆.attr　（属性名・属性値）属性値の変更

※セレクターで＜a＞タグを指定しています。

---

.attr(”href”,”BBB.html”)

---

＜例＞
＜a　href＝”AAA”＞テキスト＜/a＞
↓
＜a　href＝”BBB.html”＞テキスト＜/a＞
※取得する場合は、【.attr(”属性名”)】


**.attrを使ったその他のこと…→
クラスの属性について→

◆.removeAttr　属性の削除

※セレクターで＜img＞タグを指定しています。

---

.removeAttr（”alt”）

---

＜例＞
＜img　alt="空"/＞
↓
＜img　/＞

◆複数の命令を同じセレクターにするとき

→メソッドチェーン

写真の構図

◆構図いろいろ
トリミングなどで迷った時に…


★三角構図
安心感、安定感。
　

★逆三角構図
不安定、不安。軽さ。
→解放

→求心


★日の丸構図
安定、強い印象。メインを真中に
　

★シンメトリー
左右対称、最も美しいと思われるものらしい
　


★対角線
リズム感、躍動感。絵画などでつかわれている
　

★対角線(押しの構図)
→奥に向かって力強く


→上に押し出し、伸びている




★対角線(視線の移動)
→線を目安に、誘導する

→手前に大きいもの奥に小さいもの



★黄金比分割
美しさの法則(1：1：1)
→クロスする部分に置く

→空間を入れる




★引き算の構図
シンプルに主題を明確にする
→余計なものをいれない

→余計なものをフレームアウト

→余計なものをぼかす

→逆光でシルエット化



★複雑な構図
色々な構図を使ってみる

※黄金比を使って、背景をいれる。
クロスしたところに人間をアクセントとして入れて、空間は逆三角を使ってみた。


-------------------　参考サイト　---------------------------

IDEA*IDEA ～ 百式管理人のライフハックブログ
http://www.ideaxidea.com/archives/2010/04/food_pic.html

写真の構図
http://space.geocities.jp/kawananoriyuki001/kouzu.html

漫画の描き方-構図
http://howtomanga.web.fc2.com/enshutsu/kozu.html

------------------------------------------------