おススメ購読RSS
CSS Nite in Nagoya 2007、CSS Nite in Osaka、CSS Nite Vol.18でアンケートにご協力いただいた中で「参照しているサイト、コミュニティ、ブログ、メルマガなどありましたら教えてください」という設問に対する回答をシェアします。 順不同ですが、mixiのコミュニティへの回答が多いようでした。また、「その度に検索している」「RSSで購読している」なども多かったです。 「小粋空間」（MovableTypeに関して） http://www.koikikukan.com/ DreamweaverでWeb標準(XHTMLとCSSでサイト構築) http://blog.mag2.com/m/log/0000169311/ 3ping.org http://3ping.org/ webデザイナーのナナメガキ http://loconet.web2.jp/
プリント時にも役立っちゃうcontentプロパティさん
今まで、あんまりcontentプロパティを調べてなかったから、その素晴らしさがイマイチわかってなくて、なんか特定のテキストを挿入したり、パンくずとか作るのに便利だったりclearfixで使ってたり、なんやら程度で、Internet Explorer7で対応しなかったのもそんなに気にしてなかったのが正直なところだった今日この頃、皆様GWはいかがお過ごしでしたか？ ボクは仕事万歳！でした。 そのお陰もあり、嫌になるほどCSS関連のことを色々調べたんです。えぇ。 そんな中の1つで「あーそっか！そうだよね」と思ったのが、contentプロパティの使い方。 例えば以下のようなリンクがあったとして、 デジパ株式会社 これをプリントしたら、そりゃ、デジパ株式会社って出るよね。コレがプリント時だけURL出たら素敵。 その素敵を叶えてくれるのが、contentプロパティだった。 取りあえず、 <link r
Data Tables and Cascading Style Sheets Gallery
Current style: TagBox by TagBox Table design based on the fresh TagBox style.
[CSS]スタイルの初期化(前編) -全称セレクタとhtml, body編 | コリス
2007年春現在よく使用している、ブラウザがもつスタイルを初期化するスタイルシート「全称セレクタとhtml, body編」です。 CSSのスタイルの初期化が必要な理由 スタイルの初期化 -全称セレクタ（*） スタイルの初期化 -html, body スタイルの初期化 -全称セレクタとhtml, body のメモ スタイルの初期化(後編) -body内の個別タグ編 CSSのスタイルの初期化が必要な理由 HTMLの各タグは、ブラウザごとに初期スタイルが異なり、スタイルシートでレイアウトを行う際、ブラウザごとに異なる指定を行わないと期待通りのレイアウトを再現しない場合があります。 そのため、同一のスタイル指定で意図したレイアウトが再現できるように、このブラウザごとのスタイルの差異を無くすスタイルシートの設定を行います。 対象としているブラウザは、最近の僕の受注案件の多くは下記のブラウザが対象にな
![[CSS]スタイルの初期化(前編) -全称セレクタとhtml, body編 | コリス](https://cdn-ak-scissors.b.st-hatena.com/image/square/bc54860ba06deaa45382cf2bddc929515def0354/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fshared%2Flogo-2014050501-en.png)
TRANS - * { magin: 0;}だけでは物足りない！zoom: 1;を使おうよ！
IE6からIE7が今後本格的にマーケットシェアを取って行くことを考えると、IE7の仕様やバグを考えた上でのマークアップが欠かせないとは思います。でも、僕らはまだIE7がどんなものかが分からない。そのため、とりあえず* { zoom: 1;}を指定しておくことが安全策なのかもしれません。 IE7のZoom機能で、見事にこける。 先日、うちの本体のサイトを更新し終わった際に、スタッフから「あれ、しゃらくのサイトずれてるよ」と指摘されました。更新箇所が多く、CSSも多少いじくったので、どこか消してしまったのかもしれません。そこで、自分のブラウザで確認するも、どうも問題が再現できない。そのスタッフのブラウザを見ると、こんな感じになっていました。 僕のFirefoxで見てみても問題ないし、そのスタッフが使っているIE7でも問題なし。「うーん」と悩んでみるものの、意外と答えは簡単なところにありました。
tlbox - Web Design Tools
Hundreds of Web Design and Programming ToolsThis site contains an application to help web site and graphic designers, interior decorators etc. pick color schemes - combinations of colors that are pleasing to the eye. The tool is based on a color wheel, and it generates monochromatic, contrast, triad, tetrad, and analogic color schemes.
CSS Float Theory: Things You Should Know — Smashing Magazine
The concept of floats is probably one of the most unintuitive concepts in CSS. Floats are often misunderstood and blamed for floating all the context around it, causing readability and usability problems. However, the reason for these problems isn’t the theory itself, but the way the theory is interpreted - by developers and browsers. Still, if you take a closer look at the float theory, you’ll fi
IEでのCSSのバグを回避するhasLayout | コリス
IE7で拡大・縮小時にレイアウトが重なってしまったり、IEでフロートした要素がはみ出てしまったりとIE独自のCSSのバグがいくつかあります。 これは、IEのhasLayoutが原因のひとつとなっているので、それを回避する方法を考察します。 hasLayoutとは IEでのCSSのバグを回避するhasLayoutの値 CSSのバグに効果のあるhasLayoutの指定方法 hasLayoutの参考ページ hasLayoutとは hasLayoutとは、オブジェクトがレイアウトを持っているかどうかを示すものです。 hasLayoutの値はread-onlyのため読み込みのみ可能で、falseとtrueがあります。 hasLayoutの値（read-only） false デフォルト値。 オブジェクトがレイアウトを持っていない。 true オブジェクトがレイアウトを持っている。 IEでのCSSのバ
[CSS]日本語と英語で異なる最適なフォントサイズの指定方法
日本語・英語のサイト制作に使用しているCSSのフォントサイズの指定で、2007年用デフォルトとしているものです。 %指定を採用している理由の１つは、font-size、line-heightとともに組み合わせにより微妙に異なり、その組み合わせの最適な値を採用するためです。 日本語サイトのフォントサイズの指定 英語サイトのフォントサイズの指定 line-heightの指定 日本語サイトのフォントサイズの指定 body{ font-size:16px; /**/ font-size:100%; /**/ } 上記を基準サイズとして、下記を指定。 標準： font-size:82%; 大きめ： font-size:94%; 小さめ： font-size:69%; 英語サイトのフォントサイズの指定 body{ font-size:13px;*font-size:small;*font:x-smal
Piece of a Puzzle - Weblog - Pure CSS Tabs
Posted at 2005-09-06T14:24+09:00 in Web Design | | | 第一回、「CSSでココまで出来る!!」 タブ型メニュー編。 all about blosxomのナビゲーションメニュー周りのCSSを眺めてたらこんな企画もいいだろう、と。第二回以降があるかどうかは知りませんがね。 とりあえず3つのタイプのタブ型メニューを作ってみました。「作ってみました」と言ってもaabをはじめ、色んなサイトで紹介されてるモノを集めてみただけとかいう。 1つ目はaabと同じ仕組み。ポイントはhail2u.net - Weblog - all about blosxomのデザインにもあるとおり。 2つ目は a:hover { position: relative; top: -.25em; }とpositionプロパティとtopプロパティを用いて上方向にニョキっとさせて
画像の使用を極力控えてかっこいいCSSデザインをやってみよう大会
この文書について この文書は、画像の使用を控え、スペース、ボーダー、配色などを駆使し、どれだけ美しいCSSのデザインが作れるか、皆で挑戦しよう!という試みです。 CSSといくつかの画像を用いてレイアウトを行っています。 まとめサイトが無い気がするよ 世間には、イケてるCSSデザインを集めた、CSSショーケース、CSSギャラリーと呼ばれるサイトがいくつか存在します。 ところが、そういったサイトの多くは、画像を沢山用いたグラフィカルでリッチなデザインのCSSデザインばかりです。私は、そんなギャラリーを見るのが趣味だったのですが、次第に飽きてきてしまいました。そして、シンプルなデザインを好むようになりました。 誤解をして欲しくないのですが、CSSのショーケースやギャラリーに掲載されているサイトのデザインはとても優れています。単に、私が求めているものとは、違ったというだけのお話です。 そこで私は、
画像の使用を極力控えてかっこいいCSSデザインをやってみよう大会
この文書について この文書は、画像の使用を控え、スペース、ボーダー、配色などを駆使し、どれだけ美しいCSSのデザインが作れるか、皆で挑戦しよう!という試みです。 CSSといくつかの画像を用いてレイアウトを行っています。 まとめサイトが無い気がするよ 世間には、イケてるCSSデザインを集めた、CSSショーケース、CSSギャラリーと呼ばれるサイトがいくつか存在します。 ところが、そういったサイトの多くは、画像を沢山用いたグラフィカルでリッチなデザインのCSSデザインばかりです。私は、そんなギャラリーを見るのが趣味だったのですが、次第に飽きてきてしまいました。そして、シンプルなデザインを好むようになりました。 誤解をして欲しくないのですが、CSSのショーケースやギャラリーに掲載されているサイトのデザインはとても優れています。単に、私が求めているものとは、違ったというだけのお話です。 そこで私は、
画像の使用を極力控えてかっこいいCSSデザインをやってみよう大会
この文書について この文書は、画像の使用を控え、スペース、ボーダー、配色などを駆使し、どれだけ美しいCSSのデザインが作れるか、皆で挑戦しよう!という試みです。 CSSといくつかの画像を用いてレイアウトを行っています。 まとめサイトが無い気がするよ 世間には、イケてるCSSデザインを集めた、CSSショーケース、CSSギャラリーと呼ばれるサイトがいくつか存在します。 ところが、そういったサイトの多くは、画像を沢山用いたグラフィカルでリッチなデザインのCSSデザインばかりです。私は、そんなギャラリーを見るのが趣味だったのですが、次第に飽きてきてしまいました。そして、シンプルなデザインを好むようになりました。 誤解をして欲しくないのですが、CSSのショーケースやギャラリーに掲載されているサイトのデザインはとても優れています。単に、私が求めているものとは、違ったというだけのお話です。 そこで私は、
base.cssメモ（初期化と基本設定） - Archiva
Make a note of it: Web tech, montaineering, and so on. Note: この記事は、3年以上前に書かれています。Webの進化は速い！情報の正確性は自己責任で判断してください。 CSSの初めでUA固有の表示設定を解除するリセットCSSと、フォントサイズ指定、そしてタグ自体の基本的な振る舞いを規定する指定、この３つを合わせたもの。 この部分はいつでもどんなサイトでも大抵は使いまわせるので、自分なりのものを用意している人も多いと思います。ちなみにSig.は「base.css」という名前で用意してますが、「default.css」とか「master.css」とかって命名も良く見かけますね。それはともかく。 このところデフォルト設定に関するレポを良く見かけるので、いちど当サイトでも纏めておこうかと思った次第です。（ま～「良い感じの方法を見つけたんだけ
CSSだけでコメントに番号を振ってみる | Blog hamashun.com
本日はTips記事でございます。 Blogなんかで、コメントに番号が付くのってありますよね。 あれをCSSだけで実現してみます。 サンプル 見ての通り、何の変哲もないh3要素に、番号が振られています。 これを指定しているのが、あまり見慣れないcounter()関数 です。 ソースを解説すると、 「h3要素の直前（before）にcontentプロパティで次の値を生成する。 『counter関数でchapterと文字列 .』 」 となります。 ただし、これだけでは数字は増えていきません。 これを増やしていくには、counter-incrementプロパティを使用します。 counter関数の引数chapterと、counter-incrementプロパティの値chapterが対になっているのがポイントです。 counter-increment。 インクリメントと聞くとプログラムのインクリメン
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
CSSのfloatについてあなたが知るべきこと：和訳 | fjkktkys blog
REBELinBLUE - Overview
http://xcezx.net/blog/webdesign/font_de_originalty.html
kawatarou.info domain is for sale | Buy with Epik.com
http://rtmr.fixa.jp/diary/d_0704.html