写真の構図

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


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

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

→求心


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

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


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

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


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




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

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



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

→空間を入れる




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

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

→余計なものをぼかす

→逆光でシルエット化



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

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


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

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

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

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

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

jQuery独自のフィルターについて

◆jQuery独自のフィルター

★firstフィルター/lastフィルター
最初と最後を指定
＜例＞
＄（”li:first”）//リスト(li)の最初を指定
＄（”li:last”）//リスト(li)の最後を指定

疑似クラス(first-child/last-child)との違いはこちら→


★evenフィルター/oddフィルター
偶数と奇数を指定
＜例＞
＄（”li:even”）//リスト(li)の偶数を指定
＄（”li:odd”）//リスト(li)の奇数を指定


★eqフィルター/gtフィルター/ltフィルター
特定の順番を指定(順番は『0ゼロ』から)
＜例＞
＄（”li:eq（2）”）//リスト(li)の2番目を指定
＄（”li:gt（2）”）//リスト(li)の3番目以上指定
＄（”li:lt（2）”）//リスト(li)の１番目以下を指定
＜例＞



★headerフィルター
見出しをまとめて指定（h1～h6…）
＜例＞
＄（”:header”）




jQuery　-はじめに-
属性セレクターについて
jQuery独自のフィルターについて

属性セレクターについて

◆属性セレクター
IDとかtitleとかaltとか、属性を一括して選択できる。

★[***]←この中にいれる
【例】
$(”[ id ]”).ｃｓｓ（”color”,”red”）
idすべてに…

＜要素 title=step＞属性の値を指定するときは↓↓
$(”[ title＝’step’ ]”).ｃｓｓ（”color”,”red”）
※シングルクォーテーションで囲みます。


↓↓反対にそれ以外にかけたい時は
$(”li[ title!＝’step’ ]”).ｃｓｓ（”color”,”red”）
属性のあとに『！びっくりマーク』入れる
※必ず、要素を指定


属性の値の共通部分のみでも選択できる。

↓↓『ｆ』ではじまる値に…のときは、"^"キャレットをいれる。
$(”[ title^＝’ｆ’ ]”).ｃｓｓ（”color”,”red”）
＜p title＝"firest"＞＜/p＞
＜p title＝"second"＞＜/p＞
＜p title＝"fan"＞＜/p＞

『ｄ』で終わる値に…のときは、”＄”ドルマークを入れる。

どこかに『ir』とはいってる値を選択することもできる。
そのときは”*”アスタリスクを入れる。
↑の場合はタイトルに『ir』
title＝"first"とか、title＝"air"とか。


ここで、二つの条件をいれることもできる。
↓↓頭に『ｆ』がついてて、かつどっかに『a』がはいってるtitle
$(”[ title^＝’ｆ’ ][ title$＝’a’ ]”).ｃｓｓ（”color”,”red”）
＜p title＝"firest"＞＜/p＞
＜p title＝"second"＞＜/p＞
＜p title＝"fan"＞＜/p＞


jQuery　-はじめに-
セレクターについて
jQuery独自のフィルター




　

最近の個人的な新発見CSS

■新発見したこと↓
今まで、*(アスタリスク)で全選択はしていたけど
*｛マージン：0；パディング：0；｝


↓↓↓要素の中の異なる要素も選択できる。↓↓↓

【例】
**CSS**************************************
※ｐスペース*
p *{font-color:red;}
(ｐ要素の中の要素全部)

**HTML***********************************
＜ｐ＞テキストダミーテキストダミーテキストダミー＜/ｐ＞
＜ｐ＞＜span＞テキスト＜/span＞ダミーテキストダミーテキストダミー＜/ｐ＞
＜ｐ＞テキストダミーテキストダミーテキスト＜strong＞ダミー＜/strong＞＜/ｐ＞


※＜ｐ＞に入っている、要素spanとstrongが赤になる。

　

セレクターについて ※【jQuery】

◆セレクターについて
書き方は、ほぼCSSと同じ。

○今現在よく使っているCSS
○jQueryだと使えるCSS(※)
○jQuery特有のもの

※ブラウザでサポートされていないCSSも使用可能


下記、詳細↓↓↓


○今現在でもよく使っているCSS
《例》
＄（function(){
$(”ｐ”).ｃｓｓ（”color”,”red”）
}）;

命令：＜ｐ＞を赤くしてね

IDやClassなどもCSSと同じようにかくことができる。

$(” li ”).ｃｓｓ※以下略→→『＜li＞』が赤に
$(” #main”).ｃｓｓ※以下略→→『＜id=”main”＞』が赤に
$(” .navi ”).ｃｓｓ※以下略→→『＜class=”navi”＞』が赤に
$(” li#main ”).ｃｓｓ※以下略→→『＜liのid=”main”＞』が赤に
$(” #main span ”).ｃｓｓ※以下略→→『＜id=”main”＞の中の＜span＞』が赤に
$(”#main, .navi ”).ｃｓｓ※以下略→→『＜id=”main”＞と＜class=”navi”＞』が赤に
$(”* ”).ｃｓｓ※以下略→→『全ての要素』が赤に※ユニバーサルセレクター



○jQueryだと使えるCSS
★子セレクター
$(” li > strong ”).ｃｓｓ※以下略
→＜li＞の直下にある＜strong＞が赤に
【例】
1.＜li＞＜strong＞テキスト＜/strong＞＜/li＞
2.＜li＞＜div＞＜strong＞テキスト＜/strong＞＜/div＞＜/li＞
※2.は＜div＞に入っているのできかない。


★隣接セレクター
$(” #top + li”).ｃｓｓ※以下略
＜id＝”top”＞の次にでてくる＜li＞
【例】
1.＜li id＝”top”＞テキスト＜/li＞
2.＜li＞テキスト＜/li＞
3.＜li id＝”top”＞テキスト＜/li＞


★間接セレクター　~(読み：チルダ)
$(” #top ~ li”).ｃｓｓ※以下略
＜id＝”top”＞の後にでてくる＜li＞
【例】
1.＜li id＝”top”＞テキスト＜/li＞
2.＜li＞テキスト＜/li＞
3.＜li id＝”top”＞テキスト＜/li＞
※半角英数の方(~)


★否定疑似クラス
条件以外の要素　：not（ここに条件）
$(”li:not(#top)”).ｃｓｓ※以下略
#top以外のものに…

★first-child疑似クラス
最初にでてくる要素
$(”li：first-child”).ｃｓｓ※以下略
リストの中の一番最初だけが…

★nth:child疑似クラス　：nth:child（ここに番号）※1
任意の番号だけの要素
$(”li：nth:child（2）”).ｃｓｓ※以下略
リストの2番目だけに…

★last-child疑似クラス
最後にでてくる要素
$(”li：last-child”).ｃｓｓ※以下略
リストの一番最後に…

★only-child疑似クラス　
要素が一つだけある要素※2
$(”li　span：only-child”).ｃｓｓ※以下略
リストの中にspanが1つだけあると…


※1 nthの読み不明、N番目とかの意味らしい。
※2 要素が2つあるときは何も起こらない

jQuery　-はじめに-
その他(属性セレクター)→
その他(jQuery独自のフィルター)→

ただのメモ

◆アプリケーションをつくるのに必要な知識
(AJAXの理解)
JavaScript
XML
HTML
サーバー側のプログラミング(PHP、Java、など)


Ajaxを使うと、サーバから直接データやり取りする事が出来る。
　↓
HTMLを再度読み込まなくてもページを変更することができる。

＄（”セレクタ”）.load（ファイル名）；

▼テキストを挿入してみる

テキストデータを制作

＜例＞
＄（”セレクタ”）.load（test.txt）；

※テキストデータデータは文字コード『UTF-8』で保存

同じドメインであれば、絶対パスも可能

▼htmlデータを制作

htmlデータを制作


＜例＞
＄（”セレクタ”）.load（test.html P）；


※このまま指定すると、まるまる持ってくるので要素など指定するといい
が、指定した要素やCSSセレクターがそのままくっついてくるので、
タグが被らないように注意する。

＄（"body"）.load（"./sample.html div"）;
↑ボディの内容を差し替えたりもできる。

jQuery -はじめに-

◆jQuery

・通常のjavascriptとは違ったやり方でjavascriptの命令ができる。
・CSSに似ている、覚えやすい、わかりやすい。

◆jQueryの使い方

・一般的なやり方
ローカルにjQuery.jsをダウンロード
使うjsファイルより前に置いておく。


・googleのサービス(Google AJAX API)を使う。

<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">google.load("jquery","1.3.2");</script>
<script src="js/test.js" ></script>

もしくは、

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script src="js/test.js" ></script>

※HEAD内にある場合はこれでも可

バージョンを細かく設定しなければ(省略)、最新版をキャッシュしてくれる。
もし、バグ等が起きた場合はそれも反映されてしまうが、
キャッシュ有効期限が短いので省略がおすすめ？



◆jsファイル、書き方【基本】
・基本形式
＄（function（）｛★★★｝）；jQueryの関数(ready関数)

HTMLを読み終わった後に、実行して下さいね。の意

※必ず↑↑の形式に入れてから↓の★マークの中に、イベント等をかく。

★★★の中

＄（”セレクター”）.ｊQueryの命令





セレクターについて→
属性セレクターについて→
jQuery独自のフィルターについて→

.ｊQueryの命令について




◆ざっくりいうと

○○が○○したときに○○になる。
　　↓↓↓
【セレクター】が【イベント】したときに【命令】になる。

ラベルの名前修正 ※googleブログ

◆ラベルの名前修正
ラベルそのもので管理してるんじゃなくて、
ラベルの名前で振り分けてる？っぽい

【投稿】→【投稿を編集】→ ラベルを修正

＜ｐ＞タグを一括してリストに変換

◆＜ｐ＞タグを一括してリストに変換

＜p＞ああ＜/p＞
＜p＞ああ＜/p＞
＜p＞ああ＜/p＞
＜p＞ああ＜/p＞
＜p＞ああ＜/p＞

　↓↓↓↓↓↓

リストにしたい＜ｐ＞タグ※をすべて選択。
プロパティの↓リストボタンを押すと一括で変換する。


＜ul＞
＜li＞ああ＜/li＞
＜li＞ああ＜/li＞
＜li＞ああ＜/li＞
＜li＞ああ＜/li＞
＜li＞ああ＜/li＞
＜/ul>

◆一括で、仮のリンクをいれることもできる。
・上のリスト＜li＞を選択してプロパティのリンク部分に『＃』などいれる

＜ul＞
＜li＞＜a href="＃"＞ああ＜/a＞＜/li＞
＜li＞＜a href="＃"＞ああ＜/a＞＜/li＞
＜li＞＜a href="＃"＞ああ＜/a＞＜/li＞
＜li＞＜a href="＃"＞ああ＜/a＞＜/li＞
＜li＞＜a href="＃"＞ああ＜/a＞＜/li＞
＜/ul＞



　

　

大量のテーブル（table）をコーディングする時

◆エクセルでデータを作成してコピペ

・ワードなどできた大量の項目をエクセルで表にする
※セルを指定したり文字を左詰めにそろえなくてもいい、ただ入れ込むだけ。

・そのまま、デザインビューにコピペ
微調整は必要だけど、一括して置き換え削除などする。





　

fontを一行にまとめる。

フォントCSSを一行にまとめることが出来るが、
必ず、サイズと『font-family』も記述しなくてはいけないので、あまりつかわない。

全体にfont-familyを指定しているときには使えない。二度が書きしてもいいなら有。

【例】
フォント： bold 12px/120% serif；