2014年2月16日日曜日

デザインのコピー

最近は既存webデザインのコピーばかり行っています。
模写は一番早いと色々な方が言っているので。

でもここでマニュアル人間の私は
Photoshopでデザインコピー？コーディングでコピー？？どっちが有効的だ？？
とか疑問が浮かんでしまうわけで・・・
悩んでも仕方がないんで、交互にやってます。

でも確かにいくつかコピーをして、掴むものは見えてきてます。
この要素はたいていこの部分に置かれてる、といったような
ざっくりとしたものですけど。

2014年2月6日木曜日

コンテンツに被らない固定フッター

footerくっつくんじゃねぇ！！って思った方はいるはず。

特に1ページの要素が少ないとき。

どうしても上詰めされちゃって、フッターが上がってくる。

そんな時は固定footer！！

といってもこれも色々やりかたがあるみたいで、

どれが一番良いのかわからない・・・

わたしがよく使うのはこれ

【html】

【css】

backgroundは色分けのために入れているだけなので、なくても大丈夫。
必須なのが
・htmlのheight:100%;
・bodyのposition:relative、min-height:100%
これで高さを常に画面いっぱいにします。

・bodyのposition:relative、footerのposition:absolute bottom:0px
これで常に画面下にfooterを表示させます。

・#wrapのpadding-bottomの値とfooterのheightは同じ値にして、
　ください。画面が狭くてもfooterが被らないようにします。

これでわたしはfooterを固定して、さらに上の要素に被らないようにしてます。

上記を実行するとfooterは固定されつつ、

画面が狭くなっても、コンテンツに被りません。

2014年2月1日土曜日

フォント

文字って難しい・・・色ピエロです

今日はちょっと文字(フォント)について調べました。
まず私がひっかかったのはプロポーショナルフォント。
もちろんSIRANAKATTA☆。

プロポーショナルフォントは文字幅が異なるフォントのことです。
可変幅フォントとも言われてます。
英語フォントだとHelveticaやTimesなど。
Helveticaはサンセリフ書体の中で代表的なも。Arialに似ています。
日本語だとヒラギノ、メイリオ、MSPゴシック。
MSPゴシックのPはプロポーショナルのPです。

プロポーショナルフォントの逆が固定幅フォント。
文字の幅がみんな同じになってます。
MSゴシックやMS明朝がそれにあたります。

次にゴシック体と明朝体、セリフ体とサンセリフ体。
簡単に言ってしまうと、
ゴシック体とサンセリフ体は文字の太さが同じものです。
明朝体とセリフ体は文字にウロコやセリフがなく、縦棒と横棒の太さが異なります。
Webサイトではゴシック体、サンセリフ体が文章でよく使われます。

web上で使われる文章フォント(font-family)では
'Lucida Grande','ヒラギノ角ゴシックProN　W3','メイリオ',san-serif
が無難っぽいです。
Lucida Grandeは私の調べ不足でまだあまり良くし知らないのですが、
英数字の最適化に使われてるとか・・・？書いてある記事がありました。
ヒラギノ角ゴシックProN W３については色々調べたのですが、
Proは略字だった特定の文字が、ProNにすると正式な字で表示してくれるよう
なるみたいです。
W3は太さ。weightのWかな？W6、W8など大きくなる程太字になります。

2014年1月22日水曜日

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とか色々な解決方法があるみたいです。
さっき知りました・・・どれが一般的なんですかね？？

2014年1月16日木曜日

適音適所

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

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

【waltz For Debby】

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

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

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

パチッ(電気OFF)

〜♫

〜♫

〜♫

超良い！！(*Σ*)

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

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

2014年1月14日火曜日

覚え途中の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などの疑似クラスなどのスイッチとなるものが必要

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

2014年1月12日日曜日

ベンダープレフィックス

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

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

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

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

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

-moz- : Firefox

-webkit- : Google Chrome , safari

-o- : Opera

-ms- : Internet Exprorer

となってます。

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

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

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

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

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

W3Cのサイトのリンク

2014年1月8日水曜日

よく使う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

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

2014年1月6日月曜日

横スクロールのサイトのプラグイン『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の数値だけ変更してあるのみです。
私自身まだ使いこなせてないので、更に勉強しなくては・・・

2014年1月3日金曜日

色の校正とモード

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

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

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

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

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

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

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

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