[CSS]ブラウザのスタイルを初期化するスタイルシートの総まとめ -2010年版
ブラウザごとに異なるデフォルトのスタイルを初期化するスタイルシートの歴史を振り返りつつ、2010年の最新のCSS Resetまでのまとめを紹介します。 A Comprehensive Guide to CSS Resets [ad#ad-2] ユニバーサルセレクタから始まったCSS Resetの進化の過程をたどり、最近リリースされたCSS Resetを紹介します。 下記は、各ポイントを意訳したものです。 (X)HTML "Hard" Reset undohtml.css -2010 version Poor Man's Reset Siolon Reset Inman Reset Tripoli Reset Dan Schulz's Reset Thierry Koblentz's base.css Simple Reset CSS Mini Reset Soft Reset Less i
Webサイトパフォーマンスの可視化でボトルネックを改善／読者のサイトをプロが診断 | Web担当者Forum
Web担3周年を記念した読者プレゼント企画の中でも、Web担ならではのプレゼントだった、各分野のプロによるあなたのサイト診断レポート。まずは、株式会社サムライズ提供のプレゼント「あなたのサイトのWebサイトパフォーマンス診断 Experience First」から、当選者の発表と結果レポートをお届けします。 申し込みサイトのなかから当選してパフォーマンス測定&アドバイスをゲットしたのは、次の3サイトです。 アルネットホームビートップス鍵のハイパーレスキュー当選、おめでとうございます！ では、1サイトずつ、株式会社サムライズ提供のWebサイトパフォーマンス測定ツール「Experience First」を用いて解析を行った3サイトの診断結果とアドバイスをお届けしていきましょう。 当選サイトのWeb担当者さんにはもちろん、それ以外の方にも参考になる情報が満載ですよ。 パフォーマンス測定に関する調
CSSのプロパティをソートするPerlスクリプト
CSSを書く時に「セレクタ内でCSS仕様書でのプロパティの出現順序に従ってソートする」という個人的なルールを守っている。何かコーディングにおいて便利な理由があるからというわけではなく、第三者に説明する時に「仕様書の出現順で書いてます！」とかで済ませられるから。今まではファイル全体を処理するオレオレPerlスクリプトで適当にやっていたのだけど、Vimで選択範囲だけをソートとかやりたくなったので、普通に標準入力を読んで結果を標準出力に吐くように書き直した。ついでにCSS3のプロパティとFirefox(Mozilla)やSafari(WebKit)、Opera(Presto)、Internet Explorer(Trident)の独自拡張などへも対応させたりとか。 #!/usr/bin/perl # Author: Kyo Nagashima <kyo@hail2u.net>, http://h
一工夫でページのクオリティをアップするCSSとJavaScriptのソリューション集
Silverback Giveaway 一見、背景画像をCSSかJavaScriptで配置したように見えますが、CSSで普通に配置されたソリューションです。 テキストやリストが画像に重ならないように、marginを設定します。 HTML <textarea name="code" class="html" cols="60" rows="5"> <h3>Contest Details</h3> <div class="imagery""> <img src="imagery.png" width="205" height="400" alt="Imagery" /> </div> <p>...the introductory paragraph...</p> <ol> <li>...various bullet points went here...</li> </ol> </textar
50 Free High-Quality and "New" (X)HTML/CSS Templates - noupe
In this post, we’ll showcase 50 Free high-quality & New (X)HTML/CSS template (some of them include the PSD-source files). You will also find among these elegant templates a very well written step-by-step tutorials showing you how to create your own. Hopefully some of these will meet your expectations and come in handy in your projects. You will have to check the license first for any restrictions
[CSS]印刷用のスタイルシートがグッとよくなる、3つのポイント
既存の印刷用のスタイルシートや新規に作成する場合でも有用な、印刷用のスタイルシートの3つのTipsをLine25から紹介します。 Handy Tips for Creating a Print CSS Stylesheet 印刷時のテキストをデザインする 見出しやパラグラフ、リンクなどのテキスト箇所を印刷用にデザインします。 下記の例では、見出しを中央寄せにし、斜体にしています。 また、リンクのカラーをパラグラフと同じにし、下線を削除するのもよいでしょう（リンクのスタイルについては後述）。 <textarea name="code" class="css" cols="60" rows="5"> #header h1{ text-align: center; font-size: 42pt; font-style: italic; margin: 0; } #header h2{ text
CSS事始め、やっていいコト&だめなコト | エンタープライズ | マイコミジャーナル
TORRANCE WEB DESIGN - Website Design Service in South Bay Torrance, California - Portfolio & Blog of Soh TanakaSoh Tanaka Soh Tanaka氏が自身のブログにおいて次の2つの記事を公開している。CSSの勉強をはじめている友人におこなったアドバイスをまとめた内容になっている。 CSS Beginner Advice -CSS Beginners Do's and Dont's CSS Beginners Do’s and Dont’s Part 2 紹介されている内容は次のとおり。 複数のブラウザでのレンダリングチェックは頻繁に実施する。結局、クロスブラウザレンダリングに失敗するケースは、書き上げるまでチェックをおこなっていない。また、問題が解決するまでは次のステップに
HTML/CSS/RSSの妥当性を検証する14のツール | エンタープライズ | マイコミジャーナル
SitePoint: New Articles, Fresh Thinking for Web Developers and Designers WebサイトやWebアプリケーション、Webサービスを開発する作業工程のひとつに、作成したHTMLやCSS、RSSが適切なマークアップになっているかどうかを検証する工程がある。検証に活用できるツールやWebサービスはいくつかある。Sean P Aune氏がSitePointにおいて14 Free Tools To Validate Your HTML, CSS & RSS Feedsという記事をアップしたためチェックしておきたい。検証に使える14のFirefoxエクステンションやWebサービスが紹介されている。 14 Free Tools To Validate Your HTML, CSS & RSS Feedsで紹介されているエクステンション
IE6が消え去る日、そのあとで使える10のテクニック | エンタープライズ | マイコミジャーナル
SitePoint: New Articles, Fresh Thinking for Web Developers and Designers IE8が登場しFirefox3もシェアを伸ばして、IE6の世界シェアは第3位に落ちた。といってもIE6のシェアは依然大きい。次に続くブラウザのシェアをはるかに引き離して主要なブラウザでありつづけている。高いシェアを保持しているため、標準規約に準拠したIE8が登場した現状においても、IE6に対する種々のトリッキーなテクニックは使い続けなければならない。 しかしそんな苦労がかさむ状況は勘弁願いたいということで、2008年年末ごろからIE6を明示的にサポートしないことでユーザに最新のIEやほかの最新ブラウザへ乗り換えるように促すキャンペーンを展開するべきではないかという調子の記事がちらほらと公開されるようになった。James Edwards氏がSite
[CSS]外部スタイルシートの指定は@importとlinkでどちらがいいか
外部スタイルシートの指定は@importとlinkでどちらがいいかと、書籍「ハイパフォーマンスWebサイト ―高速サイトを実現する14のルール」の@importはパフォーマンスに悪影響を与えることについてのフォローアップを紹介します。 don't use @import 内容は、IEでは@importで外部スタイルシートを指定すると、パフォーマンスに悪影響を与えるので使用しないでください、というものです。 下記は、外部スタイルシートを@importとlinkを組み合わせて、それぞれのパフォーマンスを比較したもので、キャプチャはそのサイトのものと、参考に当環境でIE7/Fx3(XP)を検証したものです。 @import @import 2つの外部スタイルシートを@importで指定。 <textarea name="code" class="html" cols="60" rows="5">
画像をCSSだけでハイクオリティに縮小サムネイル化する方法:phpspot開発日誌
Tip: High quality CSS thumbnails in IE7 ・Devthought 画像をCSSだけでハイクオリティに縮小サムネイル化する方法が紹介されています。 普通、IEで、img に対して、width, height 指定すると、画像が汚く縮小されちゃってましたが、CSSの指定をしちゃうとそれが解決されるということのようです。 具体的には以下のCSS指定によってそれが可能みたいです。 img { -ms-interpolation-mode: bicubic; } デモページ う〜ん、縮小してもとっても綺麗です。 FirefoxやChromeの場合は何も指定しなくても綺麗に縮小される、っていうのも知りませんでした。 これは、サーバサイドでサムネイルを生成しなくて良くなる場面が出てきて開発者としては手間の削減になりますね。 転送量を考えれば、サムネイルが完全に不要に
IE6問題に対処する10のテクニック | エンタープライズ | マイコミジャーナル
SitePoint: New Articles, Fresh Thinking for Web Developers and Designers 既報のとおり、IE6のシェアは純減を続けている。2009年2月のNet Applications調査によればIE6のシェアはFirefox 3に抜かれて3位に落ちた。今後も下落の傾向は続くとみる向きが多い。しかし、依然として19%を越えるシェアはその次のシェアを獲得している4.5%弱のSafari 3.2を大きく上回る。IE8のリリースが控えている状況ではあるが、WebデベロッパやWebデザイナは依然としてIE6対応を継続しなければならない。 IE6固有の問題を回避する方法はいくつもあるが、それらテクニックをまとめたドキュメントがSitePoint: 10 Fixes That Solve IE6 Problemsとして公開されたので注目しておき
[CSS]一枚の画像で、四隅が角丸のパネルを実装するスタイルシート
Usability Postから、一枚の画像で、四隅が角丸のパネルを実装するスタイルシートを紹介します。 Scalable Content Box Using Only One Background Image demo 仕組みは、全体を囲む「div」と見出し「h2」に同じ背景画像を指定し、それぞれポジションを「bottom」と「top」にして配置するものです。 仕組みのイメージ 本文のテキストは、背景画像の長さ分（デモでは1000px）までテキスト量が増えても正常に表示されます。 見出しは、同じく見出しの長さ分（40px）までとなります。 追記： 下にある「Update」に、本文量がどれだけ増えても大丈夫なバージョンがあります。 demo 2
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
コーディング ガイドライン
今風のウェブを作る際に使えるCSS/HTML/JSのテンプレ『Easy Front-End Framework』 - 100SHIKI 〜 世界のアイデアを日替わりで
CSS Splite を使うとどれだけサイトが軽くなるか分かるブックマークレット「Sprite Me」*二十歳街道まっしぐら（FC2ブログ時代）
ie7-js - A JavaScript library to make MSIE behave like a standards-compliant browser. - Google Project Hosting
Rendur 2.4