作業メモ: 9月 2012

2012-09-28

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

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

MM<sup>2</sup>

↓↓↓↓↓
MM²

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

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

2012-09-26

2012-09-25

横長ページ　ページ内リンク　【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

2012-09-21

hash　【javascript】

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

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

押したとき…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とか）もオーバーとみなされる。簡単な解決方法なし。

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

→イベント一覧に戻る

2012-09-20

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

説明書きを消すとき、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

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

2012-09-19

横のスライド　エンドレス　【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);

2012-09-16

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

↑コレが完成したもの

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

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

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

か、もしくは

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

③おわり

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

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

2012-09-13

横に長いサイト　つくる　

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

＜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")});
});

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

2012-09-12

デザイン

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

・小規模なサイトを最初から最後までつくる
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

2012-09-11

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

①ペンツールで線をひく

②ひいた線を選択

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

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

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

⑤完成>

登録: 投稿 (Atom)

作業メモ

2012-09-28

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

2012-09-26

Dreamweaver コードの折り返し

2012-09-25

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

2012-09-21

hash　【javascript】

マウスイベント　※【jQuery】

2012-09-20

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

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

2012-09-19

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

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

要素の数　【jQuery】

2012-09-16

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

2012-09-13

横に長いサイト　つくる

透明にする【jQuery】【CSS】

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

配色について　色

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

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

2012-09-12

デザイン

アイコン色々

2012-09-11

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

アマゾン和書/最新の情報

ラベル

このブログからキーワードで検索

ブログアーカイブ

hamster

自己紹介

使用ツール、バージョンなど

便利ツール

参考本

2012-09-28

2012-09-26

2012-09-25

2012-09-21

2012-09-20

2012-09-19

2012-09-16

2012-09-13

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

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

2012-09-12

2012-09-11

アマゾン和書/最新の情報

ラベル

このブログからキーワードで検索

ブログ アーカイブ

hamster

自己紹介

使用ツール、バージョンなど

便利ツール

参考本

ブログアーカイブ