Webタイポグラフィまとめ - Archiva
Make a note of it: Web tech, montaineering, and so on. Note: この記事は、3年以上前に書かれています。Webの進化は速い！情報の正確性は自己責任で判断してください。 フォント指定や行間、約物といった、文字周りのノウハウです。デザインというより技術的なまとめ。SWFObjectとかsIFRといったFlashネタを除けば、Webの文字は全部CSSでできるんだから... コーダこそタイポグラフィを意識すべし。看板みて書体言い当てるとか変態的な域まで達せずとも、原則だけ覚えとけばプロトタイプが様になるんだし。 オールドスタイル数字 アンパサンド（“＆”） スモールキャップ ハイフンとダーシ 各種スペース 合字 約物 約物はぶら下げる :beforeと:after 見出しのサイズ 初期フォントサイズ 行間の調整 余白の調節 各国の日付表記
firefox3.0の背景センタリング | Webデザイン フリーフォント Prismtone
firefox3.0になって、 サイトの背景がブレた感じになってるなぁと思い、検証してみたところ、 背景センタリングが、0.5px単位まで合わせてくるようになってました。 背景を敷くボックスが、 仮に横100pxの場合、 その横100px以上で、奇数幅の背景画像を指定した場合... → 背景画像が横にぼけた感じになります。 ブラウザが本気で画像を中央に合わせに来てる感じです。 縦方向についても考え方は同じです。 また、ボックスの大きさよりも小さい背景画像の場合は、 数字が割り切れなくても、 従来通り、1pxどちらかに寄る形で処理されているようです。 ※ prismtoneのヘッダの背景の端の方は、 bodyに背景を指定しているので、 windowサイズによっては、ぼけるようになってしまいました。 背景の1pxのずれは許容できるように作ったのに、 ここでぼけが発生するのはちょっと、困ったなぁ
ultra blue:Firefox ・バグの再現・ textarea 内でカーソルの点滅が消える問題
Firefox 2.0.0.7 デモページ Windows XP sp2 、 Fedora 7 で確認。 input 要素でも同じ条件下で発生。マークアップとスタイルシートのみ。JavaScript は無関係。背景の有無でカーソルが出たり消えたりするようにした。 涙目 これを知らないで設計して最後の最後で気づくと大変なことになるから、みんなも気をつけようね！ position:fixed; な背景要素を先に作って、（子供ではなく）その兄弟に absolute を当ててから、背景に被るようにテキストエリアを作った場合に起きる、たとえ z-index で上下を指定しても。言葉で説明するより、これはソース見て試したほうが速いと思う。GUI を作るなら十分ありえる状況だよ、うん。 既存のノードを孤児にしてもう一度つり下げてみたり、別な親からクローンを作ってみたり、 value 属性をいじってみたり
CSS の「値」とは何か - IT戦記
この前 以下のようなエントリを書きました CSS の名前の整理 - IT戦記 今回は CSS における この「value（値）」という言葉の意味、そして曖昧さについて書きたいと思います。 6 つの値 CSS において「値」は曖昧な言葉です。 なので、「値」という言葉を使って CSS の説明をするのは非常に効率が悪かったりします。 たとえば、「ここの値って、 hogehoge の意味の値？」「いやいや、ここの fugafuga の意味の値が piyopiyo なんだよ」というように、まったく無駄な会話が繰り広げられるわけです。 ですので、今日からはちゃんと CSS の「値」をちゃんと説明できるように、「値」に以下の 5 つの名前を付けましょう。 Declared values Cascaded values Specified values Computed values Used valu
【特集】正式版完全対応! Internet Explorer 7 CSS攻略法 (8) 03-04 修正/未修正バグの問題を回避する(2) | クリエイティブ | マイコミジャーナル
置換要素を含む行の行間が変わる問題を修正 IE6以下では、画像などの置換要素を含む行で、line-heightプロパティの値が無効となるという問題が発生する(参照リンク: beta2 03-03)。そのため、次のようなケースでは行間が変わるという問題が発生していた。IE7ではこの問題は修正されたが、下位互換を考慮した場合、そのままではブラウザごとに表示の違いが発生してしまう。 IE6での表示 IE7での表示 Firefoxでの表示 サンプルソース: 3-3-6 sample03-03-06.html p {line-height: 60px} <p>文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章<img src="image.pn
CSS-SSV // ShaunInman.com
The Last Rocket An 8-bit game for iPhone, iPad and iPod touch Minted of course. In partnership with UpdateCheck out CSS Server-side Constants for an improved, “more-better” stab at the same idea. A few of the comments on Andy Budd’s most recent article got me thinking again about variables in CSS. Remember Jeff Croft’s first stab at the idea? His approach didn’t sit well with me for one reason: it
段落(pタグ)とアンカー(aタグ)さえあればどこにでも配置できるさ
免責事項：本サイトに含まれる情報は、一般的な情報提供のみを目的としています。情報はスペシャルベストによって提供され、当社は情報を最新かつ正確に保つよう努力しますが、いかなる目的においても、ウェブサイトまたはウェブサイトに含まれる情報、製品、サービス、関連グラフィックスに関する完全性、正確性、信頼性、適合性、利用可能性について、明示または黙示を問わずいかなる表明または保証も行いません。従って、これらの情報に依拠することは、あくまでもお客様ご自身の責任において行われるものとします。 当社は、当ウェブサイトのご利用に起因するいかなる損害についても責任を負いません。 本ウェブサイトから、スペシャルベストの管理下にない他のウェブサイトへリンクすることができます。当社は、それらのサイトの性質、内容および利用可能性を管理することはできません。リンクは必ずしも推奨するものではありませんし、リンク先で述べら
DIVを垂直方向に中央寄せするCSSサンプル:phpspot開発日誌
Blue Box Demo: Vertical Centering with a Shiv Div DIVを垂直方向に中央寄せするCSSサンプル。 次のように、DIV要素をブラウザの縦方向に配置できます。 CSSは非常にシンプルで、まず、html と body 要素に height:100% プロパティを設定します。 次に、body内にdiv要素を配置し、そのdiv要素に対し、height:50% かつ、margin-top:-50px のようにプロパティをあて、 中央寄せしたい要素(上図中、青い部分)の半分のサイズ分のマージンをマイナスします。 最後に中央寄せしたいdiv要素( height:100px ) を配置することで、青い部分は中央によります。 垂直方向に、100px のdiv要素が配置される感じです。 <html> <head> <style type="text/css">
ウノウラボ Unoh Labs: デザインセンスの無い人がwebサイトを作成する際に参考にしているサイト
こんにちは satoです。 いくら面白くて、高機能なwebサイトを作成しても、デザインがダサいとサイトの魅力や開発意欲は半減です。 僕もまったくデザインセンスが全く無いのですが、新しい物を作成する際には以下のサイトを参考にしています。 (1)Color Scheme Generator 2 デザインの大まかな配色等を決めるのに使用することがあります。 真似するだけで、Coolなサイトに見えるような気がします。 (2)Color Palette Generator ロゴ等の画像を指定すると、その画像に合ったカラースキームを 教えてくれます。 (3)Web 2.0 Colour Palette 有名なサイトのカラースキームの一覧があります。 (4)pmob.co.uk CSSや画面分割などのさまざまなサンプルや解説があります。 (5)logopond さまざまなロゴのサンプルがありま
Lucky bag::blog: 使用中のブラウザの CSS セレクタ対応状況をチェックできる CSS Selectors testsuite
タイトル長っ！ まぁ、そのまんまなのだけれども、今使用しているブラウザが、CSSのセレクタ（CSS3も含む）にどれくらい対応しているかチェックできる CSS Selectors testsuite - CSS3 . info が便利っぽい。 Start testing... をクリックでチェックが開始され、各セレクタの結果が緑色であれば対応、赤色であれば未対応ってな寸法。ただ、ひとつのセレクタに複数のテストを行うんで、そのうちのひとつでも引っかかると failed になっちゃう。 上記画面は、IE7 RC1 でのチェック結果だけど、対応しているはずの属性セレクタで failed となる。セレクタ名の部分をクリックすると、どういったテストが行われて、結果がどうなっているのかソースを確認できるんだけど、どうやら属性が空の場合や属性の記述が不完全の場に、IE7 はうまくパースできないみたい。ちな
IE 6.0 - memo.xight.org - Clean CSS - CSSの最適化，ファイルサイズ削減ツール
Summary テキストフィールドにCSSを入力するか，CSSが置いてあるURLを指定して，"Process CSS" をクリック． 使用前 (196byte) #example { color: rgb(0,0,0); background-color: #ffffff; font-weight: bold; margin-top: 5px; margin-bottom: 5px; margin-left: 5px; margin-right: 5px; padding: 10px 5px 10px 5px; } 使用後 (Compression: Low) #example { color:#000; background-color:#fff; font-weight:700; margin:5px; padding:10px 5px; } 入力 196 byte 出力 99 byt
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Spiffy Box - 簡単に角丸画像を作ってくれる
ADP: floatレイアウトでつまづかないためのTips
社å´å£«è©¦é¨å¡¾ 社å´å£«è©¦é¨å¦æ ¡ 社å´å£«è©¦é¨å¯¾ç 社å´å£«è©¦é¨åå¼·æ³ ç¤¾å´å£«è©¦é¨åèæ¸ at usrb.in
hereticanthem co.,ltd. » CSSやJavaScriptを使ったオシャレな技やサンプルが解説＆配布しているサイトのまとめ