CSS – WebTecNote

レスポンシブWebデザインを実装するためのTips

2019/08/062019/10/31 Tenderfeel

何種類あるかわからない端末に毎年増える解像度、そんなカオスな表示環境にどうやって対応するのよ！？いざ作ろうとしたとき困りがちな「レスポンシブデザイン」について、これまでに調べたり使ったりした方法を総ざらいしました。フロントエンド向けですが、デザイナーが決めておくと良い事もまとめてあります。

[CSS] 縦スクロールのニュースティッカー

2018/08/222018/08/22 Tenderfeel

縦方向に１件ずつスクロール表示するやつ See the Pen Pure CSS News Ticker (vertical) by Tenderfeel (@Tenderfeel) on CodePen. 表示エリアの … “[CSS] 縦スクロールのニュースティッカー”の続きを読む

[css] 斜めの背景を描く

2017/06/30 Tenderfeel

斜めってる背景をCSSだけで作るサンプル。transformではなく三角形を作るアプローチにて。

4日目 : CSS Programming Advent Calendar 2012

2012/12/042012/12/04

CSS Programming Advent Calendar 2012の4日目 CSSエンジニアって肩書きもアリなんじゃないかと思っているTenderfeelです。おいしいカレーの作り方を考えてたら無事にゲームができ … “4日目 : CSS Programming Advent Calendar 2012″の続きを読む

clearFixでお馴染みなCSSの擬似セレクタ:beforeと:afterではcontentプロパティというものが使えるわけですが、:beforeと:afterがIE7以下未対応ということもあって使ってない人は未だ多かろうと思います。
しかしながらレガシーなIEで表示されないから使わないというのは非常に勿体無いので、今一度contentプロパティで挿入出来る内容についてまとめておこうと思います。

[MooTools] SpriteNavigation Plugin

2010/01/042019/06/27 Tenderfeel

MooToolsとCSSでFlashのような滑らかなマウスオーバーやカレント表示を実装するプラグイン。元ネタはCreate a Sprited Navigation Menu Using CSS and MooTool … “[MooTools] SpriteNavigation Plugin”の続きを読む

[CSS]画像１枚でメニューボタンを作る

2009/02/192009/02/19

ボタンの画像いくつも作るのが面倒なら１枚にまとめてしまえばいいじゃない。今更感漂うメニューボタンを１枚絵で作るCSSについて。

[XHTML]WebサイトのOOP

2008/11/182008/11/19

Webサイトはオブジェクトの集合体。 CSSもオブジェクト指向。オブジェクトの集合なら、命名規則やデザインパターン作っておけば再利用はしやすくなる筈。 WebSiteでもOOP（Object Oriented Prog … “[XHTML]WebサイトのOOP”の続きを読む

XHTMLコーディング過程を晒してみる（画像で）

2008/06/212009/06/22

恥を忍んでつらつら過程の画像だけ並べてみる。画像は全部等倍で、ソースは貼って無いです。架空じゃないから実際のサイトで見れると思いまする。ラフデザイン。２カラムでメインメニューは左？ど真ん中にタブのメニュー。メニ … “XHTMLコーディング過程を晒してみる（画像で）”の続きを読む

[JS]Table内セルを自動的にストライプにする

2008/06/042008/06/05

１行間隔でストライプとか、何行おきかで線が引いてあるTableをたまに見ますが、いちいちclass追加してると面倒なのでjavacript使った方が早いよね。っていうことでそういう感じのことをするスクリプトのサンプル … “[JS]Table内セルを自動的にストライプにする”の続きを読む

[CSS]CSSだけで作る吹き出しのしっぽ

2008/05/282008/12/02

どんなボックスもしっぽさえつけりゃフキダシに見えるとエロイ人はいいました。bubbleとかtooltipとかでお馴染みの吹き出しを作るとき、角丸ボックスにつける”しっぽ”をあえて画像を使わずに作る方法について。

[CSS]Safari3.X用CSSハック

2008/04/152008/04/16

Safari3.1が出たのでSafariにだけ適用するCSSハックを2種類紹介。ついでにメディアタイプのクエリについても。

[CSS]透過PNGと透過フィルターの使い方

2008/04/122009/04/01

CSSの透過プロパティ使うと中のものまでスケスケになる件。さらにIEはアルファチャンネルPNGがデフォで使えない問題も。透過に関する事を色々解説。

[CSS]スタイル優先順位の個別性と計算方法

2008/04/062009/05/01

クリエイターが身につけておくべき新・100の法則という本から紹介。 CSSは下に書いたものが優先されるプログラム的な仕様のほかに、優先順位を決めるルールがある。よく知られてるのは以下の基本ルール。 CSS作成者による優 … “[CSS]スタイル優先順位の個別性と計算方法”の続きを読む

Tableless Contact Form sample01

2008/03/042008/05/12

テーブルを使わないお問い合わせフォームが流行ってると聞いて。モノトーンでシンプルめ。左に項目、右に入力エリアが並ぶオーソドックスなやつ。 Checked(win):IE6,IE7,FireFox2,Opera9,Saf … “Tableless Contact Form sample01″の続きを読む

タグ: CSS