何種類あるかわからない端末に毎年増える解像度、そんなカオスな表示環境にどうやって対応するのよ！？いざ作ろうとしたとき困りがちな「レスポンシブデザイン」について、これまでに調べたり使ったりした方法を総ざらいしました。フロントエンド向けですが、デザイナーが決めておくと良い事もまとめてあります。
タグ: CSS
[CSS] 縦スクロールのニュースティッカー
縦方向に１件ずつスクロール表示するやつ See the Pen Pure CSS News Ticker (vertical) by Tenderfeel (@Tenderfeel) on CodePen. 表示エリアの […]
[css] 斜めの背景を描く
斜めってる背景をCSSだけで作るサンプル。transformではなく三角形を作るアプローチにて。
4日目 : CSS Programming Advent Calendar 2012
CSS Programming Advent Calendar 2012の4日目 CSSエンジニアって肩書きもアリなんじゃないかと思っているTenderfeelです。 おいしいカレーの作り方を考えてたら無事にゲームができ […]
[CSS] contentプロパティで挿入できるコンテンツ
clearFixでお馴染みなCSSの擬似セレクタ:beforeと:afterではcontentプロパティというものが使えるわけですが、:beforeと:afterがIE7以下未対応ということもあって使ってない人は未だ多かろうと思います。
しかしながらレガシーなIEで表示されないから使わないというのは非常に勿体無いので、今一度contentプロパティで挿入出来る内容についてまとめておこうと思います。
[MooTools] SpriteNavigation Plugin
MooToolsとCSSでFlashのような滑らかなマウスオーバーやカレント表示を実装するプラグイン。 元ネタはCreate a Sprited Navigation Menu Using CSS and MooTool […]
[CSS]画像１枚でメニューボタンを作る
ボタンの画像いくつも作るのが面倒なら１枚にまとめてしまえばいいじゃない。今更感漂うメニューボタンを１枚絵で作るCSSについて。
[XHTML]WebサイトのOOP
Webサイトはオブジェクトの集合体。 CSSもオブジェクト指向。 オブジェクトの集合なら、命名規則やデザインパターン作っておけば再利用はしやすくなる筈。 WebSiteでもOOP（Object Oriented Prog […]
XHTMLコーディング過程を晒してみる（画像で）
恥を忍んでつらつら過程の画像だけ並べてみる。 画像は全部等倍で、ソースは貼って無いです。 架空じゃないから実際のサイトで見れると思いまする。 ラフデザイン。 ２カラムでメインメニューは左？ど真ん中にタブのメニュー。 メニ […]
[JS]Table内セルを自動的にストライプにする
１行間隔でストライプとか、何行おきかで線が引いてあるTableをたまに見ますが、 いちいちclass追加してると面倒なのでjavacript使った方が早いよね。 っていうことでそういう感じのことをするスクリプトのサンプル […]
[CSS]CSSだけで作る吹き出しのしっぽ
どんなボックスもしっぽさえつけりゃフキダシに見えるとエロイ人はいいました。bubbleとかtooltipとかでお馴染みの吹き出しを作るとき、角丸ボックスにつける”しっぽ”をあえて画像を使わずに作る方法について。
[CSS]Safari3.X用CSSハック
Safari3.1が出たのでSafariにだけ適用するCSSハックを2種類紹介。ついでにメディアタイプのクエリについても。
[CSS]透過PNGと透過フィルターの使い方
CSSの透過プロパティ使うと中のものまでスケスケになる件。さらにIEはアルファチャンネルPNGがデフォで使えない問題も。透過に関する事を色々解説。
[CSS]スタイル優先順位の個別性と計算方法
クリエイターが身につけておくべき新・100の法則という本から紹介。 CSSは下に書いたものが優先されるプログラム的な仕様のほかに、優先順位を決めるルールがある。 よく知られてるのは以下の基本ルール。 CSS作成者による優 […]
Tableless Contact Form sample01
テーブルを使わないお問い合わせフォームが流行ってると聞いて。 モノトーンでシンプルめ。左に項目、右に入力エリアが並ぶオーソドックスなやつ。 Checked(win):IE6,IE7,FireFox2,Opera9,Saf […]