Photoshop CS6 設定

変なグリッドやうざったいアニメーションズームの設定を元に戻す方法
↓
・Photoshop CS6の設定変更｜ConneLog｜ConneCre
http://connecre.com/connelog/connelog00000177.php

じゃあ、三角関数の何がわかればいろんな動きができるのか

サイン・コサイン…ってだから何？とか

三角関数とはなんぞや？ということは覚えなくていい。


とにかく、何がしたくて、どうやって動いてくれるのかだけ、考える。



◆簡単にざっくりと見ておくもの


→三角比とは？サイン・コサイン・タンジェスト


↑で出てきたのが（サイン・コサイン・タンジェスト）

 スクリプトで、数学的な計算をするときに使う『Math』
（※数学関数（Math）/杜甫々より）

▼サイン
Math.sin()
▼コサイン
Math.cos()
▼タンジェスト
Math.tan()


◆その他
意味が分からない記号など

θ(シータ)・・・角度のこと

π(パイ)・・・円周率のこと

円周率・・・3.14

-----------参考サイト----------------
ProcreoFlashDesign
初心者のためのFlashレベルアップ講座
http://www.procreo.jp/tutorial03.html

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

そもそも三角関数を勉強する理由

●サイン・コサインとか、三角関数を使ってできること

【FLASH AS3】や【javascript】で複雑な動きが、
簡単に、軽い処理で、できるようになる。

それ以外は使わない。

とにかく、動かすときに使う。


▼ぐるぐる回る


▼波打つ（横・縦）
　

▼外に拡散・または内に密集
　

▼それぞれが違う動きをする





●動かし方（今まで使ったもの）
”とある数字”を動かすことによって、動く。
とある数字とは、フレームが動くたびに+1、1秒たったら-50などなど、
その他、マウスの座標のx,yを取得した数字を計算につかったりする。


FLASH…addEventListener（マウス・フレームイベント）

javascript…setTimeout（タイマー）/scroll（スクロール）




じゃあ、三角関数の何がわかればいろんな動きができるのか…？




つまずいたときに、いつも調べてるサイト↓↓↓


---円運動--
http://procreo.jp/tutorial03.html

---三角形--
http://hinaoka.blogspot.jp/2010/07/blog-post_07.html

---角度からxy座標を定める---
http://f-site.org/articles/2011/09/22000000.html
三角関数というより、x座標とY座標がわかればいいのかも

---目で見る三角関数（初歩）---
http://itouhiro.hatenablog.com/entry/20121106/flash

---三角比の意味がわからない人---
http://okwave.jp/qa/q1401896.html


・PI | Math - JavaScriptリファレンス
Math.PIは円周率を取得できるプロパティ
http://.webcreativepark.net/javascript/math/pi/

JavaScriptの処理速度についてのメモ

↓JavaScriptの処理速度をあげるには、かき方も重要らしい…

・JavaScriptの処理速度向上のために | DJ_SATORUの研究日誌
http://biblelab.net/mydiary/20071209/42.html


サイトの容量（データ量）が多い→読み込みに時間がかかる



複雑な計算処理の速度を上げるには…

そもそも何で処理をしてるのか→ブラウザとPCのCPU（ブラウザによって速度違う）

↓CPUの速度を知るには

CPU計算処理速度測定機
http://m.hg2.ifdef.jp/cpusokutei/




↓JavaScriptがわからなくなったら

・JavaScriptとは何/実務の友
http://www5d.biglobe.ne.jp/Jusl/JavaSoft.html

Math いろいろ

●大きい方・小さい方を取得してくれる

Math.min（★）…★の中の一番小さい数字を取得

Math.max（★）…★の中の一番大きい数字を取得

--例--

var x=10;
var y=20;
var c=5;

alert(Math.max(x,y,c));→アラート：「20」

alert(Math.min(x,y,c));→アラート：「5」

他にも平方根とかもできる↓
・数学関数（Math）/杜甫々
http://www.tohoho-web.com/js/math.htm



●ランダム　
※整数値にしないと小数点以下もランダムにでてくる

Math.random（）*★…★の数字の中のどれかをランダムに取得

--例--

var x=Math.floor(Math.random()*10);//10未満（切り捨てだから）
alert(x);

▼小数点以下切り捨て

 alert(Math.floor(1.22));→「1」 

▼//小数点以下繰り上げ

alert(Math.ceil(1.22));→「2」 

▼//四捨五入

alert(Math.round(1.22));→「1」  

テスト

テストテストテストテストテストテストテストテスト

テストテストテストテストテストテストテストテスト

角度から縦横

----------------参考サイト--------------------
 ・Flashゲーム講座＆ASサンプル集【三角関数を使った計算について】
 　移動量と角度から x と y 方向の移動量を求める
http://hakuhin.jp/as/math.html#MATH_00

パララックス スクロールで動かす 【jQuery】

◆スクロールの上からの位置を取得

「.text」に取得したスクロールの位置を置き換える

スクロールする必要があるのでCSSで高さを適当にいれる

「.text」をCSSで動かさないようにする。

*html側

<p class="text">スクロール</p>

*CSS側

body{
height:1000px;
}

p.text{
position:fixed;
top:10px;
left:10px;
}

*js側

$(window).scroll(function(){
 $(".text").text($(window).scrollTop());
});

$(window).scroll…スクロールしながら

$(window).scrollTop()…上からの位置を取得

↑の位置情報を変数の中にいれてあげると、かけたりわったりできる。

$(window).scroll(function(){
 var yy=$(window).scrollTop();
 $(".text").text(yy+":"+yy/2);//連結
});

↓スクロールすると「★」が縦にならんで出てくる
→

*js側

 $("#box1").css("top",yy);
 $("#box2").css("top",yy-15);
 $("#box3").css("top",yy-30);
 $("#box4").css("top",yy-45);

「★」にそれぞれIDをふってずらす。

横に動かしたいときは、leftにかえる



↓スクロールすると背景がうごく

 $("#box1").css("backgroundPosition",'10px '+yy+'px');

※半角のスペースをいれないと動かない


------------------参考サイト------------------
パララックスの作り方
http://webdrawer.net/javascript/parallax.html

動かないナビゲーション 【CSS】

スクロールしても動かないナビゲーション

「ポジション」で配置


動かしたくない要素に↓↓

position:fixed;
top:10px;
left:10px;

ページ内リンクの移動をゆるやかにする

// to top

$("a[href^=#]").click(function(){

var Hash = $(this.hash);


var HashOffset = $(Hash).offset().top;


$("html,body").animate({ scrollTop: HashOffset}, 500);


return false;
});

解説↓
参考サイト：http://less.carbonfairy.org/post/941824993

totopだけなら簡単かも
↓参考サイト
http://www.finefinefine.jp/web/kiji1388/


スクロールTOPの理解

↓参考サイト
http://semooh.jp/jquery/api/css/scrollTop/val/


●スクロールについて
スクロールイベント…スクロールされてるときに処理する

$(window).scroll(function(){
//スクロールされているときの処理
});

----参考サイト---
http://semooh.jp/jquery/api/events/scroll/fn/



●スクロール位置情報　※スクロールがあるものに対して

↑のスクロールしながら…を使って、スクロールの位置を.textにいれている

$(window).scroll(function(){$(".text").text($(window).scrollTop());
});

注：スクロールがないと【0（ゼロ）】となる。




 hashについて
http://www.tohoho-web.com/js/location.htm

まくぱぺっと

ＷＥＢサイト テンプレート色々

・CSSデザインテンプレート無料配布サイトCool Web Window
http://www.coolwebwindow.com/template/public.php

・ホームページテンプレート - テンプレートモンスター
http://www.templatemonster.jp/

その他もろもろ
・Webデザイナー（私）によるWeb制作のときに気をつけてることや制作フローとかいろいろbr /> http://webdesignrecipes.com/web-development-flow/

素材（簡単なボタン等）
http://sozai.akuseru-design.com/

写真の素材サイトをまとめたもの
http://hinaoka.blogspot.jp/2012/05/blog-post_2813.html

スマホ pタグ 変な隙間ができる原因

letter-spacing  が原因

外すとなおる。

でも、つめたいときは↓


おかしくなるフォントサイズ

11ｐｘ　10px　9px


 letter-spacingに-0.001emするとなおる



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

「スマホ safari letter-spacing バグ」で検索

 ↓↓↓写真付き

・iOSのSafariで特定のfont-sizeのときの謎の隙間 - Webtech Walker
 http://webtech-walker.com/archive/2011/03/30190850.html

ベベルとエンボスについて 【Fireworks】

「ベベル」と「エンボス」の理解（Fireworks）


◆そもそも「ベベル」と「エンボス」って何？

べベル（bevel）…斜面をつける

エンボス（emboss）…浮き出しにする




◆デフォルトで何もいじらずにフィルターをかける


↓何にもしてない状態↓


▼エンボス（押下ｵｳｷ/隆起ﾘｭｳｷ）



▼べベル（内側/外側）


●べベルいろいろ（すべて隆起）
・フラット

・スムーズ

・スムーズ（反転）

・ステート1

・ステート2

・パイプ

・波紋


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

http://www.mdn.co.jp/di/articles/2673/?page=2

座標を知りたい offset(); 【jQuery】

◆指定した要素の座標

●●（イベント）した要素の座標
e.offsetX e.offsetY

→マウスの座標はこちら

その他座標色々まとめ↓参考サイト
--------------------------------------------------------------
・jQueryでマウスの座標
http://the-zombis.sakura.ne.jp/wp/?p=447

クラスの追加とクラスの削除

◆クラスの追加

 .addClass("クラス名")

◆クラスの削除
 .removeClass("クラス名")



---------------------　参考サイト　--------------------
http://www.atmarkit.co.jp/fdotnet/jqueryref/02attribute/attribute_06.html

ボタンエリアがでてきて、マウスオーバーしたものが目立つ

ボタンがびよーんと出てくる マウスオーバーしたボタンのみ透明度そのまま http://www.monkeyincorporated.com/#Home

ボックスからはみ出たものを見えなくする

overflow:hidden;

------------------------------　　参考サイト----------------------------------
・スタイルシート［CSS］/ボックス/ボックスからはみ出た部分の表示方法を指定する - TAG index Webサイト
http://www.tagindex.com/stylesheet/box/overflow.html

画像を差し替えてもレイアウトがかわらないもの

写真の上に、透過のロゴ重ねる（position）




---------------------------　参考サイト　----------------------------
 ・Hotel Metropole（ベルギーのホテル・海外サイト）
http://www.metropolehotel.com/en/dining

スマホ 「￥」マーク 【スマホ】

半角にすると【\】になるから

大文字で


「\」→「￥」

_on _off で画像ボタンの切り替え

画像の最後に｢_on｣｢_off｣をつけてフォルダの中に入れておくだけ

ボタン（img）にクラス指定(rollover)


 js側

$("img.rollover").mouseover(function(){
$(this).attr("src",$(this).attr("src").replace(/^(.+)_off(\.[a-z]+)$/,"$1_on$2"));
}).mouseout(function(){
$(this).attr("src",$(this).attr("src").replace(/^(.+)_on(\.[a-z]+)$/,"$1_off$2"));
});

-解説-

$("img.rollover").mouseover(function(){
 $(this).attr("src","★★★");
});

mouseover…マウスイベント（マウスオーバーのとき）


.attr（）…属性の置き換え（srcに★★★にさしかえてね）

★★★…「_off」の部分を「_on」に差し替えるものが入る


★★★の部分↓

$(this).attr("src",$(this).attr("src").replace(/^(.+)_off(\.[a-z]+)$/,"$1_on$2"));

●文字列の差し替え　javascript

文字列.replace(パターン,置き換える文字列)

パターンの部分↓
　・/～/の間に正規表現をかく
　・「^」文字列の先頭を意味さす
　・「$」文字列の最後を意味さす
　・「(.+)」1以上の何かの繰り返し(img/ooo)
　・「(\.[a-z]+)」ドットと何かのa～zまでの繰り返し(.pngなど)

置き換えるものの↓
　・「$1」最初の（）カッコ
　・「$2」2個目の（）カッコ


◆正規表現
文字列の特徴と特殊記号の組み合わせであらわしたもの




-------------------　参考サイト　---------------------
正規表現色々↓

・誰かのホームページ　Java Script - Tips Menu
http://www.24w.jp/study_contents.php?bid=other&iid=other&sid=other&cid=001

http://www.24w.jp/study_contents.php?bid=javascript&iid=javascript&sid=string&cid=004

ワード 校閲最新版 PDFに変換

とっても親切なサイト↓↓↓ ワード（Word）の校閲で「最終版」を表示させたい - パソコントラブルＱ＆Ａ http://www.724685.com/weekly/qa080507.htm

超簡単タブメニュー《改》【jQuery】

小難しくなくて、わかりやすく

◆切り替えと画像差し替え

html側

   <ul id="select">
        <li><img src="img/btn_01_off.gif"  id="select_01" /></a></li>
        <li><img src="img/btn_02_off.gif" id="select_02"  /></a></li>
   </ul>

<div id="box_01" class="box"> 中身 </ div> 

js側

$(".box").hide();//切り替えのBOXをすべて見えなくする
$("#box_01").show();//最初に見えるBOXを表示

$('#select_01').click(function(){
$("#box_02").hide();
$("#box_01").show();
$(this).attr("src","img/btn_01_on.gif");
$("#select_02").attr("src","img/btn_02_off.gif");
});

$('#select_02').click(function(){
$("#box_01").hide();
$("#box_02").show();
$(this).attr("src","img/btn_02_on.gif");
$("#select_01").attr("src","img/btn_01_off.gif");
});

※タグメニューが2つの場合のみ有効です。

◆上のソースを少し変えてフェードイン・フェードアウトさせる
※注：切り替える内容部分のBOXを重ねておかないと、変な動きをします。
positionで0,0

js側

$(".box").hide();//切り替えのBOXをすべて見えなくする
$("#box_01").show();//最初に見えるBOXを表示
$("#select_01").attr("src","img/btn_01_on.gif");//最初に見えるBOXのボタンをonにしておく


$('#select_01').click(function(){
$(".box:not(:animated)").fadeOut("slow",function(){
$("#box_01").fadeIn("slow");
});//コールバック関数、処理終わったらフェードインしてねの意
$(this).attr("src","img/btn_01_on.gif");
$("#select_02").attr("src","img/btn_02_off.gif");
});


$('#select_02').click(function(){
$(".box:not(:animated)").fadeOut("slow",function(){
$("#box_02").fadeIn("slow");//連続で押されないための処理
});
$(this).attr("src","img/btn_02_on.gif");
$("#select_01").attr("src","img/btn_01_off.gif");
});

◆tabが増えてもわざわざ書き出さない
 ---------------------　参考サイト　----------------------
↓↓こっちはコピペで親切
・【jQuery】これで簡単！フェード処理で切り替わるタブコンテンツの作成方法 ｜ KLUTCHE
http://klutche.org/archives/682/

上のサイトを少し変更したものが↓ ※hitmlはaタグ(アンカー)で飛び先を指定します。

▼ボタンを特に指定しないとき

     $(".tab_content").hide();
     $("ul.tabs li:first").show();
     $(".tab_content:first").show();
     
     $("ul.tabs li").click(function() {
          $(".tab_content").hide(); …★
          var activeTab = $(this.hash);
          $(activeTab).fadeIn();
          return false;
     });

★…「fadeOut」するときは、positionで0,0配置


▼ボタンをCSSできりかえたいとき

     $(".tab_content").hide();
     $("ul.tabs li:first").addClass("active").show();
     $(".tab_content:first").show();
     
     $("ul.tabs li").click(function() {
          $("ul.tabs li").removeClass("active");
          $(this).addClass("active");
          $(".tab_content").hide();
          var activeTab = $(this.hash);
          $(activeTab).fadeIn();
          return false;

※$(this.hash)…ここでいう、クリックしアンカーの「href」を取得したいときにつかう



---------------------　そのほかの参考サイト　----------------------

jQueryを使った簡単なタブ切り替えのサンプル｜　KADOYAN.com
http://www.kadoyan.com/item/509#nucleus_cf


【jQuery】これで簡単！フェード処理で切り替わるタブコンテンツの作成方法 ｜ KLUTCHE
http://klutche.org/archives/682/

文字 小さく 上付き 【html】タグ

小さいうえにくっついた文字

MM<sup>2</sup>

↓↓↓↓↓
MM²


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

・HTMLタグリファレンス
http://www.htmq.com/html/sup.shtml

Dreamweaver コードの折り返し

【表示】→【コードビューオプション】→【ワードラップ】にチェック

横長ページ ページ内リンク 【javascript 】【jQuery】

マージンをずらした横長のサイト

別ページからのリンク、またはボタンで指定したボックスがメインでみえるようにする（ページ内リンク）


URLで振り分ける。

↓簡単なテスト

$(function(){


var a="http://サイト名.html#";
var b=document.URL;

if(a==b){
alert("同じです");★
//$("#yoko_in").css("margin-left",-mg*2+"px");
}

});

document.URL…サイトのURLを取得できる
★…自分のサイトの初期設定を指定したいdivのところにいくようにマージンをマイナスにする。



----------------　参考サイト　---------------
・document.URL－JavaScriptリファレンス
http://www.htmq.com/js/document_url.shtml

hash 【javascript】

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


 http://www.openspc2.org/JavaScript/reference4/link/hash/index.html

マウスイベント ※【jQuery】

押したとき…mousedown
離したとき…mouseup

上にきたとき…mouseover
はずれたとき…mouseout（★）

マウスの座標をつかって何かをするとき…mousemove
*どんなふうに使うのか

★指定したセレクター上でマウスが動いてるとき
＜例＞
＄（”img”）.mousemove（function（e）｛
　　　　　　　　　&(”ｐ”).html（”X座標：”+e.clientX+”＜ｂｒ＞Y座標：”+e.clienY
）；｝）；｝

function（e）にするとイベントの座標が取得できます。
e.clientX…X座標
e.clienY…Y座標


『+』の演算子は、文字列同士の連結



▼jsファイル（※コピペ可）

$("img").mousemove(function(e){
  xx = e.clientX;
  yy = e.clientY;

 $("p").text(xx+","+yy);

})

★ページ全体のY座標とX座標の場合…
e.pageX…X座標
e.pageY…Y座標


★mouseoutを使うときの注意点
子要素（liとか）もオーバーとみなされる。簡単な解決方法なし。




マウスイベントじゃなくて、
→指定したセレクタの座標を知りたいときはこちら


→イベント一覧に戻る

マウスオーバーで説明書きが出る

説明書きを消すとき、hideとshowよりfadeOutとfadeInの方がいい

hideとshowの変な動き↓ななめにでてくる。
http://hinaoka.blogspot.jp/2011/09/jquery.html

▼html

<p>テキストテキストテキストテキストテキス<a href="#">てきすと</a><span class="tip">説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明</span>トテキストテキストテキストテキストテキストテキストテキストテキスト
キスト</p>

▼css

/*表示される説明のCSS*/
.tip{
background:#ff8800;
color:#ffffff;
font:10px 1.5;
border:2px solid #FC9;
padding:6px 8px;
display:block;
width:200px;
font-size:10px;
line-height:1.5;
position:absolute;
display:none;
}

※見た目のCSSが決まってから→「display:none;」

▼js

$(function(){


$(".tip").css("opacity","0.9");


$("a").mouseover(function(){
$(".tip").fadeIn("fast");
}).mouseout(function(){
$(".tip").fadeOut("fast");
}).mousemove(function(e){
$(".tip").css({
top:e.pageY+10+"px",
left:e.pageX+10+"px"
});
});});

ｃｓｓ 複数指定するとき 【jQuery】

▼1つだけ

$("#yoko_in .yoko_all").css("margin-top","20px");

//▼複数

/*①*/
$("#yoko_in .yoko_all").css("margin-top","20px").css("padding-top","20px");

/*②*/
$("#yoko_in .yoko_all").css({marginTop:"20px",paddingTop:"20px"});

//プロパティ名："値"

※②はプロパティ名を「""」でかこまない
※（-）ハイフンは削除、ハイフンの次にくるのを大文字。
padding-top→paddingTop

※「,」…カンマの位置などに注意

横のスライド エンドレス 【jQuery】

※コピペ※プラグインなし



▼html側

<body>
<div id="allwrap">

<h1>画像の切替</h1>

<div id="yoko"><!--見える部分-->
  <div id="yoko_in"><!--動く部分-->

<div id="no01" class="yoko_all">
 <h2><span>画像の切替</span></h2>
 <p><img src="img_01.png" alt="AAA" width="200" height="150" /></p>
 <p>内容<br>テキストダミー</p>
</div>

   
<div id="no02" class="yoko_all">
 <h2><span>画像の切替</span></h2>
 <p><img src="img_01.png" alt="AAA" width="200" height="150" /></p>
 <p>内容<br>テキストダミー</p>
</div>

<div id="no03" class="yoko_all">
 <h2><span>画像の切替</span></h2>
 <p><img src="img_01.png" alt="AAA" width="200" height="150" /></p>
 <p>内容<br>テキストダミー</p>
</div>

<div id="no04" class="yoko_all">
 <h2><span>画像の切替</span></h2>
 <p><img src="img_01.png" alt="AAA" width="200" height="150" /></p>
 <p>内容<br>テキストダミー</p>
</div>


  </div><!--//yoko_in-->
</div><!--//yoko-->

<div id="btn_box">
     <p class="prev_btn">＜＜左</p>
     <p class="next_btn">右＞＞</p>
</div>

<p>テキストテキストテキスト</p>

</div><!--//all-->


</body>

▼CSS側

body{
margin: 20px 0;
}

h2{
height:16px;
}

#allwrap{/*全体のセンター*/
margin:20px auto;
text-align:center;
position:relative;/*ボタンも動かすから*/
}

/* yoko */
#yoko{/*見える部分*/
width:900px;
height:500px;
overflow:hidden;
position:absolute;
top:0;
left:0;
}

#yoko_in{/*動く部分*/
height:100%;
width:;
}

#yoko_in .yoko_all{
width:;
float:left;
background:#eeeeee;
}

/* btn_box */
#btn_box{
width:100%;
position:absolute;
top:50px;
left:0;
}

#btn_box p{
width:50px;
height:50px;
padding:10px;
background:#666666;
color:#ffffff;
cursor:pointer;
}


#btn_box .prev_btn{float:left;}
#btn_box .next_btn{float:right;}

▼js側

$(function(){



var mg ="900";//横幅を指定

//横に並ばせる（フロート）
$("#yoko_in .yoko_all").css("width",mg);
$("#yoko_in").css({width:mg*$("#yoko_in .yoko_all").length,margin-left:-mg+"px"});//横幅×yoko_allの数
$("#yoko_in div.yoko_all:last").prependTo("#yoko_in");//一番後ろを前に


//next

$("#btn_box .next_btn").click(function(){
$("h2 span").fadeOut("fast");
$("#yoko_in:not(:animated)").animate({marginLeft:parseInt($("#yoko_in").css("margin-left"))-mg+"px"},"slow","swing",
function(){
$("#yoko_in").css("margin-left",-mg+"px");
$("#yoko_in div.yoko_all:first").appendTo("#yoko_in");
$("h2 span").fadeIn("slow");
});

});

//prev
$("#btn_box .prev_btn").click(function(){
$("h2 span").fadeOut("fast");
$("#yoko_in:not(:animated)").animate({marginLeft:parseInt($("#yoko_in").css("margin-left"))+mg*1+"px"},"slow","swing",
function(){
$("#yoko_in").css("margin-left",-mg+"px");
$("#yoko_in div.yoko_all:last").prependTo("#yoko_in");
$("h2 span").fadeIn("slow");
});

});


//マウスオーバー（透明・不透明）

$("#btn_box p").css("opacity",0.5);

$("#btn_box p").mouseover(function(){
$(this).css("opacity",1);}).mouseout(function(){
$(this).css("opacity",0.5)});

});

※ボタンのボックス（#btn_box）のところとコンテンツ内の重なってる部分に リンクがあるとリンクされない。のでmouseoverしたら、コンテンツを前にだす。（z-index）

CSSプロパティプ 数字のみ 【javascript】 【jQuery】

↓imgの横の長さに｢+100px｣をする

▼CSS側

img{
width:200px;
}

このまま.ｃｓｓで取得すると

「200px」と取得してしまうところを

「200」数字のところのみほしいときに使う


▼js側

aa=parseInt($("img").css("width"))+100+"px"

$("img").css("width",aa);  

↑変数aaの中にいれたのは特に意味はなし

parseInt()・・・(パースイント)文字列を数字に変換してくれるもの。

要素の数 【jQuery】

olの中の「li」の数を調べる
▼html側

<ol>
<li>テキストダミー</li>
<li>テキストダミー</li>
<li>テキストダミー</li>
</ol

▼js側

alert($("ol li").size());

「size()」は非推奨らしいので↓で使う。

alert($("ol li").length);

下のレイヤーだけに 色調補正 【photshop】

↑コレが完成したもの

①レイヤー下のボタンをぽちっとおして 調整レイヤー新規作成




②クリッピングマスクを作成

ショートカット
【Alt】+【Ctrl】+【G】

か、もしくは

【レイヤー】→【クリッピングマスクを作成】


③おわり

下のレイヤーだけに色調補正などがかかります。
解除するときも同じ、ところに解除があります。







-------------------　わかりやすい参考サイト　-------------------------
 ・イトウ先生のWeekly Tips【Photoshop6】レイヤー毎の色調補正・調整レイヤー
−株式会社ワークスコーポレーション ブログ
http://www.wgn.co.jp/store/blog/item-929.html

横に長いサイト つくる

◆ページ全体を横長にするとき

＜div＞のボックスを横長にfloatで配置。

ブラウザの幅を超えるとfloatしたボックスが下にながれる。

解決策↓↓

floatを囲ってるものに対して
横幅を広げる　2000pxとか、


bodyに

overflow:hidden;

◆部分的に横に流れるものをつくるとき

※コピペすると同じものができる

画像というか、色付けしてある「div」をクリックすると、 それがまん中にいく

 ▼html側

<div id="all">

<h1>画像の切替</h1>

<h2>クリックすると画像がかわる</h2>

<div id="yoko">
  <div id="yoko_in">
  <div id="no01" class="yoko_all">
    <h3>見出し01</h3>
     <img src="img_01.png" alt="AAA" width="200" height="150" />
     <p>内容<br>テキストダミー</p>
   </div>
   
   <div id="no02" class="yoko_all">
    <h3>見出し02</h3>
     <img src="img_02.png" alt="AAA" width="200" height="150" />
     <p>内容<br>テキストダミー</p>
   </div>
   
   <div id="no03" class="yoko_all">
    <h3>見出し03</h3>
     <img src="img_03.png" alt="AAA" width="200" height="150" />
     <p>内容<br>テキストダミー</p>
   </div>
  </div><!--//yoko_in-->
</div><!--//yoko-->


<p>テキストテキストテキスト</p>

</div>

▼js側

$("#no01").click(function(){
$("#yoko_in:not(:animated)").animate({left:"200px"},"slow","swing");

});

$("#no02").click(function(){
$("#yoko_in:not(:animated)").animate({left:"-300px"},"slow","swing");
});

$("#no03").click(function(){
$("#yoko_in:not(:animated)").animate({left:"-800px"},"slow","swing");
});

▼css

body{
background:#eeeeee;
margin: 20px 0;
}

#all{
width:900px;
margin:0 auto;
text-align:center;
}

#yoko{
position:relative;
height:500px;
width:100%;
background:#ff8800;
overflow:hidden;
text-align:center;
}

#yoko #yoko_in{
width:2000px;
position:absolute;
top:0;
left:-300px;
background:#000000;
}

.yoko_all{
text-align:center;
height:500px;
width:500px;
float:left;
}

#no01{background:#fff0f5;}
#no02{background:#e0ffff;}
#no03{background:#faebd7;}

透明にする【jQuery】【CSS】

◆CSSで透明度を調節する場合

▼CSSのみで透明度を変更
「1」がそのまま、「0.0」が完全に透明

#ID名{
opacity:0.5;
}

※IE8以降は、↑のままではききません。

IEプラス↓

#ID名{
opacity:0.5;
filter:alpha(opacity=50);
}

▼両方指定するのは面倒だから、jQueryで指定する

$("#ID名").css("opacity",0.5);

--------------　参考サイト　----------------------
・モダンブラウザとIEに対応したopacity指定 | PAOLOG
http://scianto.net/2009/08/09214844.php

配色について 色

◆3色を使うとき比率

ベースカラー【70％】
メインカラー【25％】
アクセントカラー【5％】


＜＜選び方＞＞

①メインの色を選ぶ【25％くらい使用する色】

選ぶときのコツ↓
見やすい色（明るすぎると駄目読めない見れない）


②ベースの背景【70％くらい使用する色】

選ぶときのコツ↓
薄い色、邪魔しない色、（黒いサイトにしたいとき以外）

色を選ぶのが面倒なら、メインの色の明度を下げる


③アクセント【5％くらい使用する色】
メインの色の反対色、色相環でみて反対側にある色



◆3色じゃ物足りないとき

”メインの色”か”アクセント”を「分割」

選ぶときのコツ↓
トーンのみを変える。もしくはトーン同じで色変える


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

ネタの大元とってもわかりやすい↓↓※動画じゃないのでご注意
・色彩センスのいらない配色講座
http://www.slideshare.net/marippe/ss-9003317

・色カラー
http://iro-color.com/colorchart/

クリックすると画像がかわる 【jQuery】

◆プラグインを使わないで、CSSとjQueryのみでクリックすると切り替わる

※コピペ可

▼html側

<div id="ani_box">
<ul>
 <li><a href="#1"><img src="img_01.png" alt="AAA" width="200" height="150" /></a></li>
 <li><a href="#2"><img src="img_02.png" alt="AAA" width="200" height="150" /></a></li>
 <li><a href="#3"><img src="img_03.png" alt="AAA" width="200" height="150" /></a></li>
</ul>
</div>

※リンクを付けたい場合は"#1 #2 #3"にリンクをつける。切り替えるだけならいらない削除

▼CSS側

#ani_box{
height:200px;
}

#ani_box ul{
list-style:none;
position:relative;
}

#ani_box ul li{
position:absolute;
top:0;
left:0;
}

ここで重ねてる。


▼js側

$("#ani_box ul li").click(function(){
$("#ani_box li:last").fadeOut("fast",function(){$(this).fadeIn("fast").insertBefore("#ani_box li:first")});
});

これ↑をつかって、 透明にして ずらして 拡大してフェードアウトさせる

デザイン

読んでみる本
・デザインの教室 手を動かして学ぶデザイントレーニング
・タイポグラフィの基本ルール


・小規模なサイトを最初から最後までつくる
http://www.designmap.info/tobewebdesigner/diary/19web_atogaki/

ワイヤーフレーム→デザイン→コーディング→WordPress



平面構成って？
http://qanda.rakuten.ne.jp/qa458345.html

kequさんの回答
例えば、まず白い画用紙を一枚用意してください。
その上に、赤い画用紙を四角く切ったものと、黒い画用紙を三角に切ったもの
を載せて、どの配置にすれば、良い構図となるか、色々動かしてみます。
これが「平面構成」です。


世界のWEBサイトをみる（ブックマーク）
http://www.2-wg.com/

アイコン色々

参考サイト↓↓

・ 初心者のブログ開設
 http://hassinkichi.blog88.fc2.com/blog-entry-77.html

ちょっと崩れた線 イラレ 【Illustrator】

①ペンツールで線をひく

②ひいた線を選択

③【効果】→【パスの変形】→ 【ランダム・ひねり】

※アンカーポイントのチェックはずす。（アンカーポイントは動かなくなる）

④何度か同じ効果をかける。もしくは、アンカーポイントを足したりする。

⑤完成>

周りぼかす マスク 【Fireworks】

◆マスクを使ってぼかす

→写真を配置


→見せる部分を｢長方形ツール｣でつくる（※長方形じゃなくてもいい・色は何でもいい）
つくったものを切り取る


→レイヤーの下にある【マスク追加】をクリックして、
切り取った図形をペースト

※マスクする図形は、同じ場所にペーストされるので、
写真と多少かぶってないと、どこに置いたかわからなくなるので注意

↓マスクされました。


↓マスクだけを選択　連結部分は、はずす


→【プロパティ】→【エッジ】の【エッジをぼかす】で調整して終わり。


↓できあがり

◆マスクしないで、簡単にどうにかぼかす方法

直接画像にフィルターで効果を付ける

→画像配置、フィルター効果の光彩/内側を調節すると同じようなものができる




↑の写真は、エッジの丸みが多少足りないので、
それは別にエッジを丸くすると同じになる




-----------------------使った写真↓↓---------------------------

写真素材 足成【フリーフォト、無料写真素材サイト】
http://www.ashinari.com/

ファイルを一覧にする

フリーソフトをダウンロード

http://www.vector.co.jp/soft/win95/util/se340173.html
win7でも動作可





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

・ファイル名一覧をコマンドプロンプトでテキストに保存する方法
http://cmd-pro.com/m_list.html

・フォルダ内のファイル一覧をテキスト ファイルに出力する方法
http://support.microsoft.com/kb/880085/ja

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

フォントについて

◆フリーフォントまとめサイト（日本語）

・漢字が使える日本語フォント 無料ダウンロード 46種類 : 4GALAXYのメモ
http://blog.4galaxy.net/56.html

・【デザイナー必見】最強の日本語フリーフォントのまとめ - NAVER まとめ
http://matome.naver.jp/odai/2130244832975388701

◆フォントについてのサイト

・プロフェッショナルのデザイナーがよく使う21種類のフォント
http://gigazine.net/news/20081017_fonts_professional_designers/

◆商用フォントが見れるサイト

・無償で商用利用できて品質の高い日本語フォント一覧 - Liner Note
http://note.openvista.jp/2007/japanese-fonts-for-free-commercial-use/#ta6ed08

◆フォントの加工

・Photoshopのかっこいい文字加工がわかるチュートリアル集 - NAVER まとめ http://matome.naver.jp/odai/2132730263043963901

初心者が勉強するプログラムについて考える

評価レビューとか類似するものとか統計とかつくりたい
　　↓↓↓


評価レビュー等は、cgiかphpでつくるのが主流らしい

CGIとphpは同じようなことができる。PHPの方が処理がはやいらしい

　　↓↓↓

 どちらが、おすすめ（簡単）なのか…

 そもそも、CGIプログラムは Perl言語で記述されてるものが多いらしい

ので、

”どちらが…”で、検索するなら「Perl言語かphp言語」


phpの方が簡単らしい↓

・僕の感じるPerlとPHPの最大の違い(差と言ってもいいかもしれない) | ブログが続かないわけ
http://en.yummy.stripper.jp/?eid=811810


初心者ならPHPがわかりやすい？


 Perlとはどんなものなのか…

Perlでも出来そうな気がするサイト↓↓

・Perl入門～変数 | Smart -Web Magazine
http://rfs.jp/sb/perl/02/01-3.html

トラックバックについて(URL) エラー

 トラックバックURLをそのままリンク先にしたらエラーがでる

▼エラーメッセージ
”この XML ファイルにはスタイル情報が関連づけられていないようです。以下にドキュメントツリーを表示します。”


 そもそもリンク先に指定するものではないらしい



・NP_TrackBack について※回答者藤咲さん

http://japan.nucleuscms.org/bb/viewtopic.php?p=23733

ブログの記事等でトラックバックURLを登録するところがある…らしい



●トラックバックとは…（IT辞書より）
リンク先の相手に対してリンクを張ったことを通知する仕組みのこと

win7 ディスクトップ 名前変更できない

ディスクトップにおいてあるファイルの名前を変更しても
変更しない。
ファイルが開かなくなった。
ごみ箱に入れたはずなのに、入ってくれない。

…再起動も面倒くさい。



↓↓解決方法



ディスクトップを更新（F5押す）

デザインうんぬん

デザインを考える

・かっこいいWEBは物が売れるのか | More Access,More Fun!
http://www.landerblue.co.jp/blog/?p=3143


見た目を重視しない。
情報量が少ない場合→あるように見せる

・文字と色のバランス＜2＞　～文字と写真のバランス～ 富士ゼロックス
http://www.fujixerox.co.jp/support/howto/column/applicationseminar6_2.html


●役割を考える
情報→順番→配置

■今ある情報の洗い出し
・商品画像
・商品名
・詳細内容
・値段
・特徴

■役割の大きい順に並べる
1.特徴
2.商品画像
3.値段
4.商品名
5.詳細内容

1文字表示

html側

<p id="m1"></p>

js側

$(function(){
gogo();

});

var m_box=new Array();
m_box[0]="メッセージ（1）";
m_box[1]="メッセージ（2）";
m_box[2]="メッセージ（3）";
m_box[3]="メッセージ（4）";
m_box[4]="メッセージ（5）";
var i=0,n=0;

function gogo(){
if(i<=m_box[n].length){
my_message=m_box[n].substring(0,i);
$("#m1").text(my_message);
i++;
setTimeout("gogo()",100);　//1文字を表示させる時間
}else{
i=0;
n++;
setTimeout("gogo()",2000);　//1行を表示させる時間
}

if(n==m_box.length) n=0;　//最初に戻る
}

文字列を改行したい場合は、エスケープ文字（バックスラッシュ）を使います。
 キーボードのバックスラッシュを押しても『￥』にしか表示されない。
『￥』でも問題なし、理由は知らない。

改行→\n　"メッセージ\n（1）"




★jsの解説

jQueryで関数「gogo」を呼び出しています

$(function(){
gogo();

});

表示させる文字を配列「m_box」に入れます。（一行の場合はいらない）

var m_box=new Array();
m_box[0]="メッセージ（1）";
m_box[1]="メッセージ（2）";
m_box[2]="メッセージ（3）";
m_box[3]="メッセージ（4）";
m_box[4]="メッセージ（5）";

変数「i」と「n」に初期値いれます。

var i=0,n=0;

※複数の変数の場合【,】でつなぐ


関数「gogo」について

function gogo(){
if(i<=m_box[n].length){
my_message=m_box[n].substring(0,i);
$("#m1").text(my_message);
i++;
setTimeout("gogo()",100);　//1文字を表示させる時間
}else{
i=0;
n++;
setTimeout("gogo()",2000);　//1行を表示させる時間
}

if(n==m_box.length) n=0;　//最初に戻る
}

setTimeout（"関数名",時間）…一定時間後に繰り返す。設定時間後に関数の呼び出し
※時間は1000→1秒

substring（”開始インデックス”,”最終インデックス”）…指定した文字列を取得
※例えば「いちご」という文字列の場合
い→0
ち→1
ご→2
なので（”0””3”）と指定すると「いちご」※最終インデックスは含まれないので「2」ではなく「3」




上記をふまえて簡単にすると↓↓


もしiが、配列(m_box)【n】番目の文字列の数と同じ、または以下であれば、
 100ミリ秒後に、下記を繰り返す。

 ID(m1)に、配列(m_box)【n】の文字列のi番目を表示させてね

それが終わったらiに+1してね。（文字列が順番に表示されていく）

 iに+1を繰り返し、iが配列(m_box)【n】番目の文字列の数をオーバーしたら

（【n】の文字列の数を超したら）iを0に戻して【n】に+1して、

gogo()してね （また文字列の数をこすまで、iが+1され続ける）

んでもって【n】が配列(m_box)の数と同じになったら、nを0最初にもどしてね



最初に初期値「0」が入ってるので、

配列の【0】メッセージ（1）の文字列の数（文字数8）をこすまで

 substringで指定している一部が表示される。

iには1がプラスされつづける。

8をこしたら次の配列【1】に進む。iはまた0にもどる。

それの繰り返し



●文字列の数を調べたいときはアラートで配列を指定して調べたりする。
●メッセージが一行の場合は配列の部分を削除↓ ※長文の場合、微調整してもチラッとタグが見えちゃうので、 改行したいときは、配列をそのまま使う。

$(function(){
gogo();

});
var m_box=('一行だけのメッセージ、一行だけのメッセージ。');

var i=0

function gogo(){
if(i<=m_box.length){
my_message=m_box.substring(0,i);
$("#m1").text(my_message);
i++;
setTimeout("gogo()",100);
}

if(i==m_box.length) i=0;
}

length（レングス）について

配列によくつかわれているlength（レングス）の意味がわからない。

 length（レングス）…文字列の長さを返す

やっとわかった”長さ”↓

『box』という配列があって↓

var box=new Array();
mes6[0]="りんご";
mes6[1]="バナナ";
mes6[2]="いちご";

box[2]の長さを調べる

alert(box[2].length);

答えは『3』

い 1
ち 2
ご 3

boxの長さを調べる

alert(box.length);

答えは『3』

りんご1
バナナ 2
いちご 3

基礎の基礎 【javascript】

◆javascriptを読み込んでいるかのチェック（アラート表示）

-その他につかうとき--
ページを開いたときのメッセージ


　alert("アラート表示");

文字列の場合…「”」か「’」で囲む
囲むことによってコンピューターに文字列として認識される。


※「”」内で改行する場合→alert("いちぎょう￥nにぎょう")

◆文字列表示

　document.write ("あいうえお");

　document.write ("<img src="" />");

↓計算結果も表示できる　※「”」と「’」はいらない
　document.write (20+20);
40と表示される

◆配列とfor文

var box= new Array();

 box[0]="あいうえお";

box[1]="かきくけこ"; 

box[2]="さしすせそ";

$(function(){

$("#bbb").text(box[2]);

});

意：ボタンのテキスト部分がさしすせそになる。


boxという箱にさらに小さい箱で3つはいっている


番号で呼び出す。


box.length …配列の数

box.sort();…配列の数字を順番にしてくれる



for文（カウント）をつかって、番号をすべて呼び出したりして使う。

var rank=1;var box= new Array();box[0]="あいうえお";

box[1]="かきくけこ";

box[2]="さしすせそ";

for(i=0;i<=2;i++){

document.write(rank+i+"位"+box[i]+"<br>");

}

表示すると


1位あいうえお
2位かきくけこ
3位さしすせそ

となる。








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

・JavaScript入門
http://www.pori2.net/jhttp://www.blogger.com/img/blank.gifs/

オブジェクト メソッド 何？ javascriptの理解 【javascript】②

◆○○オブジェクトって何？

ざっくりゆうと、javascriptは、オブジェクトとメソッドで成り立っている。

○○(オブジェクト)に対して、★★（メソッド）してね。

しかも、たぶん
出来ることが決まってる↓↓javascriptリファレンスより確認

http://www.htmq.com/js/index.shtml


…ということは、
この中にないものはできないと考えた方が頭すっきり。

しかもメソッド（命令）は、オブジェクトによって決まってるので
そんなに難しくないかも



下の参考サイトの＜例＞を式にすると↓

document.write("テスト");
　　　↓↓↓
対象物｢オブジェクト｣.アクション｢メソッド｣（具体的な内容｢引数｣）；

◆なら、オブジェクト指向ってなに？

要は、あんまり難しいことはしなくていいょ。

簡単にいこうよ！…的なこと？またつまづいたら調べてみる

◆あれ、プロパティは？

下記のリファレンスをよ～くみてみる
例えば、｢window｣は、最後に｢（）｣があるのがメソッドでないのがプロパティ
ちなみに、｢●●名｣とうのは、nameまたはIDで指定

★JavaScriptリファレンス（オブジェクト別）
http://www.htmq.com/js/index.shtml


プロパティとメソッドの使い方
①｢.(ドット)｣を使う

②｢[](ブラケット)｣を使う

↑この二つを使ったプロパティの例↓

document.getElementById("linktest").href="https://www.google.co.jp/";

document.getElementById("linktest")["href"]="https://www.google.co.jp/";

※＜a＞タグlinktest（ID）のリンク先を変更している。



-----------------　参考サイト　---------------------
・オブジェクト/JavaScript入門
http://www.scollabo.com/banban/java/jvp_01.html

・オブジェクト、メソッド、プロパティについて
http://plusone.jpn.org/javascript/nyumon/kihon/06obj.html

使っていないレイヤー 一括削除 【photshop】

◆使っていないレイヤー（非表示）を一括で削除

【レイヤー】→【削除】→【非表示レイヤー】

in演算子 【javascript】

◆指定したオブジェクトからプロパティ・メソッドがあるかないかを調べる


よくわかんないや どんな時に使うのか不明なのでまた今度





-----------------------参考サイト------------------------
・in演算子の使用法：続JavaScriptのオブジェクトについて - builder
http://builder.japan.zdnet.com/script/sp_javascript-kickstart-2007/20365320/

論理演算子を使った例

◆論理演算子

★『!B』・・・B以外

function gogo(v){

if (!(v==4)){
alert("4以外です。");
}else{
alert("4です。");
}

}


gogo(8);

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

if ((v==4*3)&&(v==6*2)){
alert("これは12です。");
}

}


gogo(12);

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

function gogo(v){

if ((v=="AAA")||(v=="aaa")){
alert("これはエーです。");
}

}


gogo("AAA");

----------------　参考サイト　---------------------
・論理演算子/Flash ActionScript Helper
http://homepage3.nifty.com/ginga-b/MX/logical_op.html

＄ドルマークについて

変数に「＄」がついてるのはPHPで変数をかくときに使うらしい

$top ～…


関数に「＄」が付いてるのは、昔の名残りらしい


gogo$() ～…

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

・きぬたにっき:[VB] VBでの"$(ドル記号)"について
http://blog.livedoor.jp/keisuke0425/archives/51029674.html


・【 ほでなすPHP 】 PHPの基本 -> 変数
http://www.shigeweb.jp/php/project_p/?section=first&page=var

変数と関数の理解 javascriptの理解 【javascript】③

◆変数について

var n;　//「n」という箱をつくって
n=1;　//「n」の中に1をいれる
document.write(n+"<br>");n=n+2;　//1の入った「n」に2たす。
document.write(n+"<br>");n++;　//3の入った「n」に+1する
document.write(n+"<br>");

※左のnはただの空箱と考える。

++（カウント）や代入の意味はこちら→演算子一覧

変数に使えるもの
・大文字（キャメルケース） 【例：topTop】
・数字（一番最初以外） 【例：top1】
・英文字
・＄ドル記号
・_（アンダーバー）

▼複数の変数指定

var n ,m ;

変数のスコープ（有効範囲）について（2種）

グローバル変数とローカル変数っていうのがあるらしい


▼ローカル変数…宣言した関数内でのみ利用可能な変数

function test(){
var aaa ="テキスト";//ローカル変数

}

alert(aaa);←エラーになります。ローカルにはアクセスできない

▼グローバル変数…プログラム全体で共有できる変数（2パターン）

var aaa ="テキスト";//グローバル変数
function test(){
bbb="テキスト";//varをつけない（どこでもいい）

}

alert(aaa);←アラートで「テスト」とでる
alert(bbb);←アラートで「テスト」とでる

ちなみに…ローカル関数もアクセスはできない

function test(){
var aaa ="テキスト";

function test_in(){
var aaa ="テキスト";
alert(aaa);
}

}

test_in();

※if文やforの中括弧の中で宣言した変数にはアクセスできます。
※ローカル関数は、関数の一番上に宣言（空）されるようになってるらしい…だからなんなのかは不明

◆関数について

あらかじめ決まっている処理を行う命令のこと


function　aaa(引数1,引数2)｛
処理;return処理;
｝

呼び出すとき
aaa();


↓↓クリックしたときは↓↓※関数を呼び出しに、JQueryを使用
*js側

function aaa(){
alert('アラート\n表示');
}

$("#bbb").click(aaa);

*html側

<body><div id="bbb">ボタン</div></body>

意：ボタンを押すと、アラート表示がでる。


ちなみに…
function test(){
alert("テスト");
}　※関数test

↑と↓は同じです。

var test = function (){
alert("テスト");
}　※変数testに無名関数（関数の名前無）をいれたもの


test();


ということで…

→関数は変数として呼び出すことができる

function test(){
alert("テスト");
}

var a = test;

a();

◆引数(ひきすう)について

function　aaa(引数1,引数2)｛処理;
return処理;
｝

function aaa(x){
return x*2;
}

aaa(3);

意：ボタンが3×2、6と差し替わります



・return…処理したものを元に返す。（戻り値）
（※aaa()という関数には、×2したものをかえしてね。とかいてある。）

aaa(3)を×2したものをかえしてる。

※引数をかえることで、同じ関数をつかいまわしができる。



ちなみに…引数に関数オブジェクトを入れることもできます

function gogo(x){

x();

}

gogo( function(){ alert("テスト") } );

引数は変数の一種です。 関数を呼び出す時には、このｘにいろいろな値を代入します。
(http://www.pori2.net/js/kihon/9.htmlより流用)



引数が複数の場合は、「,」をつかって区切る。
↓例

function aaa(x,y){

return "かけると"+ x*y +"です。";
}

(aaa(3,3));

戻り値に、関数オブジェクトを入れることもできる…が例えば…が思いつかなかったので無視



-------------------------　参考サイト　-------------------------
・JavaScriptの変数のスコープについて学ぶ - builder
http://builder.japan.zdnet.com/script/sp_javascript-kickstart-2007/20373861/

・JavaScriptのイロハ：「関数はオブジェクト」って理解できますか？ - builder
http://builder.japan.zdnet.com/script/sp_javascript-kickstart-2007/20364588/

繰り返しの処理 【javascript】

◆while（ホワイル）

while(この条件を満たしていたら…)｛
この処理を繰り返してね；
｝

条件を満たしていなかったら、終了します。





そのほかの繰り返しの処理→forについて

透過pngで書き出し 【Fireworks】

★Fireworks

アルファチャンネルにしないと、中が透過になったり、
白が透過になったりイライラする。
理由はページ一番下の参考サイトに書いてあると思う

photoshopみたいに「png-24」にすると、
透過とか、色々と選択できなくなる。


★Photoshop
←Photoshopの場合の透過





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

・Fireworksで画像を透過gif（透過png）として書き出す際のチュートリアル | FireWorks.20 | Webデザインやチュートリアル、Fireworks
http://fw.nijyuman.com/201201/alpha/

javascriptの理解 【javascript】①

動的なページがつくれる。
サイトを見ているユーザー側のブラウザで実行されるプログラミング言語。

文末につける「;」は、日本語で言う「。」と同じ。

コンピューターそのものの根本は、計算を行うために生まれたらしい。
そう考えると、プログラミング言語javascriptもキモは計算らしい。


簡単な計算↓

「1+1」→答え「2」

「1+1*2」→掛け算(*)を先に計算するから→答え「3」

「(1+1)*2」→(カッコ)を先に計算するから→答え「4」


うっすらとしか覚えてない演算の優先順位…




★文字列と数字の計算について

↑のように文字列と数字を計算してみる

「"a"+1」→「a1」

「"a"-1」→「NaN」（演算できないよ）

「"a"*1」→「NaN」（演算できないよ）

「"a"/1」→「NaN」（演算できないよ…みたいな意味）

※NaN…Not a Numberの略


「+」は、足し算されたのではなくて、ただの連結。なので並んで表示されているだけ


文字列を数字（数値）として扱いたいとき、

普通にすると…
「"123"+1」→「1231」　←このままだと「1」がくっつく

文字列に引き算（減算）すると…
「"123"-0+1」→「122」　←文字列を数値として認識してくれる

※「-0」の数字は0（ゼロ）じゃなくても何でもいい。けど、なんらかの影響がないように「0」にするのがいい。



最後に

「"123"-0*10」の場合は、先に掛け算が計算されるから「123」となる

「1230」としたいときは、「（"123"-0）*10」とする。




---------　ちゃんと書いてあるのはこれ↓　--------------------



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




★実際どんなことができるのか→オブジェクト　メソッド　何？

タッチ・フリック勉強 【スマホ】

↓↓↓他のサイトをみつつ勉強↓↓↓
・web帳 | スマートフォン JavaScript タッチ、フリックイベント実装
http://www.webcyohttp://www.blogger.com/img/blank.gifu.com/?p=3121

タッチについて詳しく書かれているのはこちら↓
・iPhone/Android/PC 対応。jQuery で書くタッチイベント (フェンリル | デベロッパーズブログ)
http://blog.fenrir-inc.com/jp/2011/06/ios_android_pc_touchevent.html

上記のサイトで使ってるイベントは違うけど、意味は同じ。
addEventListenerは、jQueryを使うと.bindとなる。

意味：任意のイベント処理を呼び出す。

addEventListener…IEでは使えないらしい。IEは→attachEventを使う。
使い方はイマイチわからないのでパスjQueryの方で覚える。↓↓


bind（バインド）を使った例↓

$(function(){

function aaa() {
alert("テスト");

}
   $("#touch").bind('click',aaa);

});

※#touchをクリックしら「aaa」読んでね、の意。


【click】の部分を【touchstart】にすると、タッチするとアラートがでる。

【タッチイベント】

touchstart（タッチスタート）…タッチしたら○○

touchmove（タッチムーブ）…タッチしたまま動かしたら○○

touchend…（タッチエンド）…タッチが離れたら○○

touchcancel…（タッチキャンセル）…タッチしてるときに電話とかがかかってきたら○○







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

・addEventListenerを使う方法
http://www.u-ziq.com/blog/2007/05/domscript.html

アニメーションが終わってからリンク先に飛ばす方法 【javascript】

javascriptでリンク先に飛ばす。

参考サイ↓↓
http://www.pori2.net/js/location/1.html


プラス

クリックしたらアニメーションして、
終わったら○○してね、の中にいれる。

↓↓

function gogolink(){
location.href="URL"
}


$("ボタン指定").click(function(){
$(this).fadeOut("slow",gogolink);
});

下記のスマホサイトに似た感じのができると思う

http://www.sisleyjp.com

簡単スライドショー（短） 【jQuery】

難しいものは特になく、簡単にスライドショーをつくれます。
リスト（li）そのものを移動するので、ALTやリンク先を変更というのがなくなります。
（※順番は下からになります。）


～動かし方のイメージ～

重なってる上から順にフェードアウトして、

フェードアウトしたら、重なりの一番下に移動して、それを繰り返す。

※繰り返すのは、FLASHと同じ（タイムライン）ように、考える
JavaScriptのタイマーを使用（setInterval（））

window.setInterval(ani_box_slide,2000);

２秒たったら、関数「ani_box_slide」やってね。の意


①同じ大きさの画像を用意する



②リストに画像いれる、リンク付き

<div id="ani_box">
<ul>
<li><a href="#1"><img src="img_01.png" alt="01" width="200" height="150" /></a></li>
<li><a href="#2"><img src="img_02.png" alt="02" width="200" height="150" /></a></li>
<li><a href="#3"><img src="img_03.png" alt="03" width="200" height="150" /></a></li>
</ul>
</div>

※すべて同じリンク先の場合は、html5ならブロック要素囲みがOKです。



③CSSでリストを重ねる。

#ani_box{
height:200px;//一応高さを指定
}

#ani_box ul{
list-style:none;
position:relative;
}

#ani_box ul li{
position:absolute;
top:0;
left:0;
}

③jsでリストを重ねる。

$(function(){

function ani_box_slide(){
$("#ani_box li:last").fadeOut("fast",function(){$(this).fadeIn("fast").insertBefore("#ani_box li:first")});
}
window.setInterval(ani_box_slide,2000);

});

ポジションで重ねて、一番上の（リストでいう一番最後）をフェードアウトして、
し終わったら、フェードインして一番下（リストでいう一番初め）にもっていってね。の意。


※CSSをいったん切ると、↑のことがよくわかる。

画像の切替（ただ切り替わるだけ） 【jQuery】

◆画像切り替え（アニメーションなし）

html側

<div id="main_box">
<img src="img_03.png" alt="AAA" width="200" height="150" />
</div>

js側

var i=0;

var img_box = new Array();

img_box[0]="img_01.png";
img_box[1]="img_02.png";
img_box[2]="img_03.png";

$(function(){

function slideimg(){
$("#main_box img").attr("src",img_box[i]);
i++;
if(i>=img_box.length){//配列の最後になったら0に戻す
i=0;
}

}

window.setInterval(slideimg,4000);//4秒だったら「slideimg」読んでね

});

setInterval…（インターバルタイマー）定期的に関数を呼び出す。




★アニメーション風にみせたいときはこちら→

★ボタンをクリックしたときにアニメーション風に切り替わるのはこちら→（作業中）



-------------------参考サイト------------------
・配列でのアニメーション for JavaScript　/KSU CAC Wiki
https://sites.google.com/a/cse.kyoto-su.ac.jp/cac-wiki/reference/gamesakusei/arrayanimation


・(タイマー) setInterval
http://www.openspc2.org/JavaScript/ref/timer/setInt.htm

★アニメーションの画像切り替え
・奥から手前にズームするJavaScript「Spacegallery.js」｜skuare.net
http://www.skuare.net/2008/07/javascriptspacegalleryjs.html

animate()について 【jQuery】

◆animate

アニメメイトで変更できるCSSは、数値で変更できるものに限る

「px」とか「em」とか「％」

$("セレクタ").animate(CSSプロパティ,スピード,動き,コールバック関数);

▼CSSプロパティについて…
「-（ハイフン）」は削除、「-」の次にくる文字を大文字に変更
＜例＞

margin-left →　marginLeft

▼スピード
「slow」「normal」「fast」もしくはミリ秒


▼動き
「linear」…一定の速度
「swing」…最初はゆっくり後半早い



↓かき方
プロパティ名と値を「：」でつないで、値は「"」で囲む

$("セレクタ").animate({marginLeft:"-500px"},"slow","swing",コールバック関数);

コールバック関数について→

アニメーション処理中の要素を選択【:animeted】

◆:animeted

アニメーション処理中の要素を選択できるセレクタ

ボタンをクリックすると、●●するアニメーションをしてねというときに、
クリックした数だけひたすらアニメーションされたりするのを防ぐときに使う。

↓↓使い方
:not()と一緒に使う。:notとは？→

notで指定しているもの以外を●●してねの意味だから
アニメーションしている以外とは→アニメーションしていないもの
↓↓

$(function(){
$("#div:not(:animeted)").show("slow");
});

divで、アニメーションしていないときに、showしてね。の意

※ボタンを押したら○○する…というスクリプトをかいたときに、
押した数だけ○○するので、「アニメーションが止まらない！」とならないようにする

落とし穴：animateじゃなくても使える動いてれば、
アニメーション一覧はこちら→

アニメーション 【jQuery】

アニメーションといってもCSSをアニメーション風に見えるように動かしてると考えた方がいいかも

◆show

非表示の要素をアニメーションしながら表示

※ちょっと、カッコよく表示させたいときに使う（slow）

透明→不透明・サイズ0→本来のサイズ（最終的に、「display：block；」に切り替えられる）

↓display:none;をCSSで指定したものに↓

$(function(){
$("#main_img").show("スピード");
});

※スピード…「slow」「normal」「fast」もしくはミリ秒

注：文字列の場合は「"」でかこって、数字のときは囲まない

◆hide

表示の要素をアニメーションしながら非表示

【show】↑の反対（display:none;をCSSで指定しない）

◆slideDown

ブロック要素以外なら表示（高さを元のサイズに）

↑の【show】と【hide】との違いは、
ブロック要素かそうでないかで動く。

例えば、【slideDown】で表示させたい場合は、
CSSで、display:block;以外で指定してあげると、びよ～んとでてくる。

※注：inlineで指定すると、そのままずっと何もしてない感じになるので
いったん消した（none）したものにslideDownをかけてあげると、びよ～んとでてきた風になる

◆slideUp

要素の高さを非表示（ゼロ）にする。（ブロック要素の場合）

ブロック要素の高さを「0(ゼロ)」にする。


★スライドの切り替えメニューはこちら→




▼動き方

【show】【hide】


【slideDown】【slideUp】





↓下記もCSSに、display:none;は必要

◆fadeIn

フェードインしていく（透明度0→100％）
透明度を徐々に変更していくもの

★CSSで透明度を調節するのはこちら→

◆fadeOut

フェードアウトしていく（透明度100％→0）
透明度を徐々に変更していくもの

◆fadeTo

指定した透明度に、フェードアウト/フェードインしていく（透明度0or100%→指定した透明度）
透明度を徐々に変更していくもの




★animateについてはこちら→

DONとは？

▼DONについて
http://itpro.nikkeibp.co.jp/article/COLUMN/20070627/276026/?ST=develop


HTMLやXMLといったマークアップ言語へアクセスするためのAPI


マークアップ言語…タグで囲んだりして、文章構造や装飾をする言語のこと

▼IT辞書
http://e-words.jp/w/E3839EE383BCE382AFE382A2E38383E38397E8A880E8AA9E.html



API…難しいプログラムが書けなくても「○○をする」と呼び出すだけで、
同じことができる。関数セット呼び出し？

▼そもそもAPIとはなんぞや？

http://www.atmarkit.co.jp/fnetwork/rensai/5minapi/01.html

FLASHの画面をダウンロードする（メモ） 【Flash】 AS3

FileReference オブジェクト…ファイルをアップロード・ダウンロードしたりるすときにつかう？

draw…キャプチャする


▼FlashゲームPG講座 For AS3.0【 Bitmap クラスについて】
・描画結果をビットマップデータにキャプチャーする
http://hakuhin.jp/as3/bitmap.html#BITMAP_04

FLASHの画面をダウンロードする 【Flash】 AS3

ダウンロードボタンをクリックすると、
画像の一部がダウンロードされる。

ページ一番下の参考サイトをみつつ短くしたもの
（注：PHPはわからないので、AS3のみでどうにかしたいとあがいたもの失敗作動きません）

var fileRef:FileReference = new FileReference();//新しいオブジェクト作成

var myBitmapData:BitmapData= new BitmapData(100,100);//新しいオブジェクト作成
myBitmapData.draw(aa);　//aaはインスタンス名


//kamera_iconは、ボタンのインスタンス名

kamera_icon.addEventListener(MouseEvent.CLICK,kamera);
function kamera(event:MouseEvent):void{

var fn:String="photo.jpg";
fileRef.download(myBitmapData,fn);

};

そもそも…サーバーに上げてない、あげない

FileReference.download() メソッドを使用すると、サーバー上のファイルをユーザーがダウンロードできます。
～ActionScript 3.0 コンポーネントリファレンスガイドより～




↓↓↓解決策

◆PHPをやりたくなかったら、便利ツール(ざっくりいうと、ビットマップをJPEG画像に変換してくれるもの)をダウンロード


↓↓とっても親切サイト↓↓
英語がわかんなくてもダウンロードの仕方からそれ以降の作業がわかりやすい

▼おきらくFLASH講座 : FileReferenceクラスを使って| マイナビクリエイター
http://creator.mynavi-agent.jp/special/flash/fl_060.html




ページが突然なくなったら困るので
上記サイトより簡単なメモ↓↓


【http://code.google.com/p/as3corelib/】から【Downloads】メニューにいって、

英文の中の【all downloads】をクリック。

【as3corelib-.93.zip 】ファイルをダウンロードして、解凍、その中の【src】をクリックして、

その中の【com】を丸ごとフラッシュデータと同じとこにおいとく。



flaファイルはこれ↓↓

import com.adobe.images.JPGEncoder;//便利ツール【com】をよんでます。

var fileRef:FileReference = new FileReference();//新しいオブジェクト作成

var myBitmapData:BitmapData= new BitmapData(100,100);//ダウンロードする範囲
myBitmapData.draw(aa);

kamera_icon.addEventListener(MouseEvent.CLICK,kamera);

function kamera(event:MouseEvent):void{

var encoder: JPGEncoder = new JPGEncoder(80);
var byteArray:ByteArray = encoder.encode(myBitmapData);

//↑を一行にすると→var byteArray:ByteArray = new JPGEncoder(80).encode(myBitmapData);

var fn:String="テスト4.jpg";
fileRef.save(byteArray,fn);

};

さっきの失敗作に、便利ツールを追加して、最後のFileReference を

「.download」→「save」

に変更したもの




右下のカメラをクリックすると、インスタンス「aa」の100px×100pxがJPEGで保存される。





----------参考サイト---------
▼ blog.azzip-azzip.com
・AS3.0_FileReferenceクラスで画像の読み込みと保存
http://blog.azzip-azzip.com/2010/04/as3-0_filereference%E3%82%AF%E3%83%A9%E3%82%B9%E3%81%A7%E7%94%BB%E5%83%8F%E3%81%AE%E8%AA%AD%E3%81%BF%E8%BE%BC%E3%81%BF%E3%81%A8%E4%BF%9D%E5%AD%98/

▼ＦＬＡＳＨで遊ぼう！
・ムービーをJPEGで保存する２
http://flashjp.com/as3/saveasjpg2.php

▼にゃあプロジェクト - ウェブログ - FileReferenceを使ってみる (1)
・FileReferenceを使ってみる (1)
http://www.project-nya.jp/modules/weblog/weblog-tb.php/672

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

お問い合わせなどのメールにあらかじめ文章をいれとく【スマホ】

◆メールアドレスを書き込む※PCと同じ

<p><a href="mailto:aaa@aaa">メールでのお問い合わせ</a></p>

↓↓
本文と件名に文章いれる

<p><a href="mailto:aaa@aaa?subject=件名にいれる言葉&amp;body=本文の中にはいります">メールする</a></p>

パソコンは、IE以外はそのまま見える


スマホの場合↓↓


↓↓日本語をURLエンコーディングしてはりつける


▼変換してくれるサイトはこちら▼

・Web便利ツール/URLエンコード・デコードフォーム - TAG index Webサイト
http://www.tagindex.com/tool/url.html



エンコードしたものを張り付けた例↓

<p><a href="mailto:aaa@aaa?subject=%e4%bb%b6%e5%90%8d%e3%81%ab%e3%81%84%e3%82%8c%e3%82%8b%e8%a8%80%e8%91%89&amp;body=%e6%9c%ac%e6%96%87%e3%81%ae%e4%b8%ad%e3%81%ab%e3%81%af%e3%81%84%e3%82%8a%e3%81%be%e3%81%99">メールする</a></p>

※紫の部分がエンコードした日本語部分

ベッキー mailto：をベッキーで開く win7

設定方法など↓↓
http://okwave.jp/qhttp://www.blogger.com/img/blank.gifa/q6462099.html