最近は既存webデザインのコピーばかり行っています。
模写は一番早いと色々な方が言っているので。
でもここでマニュアル人間の私は
Photoshopでデザインコピー？コーディングでコピー？？どっちが有効的だ？？
とか疑問が浮かんでしまうわけで・・・
悩んでも仕方がないんで、交互にやってます。
でも確かにいくつかコピーをして、掴むものは見えてきてます。
この要素はたいていこの部分に置かれてる、といったような
ざっくりとしたものですけど。
2014年2月6日木曜日
コンテンツに被らない固定フッター
footerくっつくんじゃねぇ！！って思った方はいるはず。
特に1ページの要素が少ないとき。
どうしても上詰めされちゃって、フッターが上がってくる。
そんな時は固定footer！！
といってもこれも色々やりかたがあるみたいで、
どれが一番良いのかわからない・・・
わたしがよく使うのはこれ
【html】
【css】
【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が被らないようにします。
必須なのが
・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など大きくなる程太字になります。
今日はちょっと文字(フォント)について調べました。
まず私がひっかかったのはプロポーショナルフォント。
もちろん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とか色々な解決方法があるみたいです。
さっき知りました・・・どれが一般的なんですかね？？
もう今年になってから悲しいことばっかり・・・
でも元気なんで頑張ります。
話変わってみんな大好き、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なんか聞いてもよくわからないですよね。
いや、今もまだ全然わかってないですけど・・・
あんまり興味のなかったジャンルの音楽を聴く時は、
シチュエーションを変えると案外心地よいかもしれないですよ？
そんな話でした。
タイトルにのっけた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などの疑似クラスなどのスイッチとなるものが必要
これらがパパッと使えるようになったらかっこいいなー
まだ使いこなせてはいないですけど・・・
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のサイトで草案か勧告候補か確認できます。
私の苦手な英語だけど・・・(;_;
登録:
コメント (Atom)