「レスポンシブ」って単語を知らない人でも、ウィンドウをｳｨﾝｳｨﾝさせてコンテンツがついてくるのを見せながら「こういうのがやりたいんですよね～」とか言っちゃうアレです。
どんなデバイスで見てもいい感じになるようにしろって意味で使われますけど、iPhoneですら１サイズじゃなくなったこのご時世ですよ、面倒な割に気軽に頼まれがちじゃない？
スマホが出だした頃はPC/SPの2パターンあれば満たされたのが、今は…………🙄
何種類あるかわからない端末に毎年増える解像度、そんなカオスな表示環境にどうやって対応するのよ？？？？？？？？
とまぁ毎年苦しめられた結果、色々と知見が増えたのでこれまでに調べたり使ったりした「レスポンシブ」を実装するための方法をまとめました。
縦方向に１件ずつスクロール表示するやつ
See the Pen Pure CSS News Ticker (vertical) by Tenderfeel (@Tenderfeel) on CodePen.
表示エリアの高さ＝リスト要素１件の高さ＝keyframeのスクロール量 にする。
keyframesに入れてるvisibilityを消すと巻き戻る様子が表示される。
演出として巻き戻すところを敢えて見せるなら消してもよろしいと思う。
斜めに大きくストライプするような模様の背景をCSSだけで作るにあたって、
新単位使ってみたサンプル
CSS Programming Advent Calendar 2012の4日目
CSSエンジニアって肩書きもアリなんじゃないかと思っているTenderfeelです。
おいしいカレーの作り方を考えてたら無事にゲームができました。
どちらもステージは１つだけです。Chromeでしか動作確認してません。
clearFixでお馴染みなCSSの擬似セレクタ:beforeと:afterではcontentプロパティというものが使えるわけですが、
:beforeと:afterがIE7以下未対応ということもあって使ってない人は未だ多かろうと思います。
しかしながらレガシーなIEで表示されないから使わないというのは非常に勿体無いので、
今一度contentプロパティで挿入出来る内容についてまとめておこうと思います。
大きく分けると３つです。
MooToolsとCSSでFlashのような滑らかなマウスオーバーやカレント表示を実装するプラグイン。
元ネタはCreate a Sprited Navigation Menu Using CSS and MooToolsで、
よくやるコーディングに合わせて作り直しつつちょっとロジックを変えてクラス化した。
使用する際にはHTMLとCSSにいくつかルールがあります。
全部つなげて作る。順番はなんでもいいです。
デモのやつは上から、通常・マウスオーバー・クリック・カレント、になってます。
Download(psd file):
“SpriteNavigation Demo Base” をダウンロード nav.zip – 613 回のダウンロード – 41 KB
tinyMCEや大手サイトなどでよく使われてる、メニューボタンの画像を１枚にまとめてしまう手法。
ボックスなどにも応用出来るので覚えとくと便利じゃないかなと思います。
Webサイトはオブジェクトの集合体。
CSSもオブジェクト指向。
オブジェクトの集合なら、命名規則やデザインパターン作っておけば再利用はしやすくなる筈。
WebSiteでもOOP（Object Oriented Programming）的なこと出来る？
…となんとなく考えた事を適当に羅列してるメモです。まとまり皆無。思考ダダ漏れ注意。
Class
Method
Property
4BOXとか5BOXとかのレイアウトテンプレートは中身が空のクラス、つまりこんな状態です。
class Header {
}
恥を忍んでつらつら過程の画像だけ並べてみる。
画像は全部等倍で、ソースは貼って無いです。
架空じゃないから実際のサイトで見れると思いまする。
ラフデザイン。
２カラムでメインメニューは左？ど真ん中にタブのメニュー。
メニューが２箇所あるので、コンテンツをメニューで挟むことにする。
コンテンツの両脇にグラデーションのシャドウって定番だよなあ。
※デザインはデザイナーが作った
１行間隔でストライプとか、何行おきかで線が引いてあるTableをたまに見ますが、
いちいちclass追加してると面倒なのでjavacript使った方が早いよね。
っていうことでそういう感じのことをするスクリプトのサンプル。
左：１行間隔でセルの背景色変える
右：３行間隔で線を引く
どんなボックスもしっぽさえつけりゃフキダシに見えるとエロイ人はいいました。
何故CSSだけで作るのか？それは…そこにCSSがあるからだ！
まあ、崩れたりもするんですけど。
Safari3.1登場。爆速表示で非常に快適なブラウザです。
FireFoxがカスタムし過ぎか最近重いからこの速さはかなり新鮮。
FireFoxでチェックしながら作ってたら大抵Safariでも同じ表示になるんだけど、
今作ってるサイトでSafariがIE6系と同じ表示になる現象が発生したので
Safariにだけ適用するCSSハックを探してたらいいものがありました。
CSS Filter: Safari CSS Hack
Not that Safari 3.0 on Windows is a grade-A browser yet, and not that I have figured out any reasons to need to hack for this browser yet, but two good potential CSS filters include using :first-of-type and -webkit-min-device-pixel-ratio.
CSS, JavaScript and XHTML Explained » Targeting Safari 3 with CSS and JavaScript: Safari3 Hacks & Filters (2008-04-15)
要素を透過させる場合、アルファチャンネルPNGかCSSのフィルターどちらか使えば作ることが出来る。
アルファチャンネルPNGはPNG24とかの保存形式で、背景無し（またはマスクつき）の画像を保存すれば作成出来る。
Div等の背景を透過させる場合、アルファチャンネルPNGで80%くらいに透過させた画像を背景にすると、フィルターと変わらない効果を得られる。
透過フィルターを使った場合、中の要素まで透過してしまうという問題がある。
positionとか色々CSSを駆使すれば回避できないこともないが、アルファチャンネルPNGを使えば中の要素が透けることはない。
以下サンプル
解説は続きに。
“[CSS]透過PNGと透過フィルターの使い方” の続きを読む
クリエイターが身につけておくべき新・100の法則
CSSは下に書いたものが優先されるプログラム的な仕様のほかに、優先順位を決めるルールがある。
よく知られてるのは以下の基本ルール。
さらに、スタイルの個別性を決める数値というものが存在する。
テーブルを使わないお問い合わせフォームが流行ってると聞いて。
モノトーンでシンプルめ。左に項目、右に入力エリアが並ぶオーソドックスなやつ。
Checked(win):IE6,IE7,FireFox2,Opera9,Safari
Mac未確認。