デザインのコピー

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

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

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

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

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は固定されつつ、

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

フォント

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

今日はちょっと文字(フォント)について調べました。
まず私がひっかかったのはプロポーショナルフォント。
もちろん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など大きくなる程太字になります。