floatとboth:clear

プライベートで色々ありました、色ピエロです。
もう今年になってから悲しいことばっかり・・・
でも元気なんで頑張ります。

話変わってみんな大好き、floatちゃんの話です
floatすると、レイアウトがガタガタになってたcssを覚えたての私。
なんで！？ってすごい困ってたのは良い思い出。

<div id="outline">
   <div id="left" style="float:left"></div>
   <div id="right" style="float:right"></div>
</div>

styleは本当はcssで書きます。
上記のようにやると、#leftや#rightが#outlineよりでかいボックスの場合、
#outlineから普通にはみ出たりするんでよね？レイアウトもガタガタ。
原因はもちろん"float"でこれを解除する(とじる)必要があります。
私はこれをいつもこうしてます。

<div id="outline">
   <div id="left" style="float:left"></div>
   <div id="right" style="float:left"></div>
　<div style="clear:both"></div>
</div>

ここでもclear:bothをstyleで書いてますが、本当はcssで書いてます。
他にもhiddenとかclearfixとか色々な解決方法があるみたいです。
さっき知りました・・・どれが一般的なんですかね？？

適音適所

今日は音楽の話します、色ピエロです。

タイトルにのっけたBill Evans。
jazz好きなら必ず知ってる超有名なjazzピアニストです。
といっても今日はこの人について詳しく書く訳じゃないです。
Bill Evansは下の動画の曲、アルバムで有名です。

【waltz For Debby】

私は最近までどこが良いのか全然わからなかったんです。
むしろ眠くなるし、最近の音楽みたいに盛り上がるわけじゃないし(ごめんなさい)
そんな感じにしか思ってなかったんですね。

それでつい最近友人宅にたまたま遊びに行って、ダラダラ〜ってしたんです。
適当にBGMを流しながらソファーでゴロゴロ〜って感じに。

そこでこの曲がたまたま流れたんですが、
あれ？って感じで妙に心地良く聞こえるんですよ。
そして友人が「この曲照明暗くして、間接照明だけで聞くと丁度いいんだよ」と一言。
そのとおりにしたら・・・




パチッ(電気OFF)




〜♫





〜♫





〜♫




超良い！！(*Σ*)

音楽って何気なく色んな場所で聞いちゃいますが、
ある特定の環境にならないと引立たない音楽ってのがあるんだなと思いました。
そりゃ電車や真っ昼間からjazzなんか聞いてもよくわからないですよね。
いや、今もまだ全然わかってないですけど・・・

あんまり興味のなかったジャンルの音楽を聴く時は、
シチュエーションを変えると案外心地よいかもしれないですよ？
そんな話でした。

覚え途中のcss [box-sizing,animation,transition]

最近少しずつ覚えているcssコード達です。
まだ使いこなせてはいないですけど・・・


box-sizing : 
これはもっと前に知っとくべきだったかも・・・
これを知らないばっかりにpaddingやborderでどれだけ苦しんだか・・・
というのもこれで高さ、幅を指定すれば上記２つを含んだボックスが作れます。

・box-sizing：content-box(初期値)
paddingとborderの幅を含めない要素が作れる。
・box-sizing : border-box
paddingとborderの幅を含める。




animation : 
その名の通り、要素をアニメのように動かします。
animation-name、animation-duration、@keyframesさえ記述すれば
動かせます。

例）

animation-nameとkeyframes のプロパティだけ一緒に。
あと-webkit-だけしか書いてないけど、ついてないやつも記述しないと
Firefoxとかでは動かないから注意です。




transition : 
transitionは時間的に要素を変化をさせます。

例）

・transition-propertyは変化させたいプロパティを入れます。
背景色だけ変化させたい場合はbackground-colorを記述します。
・transition-durationは時間を記述します。
例の場合は3秒で:hoverで指定した形になります。
・:hoverには最終的に止まるプロパティ値を入れます。
これらもベンダープレフィックス(-webkit-等)必要




このanimeとtrans2つの違いは
【animation】
　　・ループ可
　　・keyframesで細かい動きの設定可能
　　・ウィンドウが開いて即実行可能

【transition】
　　・ループがない
　　・処理後は自然に最初の状態に戻る
　　・:hoverなどの疑似クラスなどのスイッチとなるものが必要

これらがパパッと使えるようになったらかっこいいなー

ベンダープレフィックス

"人生予想外の事が大半、思ったとおりに進むことなんて極わずか"

こんな言葉に感動してしまいました、色ピエロです。

今日はベンダープレフィックスのメモ。

ベンダープレフィックスは、ブラウザの独自の拡張機能や草案段階の仕様を

先に実装する場合に記述するものです。

-moz-        :     Firefox

-webkit-    :     Google Chrome , safari

-o-            :     Opera

-ms-         :      Internet Exprorer

となってます。

そして草案が勧告候補になったら外すことが推奨されています。

transitionやtransformなどはまだ外せないみたいですね。

外すときは各々確かめないとだめなので、面倒だ・・・

ちなみW3Cのサイトで草案か勧告候補か確認できます。

私の苦手な英語だけど・・・(;_;

W3Cのサイトのリンク

よく使うPhotoshopショートカット

出勤初日、翌日と帰り道で不幸な目に会ったよ・・・

昨日はもうこの世の終わりかと思いました

そんな悲しい気持ちを更に楽しもうと、その夜は

山崎まさよしの「One more time, One more chance」ひたすら聞きました
別に失恋したわけではないんですけどなんとなく

今日は私がよく使うPhotoshopのショートカットメモ。

新規ファイル呼び出し：⌘(comand)　＋　N

新規レイヤー呼び出し：⌘(comand)　＋　shift　＋　N

この2つはよく間違うから注意。

スポイトツール　　：I

塗りつぶし　　　　：G

選択ツール　　　　：M

ズームツール　　　：Z

テキストツール　　：T

選択ツール　　　　：A

選択ツール２　　　：V
ペンツール　　　　：P

カンバスを画面のサイズにする　：⌘(comand)　＋　O
100％ズームツール　　　　　　：⌘(comand)　＋　alt　＋ O

レイヤー複製　　　　　　　　　：⌘(comand)　＋　J
１つ前に戻る　　　　　　　　　：⌘(comand)　＋　alt　＋　Z　　　　

web用に保存　　　　　　　　　：⌘(comand)　＋　alt　＋　shift　＋　S

あとはマウスでポチポチやります　それか忘れてる
もっとショートカット覚えて、効率あげよ

横スクロールのサイトのプラグイン『jinvertscroll』

お正月もあっという間にすぎちゃいますね、色ピエロです。

今日は最近よく見かけるパララックスページのメモ。

今回は横スクロールの『jinvertscroll』の使い方について。

まずは『jinvertscroll』ページにあるjinvertscroll.zipをダウンロードします。
jinvertscrollのページ

解凍して、その中のexampleフォルダを参考にすれば私の解説なんか見なくても、
すぐにできると思います。

解説はexampleを少しいじった感じで書いていきます。

まずはhtmlファイルにスクリプトの呼び出し記述します。

この2つの呼び出しは必須みたいです。

あと以下のjavascriptも記述します。

これはexampleのまんまですが、コメントだけ自分で変えてます。

htmlはこんな感じです。

時間差で動いて欲しい背景画像の数だけ、<div>を増やしてください。

一番前に来る<div>(ここでは.front)には文章等を記述していきます。
.frontの中身はsectionなどでテキストページを分けとくいいと思います。

次にCSS

前半

ポイントはpositionとz-indexですかね？
図で説明するとこうなってる感じです。

後半はこう

positionはabsoluteにしてください。
これは図で説明するとこんな感じです。

4ページもleftの数値だけ変更してあるのみです。
私自身まだ使いこなせてないので、更に勉強しなくては・・・

色の校正とモード

１月１日が過ぎると、もうお正月って感じがしませんよね・・・
そして新年３日しか経ってないのに、号泣２回してます。
色ピエロです。

今日はPhotoshopの機能のRGBとCMYKについてのメモ。

簡単この2つの説明をすると、
RGBはパソコンなどのディスプレイを通して見るものに使用し、
CMYKは印刷物などの紙媒体に使用するカラーモードです。
なので、使い分ける必要があります。
使い分けにはRGBカラーをCMYKカラーに変更します。

その方法が
イメージ＞モード＞CMYKカラー
です。

この際に注意しなければならないのは、変更を適用するとRGBより色が
少し暗くなってしまいます。
そして一度CMYKにして暗くなったものをRGBに戻しても、
暗いままになってしまいます。

じゃあ途中で確認する場合はどうすれば・・・！？
というときのために、確認できるツールがあります。

それが
表示＞色の校正
ショートカットキーは
macなら⌘(command)＋Y
winならctrl＋Y
です。

これで、CMYKにした時の色を確認できます。

t-squareと固定メニューバーの透過

あけましておめでとうございます、色ピエロです。

昨日のカウントダウン時はT-squareのライブに行ってました！
t-squareライブに行くのが初めてだったのと、
ライブ自体に行くのが久しぶりだったので、
だいぶ興奮して聞いてきました！

知らない人はこちらを聞くとすぐわかるかと↓

【T-SQUARE TRUTH1991(PV)】

ちなみに私の好きなT-squareのアルバム
【spirits】

興味のある方は是非！聞いてください。



今日は
jQueryを使って固定した上部メニューバーを
スクロールに合わせて透明にするメモです

html

html5で記述してます。


css

[nav]
heightは適当な値にする。(ul liと合わせる)
position:fixed  top:0で上部固定
z-indexは重なり順を整数で指定するタグ。値が高い程上部表示される。

javascript(jQuery)

$(window).scrollTop()はスクロールの上の上部位置を取得する
cleartimeで色が透ける速度を指定します。大きい程ゆっくりに。
stop().animateにすることで途中でマウスを外すなどをすると、処理も中断される。

まだまだ勉強しなきゃ駄目ですね