blockquoteタグで囲んだ引用部分をスタイルシートで見やすく装飾します。
画像は使いません。

引用サンプル

スポンサードリンク

縦横中心にボックスを配置するCSS。どこかで使えそうなので、メモ。

Some Mini Sass Mixins I Like by Chris Coyier on CodePen
http://codepen.io/chriscoyier/blog/some-mini-sass-mixins-i-like

スポンサードリンク

Google Fontsから、ちょっと使ってみようかなと思ったWebフォントのメモ。

sans-serif

1.Montserrat

字幅広め 丸っこい 軽い
本文には太すぎると思う

2.Source Sans Pro (Normal 400)

軽い winでも比較的きれい
他にもウェイトがたくさんある

3.Lato (Normal 400)

オーソドックスで使いやすい
winでも比較的きれい 少し重い
Source Sans Proよりやわらかい印象
他にもウェイトがたくさんある

4.Syncopate (Normal 400)

幅広 個性的だけれどシンプル Boldもある
見出しやロゴっぽく使うのに良さそう


serif

5.Rokkitt

軽い winでも比較的きれい
カチカチした 新聞とか

6.Merriweather

軽い シンプルで使いやすそう
スタイルがたくさんある
Merriweather sansもある

7.Sorts Mill Goudy

字幅広め 軽い 
Rokkittよりエレガントな印象  winでも比較的きれい


cursive

8.Homemade Apple

鉛筆で書いたような質感がある手書き筆記体
フォントサイズが大きいとデコボコ感があまりきれいじゃない

9.Calligraffitti

手書き筆記体
縦に長く流れるような感じ

10.Zeyada

手書き筆記体
くちゃっと勢いがある感じ

11.La Belle Aurore

手書き筆記体
クラシックな手紙のような

12.Shadows Into Light

手書き
素早くカツカツ書いた感じ

13.Amatic SC

手書き 細長い 少し力をいれてまっすぐな線で書いた感じ

14.Patrick Hand SC

手書き 太めのサインペンで書いたような子どもっぽいかわいさ

15.Special Elite

タイプライターやスタンプみたいな感じ
少し重い

16.Poiret One

細くて丸い 幅広

<link href=’http://fonts.googleapis.com/css?family=Poiret+One’ rel=’stylesheet’ type=’text/css’>

17.Kranky

手書きでレタリングしたみたい

 

スポンサードリンク

写真のサムネイルを並べたサイトで、hoverの時にサムネイルを透過させたいというご要望。
CSS3のopacityはIE8は対応していないので、filterを使って対応する。

スポンサードリンク

線を表示。ヘッダーは薄いグレー。

年月日 タイトル 分類1 分類2 分類3
2014年4月1日 あいうえおかきくけこさしすせそあいうえおかきくけこさしすせそあいうえおかきくけこさしすせそあいうえおかきくけこさしすせそあいうえおかきくけこさしすせそ AAAAAAAAAAAAAAAAAAAAAAAAAAA BBBBBBBBB CCCCCCCC

上下を破線で区切る

2014年4月1日 あいうえおかきくけこさしすせそあいうえおかきくけこさしすせそあいうえおかきくけこさしすせそあいうえおかきくけこさしすせそあいうえおかきくけこさしすせそ
2014年4月1日 あいうえおかきくけこさしすせそあいうえおかきくけこさしすせそあいうえおかきくけこさしすせそあいうえおかきくけこさしすせそあいうえおかきくけこさしすせそ

スポンサードリンク

フォームを最低限シンプルに入力しやすくします。

実際にはラジオボタンとチェックボックスはjavascriptで整えることのほうが多いです。

スポンサードリンク

定義リストの使いどころってちょっと迷いますが、横並びにすること、多いです。あと、点線で区切ることも多いです。

スポンサードリンク

ブラウザごとのスタイルをリセットするCSSのリンクをメモ。
クライアントは、自分のPCでの見たものと同じものを、ユーザーすべてが見ていると思っていらっしゃるので、仕様固めの前に、ブラウザやデバイスごとの見た目の違いと、すべてを同じ見た目にすることは事実上不可能だということを、きちんと説明するのが大切です。
また、DTPしかやったことがないデザイナーさんと組む時もこの辺の説明は必須。
1ピクセルへのこだわりも良いけれど、こだわるべき部分とこだわっても意味がない部分の切り分けを説明しておく必要がある。
(それにしても、いまだにmm単位かつCMYKのイラレデータを送ってくるデザイナーさんが少なからずいるのに驚く)

 Normalize.css: Make browsers render all elements more consistently.
http://necolas.github.io/normalize.css/
リセットCSSとは異なり、ブラウザのデフォルトスタイルでも使えるものは残しながら、クロスブラウザに対応するCSS。
最近はこれ使うのが多いかな。

HTML5 Doctor CSS Reset and all others on CSSReset.com
http://www.cssreset.com/scripts/html5-doctor-css-reset-stylesheet/
html5対応のリセットCSS

CSS Reset – YUI Library
http://yuilibrary.com/yui/docs/cssreset/
YUI Libraryに含まれているリセットCSS。

CSS Reset | 2013’s most common CSS Resets to copy/paste, with documentation / tutorials
http://www.cssreset.com/

スポンサードリンク

コンテンツが少ないページの時に、フッターの背景色がブラウザの画面下部まで続くようにする。

sample

スポンサードリンク