:nth-childの使い方を分かりやすく教えてくれる・「Master of the :nth-child」
Master of the :nth-childは:nth-child擬似クラスの使い方を視覚的に分かりやすく教えてくれるWebサイトです。覚えれば何てことは無いんですけど、少し理解しにくい印象ですので、こういった、パッと見で分かるように教えてくれるのは有りがたいですね。 Master of the :nth-child
CSSDesk - Online CSS Sandbox
body { font-family: 'Lucida Grande', 'Helvetica Neue', Helvetica, Arial, sans-serif; padding: 100px; font-size: 13px; } div { background: #fff; margin: 0 auto; width: 200px; padding: 100px; text-align: center; /* border-radius */ -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; /* box-shadow */ -webkit-box-shadow: rgba(0,0,0,0.2) 0px 1px 3px; -moz-box-shadow: rgba(0,0,0,0.2
HTMLとCSSを自由に書ける＆リアルタイムにプレビューできるサービス「CSSDesk」 | ライフハッカー・ジャパン
「CSSDesk」はHTMLとCSSを自由に書くことができ、リアルタイムにプレビューが確認できるサービスです。ひとつの画面内で、HTML, CSSを書いてプレビューも確認できます。リアルタイムに自分の修正が反映されるので、ウェブデザインなどに便利かと。 以下に使ってみた様子を載せておきます。まずCSSDeskへアクセスしましょう。左側がHTML, CSSがかけるスペースとなっています。自由に記述できますよ。 右側がプレビュー画面です。背景はいくつかパターンが用意されているので見やすいものを利用しましょう。記述したHTML, CSSがリアルタイムに反映されてデザインを確認できますよ。HTML, CSSの練習にも使えそうですね。ぜひご活用ください。 CSSDesk （カメきち）
スタイルシートの内容はそのままで、可読性・保守性を高めるオンラインサービス -CSS Trashman
サイトやブログで使用しているスタイルシートをリファクタリングし、可読性・保守性を高めたCSS（Sassも）に変換してくれるオンラインサービスを紹介します。
CSS3をサポートしていないブラウザでどのように見えるか簡単に確認できるブックマークレット -deCSS3
CSS3でスタイルした箇所をサポートしていない古いブラウザ、まぁ主にIEなのですが、でどのように見えるのか簡単に確認できるブックマークレットを紹介します。
たったワンクリックであらゆるサイトのJavaScriptやCSSを圧縮＆最適化してくれる『zbugs』 | 100SHIKI
これはすんごく便利・・・。 zbugsを使えば、ワンクリックであらゆるサイトのCSSおよびJavaScriptを圧縮してくれるようだ。 もちろん何パーセント圧縮されたかとか、どのファイルがどれだけ小さくなったかといったことの詳細も教えてくれる。 さらに圧縮したファイル群をまとめてダウンロードすることも可能だ。 サイトをつくったあとに、さらなるスピードアップを図るのにいいだろう。インターフェースも素敵でシンプルなので一度試してみるといいですよ。
JavaScriptとCSSを圧縮・軽量化するオンラインツール集
オンラインでJavaScriptを圧縮や軽量や難読化するツールのリンク集です。 JavaScriptとCSSを圧縮・軽量・難読化するオンラインツール JavaScriptを圧縮・軽量・難読化するオンラ
[CSS]ホバー時のエフェクトを自分以外の要素にも適用するチュートリアル
ホバー時のエフェクトを実際にホバーされているエレメント以外にも適用するスタイルシートのチュートリアルを紹介します。 下記キャプチャのデモでは、ホバー時に不透明度を3種類適用しています。 Hover on "Everything But" デモページ [ad#ad-2] 下記は各ポイントを意訳したものです。 エレメントにホバー時のエフェクトを与えることは簡単です。 ここでは、ホバー時に不透明度が変化するものを例にしてみます。 div { opacity: 1.0; } div:hover { opacity: 0.5; } これで、ホバー時に不透明度が0.5になるようになりました。 ここまでは簡単ですが、ホバー時のエフェクトを実際にホバーされているエレメント以外にも適用するには、どうしたらよいでしょうか？ 例えば隣接した兄弟のdiv要素などに。 まずは、HTMLの基本的な例を見てください。
インタフェースが良くてプレビューも見やすいCSS3コード生成が可能な「CSS3 Generator」:phpspot開発日誌
インタフェースが良くてプレビューも見やすいCSS3コード生成が可能な「CSS3 Generator」 2011年03月11日- CSS3 Generator - By Eric Hoffman & Peter Funk インタフェースが良くてプレビューも見やすいCSS3コード生成が可能な「CSS3 Generator」。 CSS3ジェネレーターは多くありますが、中でも優れたUIとわかりやすさを持っているように思えるジェネレーターの紹介。 角丸、シャドウ、透明度、グラデーション、枠線、背景色の設定ができ、リアルタイムに反映されます。 あっという間にCSS3コードを生成出来ました。 UIだけでも一見の価値ありです。 関連エントリ CSS3で実装されたボタンのサンプルやチュートリアル総まとめ CSS3で動くプログレスバー作成サンプル ステップで学べるCSS3ボタンのデザインチュートリアル CSS
ProCSSor - Advanced CSS Prettifier
First Place For The Best Virginia Events! When it comes to events there is no where better to get your updated info. You will see a list of the current and upcoming events below. From county fair to music festivals to petting zoos, there is an amazing list of events for all ages around Virginia.' Focusing on amazing fun for the entire family! The County Fair features great events and games for all
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Bar Navigation with Flexbox and SVG icons
角丸やシャドウ作るジェネレータ。CSS3 Generator
Grad3
Ultimate CSS Gradient Generator from ColorZilla
指定したHTML用のCSSテンプレートを自動生成してくれるサイト「Bear CSS」 | ライフハッカー・ジャパン
ウェブサイトのレイアウトを簡単に作成できるジェネレータ「PageBlox」 | ライフハッカー・ジャパン
CSS3のグラデーションを自動生成 | Grad2 -CSS3 Easy Gradation Editor
IDEA * IDEA
https://csswarp.eleqtriq.com/
IDEA * IDEA
