画像に美しい角丸やボックスシャドウ、グラデーション、アニメーションを適用する
CSS3を使って、画像に美しい角丸やボックスシャドウ、グラデーション、アニメーションなどを適用するさまざまなテクニックを紹介します。 また、Chrome, Safari, Firefoxなど、最近のブラウザで期待通りに表示されないのを回避する方法もあわせて紹介します。 CSS3 Image Styles [ad#ad-2] 最近のブラウザで生じる問題点 画像に角丸やドロップシャドウを適用すると期待通りにならないことがあります。これはChrome, Safari, Firefoxなど、最近のブラウザでも生じます。 Chromeでの表示 デモでは「border-radius」と内側に「box-shadow」を適用していますが、Chrome, Safariではキャプチャのように欠けて表示されてしまいます。 また、Firefoxでは「border-radius」は期待通りですが、「box-shad
HTML/CSS テンプレート集まとめ - Cube Lilac
サイトのデザインを変更しようかと思ったのですが，自力でデザインを考えるのは限界があるのでフリーの HTML/CSS テンプレート集をざっと探してみました．尚，どのサイトが人気なのか分からなかったので，各種ソーシャルメディアのカウントを取得して併記してみました．海外サイトばかりなので，SBM としてははてなブックマーク以外に Delicious のカウントも取得しています． 掲載されてあるデザインはまったく見ずに，サイトの使いやすさ（と言うか「広告の少なさ」かな）だけからの感想ですが，個人的には http://www.solucija.com/ が使いやすいかなぁと言う気がしています． URL Delicious Hatena Twitter Facebook 1 http://www.oswd.org/ 24,170 951 471 1,002 2 http://www.freecsste
line-height の値には単位なしが良いとされる理由
CSS で行ボックスの高さを指定する line-height 値に、em(length) や %(percentage) などの単位を付けて指定しているサイトを意外と見かける。それは間違いではないし、例えばナビゲーションとかでブロック要素の垂直センターに配置するために意図的に指定しているんであれば良いんだけれど、そうでないなら line-height 値には単位なし (number) で指定した方が良いのにとか思ったりする。その理由は Eric's Archived Thoughts: Unitless line-heights でも分かりやすく説明されているんだけど、ちと劣化コピーしてみる。 単位ありと単位なしの違い 手っ取り早く説明するために、サンプルを作ってみた。p 要素があって、その中にインライン要素の em で一部分を強調している。分かりやすいようにそれぞれの font-size
素人っぽいデザインから脱却するための12のデザインチップス | webox blog
クオリティを上げるためにはちょっとした「こだわり」がとても大事です。 定期的に話題になるネタで恐縮ですが、素人っぽいデザインにならないように個人的によく使ってる小技をまとめました。 上のものほど、簡単で多くのデザインに使える小技になります。 1pxのボーダーを使う 1pxの効果を使うのと使わないのでは、デザインの質に大きな違いが生まれます。 ある意味Webデザインでは一番重要な要素かもしれません。 定番です。たった1pxのボーダーをつけるだけでシャープな印象になります。 ただ塗りつぶしただけ、グラデーションを入れただけのボタンでは、のっぺりとした感じになりやすいですが、1pxのボーダーを上部に入れるだけでシャープな立体を表現できます。 正確には1pxでなく2pxですが、こうして黒系のボーダーと白系のボーダーを並べることで、明確にかつシャープに仕切りを表現できます。 1pxのドロップシャ
好きなサイトのCSSを簡単にカスタマイズできる「Stylebot」 | ライフハッカー・ジャパン
Chrome：「Stylebot」を使えばボタンベースのコントロールパネル、またはスタイルシートのローテキストを編集することで、ほとんどどんなページのスタイルシートでも簡単に調整できます！ 多くの人はフォントを変更させたり、広告を非表示にしたりするためにこのアプリを使いますが、このパワフルなアドオンを活用すれば、サイトを完全にリスキンしたり、開発者フォーラムなどを通じて、カスタムCSSをシェアしたりすることも可能です。 Stylebot Socialサイトには、カスタマイズされたCSSが数多くあり、「CSSって放送局？」という方でも、比較的簡単に使えるようになっています（CSSは段階スタイルシート、カスケーディング・スタイル・シート、カスケード・スタイル・シートと呼ばれ、簡単に言うとウェブサイトの表示方法を調整するものです）。 Stylebotを使うと、例えば、Google DocsをMS
[CSS]100%幅のヘッダとフッタを天地に固定表示するスタイルシート
ビギナーズ向けに解説された、100%幅のヘッダとフッタを固定幅のコンテンツの天地に固定表示するスタイルシートをNoobcubeから紹介します。 Fixed Header & Footer Layout: A Beginner's Guide demo スタイルシートはIE6をはじめとする主要ブラウザをターゲットにしており、IE6用のスタイルシートファイルやdivの入れ子でIE6に対応しています。 HTML箇所の最小構成は、下記のようになります。 <textarea name="code" class="html" cols="60" rows="5"> <body> <div id="header-wrap"> <div id="header-container"> <div id="header">ヘッダ</div> </div> </div> <div id="ie6pagewrap"
40 Useful CSS Tutorials, Techniques And Resources
We have previously posted many articles on CSS tutorials and resources you can learn CSS from. Today, again we come up with yet another great list of 40 CSS tutorials, techniques and resources that you will enjoy exploring. Every developer knows very well how important it is to learn and use CSS effectively. Therefore, tall the developers keep themselves updated with the latest development and adv
[CSS]スクリプト無しで、高さがバラバラの画像を隙間無く配置するスタイルシートのテクニック | コリス
ブラウザのサイズを変更してもそれに合わせて、高さがバラバラの画像をグリッドに沿って隙間無く配置するスタイルシートのテクニックを紹介します。 Seamless Responsive Photo Grid デモページ [ad#ad-2] 下記は各ポイントを意訳したものです。 画像を隙間無く配置する実装方法 HTML HTMLはimg要素をsection要素で内包したシンプルなものです。 <section id="photos"> <img src="images/dog-1.jpg" alt="Little doggie"> <img src="images/cat-1.jpg" alt="Little kittie"> ... </section> CSSをオフにすると、img要素はinline-blockなので、下記のように連続して並ぶだけです。 デモページ：CSSオフの表示 こういったエ
WebPuttyがちょっといいんじゃないの？ | gaspanik weblog
例によって爺さん並みの時間に起床していろいろチェックをしていたら、オンラインのCSSエディタ「WebPutty」が話題になっているようでした。ちゃんと自サイトで使ったわけではないですが、一応お知らせ程度に載せておきます。 なんでも、このWebPuttyはオンラインのCSSエディタでありながら、CSSのファイルのホスティングも兼ねているようです。さらには「Sass」や「Compass」もサポートしているらしく、そっち系を使ってらっしゃる方でも使える、と。ちなみに、公開時のファイルはちゃんとMinify & Gzipされるようです。 何はともあれ、Googleアカウントでログインだ登録に特別なことは必要なく、Googleアカウントでログインできます。 ログインするとこんな画面。左が保存されたCSS、右に新規サイトの登録のボタンが並んでいます。右上の「HELP」を押せばいろいろ教えてくれます。
[CSS]可変でも固定でも対応できる、シンプルなグリッドシステム -Grid
FruidレイアウトでもFixedレイアウトでも、入れ子でも対応できる、シンプルなグリッドシステムを実装するスタイルシートを紹介します。 デモページ：入れ子のグリッド Gridの使い方 Gridは、使い方も簡単です。 コンテナとなる要素のclassに「grids」を加えます。 子要素に望むサイズのclassを指定します。 Gridのスタイルシート 2011年7月1日リリース版のスタイルシートです。 グリッドは、2分割、3分割、4分割、5分割が用意されています。 /* * Grid * A simple, flexible, fluid grid system that can flow nicely inside a fluid or a fixed container or play good with another Grid system. * Brajeshwar, http://
Farewell Floats: The Future of CSS Layout
Floats are one of the most basic tools for structuring a web page using CSS. They’re both one of the very first things that we learn about and one of the last things that we truly master. Today’s article looks at some of the reasons that floats are pretty lame and takes a look at a number of alternative layout systems, some of which are still under development but may one day represent the standar
ウェブページ高速化に効果的なCSSセレクタ
CSSセレクタの使い方によってウェブページの表示速度は変わってきます。 劇的に速くなるということはないと思いますが、「ページの読み込みが0.5秒遅くなると、検索数が20%減少する」とか「ページの読み込みが0.1秒遅くなると、売り上げが1%減少する」なんて聞くと試してみたくなるのではないでしょうか。 ウェブページの高速化とCSSセレクタの関係については「CSSセレクタの高速化の話し - Webtech Walker」で紹介されていましたが、先日GoogleのPage Speedのページでなかで「Use efficient CSS selectors（効率のよいCSSセレクタを使う）」と紹介されていて内容も若干違うので、こちらを簡単に例などを交えて解説してみます。 ブラウザはセレクタを右から左へ判別していく まず知っておきたいのは「ブラウザはセレクタを右から左へマッチするか探していく」というこ
[CSS]classを加えるだけで素敵なボタンが実装できるスタイルシート -Buttonize
シンプルなボタンをはじめ、カラフルなボタン、アイコンを使ったボタン、背景を使ったボタンなどがclass名を加えるだけで簡単に実装できるスタイルシートを紹介します。 CSS3 Buttonize Framework - Light-Weight, Flexable Instant Button Framework [ad#ad-2] 先日紹介した「CSS3 GitHub Buttons」もシンプルで使い勝手がよさそうでしたが、今回紹介する「Buttonize」もシンプルながらデザインも豊富に揃っています。 参考：シンプルで使いやすいGitHub風のボタンを簡単に実装できるスタイルシート Buttonizeの実装 実装は、非常に簡単です。 Step 1 ダウンロードしたスタイルシートを外部ファイルとして記述します。 <link rel="stylesheet" type="text/css"
画像の指定箇所からグラデーションを抽出し、スタイルシートを生成するオンラインツール -Gradient-Scanner
手元の画像やオンラインの画像から、このグラデーションいいな、という箇所を抽出し、CSS3 グラデーションのスタイルシートを生成するオンラインツールを紹介します。 Gradient-Scanner [ad#ad-2] Gradient-Scannerの使い方は簡単です。 まず、画像を「Browse」ボタンをクリックしてアップロードします。 ※画像は手元の画像だけでなく、URLでも指定できます。
[CSS]縫い目風のかわいいデザインをスタイルシートで実装したナビゲーション
ぱっと見、画像を使用しているかのような縫い目風のデザインをスタイルシートで実装するナビゲーションを紹介します。 もちろん、画像は使っていません。 また、IE6などのCSS3非対応ブラウザも配慮した実装となっています。 Sexy CSS3 menu デモページ [ad#ad-2] 実装のポイント スケーラビリティ アンカーのフォントサイズを変更することで、サイズを簡単に調整できます。 画像は無し 画像を使用していないため、メンテナンスが簡単です。またHTTPリクエストを減らします。 カスタマイズ 簡単にドロップダウン型などに変更できます。 このスタイルシートのアイデアの元となったのは、LESSで使用されているダウンロードボタンです。 LESS 実装方法 HTML HTMLはspan要素を使っている以外は、クリーンです。 このspanはスタイルをつけるのに必要で、疑似要素非対応ブラウザへの配慮
CSSスプライトのコードをインタラクティブに取得できる『Sprite Cow』 | 100SHIKI
CSSスプライトのコードをインタラクティブに取得できる『Sprite Cow』 June 22nd, 2011 Posted in 便利ツール（ウェブ） Write comment ちょいとマニアックだが、便利かつ、細かいところが使いやすかったのでご紹介。 Sprite Cowを使えば、いわゆるCSSスプライトのコードを簡単に取得できてしまう。 使い方は簡単で、まずは画像をアップし、どの画像のコードを取得したいかを指定するだけだ。それだけで画面下部にCSSコードが表示される。 なんとも気が利いているのが背景部分を自動的に認識し、クリック一発でアイコンやらを認識してくれる点。 また元画像に透過チャネルがなかったとしても「透明にしたい色」を指定すればOKだったり、複数の離れている画像（文字とか）はドラッグして範囲指定できたりと、細かい部分の使い勝手が素晴らしい。 他にも似たようなツールはあるが
[CSS]6つの代表的なCSSレイアウト方法の長所と短所を学んで使いこなす
スタイルシートで実装する6つの代表的なCSSレイアウト方法、それぞれ実例を見ながら、その長所と短所を紹介します。 Pros And Cons Of 6 CSS Layout Patterns: Part 1 Pros And Cons Of 6 CSS Layout Patterns: Part 2 [ad#ad-2] 下記は各ポイントを意訳したものです。 Fixed-Widthレイアウト Fluid/Liquidレイアウト Elasticレイアウト Hybridレイアウト Responsiveレイアウト Fluid/Elastic Gridsレイアウト Fixed-Widthレイアウト Firxed-Widthは、幅の全体を絶対値（px）で指定するスタティックなレイアウトです。このレイアウトを使用する場合には、ユーザーのために最適な幅を調査し、設定する必要があります。 典型的な例では大き
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
画像もFlashも無し！ スタイルシートでローディング時のスピナーを生成する -CSS load.net
Creating A Dark and clean HTML CSS website layout - Script Tutorials
IDEA * IDEA
