utf-8のhtmlをUPするとき間違ってシフトJISでUPしたとき
中国語みたいな文字になってしまったとき
↓ここのFLASHの部分でどうにかなる?!
●Googleの検索結果のサマリーが文字化け
http://www.shtml.jp/mojibake/google.html
2011-12-21
2011-12-07
Fireworks アンカーポイント
●アンカーポイントの追加
まずは、追加する図形の「グループを解除」
(右クリックで選択)
あとは、ペンツールで追加したい線の上をクリック
まずは、追加する図形の「グループを解除」
(右クリックで選択)
あとは、ペンツールで追加したい線の上をクリック
ラベル:
【Fireworks】
2011-11-29
JavaScript エラー Dreamweaver
■開くたびに、もしくは保存するたびにスクリプトエラーがでる。
解決方法
ファイルキャッシュの削除
ユーザ設定フォルダから削除する。
場所:
C:\Documents and Settings\ユーザー名\Application Data\Adobe\Dreamweaver バージョン\ja_JP\Configuration
ここから『WinFileCache-xxxxx.dat』 ※xxxxx部分は使用環境により異なる
削除するとなおる場合がある。
Configurationの名前を変更(バックアップをとっておくため)すると、ユーザ設定フォルダが初期化される。
解決方法
ファイルキャッシュの削除
ユーザ設定フォルダから削除する。
場所:
C:\Documents and Settings\ユーザー名\Application Data\Adobe\Dreamweaver バージョン\ja_JP\Configuration
ここから『WinFileCache-xxxxx.dat』 ※xxxxx部分は使用環境により異なる
削除するとなおる場合がある。
Configurationの名前を変更(バックアップをとっておくため)すると、ユーザ設定フォルダが初期化される。
ラベル:
Dreamweaverについて
2011-11-19
2011-11-03
FLASHでつくる喜び 初心者向けの勉強本
FLASHって複雑な動きとか、ランダムな動きとかやりたい!!でもわかんない!
って人におすすめ。
読んでて楽しい。わかりやすいし、
自分の作ったものが、自由に動き出したときの喜びといったらない。
キャーって叫んじゃうくらい、うれしい。
読んでみて!この本を応用して色々できるよ。一冊まるまる読んだのはこの本だけ。
AS3勉強したいなら、(初心者)この本一押しです。
簡単な占いつくってみたよ。この本のおかげサマサマ。
→占い
って人におすすめ。
読んでて楽しい。わかりやすいし、
自分の作ったものが、自由に動き出したときの喜びといったらない。
キャーって叫んじゃうくらい、うれしい。
読んでみて!この本を応用して色々できるよ。一冊まるまる読んだのはこの本だけ。
AS3勉強したいなら、(初心者)この本一押しです。
簡単な占いつくってみたよ。この本のおかげサマサマ。
→占い
javaスクリプトがわかんなかったけど、jQueryできた
一言で言うなら、わかりやすい!
Javaスクリプトはちんぷんかんぷんだったけど、jQueryできた
ちゃんと意味を理解しないと、前に進めなかったのに!
他にもAS3を勉強していたということもったかもだけど、
jQueryって何でもできるんだな・・・
CSS3がブラウザで対応してなくてもjQueryを使ったらきく!!
しかも、ソースが短くて素敵★そんな魅了を手に入れることが出来る一冊!!
わかりやすい丁寧で、初心者にはとってもオススメだよ!マジで。
Javaスクリプトはちんぷんかんぷんだったけど、jQueryできた
ちゃんと意味を理解しないと、前に進めなかったのに!
他にもAS3を勉強していたということもったかもだけど、
jQueryって何でもできるんだな・・・
CSS3がブラウザで対応してなくてもjQueryを使ったらきく!!
しかも、ソースが短くて素敵★そんな魅了を手に入れることが出来る一冊!!
わかりやすい丁寧で、初心者にはとってもオススメだよ!マジで。
ラベル:
【jQuery】メモ,
おすすめ本
2011-11-02
テキストリンク 背景 テキストずらす 字下げ
◆字下げを使って、テキストリンクの背景に指定した画像から
改行した二行目もそろえる
text-indent:-1em; ※emは1字
→改行したテキストリンクの2行目にpadding-leftが効かないときに
.クラス名{
padding-left:12px;←背景の矢印とか分ずらす
text-indent:-1em;
}
.クラス名 a{
color:#ff8800;
background:背景 矢印とか;
}
※アンダーラインが背景にかぶることはない。
改行した二行目もそろえる
text-indent:-1em; ※emは1字
→改行したテキストリンクの2行目にpadding-leftが効かないときに
.クラス名{
padding-left:12px;←背景の矢印とか分ずらす
text-indent:-1em;
}
.クラス名 a{
color:#ff8800;
background:背景 矢印とか;
}
※アンダーラインが背景にかぶることはない。
html5 基礎の基礎
どんどん新しくなってもううんざり。
『html5』を勉強しなきゃなんだけど、新しいことを又詰め込むのか・・・
憂鬱な気持ちをやんわりと紐解いてくれるのがこの一冊!!マジでおすすめ。
え?こんなに簡単だったの?ってくらい頭を抱え込んでいたのが何だったのか・・・
と思えてしまった一冊!!アマゾンのレビューも参考にして!!
右脳人間の人には相性いいかも!(私が右脳人間だから・・・)
『html5』を勉強しなきゃなんだけど、新しいことを又詰め込むのか・・・
憂鬱な気持ちをやんわりと紐解いてくれるのがこの一冊!!マジでおすすめ。
え?こんなに簡単だったの?ってくらい頭を抱え込んでいたのが何だったのか・・・
と思えてしまった一冊!!アマゾンのレビューも参考にして!!
右脳人間の人には相性いいかも!(私が右脳人間だから・・・)
2011-10-16
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でやる
2011-10-15
自分のHPに検索機能をつける
◆google
http://www.1kara.net/knowhow/search.php
◆複数のCSSをjQueryでかくとき
http://www.nk0206.com/life/2009/10/jquerycss.html
http://www.1kara.net/knowhow/search.php
◆複数のCSSをjQueryでかくとき
http://www.nk0206.com/life/2009/10/jquerycss.html
2011-10-12
角丸 シャドウ 【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
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』を使うと、↑これらはいらない。
2011-10-11
displayBOX 【CSS3】
◆簡単にレイアウト
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgYVcWDTtQDuLOrpNEJvbFirHi1qTIpfMlv2oHVSPB1c5hK8Je2oKwqanUQ6bfTb1vBaWKVXkHTuGHJTgx39m4Zm8g8zh31sQ5rmwi29MEfH9WrG-ISGBg8VwR6DfBXXQ7oIVTQ3GQs9VY/s320/20111011.png)
A…display:box;(★)
BとC…box-flex:●●;→比率
box-ordinal-group:●●;→順番
(★)…-moz-とか、つくところが違うので注意!!
IEとオペラは見れない。
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgYVcWDTtQDuLOrpNEJvbFirHi1qTIpfMlv2oHVSPB1c5hK8Je2oKwqanUQ6bfTb1vBaWKVXkHTuGHJTgx39m4Zm8g8zh31sQ5rmwi29MEfH9WrG-ISGBg8VwR6DfBXXQ7oIVTQ3GQs9VY/s320/20111011.png)
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;はなくちゃ見れない。
IE→-ms-
Firefox→-moz-
Safari→-webkit-
Chrome→-webkit-
opera→-0-
今の段階では全部付けておいた方がいい。
後で、消す。
IEは、ほぼ無視する。付けても使えない。.htcを使っても使いたいの使えない。
IEだけ別でつくる。
※IE以外は簡単なCSS3なら最新版はだいたい見れた。display:BOX;はなくちゃ見れない。
2011-10-07
CSS 【HTML5】
◆角丸
border-radius(ラディウス)
◆影を付ける(ボタン)
親切サイト→CSS3でドロップシャドウを作る『box-shadow』プロパティのまとめ|MONODEZ
CSS3をIEに対応させてくれる??↓
http://www.hislab.net/blog/2010/12/ie-css3.html
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
→http://remysharp.com/
IE7IE8は見れたIE9は?
----------とっても親切参考サイト---------
・html5をIEに対応させるには | yoseyama Blog
http://www.yoseyama.jp/blog/2011/01/html5ie.html
2011-10-06
追加された要素 【HTML5】
◆文章構造化の為に追加された要素一覧
※注:右側のコメントはなんとなく覚えるための私的なものです。header…ID="head"と指定していたところ+セクションの中に入れることで意味もまた違ってくる
footer…ID="foot"と指定していたところ+セクションの中に入れることで意味もまた違ってくる
nav…ID="navi"と指定していたところ
section…見出しがあるものをすべてこれで囲む
article…ただの記事・独立したもの ※これは入れ子に出来ない
aside…サブナビ・関連性の低いもの
address…プロフィールや連絡先、お問い合わせなど
→ページの中で使うと、その内容の連絡先
→フッターに入れると、ページ全体の連絡先
hgroup…見出しをまとめたりする
figure(フィギア)…画像
figcaption(フィグキャプション)…画像のキャプション※勝手に改行される
↑figure(フィギア)の中に入れるのが正解らしい
mark…重要なもの、検索で引っかかったみたいになるらしい色が付く
rudy…ふりがながつくもの
rt…↑のそのふりがなそのもの
rp…↑のふりがなに対応していないものに使う
time…時間・日付とか
2011-09-01
Dreamweaver プレビュー コピぺ 代替テキスト 消す
Dreamweaverのプレビュー画面で画像をコピペすると、イメージの説明がでてくるのを消す
【環境設定】→【アクセシビリティ】の挿入時に属性を表示:イメージのチェックボックスを消す。
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh0qq4-eBQWVTui4bphoifZcg9zeTKzRXe-iRCXexU_MHUOcaJQvIbOPfHOZCsIOpslZfx31Xd79TUIMDIrEEIRYrDJircvbgtNTDT4rOfFWbbTY3aC7tFUQUr5TVoWa0qhiS8ckzaOwkA/s1600/20110901.png)
ラベル:
Dreamweaverについて
2011-08-11
最近知った、くっついてるCSS
.text.text2{
margin:4px;
}
意味↓
<div class=" text text2">
複数指定されているCSSにだけ、指定するとき
例でいうと、
<div class=" text text2 text3">←これにはかからない。
<div class=" text "><p class=”text2”>←これにもかからない。
<div class=" text text2">←これだけ、かかる
★CSS側で、スペースで離れていれば、『.text .text2』
.textの中の.text2に○○やってねの意味になる。
.text .text2{xxxxx}
※ちなみに、IDは複数指定できません。
-----------とっても親切サイト-----------
・小粋空間
http://www.koikikukan.com/archives/2011/06/16-000616.php
margin:4px;
}
意味↓
<div class=" text text2">
複数指定されているCSSにだけ、指定するとき
例でいうと、
<div class=" text text2 text3">←これにはかからない。
<div class=" text "><p class=”text2”>←これにもかからない。
<div class=" text text2">←これだけ、かかる
★CSS側で、スペースで離れていれば、『.text .text2』
.textの中の.text2に○○やってねの意味になる。
.text .text2{xxxxx}
※ちなみに、IDは複数指定できません。
-----------とっても親切サイト-----------
・小粋空間
http://www.koikikukan.com/archives/2011/06/16-000616.php
2011-08-04
ブラシツールについて 【※photshop】
◆パッとみ何が何だかわからないブラシツールについて
↓画像左側にいっぱい項目があるが、重要なのは『シェイプ』と『その他』らしい
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjQqzVaq_mMjIVzrHYQ_sUOI0ArucROgeB6ci_8wp8sHmBDmw5xaWhCpE14zpeDT5YbAh8snliAQVKcBGR_KOpju1xftzXlDYkC1bfREWz8tVaWAMtVR-WsdQbdcb0VCVv4o4X6dm8udK4/s320/%25E3%2583%2596%25E3%2583%25A9%25E3%2582%25B7%25E3%2583%2584%25E3%2583%25BC%25E3%2583%25AB02.jpg)
![ブラシ](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi_aWRaS9oQ87az8Bn1WOMiCOPXrDdkQet-uE-utTTriM1cgg_vkOb97zMx7HoAn8-UtDDcf55NRFLzzKQn9coxaOxAYr4yQ60T8DBll6g87B1UgUu7Vc_nHGb0lqRfLNzRj8WuU0Ougl0/s1600/%25E3%2583%2596%25E3%2583%25A9%25E3%2582%25B7%25E3%2583%2584%25E3%2583%25BC%25E3%2583%25AB.jpg)
----------------- ブラシいろいろ -------------------
鉛筆のブラシ↓
・Photoshopでリアルな鉛筆ブラシを作る方法 | 彦左虎肉丸
http://konikugan.com/?p=182
ラベル:
【photshop】
2011-08-03
フォームについて 《ラベル-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
フルネーム
*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_address
◆都道府県【name/value】
*area/01・02・03…
*area/北海道・青森…
◆内容【name】
*query
*comment
フォームについて ※【jQuery】 その③
フォームについて ※【jQuery】 その①
フォームについて ※【jQuery】 その②
一括して、inputを選択。
*どんな時に使うのか?
入力している欄に色をつけたりする※すべてのinputタグに
フォーカスとブラーをつかう。
⇒フォーカスしたら背景の色を●色にかえてね。
⇒フォーカスしてなかったら背景の色は無しで
一括して、type="text"を選択。
type="password"を選択。
一括して、type="radio"を選択。
※この場合、ラベルのIDで指定したりなんかします。
一括して、type="checkbox"を選択。
*どんな時に使うのか?
『全てチェック』するときなど
チェックの入っているものを選択。
type="submit"または”image”だけを選択。
type="image"を選択。
*どんな時に使うのか?
『マウスオーバー』した時に画像を変える。CSSでもできるけど...どっとがいいのかは不明
type="reset"を選択。
type="button"を選択。
type="file"を選択。
選択されているものを選択。
フォームについて ※【jQuery】 その②
◆:input
(jQuery専用フィルター)一括して、inputを選択。
*どんな時に使うのか?
入力している欄に色をつけたりする※すべてのinputタグに
フォーカスとブラーをつかう。
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiqYtQMZ4-Cxq8HVxH-NrkCV2ePTNZj0bjhOVwCdexcnKThYPn3QvLoZLqvSx8N5VKjuH_YfbGljtaEYei4GpD2emAraAHn0wFsPkWJEMW4sUAjTX7ITaIs7tyDPpufjOgUqbRuJb3Yq3M/s1600/f_input.jpg)
⇒フォーカスしたら背景の色を●色にかえてね。
⇒フォーカスしてなかったら背景の色は無しで
◆: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専用フィルター)選択されているものを選択。
ラベル:
【jQuery】メモ,
html
2011-08-02
ファイル比較
同じようなファイルの内容の違うところを見やすくしてくれる。
『WinMerge』というソフトをインストールしてくる。
WinMerge 【日本語版】→窓の社より
<例>
比較したいテキストデータファイルをドラックドロップさせればOK!
勝手に違う部分に色がつく。
Dreamweaverをつかってる時にで比較したいなら、
比較したいファイル2つ選択して右クリック【ローカルファイルの比較】とすると
『WinMerge』が開く
※アプリケーションの設定が必要→WinMergeU.exe
詳しくは↓↓とっても親切サイト
・ファイルを比較するなら「WinMerge」 | バシャログ。
http://c-brains.jp/blog/wsg/10/07/15-105429.php
『WinMerge』というソフトをインストールしてくる。
WinMerge 【日本語版】→窓の社より
<例>
比較したいテキストデータファイルをドラックドロップさせればOK!
勝手に違う部分に色がつく。
Dreamweaverをつかってる時にで比較したいなら、
比較したいファイル2つ選択して右クリック【ローカルファイルの比較】とすると
『WinMerge』が開く
※アプリケーションの設定が必要→WinMergeU.exe
詳しくは↓↓とっても親切サイト
・ファイルを比較するなら「WinMerge」 | バシャログ。
http://c-brains.jp/blog/wsg/10/07/15-105429.php
ラベル:
Dreamweaverについて
DreamweaverでCSSを改行すると、インデントされるのをなくす
【表示】→【コードビューオプション】→【自動インデント】のチェックを外す。
ぴったり左につく。
ぴったり左につく。
ラベル:
Dreamweaverについて
Dreamweaverアップグレード ショートカット移動 設定
Dreamweaverアップグレードしたときに、
前のバージョンで設定したショートカットをそのまま持ってくる方法。
※普通に設定しなくてもたぶんショートカットは同じ設定が追加されてる。
確認してみて、もし・・・できなかったら↓↓↓
PC:win XP
DreamweaverCS4からDreamweaver5.5へアップグレード
【マイコンピュータ】→【OS(C:)】→【Documents and Settings】→【ユーザー名】→【Application Data】→【Adobe】→【Dreamweaver CS4】→【ja_JP】→【Configuration】→【Menus】→【Custom Sets】※自分で作ったファイルがある(xml)
↑↑これを同じ手順で、【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
前のバージョンで設定したショートカットをそのまま持ってくる方法。
※普通に設定しなくてもたぶんショートカットは同じ設定が追加されてる。
確認してみて、もし・・・できなかったら↓↓↓
PC:win XP
DreamweaverCS4からDreamweaver5.5へアップグレード
【マイコンピュータ】→【OS(C:)】→【Documents and Settings】→【ユーザー名】→【Application Data】→【Adobe】→【Dreamweaver CS4】→【ja_JP】→【Configuration】→【Menus】→【Custom Sets】※自分で作ったファイルがある(xml)
↑↑これを同じ手順で、【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アップグレード スニペット移動 設定
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起動、スニペットに新しいフォルダを追加するとでてくる
前のバージョンで設定したスニペットをそのまま持ってくる方法。
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起動、スニペットに新しいフォルダを追加するとでてくる
ラベル:
Dreamweaverについて
2011-07-27
特殊文字一覧
とっても親切サイト↓↓
・ハートなどの記号「♥♡♣♦♠」の入力方法 | コリス
http://e-words.jp/p/r-htmlentity.html
さらに詳しく・見やすく載ってる↓↓
・みんなの知識【ちょっと便利帳】 使いたいときの HTML特殊文字 & 機種依存文字 - 矢印 & 矢印に使える記号、使えそうな記号
http://www.benricho.org/symbol/tokusyu_02_arrow.html
・ハートなどの記号「♥♡♣♦♠」の入力方法 | コリス
http://e-words.jp/p/r-htmlentity.html
さらに詳しく・見やすく載ってる↓↓
・みんなの知識【ちょっと便利帳】 使いたいときの HTML特殊文字 & 機種依存文字 - 矢印 & 矢印に使える記号、使えそうな記号
http://www.benricho.org/symbol/tokusyu_02_arrow.html
ラベル:
Dreamweaverについて
2011-07-22
フォームについて ※【jQuery】 その②
→フォームについて ※【jQuery】 その①
フォームについて ※【jQuery】 その③
データが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のバージョンを確認してみたりする。
フォームについて ※【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のバージョンを確認してみたりする。
ラベル:
【jQuery】メモ,
html
FireworksからIllustratorにパスをもってく
もってくことはできないので、
Fireworksを別名で保存、Illustratorで保存。
逆に、イラレのデータをFireworksで開くのは、普通にできます。
Fireworksを別名で保存、Illustratorで保存。
逆に、イラレのデータをFireworksで開くのは、普通にできます。
2011-07-21
2011-07-20
演算子一覧
◆計算をする演算子
『+』・・・足し算★『-』・・・引き算
『*』・・・掛け算
『/』・・・割り算
『++』・・・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】メモ,
【jQuery】メモ
2011-07-15
2011-07-07
集中力がほしいとき
残像トレーニング
(眠い時にも有効)
---------------サイト↓---------------
・脳を活性化させ集中力を高める残像メンタルトレーニングで能力アップ
httphttp://www.blogger.com/img/blank.gif://www.zanzotraining.com/10/trial.html
(眠い時にも有効)
---------------サイト↓---------------
・脳を活性化させ集中力を高める残像メンタルトレーニングで能力アップ
httphttp://www.blogger.com/img/blank.gif://www.zanzotraining.com/10/trial.html
2011-06-30
2011-06-29
2011-06-22
フォームについて ※【jQuery】 その①
→フォームについて ※【jQuery】 その②
フォームについて ※【jQuery】 その③
<例>
$("#mail_ad").text($("input").val()+"に送信します。");
mail_adのinputの入力されているのを習得して、『に送信します。』と付け加えて変更される
<例>
$("#kakunin").text($("select").val());
kakuninのテキストがselectで選択されている値に変更される。※テキストエリアでもできます。
.val()→値を取得
.val(””)→値が空
クリアボタンをつくって、そのボタンを押すとクリアされる。
※</form>タグの中に<button>をいれるとファイルがありませんとでるので注意
<button>タグが飛んでしまうのは、type=""を指定していないから
”button”⇒ボタンとしてだけの機能
”submit”⇒実行ボタン
"reset”⇒リセットボタン
★メソッドチェーンと$(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(){発生時の処理});
*どんな時に使うのか?
フォーカスが外れたときの処理を変えたいとき。
⇒フォームの入力/未入力によって処理を変えたい時は
if文をつかう。if文について→
もし、フォーカスされても入力されなかったら、文字表示しといてね。
↓↓↓
※メソッドチェーンで↑のjs(focus)につなげます。
.bluer(function(){
if($(this).val()==""){ //もしフォームが空だったら
※同じ処理なので↑のjs(focus)をそのままコピペします。
}
});
*どんな時に使うのか?
選択が変更されたら、テキストの項目を変更したいとき。
セレクトボックスと一緒につかいます。
↓↓↓
optionタグにvalueに入れたテキストを読み込む
*html側*
<select>
<option value="いちばん">いちばん</option>
<option value="にばん">にばん</option>
<option value="さんばん">さんばん</option>
</select>
<p><span>いちばん </span><input・・・省略
セレクトボックスが変更されたら、セレクトボックスのvalueを#Chanのspanにテキストかえてね
↓↓↓↓
*js側*
$(function(){
$(”select”).change(function(){
$(”#chan span”).text($(this).val());
});
});
※テキストを変更するだけでなく、追加して項目を増やすこともできる。と思う
フォームについて ※【jQuery】 その③
◆val
入力されている値や選択されている値を取得・変更<例>
$("#mail_ad").text($("input").val()+"に送信します。");
mail_adのinputの入力されているのを習得して、『に送信します。』と付け加えて変更される
<例>
$("#kakunin").text($("select").val());
kakuninのテキストがselectで選択されている値に変更される。※テキストエリアでもできます。
.val()→値を取得
.val(””)→値が空
◆val("")
入力された値を削除する、クリアする。クリアボタンをつくって、そのボタンを押すとクリアされる。
<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文について→
もし、フォーカスされても入力されなかったら、文字表示しといてね。
↓↓↓
※メソッドチェーンで↑のjs(focus)につなげます。
.bluer(function(){
if($(this).val()==""){ //もしフォームが空だったら
※同じ処理なので↑のjs(focus)をそのままコピペします。
}
});
◆change
入力された内容を感知する(フォーカスが外れたら感知します。)*どんな時に使うのか?
選択が変更されたら、テキストの項目を変更したいとき。
セレクトボックスと一緒につかいます。
↓↓↓
optionタグにvalueに入れたテキストを読み込む
*html側*
<select>
<option value="いちばん">いちばん</option>
<option value="にばん">にばん</option>
<option value="さんばん">さんばん</option>
</select>
<p><span>いちばん </span><input・・・省略
セレクトボックスが変更されたら、セレクトボックスのvalueを#Chanのspanにテキストかえてね
↓↓↓↓
*js側*
$(function(){
$(”select”).change(function(){
$(”#chan span”).text($(this).val());
});
});
※テキストを変更するだけでなく、追加して項目を増やすこともできる。と思う
ラベル:
【jQuery】メモ,
html
フォームのおさらい ※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側/プレビュー ▼▼
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjxS6wKR2xgvMVbO3SyuziZbKXFAu2sCV91tVzMH1-5vBpJqNUdPBXghvDUgE0vFQYBTt5cHR9hYgFOHHD62_jmXCd3fqjR5V7Z0sdfGILXJmryrP5fTYCs3i7ma_1ijtlc-pAfTAPhEeU/s1600/20110622_1.gif)
・<select>~</select>(セレクト)…セレクトボックス
selectにnameをつけて、optionにvalueで。
選択項目は<option>~</option>
・<texterea>~</texterea>(テキストエリア)…テキスト入力
横幅⇒cols
縦幅⇒rows(行数)
---------------------参考サイト---------------------
・とほほ
http://www.tohoho-web.com/html/form.htm
<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側/プレビュー ▼▼
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjxS6wKR2xgvMVbO3SyuziZbKXFAu2sCV91tVzMH1-5vBpJqNUdPBXghvDUgE0vFQYBTt5cHR9hYgFOHHD62_jmXCd3fqjR5V7Z0sdfGILXJmryrP5fTYCs3i7ma_1ijtlc-pAfTAPhEeU/s1600/20110622_1.gif)
・<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
2011-06-21
googleブログにアンケートを設置する方法
【アカウント設定】から
【ドキュメント】
※先に、設定で日本語にしないと英語でわからない。
※とりあえず、日本語にしてから設定を再度開くと、日本語になってる。
------------------参考サイト------------------
↓↓とっても親切
・Googleドキュメントでアンケートフォームを作る方法
http://www.kagua.biz/seisaku/googledocs.html
【ドキュメント】
※先に、設定で日本語にしないと英語でわからない。
※とりあえず、日本語にしてから設定を再度開くと、日本語になってる。
------------------参考サイト------------------
↓↓とっても親切
・Googleドキュメントでアンケートフォームを作る方法
http://www.kagua.biz/seisaku/googledocs.html
ラベル:
googleブログ【作業メモ】
2011-06-16
CGIをちょっとやってみる。
フォームのやる気が出ないのはcgiがわからないから
↓↓↓
参考サイト:『とほほ』
…ということは、Perlを覚えればいい?
テキストエディタはTeraPad
保存すると、○○.txtとなるので、○○.cgiと保存。色変わる
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjBxJGgY0Py5MZYeucxCxD5b8_8VyUiz6hJJmUSaDUKM0WurrDUbNDAYB_2vjvYznhoIFlchA4VQYK1P5wYEwe2gLK0qDFf8EIe8wT57ZAytx0kWPrjffswmBbTa4kj1RD7vvEHdyE2CvA/s320/20110617.gif)
#!perlのパス※空白・空行はいれちゃいけないらしい
¥nは、たぶん改行
print:"★★";perlの構文。
※この中で、""(ダブルクォーテーション)を使いたい時は¥で囲ってあげる。
…そう考えると、
htmlのタグをprelでかこってあげている状態
ローカルで確認したいので、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
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg6Lf7U95FLUdpj3Y3jV-zn0iCLa6s-ZyVBHEmBbodt0MMmb04K4_hnww8LLgy3hV3kIp73CEASxqbWv8C_wNSq1c0evzH-TEJc0NpRQN8bwnfqXQXG9ax6LH5Hv-UolMomI0OI7koUm3k/s320/20110617_2.png)
....作業環境ができたので、後は、パールの勉強です。
『とほほ』で基礎知識をよむ
…今の時代は、perlじゃなくて、PHPらしい。。。。
なので、perlインストールをPHPインストールに変更する。
参考サイト
・PHPインストール - PHPインストールと初期設定
http://www.phpbook.jp/install/install/
↓↓↓
◆そもそもcgiで何ができるのか
お問合せ/掲示板/買い物カゴ…etc参考サイト:『とほほ』
◆よく出てくるPerlってなにか
Perlっていうプログラミング用語を使ってcgiが出来あがるらしい…ということは、Perlを覚えればいい?
◆Perlについて
参考サイト:『とほほ』参考に何も考えずにかいてみるテキストエディタはTeraPad
保存すると、○○.txtとなるので、○○.cgiと保存。色変わる
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjBxJGgY0Py5MZYeucxCxD5b8_8VyUiz6hJJmUSaDUKM0WurrDUbNDAYB_2vjvYznhoIFlchA4VQYK1P5wYEwe2gLK0qDFf8EIe8wT57ZAytx0kWPrjffswmBbTa4kj1RD7vvEHdyE2CvA/s320/20110617.gif)
#!perlのパス※空白・空行はいれちゃいけないらしい
¥nは、たぶん改行
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
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg6Lf7U95FLUdpj3Y3jV-zn0iCLa6s-ZyVBHEmBbodt0MMmb04K4_hnww8LLgy3hV3kIp73CEASxqbWv8C_wNSq1c0evzH-TEJc0NpRQN8bwnfqXQXG9ax6LH5Hv-UolMomI0OI7koUm3k/s320/20110617_2.png)
....作業環境ができたので、後は、パールの勉強です。
『とほほ』で基礎知識をよむ
…今の時代は、perlじゃなくて、PHPらしい。。。。
なので、perlインストールをPHPインストールに変更する。
参考サイト
・PHPインストール - PHPインストールと初期設定
http://www.phpbook.jp/install/install/
2011-06-14
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
イベント一覧→
ラベル:
【jQuery】メモ
イラレ 木のつくり方
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiqyylKuu3BvePrrRLJX-VaQ02CUGXibCkgRRQO7gRBkJya5B4Eeym9oHt_2PCCCgWsOMsqYPltqEhZ_FYcVRlXeeHlyENnB7yqOppY_8QbC0Wszl3pIIbyl_iBu7k-CKTfIPmRxXJ2LYs/s1600/20110614.gif)
楕円(何でもいい)→ ①【ジグザグ】→ ②【ラフ】
①【効果】→【パスの変形】→【ジグザグ】
②【効果】→【パスの変形】→【ラフ】
*効果をパスに?する方法はこちら
だいたい三角に組み合わせて、木を足す。
結果↓
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhYReNpZq2St1IyBsXWONJR0210EtP7zSzTq_PgHMn7Y8W-BohV8uxuAKL_tCojH2_UkBTz9FAEKYSj8aUvKbRSwp-9iPC9BZ0s5ypPxgvZMEW63RSzo_wFyGJrNTUnqAXTs98jf8eGPIo/s320/20110614_2.jpg)
-------------------------参考サイト-------------------------
・Illustrator(イラストレーター)で簡単な木を描く
http://kohtguchi.at.webry.info/200612/article_1.html
ラベル:
【Illustrator】
2011-06-11
ファビコンをつくる
ファビコンのサイズ→16px×16pxの正方形
※大きく作っても縮小されて表示される
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj7OpYVbmHoY6aHEe4AOL1dOD4pHCls9-QT56AnuIxloZB1sSpt3uY38oc-2OQX31R2QWYO1QiXrKQnVJDhxd3jjonohBg-nS2I_v0ZWnNOdk0kgw-W8w_WIajNhQSz4_hN-0hywsk16Pc/s320/20110615.jpg)
②簡単に変換してくれる
『アイコン(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
※大きく作っても縮小されて表示される
◆作業手順
①16px×16pxサイズの画像を作る(gifまたはpng)![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj7OpYVbmHoY6aHEe4AOL1dOD4pHCls9-QT56AnuIxloZB1sSpt3uY38oc-2OQX31R2QWYO1QiXrKQnVJDhxd3jjonohBg-nS2I_v0ZWnNOdk0kgw-W8w_WIajNhQSz4_hN-0hywsk16Pc/s320/20110615.jpg)
②簡単に変換してくれる
『アイコン(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
2011-06-10
変な透過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
文章を無視してはいっている。
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
ラベル:
googleブログ【作業メモ】
2011-06-09
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/
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/
ラベル:
【jQuery】メモ
2011-06-08
Dreamweaver コピペとかすると、突然 全選択される。
ワークスペースのレイアウトをいじってるとなるらしい。
デフォルトに直すとおさまる??
【ウィンドウ】→【ワークスペースのレイアウト】
-----------------参考サイト-----------
・Dreamweaver コピー・切り取りの一部選択が全選択になってしまうバグ
http://zennihonhumidaisyoukouunndoukyoukai.com/archives/20110512/115/
デフォルトに直すとおさまる??
【ウィンドウ】→【ワークスペースのレイアウト】
-----------------参考サイト-----------
・Dreamweaver コピー・切り取りの一部選択が全選択になってしまうバグ
http://zennihonhumidaisyoukouunndoukyoukai.com/archives/20110512/115/
ラベル:
Dreamweaverについて
Dreamweaverプレビュー clearfixがきかない
★今までのやり方
・イラっとするので諦めて、下のdivにclearをかけとく。
<div class="cl">
・空のボックスとおいとく、UP時に一括削除
<div class="cl"></div><!--//後で消す-->
★最近発見したやりかた
プレビュー用にCSSに追加
CSSに↓
.clearfix{ overflow:hidden;}のみ
※cs5.5はいらないときもある。普通にみれる
UP時に消す。あっても特に問題ない。
※高さを指定しないと、消えます。(cs4)
・イラっとするので諦めて、下のdivにclearをかけとく。
<div class="cl">
・空のボックスとおいとく、UP時に一括削除
<div class="cl"></div><!--//後で消す-->
★最近発見したやりかた
プレビュー用にCSSに追加
CSSに↓
.clearfix{ overflow:hidden;}のみ
※cs5.5はいらないときもある。普通にみれる
UP時に消す。あっても特に問題ない。
※高さを指定しないと、消えます。(cs4)
ラベル:
Dreamweaverについて
最近の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
→フローと解除について
★最近まで使っていた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応用編
◆画像とテキストの切替
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjHeu4JVLWx5S02LrNA8ToE3jyeQAxkgPL7MXX_IeVopebr2GgMqvO_OYM04gNSiBEo-rUujjXxTYlUThxMIbt0Zrm7fQZgzXxa0KPHRI_Dd2t6ZocRTO55YH_htO5sW6GIH_Jad8TeP94/s1600/20110608_01.gif)
左のボタンをクリックすると、右の写真の”ALTとテキスト”部分が変わる。
html側
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjiFL4umaAR3_OcU7GBz5T-NotVnPeLhrVOQXFEd3QHMa-gRc4dl-sv5U5YAL1hrEY5GHjMhzoICKS3z8a2wuiI392KN0fSKWny3IjtkMVpBxdxwK4MxlmGXaAcR38tBJ3q4fvxqdiMtcs/s1600/20110608_04.gif)
js側
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiBLtTK1qHcFdFw9b5j2rJjkvIBnU3-oXZes9SjM7znkWH9OyKmYP1Me9cbBZPoGCm_82gtBFzl68fDWnuRyuj43q6VqFGVpKvEpYZMTyZIOduk2LCOLjqQ20WNXV3rcEOQpe4104O0RxA/s1600/20110608_02.gif)
クリックしたら、リンクの『hrefとテキスト』をイメージの『srcとALT』にいれてね。そんでもって、イメージの『ALT』をイメージしたのテキストにいれてね。の意。
※リンクのテキストは、CSSで見えなくさせる。
★$(this)をつかうときに気をつけること。
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhMoFWaJs1enFgevR0NzNKVevNhneA4YisIDEtRUbEjeyZa7EFBKtFyVncLCDXWooEcBv_URIMxUP5AFcZR13hgeWDjzmPVrmMwHyMM_R_C721X-vz444qWPfz24B3Gz9gtGa8rICP977E/s1600/0609_01.gif)
最初に、<a>タグの中の<img>のALTをテキストにいれようとした。
が、$(this)は、イベントが発生した要素を習得してくれるので<a>タグの中に
属性がないので、読み込んではくれなかった。.attrだからダメだったのかも??
★メソッドチェーンで気をつけること
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgvGBs1pQIoGn8VPlFOnr_XMP0HpHA0jW8Vq1QE8oQW9XQD6Y2-tYML1aYKhaEo-kF74bnBJH7SG_iSriBBwxrRGp2miEWiCFxxzh0UEzsFzlIM2ULxeY6PFt06khhAqC9i5cTD6mkwZbY/s320/0609_02.gif)
どのセレクターに対して、命令するのか、ちゃんと理解すること
画像が、ただのサムネイルでいいとき*は、もっと簡単になる。→画像切り替え
リンクタグにいれない。srcはそのまま、ALTをテキストにいれる。
*サムネイルと、普通サイズの画像が同じ場合
ラベル:
【jQuery】イベント,
【jQuery】メモ
ブログ内検索ができなくなったときに
解決方法見つからず、↓応急処置
下記、サイトのソースに自分のドメイン部分を修正して貼りつける。
・適当えんじにあ
http://mfsocket.blogspot.com/2010/06/google_16.html
とっても親切なサイト↑↑
◆新しく、追加する。貼りつける。
【ガジェット追加】→【HTML/JavaScript】下記、サイトのソースに自分のドメイン部分を修正して貼りつける。
・適当えんじにあ
http://mfsocket.blogspot.com/2010/06/google_16.html
とっても親切なサイト↑↑
2011-05-25
Dreamweaver 文字化けについて
日本語が文字化けしてしまうのをなおす。
そもそも文字コードがいまいちわからない。
日本語EUC(euc-jp)
日本語シフトJIS(shift_jis)
★HTMLの<meta>タグの中に<meta charset="●●">
euc-jp…Unix系でつかわれる*
shift_jis…Windowsの標準
*Unix系って?
OS、OSの種類(Windows/mac/Unix)
プログラムで技術を開発するためのものらしい
詳しくはここ→回答者NO.19の人
一番わかりやすかった参考サイト:kus/ウェブリブログ
http://kus3.at.webry.info/201105/article_12.html
※裏側のプログラムがeucで書かれていて、 組み合せる場合、HTML側もeucでかくらしい。
※日本語の入ったプログラムをかくとき、eucを使っていた。 今は、utf-8でかくのが主流らしい。
※携帯サイトは、シフトJISのみ。(スマートフォンを除く)
※jsファイルの日本語がhtmlで文字化けするときは、
テキストエディタなどで開いて、文字コードをUTF-8で再度読み込む。
書いてあった日本語は文字化けするので、バックをとっておいて、読み込んだ後にコピペ
【修正】→【ページプロパティ】→【タイトル/エンコーディング】→【エンコーディング】を変更、リロード
CSSファイルをコメントアウト内(/**/)に日本語で記述するとIEのみ効かない部分が出てくる。
バージョンは不明、”文字コード”を指定してあげると回避する?
そもそも文字コードがいまいちわからない。
◆文字コードの種類
デフォルト: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のみ。(スマートフォンを除く)
※jsファイルの日本語がhtmlで文字化けするときは、
テキストエディタなどで開いて、文字コードをUTF-8で再度読み込む。
書いてあった日本語は文字化けするので、バックをとっておいて、読み込んだ後にコピペ
◆文字化けしたページを開いてしまったときに直す方法
【修正】→【ページプロパティ】→【タイトル/エンコーディング】→【エンコーディング】を変更、リロード
◆CSS文字コードの指定
@charset "ここに入れる"; ※jsにはありません。CSSファイルをコメントアウト内(/**/)に日本語で記述するとIEのみ効かない部分が出てくる。
バージョンは不明、”文字コード”を指定してあげると回避する?
ラベル:
Dreamweaverについて
html5の理解
◆何が変わったのか
・記述がちょっと簡単になった。・大文字と小文字の区別がない。
・html側での装飾がなくなった。
(例:strong→太字にならなくなった、意味は同じ)
すべてCSS/CSS3でやる。
装飾がすべてできるようにCSS3がどんどんでてくる。
・W3Cの仕様だけど、WHATWG(ワットダブルジー)
.あと3年くらいには主流になってくる??
・高度な文書構造が可能に
・的確なリスティング広告が可能に
・フォーム機能がすごい
・動画や音声の配信が手軽になった
・javascriptを使って2D・3Dもできちゃう
・APIで位置情報の取得
・スマートフォンはhtml5で
変わったけど、過去のものを躍起になって書き換える必要はにらしい。
ブラウザでサポートしてくれるらしい。
各ブラウザがhtml5をどれくらいサポートしてるのかどうかなど知りたい時は↓
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は閉じタグがいりません!br(改行)にもいらなくなりました。
▼よくわからなかったもの【基準言語の指定】
<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
2011-05-20
印刷時の背景画像が二重になったりする
◆大きい背景(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" />
2011-05-12
ダブルクリックしたとき ※【jQuery】
クリックしたときに、一番初めのクリックを無効にする。
しないと<a>のリンク先にとぶ。
クリックのときは、『return false』と最後にかくが、
クリックしたら『return false』とかく。
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgBrIz2edPq8CZPkrmYmUIJ2HG0PEdaHD9lrVbLPABPlwfs7uKeVvStuKnys-nNvfcaG8nxJjhTeK4yz5q41hxveZyvkrlsD_xif8Rx5TKbDoCSesdOp3uBIWS2Wk4h9feuG_iIg0yArC0/s1600/20110512.gif)
メソッドチェーンを使って、つなげてかく。
分かりやすく色づけしてみる
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjQiP5jzaq5GzNle_D3ZHvtWL-wBnVPShjK-MPXRcJcm2lTLRmuq64iomnc-ksOBN_EVyE4W9hsM1FbhjtTUHeLoNxtRSZSM9P_GmTxAPpIGBJYhmSV5NLfcUTEHV2Yl8iPaOh1cLJJnV0/s1600/20110519.gif)
→イベント一覧に戻る
しないと<a>のリンク先にとぶ。
クリックのときは、『return false』と最後にかくが、
クリックしたら『return false』とかく。
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgBrIz2edPq8CZPkrmYmUIJ2HG0PEdaHD9lrVbLPABPlwfs7uKeVvStuKnys-nNvfcaG8nxJjhTeK4yz5q41hxveZyvkrlsD_xif8Rx5TKbDoCSesdOp3uBIWS2Wk4h9feuG_iIg0yArC0/s1600/20110512.gif)
メソッドチェーンを使って、つなげてかく。
分かりやすく色づけしてみる
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjQiP5jzaq5GzNle_D3ZHvtWL-wBnVPShjK-MPXRcJcm2lTLRmuq64iomnc-ksOBN_EVyE4W9hsM1FbhjtTUHeLoNxtRSZSM9P_GmTxAPpIGBJYhmSV5NLfcUTEHV2Yl8iPaOh1cLJJnV0/s1600/20110519.gif)
→イベント一覧に戻る
ラベル:
【jQuery】イベント,
【jQuery】メモ
2011-04-22
$(this)
★イベントが発生した要素を習得してくれる。
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhqWMC5_Yj_MASUj7ynyjiz5gLtIIADpysVdc9bLDu-H1jOtGhGaCF75T4N2-6PEndGl5Hxo9ofpKvqs_dv96lXQnnLyO958ukUY0ZDGu-jeiKqh47vCqyzICHkWMAuXdHmuZIeM14gtbU/s1600/20110426_01.gif)
※このPタグの画像をリストのテキストリンクで切り替える。
▼普通に指定したとき
aタグを指定(順番)して、ひとつひとつに、この画像にとんでくださいねと命令している。
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhrpgXAwvbtW3I7zPTIFGEIq5XIPhzcRw9qvFIDbqdESZMUpYS92Z-DqopVQeCiJwLn8XDb6efY9yp3lCVQvfwsTIzqnArKLPYJERLiw2suCQVB4xo-9rG-zrf5vZwzy6YlIhmcg4oj5Dw/s1600/20110426_02.gif)
↓↓
▼$(this)を使ってみる
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi5MqqiKVvh58c87WmH9vjb4ktyfLWxN9T1MThFLSl-MuoJiOdAuX9_50mL1sKguVJW4KXWIccIwRbHL4scxCK5Li6Db8jgecSxEig2iqvrSEhTouiSNXslnH1DMYDlGj3RuomnNQYPQos/s1600/20110426_03.gif)
クリックされた<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
◆$(this)を使って、画像の切替をしてみる
↓HML側![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhqWMC5_Yj_MASUj7ynyjiz5gLtIIADpysVdc9bLDu-H1jOtGhGaCF75T4N2-6PEndGl5Hxo9ofpKvqs_dv96lXQnnLyO958ukUY0ZDGu-jeiKqh47vCqyzICHkWMAuXdHmuZIeM14gtbU/s1600/20110426_01.gif)
※このPタグの画像をリストのテキストリンクで切り替える。
▼普通に指定したとき
aタグを指定(順番)して、ひとつひとつに、この画像にとんでくださいねと命令している。
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhrpgXAwvbtW3I7zPTIFGEIq5XIPhzcRw9qvFIDbqdESZMUpYS92Z-DqopVQeCiJwLn8XDb6efY9yp3lCVQvfwsTIzqnArKLPYJERLiw2suCQVB4xo-9rG-zrf5vZwzy6YlIhmcg4oj5Dw/s1600/20110426_02.gif)
↓↓
▼$(this)を使ってみる
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi5MqqiKVvh58c87WmH9vjb4ktyfLWxN9T1MThFLSl-MuoJiOdAuX9_50mL1sKguVJW4KXWIccIwRbHL4scxCK5Li6Db8jgecSxEig2iqvrSEhTouiSNXslnH1DMYDlGj3RuomnNQYPQos/s1600/20110426_03.gif)
クリックされた<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】イベント,
【jQuery】セレクター,
【jQuery】メモ
マウスを使った画像の切替 《改》 ※【jQuery】
◆クリックすると画像が切り替わる
![クリックすると画像が切り替わる](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhEZBIw5cdD2AsM-lNwh5gLgMFR7i5JTqNL10TrzZuf_ez5NaRFiQpZXxL32rBAmQHNS_-q8PGb1o-xQNzd_uHnHsNItNUIXJu6QpgXk4iQvH9vpjZNaKzj3Mv0tDprV7IlocaA_4Mod7U/s1600/20120112.png)
※左の小さい画像をクリックすると、大きい画像が差し替わる
★js側
$(function(){
return false;
$("#main_img li a").click(function(){
$("#img_in img").attr("src",$(this).attr("href"));});
});
<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>
クリックする画像のリンク先を差し替える画像にする。◆マウスが上にくるときにアニメーションっぽく画像が切り替わる
![マウスが上にくるときにアニメーションっぽく画像が切り替わる](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhFtBsXXzg-CiUcFKx_eMfvAbmnRGeiDusz9Gy-5aywfdOPqBY_R3Ln-viwP5oP1oaGQ95KF_RTR90PCWyoeElAWOYFEl-AQfxQdik2xogG7mNENK9rHaA7StUinizrCRXnPQ_KLAHc3Pc/s1600/20120112_2.png)
※左の小さい画像にマウスがくると、大きい画像が差し替わる
*考え方*
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgfU23J1gwUFGQeWuzfZvqfN2ThMFDoRe2NrS95nm7pXggv5oBN5BmWtvM3bBfFQJelvZ9jclIZI2U9Iu1AxyAFvWfeZQBXu1cI8Jtx-fdZ76eI3Dt2R5v5cWeor_E4Q-QSyhzakpxl6f8/s1600/20120112_3.png)
→画像を重ねて、手前を薄くする。
★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)
→コールバック関数とは?
ラベル:
【jQuery】イベント,
【jQuery】メモ
2011-04-21
CSSで角丸【radius】
border-radius:3px;
-moz-border-radius:3px;
-webkit-border-radius:3px;
参考サイト
http://allabout.co.jp/gm/gc/24004/2/
-moz-border-radius:3px;
-webkit-border-radius:3px;
参考サイト
http://allabout.co.jp/gm/gc/24004/2/
ラベル:
【PCサイト】CSSについて,
CSS【その他】
googleブログに、ファイルをアップロードする方法
◆ファイルのダウンロードボタンをつけたいとき
グーグルブログにデータをアップロードさせる方法がわからなかったから↓------------参考サイト------------
iKnowHow/ブログ用に外部サーバを用意(Googleサイト)
http://iknowhow-blog.blogspot.com/2011/02/google.html
↑とてもわかりやすい
----------------------------------
グーグルサイトを作ってそこへアップロード、
アップロードしたデータのテキストリンク(ダウンロード)のURLを
ブログのリンクにはりつける
テスト
※新しいページをつくるとき、使用するテンプレートを【キャビネット】にする(作った後でも変更可能)
ラベル:
googleブログ【作業メモ】
2011-04-20
<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;も忘れずに。。
その他のやり方メモ(前回)→
2011-04-15
メソッドチェーン
◆複数の命令をする。
同じセレクターに対して、それぞれ違う命令をするときに一つにまとめる、ドット『.』でつなげる$(”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】メモ,
【jQuery】命令
イベントについて ※【jQuery】
◆イベントについて
どこにかくのか、基本形式の中にイベントをかいて、そのまた中に、内容が入る$(function(){
$(”ボタン”).click(★);
}); 注:ブルーは基本形式です。
↓↓★
function(){
&(”画像”).attr(”src”,”image02.jpg”);}
◆クリック【click】
クリックしたら○○○を実行する。画像切り替えについてはこちら
◆ダブルクリック【dblclick】
クリックしたら○○○を実行する。※ダブルクリックするときの注意点
◆トグル【taggle】
開閉メニュー/クリックするたびに何かがおこるもの(順番)◆マウスイベント
マウスを押したとき・はなしたとき、を実行する。【mousedown/mouseup】マウスが上にきたとき・はずれたとき、を実行する。【mouseover/mouseout】
マウスの動きに合わせて【mousemove】
◆【one】
イベントに対して一回だけ◆アンバインド【unbind】
イベントを取消◆【live】
将来追加される要素
ラベル:
【jQuery】イベント,
【jQuery】メモ
CSSの制御
◆.css クラスのプロパティを操作する
※セレクターで<p>タグのclassBBBを指定しています。.css(”color”,”red”)※カンマで区切る
<例>
【html】
<p class=”BBB”>テキスト</p>
【css】
p.BBB{color:#blue;}
↓↓↓
【html】
<p class=”BBB”>テキスト</p>
◆.css 複数のクラスのプロパティを操作する
(”p.BBB”).css({
color:”yellow”,
backgroundcolor:”red”})
※CSSとは記述が違うので注意
※(カッコ)の中に{}をいれる
※プロパティの値を取得するには【.css(”プロパティ名”)】
HTML、CSSの操作(命令)→
ラベル:
【jQuery】メモ,
【jQuery】命令
class属性、追加と削除 ※【jQuery】
◆.addClass クラスの追加※複数指定する場合はスペースで区切る
※セレクターで<p>タグを指定しています。.addClass(”BBB”)
<例>
<p>テキスト</p>
↓
<p class=”BBB”>テキスト</p>
◆.removeClass クラスの削除※複数指定する場合はスペースで区切る
※セレクターで<p>タグを指定しています。.removeClass(”BBB”)
<例>
<p class=”BBB”>テキスト</p>
↓
<p>テキスト</p>
◆クラス名、の変更は.attrでできる。
.attrはこちらHTML、CSSの操作(命令)→
ラベル:
【jQuery】メモ,
【jQuery】命令
2011-04-14
.attrを使って他に出来ることの例えメモ
◆リンク先の変更
①セレクターで(”a”)を指定②(”href”,”xxx.html”)←変更したいURL
◆テキストのカラーの切替
①セレクターで(”p”)を指定②(”class”,”text_red”)←変更したいclass(テキストのカラー指定してある)
HTML、CSSの操作(命令)→
ラベル:
【jQuery】メモ,
【jQuery】命令
思いつく属性
◆属性名と属性値
★<img ><src=”画像のURL”width=”100”height=”100”class=”クラス名”alt=”画像”>
↓↓
<img src=”画像のURL”width=”100”height=”100”class=”クラス名”alt=”画像”>
ラベル:
【jQuery】メモ,
CSS【その他】,
Dreamweaverについて
2011-04-08
疑似クラスとの違い-jQuery独自のフィルター-
◆liに対して、first-childとfirstを同じ指定にしてみる
★疑似(”li:first-child”) ★独自(”li:first”)![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg-JLYtUrvFQfO8pak_vhmuBge9_j2lngA0eq39a9IUb1oDF13lE0zf_0LckA98fJQ9fzKGArOQUmRSIiDj1LmM5XSr-GNj9t2bgwpFSCMm9KbsWYDsXOTxfkT16YMQ3tIOqSnh7qBjXGM/s320/201104_no04.jpg)
↑全ての最初にかかる ↑ 最初の最初にかかる
◆liに対して、last-childとlastを同じ指定にしてみる
★疑似(”li:last-child”) ★独自(”li:last”)![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhn8mIyhmKgcMW_9DnwasCVHQgPBtiakEW3QkLPZWRS37SaVjv4CbWdzGKIdFh4IZ8kQHI6cXKimgJ7lK5vrJ37POiLKh5HdyTI_ZfV6AwVBfuXyUyMS17udulteaB2Umg6mDaNaeQjcG0/s320/201104_no02.jpg)
↑全ての最後にかかる ↑ 最後の最後にかかる
※ID、classをつけてあげれば、疑似クラスも独自フィルターと同じ効果になる。
独自フィルターについてに戻る→
ラベル:
【jQuery】セレクター,
【jQuery】メモ
2011-03-24
Dreamweaver/検索時間の短縮
◆【クローク】検索するときに、範囲にいれない。
バックアップ用のデータなど、検索時に検索範囲にいれたくないとき①ファイルもしくはフォルダの選択
②【右クリック】→【クローク】→【クロークの実行】
ラベル:
Dreamweaverについて
2011-02-25
2011-02-18
2011-02-17
横にスクロール
↓最初から自分でつくれる?かも
・[作って学ぶ!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/
・[作って学ぶ!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/
ラベル:
【jQuery】メモ
2011-02-10
2011-02-02
HTML、CSSの操作(命令) ※【jQuery】
※必ず、基本形式の中に↓をいれる。そのままじゃ使えない。
◆.text
※セレクターで<p>タグを指定しています。テキストの変更(まるまる差し替え)
.text(”変更できました。”)
※変更する内容の部分を空にすると、取得できます。【.text()】
<例>
<p>変更できます。</p>
↓
<p>変更できました。</p>
◆.html
※セレクターで<p>タグを指定しています。タグを含むテキストの変更
.html(”<div>変更できました。</div>”)
※変更する内容の部分を空にすると、取得できます。【.html()】
<例>
<p>変更できます。</p>
↓
<p><div>変更できました。</div></p>
タグそのものを置き換える場合は↓
◆.prepend/.append HTML要素(タグ)内に挿入
※セレクターで<p>タグを指定しています。前に挿入
.prepend("<span>前に追加</span>")
【例】
<p><span>前に追加</span>テキスト</p>
後ろに追加
.append(”strong”)
【例】
<p>テキスト<span>後ろに追加</span></p>
◆.before/.after HTML要素(タグ)の前、または後ろに挿入
※セレクターで<p>タグを指定しています。前に挿入
.before(”<p>前に挿入</p>”)
【例】
<h1>前に挿入</h1>
<p>テキスト</p>
要素の後ろに挿入
.after(”<p>後ろに挿入</p>”)
【例】
<p>テキスト</p>
<p>後ろに挿入</p>
◆.perpendTo/appendTo もともとあるHTML要素(タグ)を指定したHTML要素(タグ)内に移動
※元々の状態<p>テキスト</p><strong>移動</strong>前に移動
.perpendTo(”strong”)
【例】
<p><strong>移動</strong>テキスト</p>
後ろに移動
.appendTo(”strong”)
【例】
<p>テキスト<strong>移動</strong></p>
◆insertBefore/insertAfter もともとあるHTML要素(タグ)を指定したHTML要素(タグ)の前後に移動
※元々の状態<p>テキスト</p><strong>移動</strong>前に移動
.insertBefore(”strong”)
【例】
<strong>移動</strong><p>テキスト</p>
後ろに移動
.insertAfter(”p”)
【例】
<strong>移動</strong><p>テキスト</p>
◆.wrap 他の要素で囲む
※セレクターで<p>タグを指定しています。.wrap(”<div></div>”)
<例>
<div><p>テキスト</p></div>
◆.replaceWith 置き換え(タグ含む)
※セレクターで<p>タグを指定しています。.replaceWith(”<div>変更できました。</div>”)
<例>
<p>変更できます。</p>
↓
<div>変更できました。</div>
※.htmlは、指定したタグ内しか変更できません
◆.remove 要素(タグ)の削除
※セレクターで<p>タグの<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 />
◆複数の命令を同じセレクターにするとき
→メソッドチェーン
ラベル:
【jQuery】メモ,
【jQuery】命令
2011-01-18
写真の構図
◆構図いろいろ
トリミングなどで迷った時に…
★三角構図
安心感、安定感。
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjdDcuLIeWPpcV_J_0FzZlvXhviRTlUgCdBTXqpSivhH0FfYStvtew1QNtPykR17MjJY9mXOgmdHa4gOBX78qk-TbCPEgUECZDDh7TNN4yckR-7IXDlqYCZER6_uPhzBXLu5gMcu74Ywbg/s320/20110119_no02.gif)
★逆三角構図
不安定、不安。軽さ。
→解放
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiY926M5l6Ol8UTsbndCLpyZDIg9Be3VsxqXM8VI1jQKzhWtFeNTVnNewj6s534yNk-futo9rTKVuyoEBm6Y4sAMPvIcojcNCTOMjbEWriPxrN5a2Nof602uYRLchzyv7plVjQ_HkXftTg/s320/20110119_no03.gif)
→求心
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjORsCu6WhC_R2y0zrlWYmKe_-8du4xtBBFPAOToLNgN7GZRLZZoug2HFiG6tPuGRHHpQwvWZ5ST1e_aWd69cctOH-pUxTqBocyOU0pvV00fl2dhrSHMs-AyQRbsHXR9hZUvHE9aWAyzaU/s320/20110119_no04.gif)
★日の丸構図
安定、強い印象。メインを真中に
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj1VxNBczGLto-zAFgjUi2NRxUDVr5X2cF8XEvD_l9o0Jcup6Y-rOX5dWjlVzRlRCTtpxKGDSMbAK29bxeey-GzZCLmu9bg5ES_U2v0m20HlyrAhUbO3ZP_UtxMiGucp3c4uHsXxM0as-s/s320/20110119_no05.gif)
★シンメトリー
左右対称、最も美しいと思われるものらしい
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjE0Brmi-HtWLjXRPkSfN395KXizx6XqG3C87WMckXmpFGsZ6UzzqJO-z0o9Y-RXGttFbVys8uvNaUh6MmVYrIpSgr1ueR2P8Vuve00RY8nwFukaXnIchM-_BkrDPX6coY0p2CWGWeevAM/s320/20110119_no07.gif)
★対角線
リズム感、躍動感。絵画などでつかわれている
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEha-nh835L6MDIdyifXj4dLn74f0HZcfCvd3vooneSg5Dlm_49yO5EYFnZVUAVpLp-OtyCnwMAJ_ln5YQOPJdC-j8dVtgpGcjZ0WNOzG7GvEjM02L2RC4n5GUZoO1SuLaKD77b85-ZiQVc/s320/20110119_no10.gif)
★対角線(押しの構図)
→奥に向かって力強く
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEimqDd_-33kwnq8_meB1KPmQVBsFcd1nVo_BJsQqQj9f_Qp48Tocsk649OXypGbLzy8fARP3kjO0fP6N0gKS-T3M7U1OjFBHSKZwPJrn1GWePWiV5XzcDCcfkP4TM6deeilcEKMNUjPjHo/s320/20110120_no11.gif)
→上に押し出し、伸びている
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiZGevcngeOEpbvJis47eXa02ei5l0sYsW_MY1s_X7fbCb-BpEIJk94m_K3aOVugqbm9lcl12kLDV7KRKd4mrbzIsOBFEunxmMHjy9CAj8JUn55AIr6nVnm9whjVY4JaY_joIqoVZTsTCo/s320/20110120_no12.gif)
★対角線(視線の移動)
→線を目安に、誘導する
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiFMbEOq0_HbDdBw5lfPnCBSaUkVKS9AeODcE9oLPHoK48n-WTJmjpAY3rG-Z54QG3PPt1AHgZ6no8TyIWqAIWSEARQ7yFY7oK8Be8Hfwm0mFkZ-V-GNc6q_whWlIONTvmfeGhUYXmUAPE/s320/20110119_no14.gif)
→手前に大きいもの奥に小さいもの
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjNB3fphO4-6KkVseTMIS_HcpRaOp0zt8A-wXR5oAdG153NYFVPoovz4cVLvofNIxLqPgTsDuHKw9y3h_IPZWrBvGNUc5Rqt1bx12jKgU1eJ8gpfwBtAtrY_ofmEYmzesSrxZVgz8jrhaE/s320/20110119_no13.gif)
★黄金比分割
美しさの法則(1:1:1)
→クロスする部分に置く
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjscTR-4kgz0iRBQPZHaOBOKk3PZkE4Kq-rN5Jpymtp3f4x429f2MYqKxmSZfyUstGElQDiqnN8DNlIr6AiSSwuTvpqTajNurpSnRNYLHq5wbJweFD1o_as-b8-XUD5vLYsLrqnlwA0Nwg/s320/20110119_no21.gif)
→空間を入れる
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh62zeTC7bE0-ktEoqRdYreUBZAV1z6Z6wyNc9dUetlsjLQ-n1dPdITRsbmwI91YrPGjNhy-JLnpTv1zGjkv9vNWi6SUKs75wJ83UdbSQ97gXkfztSDUXtA668JW4_n6BsYy9zRwJAojns/s320/20110119_no22.gif)
★引き算の構図
シンプルに主題を明確にする
→余計なものをいれない
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjR8TKFDxy2aiHqiMpGlNvB9-lpcyVPbOtrl9BeYz0-9fZla8OObAykGr5IP-2wRDoZMco4CXQbpGMflSQotuNMcJL8rp2IwuX_vdjcyJrHlXMLQWqyeAWg2_au_UFTbA5L3sILc1-V5Zc/s320/20110119_no17.gif)
→余計なものをフレームアウト
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhfrxeFNZjBxzf2e7gFJ3MvwiJaQU_yeQslhfPcD5vPOwSMR_DqbsoMh4B_PTE7_wiuQYwbMWlcwQdbse8z5HwPWl7ZVkCn52ZIQXQM4ipaCYQyL9ox1sXA-cUNMIjYiidFE0_PYOePcDo/s320/20110119_no18.gif)
→余計なものをぼかす
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhvI2B5wAG9rokw1uonFchuLMlSmJnnUjfdjTtR3Nowb2rJoNL-Xq7RK1O9kgSBorhz0-A2A1-ndhZG_sDReqz6HVTx_BUQbBsN6AYmBiMdO2tjxhr0PbPCOiuQpbGRm190rUX2sMbfrg4/s320/20110119_no19.gif)
→逆光でシルエット化
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgH9I7RzJzOwg0ElD8s6DdZVBuRkV5O2pelldrO-iWZW95bXRpNWNcqMhoq7BFBnPSkeeJBP9RccCbmn4fcDJJFpU73eWw3fqnxhtI4u2A7AImbSvuoRAYhaV9u3RAGFEjq5eCN9P9L3qg/s320/20110119_no20.gif)
★複雑な構図
色々な構図を使ってみる
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgJq2cAKUGDWNyggFCxBzz-5A4kWfvauKb_WBfn9b0_HwzT35WH42kZlybN82XyQo_frmXm0AJtZEoUBtDg7uDG-b0DZm01LYUjouNDvFhmcIe39wj2d80JTud0A0157BV0n-4fAdlF5dE/s320/20110119_no23.gif)
※黄金比を使って、背景をいれる。
クロスしたところに人間をアクセントとして入れて、空間は逆三角を使ってみた。
------------------- 参考サイト ---------------------------
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
------------------------------------------------
トリミングなどで迷った時に…
★三角構図
安心感、安定感。
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgdbUfNo3xJokYI6c94cbeDKxGQA-324uMBUXdaiBpRPHcfKsVzi-iyAyjmmcShczlJs7plw03aTGh9AhSCg6uBg9UnVtmVraWj0PTQt42SqoAmg5XhOsrIh9QF1AgEHklFKwnmv_ZIRuM/s320/20110119_no01.gif)
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjdDcuLIeWPpcV_J_0FzZlvXhviRTlUgCdBTXqpSivhH0FfYStvtew1QNtPykR17MjJY9mXOgmdHa4gOBX78qk-TbCPEgUECZDDh7TNN4yckR-7IXDlqYCZER6_uPhzBXLu5gMcu74Ywbg/s320/20110119_no02.gif)
★逆三角構図
不安定、不安。軽さ。
→解放
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiY926M5l6Ol8UTsbndCLpyZDIg9Be3VsxqXM8VI1jQKzhWtFeNTVnNewj6s534yNk-futo9rTKVuyoEBm6Y4sAMPvIcojcNCTOMjbEWriPxrN5a2Nof602uYRLchzyv7plVjQ_HkXftTg/s320/20110119_no03.gif)
→求心
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjORsCu6WhC_R2y0zrlWYmKe_-8du4xtBBFPAOToLNgN7GZRLZZoug2HFiG6tPuGRHHpQwvWZ5ST1e_aWd69cctOH-pUxTqBocyOU0pvV00fl2dhrSHMs-AyQRbsHXR9hZUvHE9aWAyzaU/s320/20110119_no04.gif)
★日の丸構図
安定、強い印象。メインを真中に
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhd2R4ncau8Q4X-lSsWOtb7uqoM5jwsFkuZwA6ISAgG1GW2FcuGRFmgyr69QUBw-lyNhB1ou9iB-WJdPqeodBX7fnMDzzWQ0VZOyeXzBitpZw95e1mzbRVuNRNVLNA8UPqmWapQqPjp_GM/s320/20110119_no06.gif)
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj1VxNBczGLto-zAFgjUi2NRxUDVr5X2cF8XEvD_l9o0Jcup6Y-rOX5dWjlVzRlRCTtpxKGDSMbAK29bxeey-GzZCLmu9bg5ES_U2v0m20HlyrAhUbO3ZP_UtxMiGucp3c4uHsXxM0as-s/s320/20110119_no05.gif)
★シンメトリー
左右対称、最も美しいと思われるものらしい
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjnW2xGzD-WlAoRkjcnw-Gsc7o05ppreU4qX82b7E7n39YEPu1ffvFhmXs_LguVk15C9TL0jvYBwM6vs5z0gHaPsFPVxPb2ebfRQ_FXTbe3AfLpcTRLJYh66NPLjKUzx1gl3127eqqHG5M/s320/20110119_no08.gif)
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjE0Brmi-HtWLjXRPkSfN395KXizx6XqG3C87WMckXmpFGsZ6UzzqJO-z0o9Y-RXGttFbVys8uvNaUh6MmVYrIpSgr1ueR2P8Vuve00RY8nwFukaXnIchM-_BkrDPX6coY0p2CWGWeevAM/s320/20110119_no07.gif)
★対角線
リズム感、躍動感。絵画などでつかわれている
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjVNrL7OzW9V-lB89_ht6dmCWi4uSN-a59s7JlCoteYRx85pNTU4z63XAM6aJNjIoBHWUCbPl7VpUl1NHfOYYDEFHK8RiU1gtPg22glJMOjPoP6QuzTvUQbGxRLIxXyj80z6lZvflqQfS8/s320/20110119_no09.gif)
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEha-nh835L6MDIdyifXj4dLn74f0HZcfCvd3vooneSg5Dlm_49yO5EYFnZVUAVpLp-OtyCnwMAJ_ln5YQOPJdC-j8dVtgpGcjZ0WNOzG7GvEjM02L2RC4n5GUZoO1SuLaKD77b85-ZiQVc/s320/20110119_no10.gif)
★対角線(押しの構図)
→奥に向かって力強く
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEimqDd_-33kwnq8_meB1KPmQVBsFcd1nVo_BJsQqQj9f_Qp48Tocsk649OXypGbLzy8fARP3kjO0fP6N0gKS-T3M7U1OjFBHSKZwPJrn1GWePWiV5XzcDCcfkP4TM6deeilcEKMNUjPjHo/s320/20110120_no11.gif)
→上に押し出し、伸びている
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiZGevcngeOEpbvJis47eXa02ei5l0sYsW_MY1s_X7fbCb-BpEIJk94m_K3aOVugqbm9lcl12kLDV7KRKd4mrbzIsOBFEunxmMHjy9CAj8JUn55AIr6nVnm9whjVY4JaY_joIqoVZTsTCo/s320/20110120_no12.gif)
★対角線(視線の移動)
→線を目安に、誘導する
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiFMbEOq0_HbDdBw5lfPnCBSaUkVKS9AeODcE9oLPHoK48n-WTJmjpAY3rG-Z54QG3PPt1AHgZ6no8TyIWqAIWSEARQ7yFY7oK8Be8Hfwm0mFkZ-V-GNc6q_whWlIONTvmfeGhUYXmUAPE/s320/20110119_no14.gif)
→手前に大きいもの奥に小さいもの
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjNB3fphO4-6KkVseTMIS_HcpRaOp0zt8A-wXR5oAdG153NYFVPoovz4cVLvofNIxLqPgTsDuHKw9y3h_IPZWrBvGNUc5Rqt1bx12jKgU1eJ8gpfwBtAtrY_ofmEYmzesSrxZVgz8jrhaE/s320/20110119_no13.gif)
★黄金比分割
美しさの法則(1:1:1)
→クロスする部分に置く
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjscTR-4kgz0iRBQPZHaOBOKk3PZkE4Kq-rN5Jpymtp3f4x429f2MYqKxmSZfyUstGElQDiqnN8DNlIr6AiSSwuTvpqTajNurpSnRNYLHq5wbJweFD1o_as-b8-XUD5vLYsLrqnlwA0Nwg/s320/20110119_no21.gif)
→空間を入れる
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh62zeTC7bE0-ktEoqRdYreUBZAV1z6Z6wyNc9dUetlsjLQ-n1dPdITRsbmwI91YrPGjNhy-JLnpTv1zGjkv9vNWi6SUKs75wJ83UdbSQ97gXkfztSDUXtA668JW4_n6BsYy9zRwJAojns/s320/20110119_no22.gif)
★引き算の構図
シンプルに主題を明確にする
→余計なものをいれない
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjR8TKFDxy2aiHqiMpGlNvB9-lpcyVPbOtrl9BeYz0-9fZla8OObAykGr5IP-2wRDoZMco4CXQbpGMflSQotuNMcJL8rp2IwuX_vdjcyJrHlXMLQWqyeAWg2_au_UFTbA5L3sILc1-V5Zc/s320/20110119_no17.gif)
→余計なものをフレームアウト
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhfrxeFNZjBxzf2e7gFJ3MvwiJaQU_yeQslhfPcD5vPOwSMR_DqbsoMh4B_PTE7_wiuQYwbMWlcwQdbse8z5HwPWl7ZVkCn52ZIQXQM4ipaCYQyL9ox1sXA-cUNMIjYiidFE0_PYOePcDo/s320/20110119_no18.gif)
→余計なものをぼかす
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhvI2B5wAG9rokw1uonFchuLMlSmJnnUjfdjTtR3Nowb2rJoNL-Xq7RK1O9kgSBorhz0-A2A1-ndhZG_sDReqz6HVTx_BUQbBsN6AYmBiMdO2tjxhr0PbPCOiuQpbGRm190rUX2sMbfrg4/s320/20110119_no19.gif)
→逆光でシルエット化
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgH9I7RzJzOwg0ElD8s6DdZVBuRkV5O2pelldrO-iWZW95bXRpNWNcqMhoq7BFBnPSkeeJBP9RccCbmn4fcDJJFpU73eWw3fqnxhtI4u2A7AImbSvuoRAYhaV9u3RAGFEjq5eCN9P9L3qg/s320/20110119_no20.gif)
★複雑な構図
色々な構図を使ってみる
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgJq2cAKUGDWNyggFCxBzz-5A4kWfvauKb_WBfn9b0_HwzT35WH42kZlybN82XyQo_frmXm0AJtZEoUBtDg7uDG-b0DZm01LYUjouNDvFhmcIe39wj2d80JTud0A0157BV0n-4fAdlF5dE/s320/20110119_no23.gif)
※黄金比を使って、背景をいれる。
クロスしたところに人間をアクセントとして入れて、空間は逆三角を使ってみた。
------------------- 参考サイト ---------------------------
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
------------------------------------------------
ラベル:
【photshop】,
その他
登録:
投稿 (Atom)