JavaScript/CSSの検証、短縮化、マージに·Juicer MOONGIFT
JuicerはCSSやJavaScriptのマージや短縮化を行うRubyライブラリです。短縮にはYUI Compressorを使っています。 JavaScriptやCSSを使っている際に一緒に使ってほしいのがJuicerです。短縮化やファイルのマージなどをコマンド一つで行ってくれます。 インストールはRubygemsで行います。juicerのインストールコマンドでYUI Compressorなどもインストールします。 YUI CompressorとJS Lintをインストールしました。 CSSの記述例です。?embed=trueと書いてあるのがミソです。 コマンドを実行します。importに書かれている内容を取り込んだり、短縮化します。--embed-image dara_uriをつけて実行しています。 そうするとこんな感じにパスで指定した画像がData URIとして取り込まれます。 もち
[CSS]実例から学ぶCSS3の効果的な使い方
CSS3の角丸、テキストシャドウ、ボックスシャドウ、RGBA、グラデーションなどを効果的に使用したサイトをSix Revisionsから紹介します。
CSS で簡単に上下中央揃えを実現する
blog移行しました。新しいblogで更新を続けています。 XMLェ… text ja 2012-07-08 http://www.yomotsu.net/wp/?p=603 XMLェ… 日々の出来事2012年7月8日日曜日 ブログ作りなおそうかなーと思って、この Webサイト をみなおしてたら、Web ページのメタ情報としてダブリンコア (RDF) を混在させていたことを思い出した。バリデーターにかければ、グラフも取り出せて みたいな感じになる。でも結局あまり意味なかったです多分。いまは OGP とかありますしね。 Web ページは XHTML にしてたけど、ブログのコメントで参照先のない数値参照とか混ぜられると XML パースエラーになるし、XML だから他の語彙混在できるけど、RDF くらいしか混ぜてなかったし、XHTML 意味なかったです多分。いまは HTML に SVG 混在でき
MOONGIFT: » 必見！CSSを使って複数の画像を一つに「CSS Sprite Generator」:オープンソースを毎日紹介
Googleの表示速度の速さの秘密に、コネクションを極力減らすということがある。それが複数の画像を一つにまとめてしまい、CSSのポジションをずらすことで表示するという手法だ。これを使うと画像のダウンロードは一回で済むのでコネクションが少なくて済む。 実際、検索結果のGoogleロゴを見ると、複数の画像が混ざった結果なのに気づくはずだ。これをやるのは非常に面倒に感じるだろう。だが、小さなアイコンなどはこういう手法をとればサイトの負荷軽減、高速化につながる。それを手軽に実現できるのがこのソフトウェアだ。 今回紹介するオープンソース・ソフトウェアはCSS Sprite Generator、CSSによる画像分割補助ソフトウェアだ。 CSS Sprite Generatorは複数の画像をZipで固めてアップロードすると、その画像を連結し、さらに表示するためのCSSを生成してくれる。これを使えばまさに
IE7でHTMLに存在しない要素にスタイルシートを適用する方法: ある SE のつぶやき
AjaxianとHTML5.JPでIE7以降で、HTML5の新要素にスタイルシートを適用する方法が紹介されていました。 Ajaxian » Getting HTML 5 styles in IE 7+ HTML5の新要素にCSSを適用するテクニック - HTML5.JP ですが、この方法はどんな要素にも適用できるようです。 例えば、以下のようなHTMLがあったとします。 <html> <head> <style> dummy { color:red; font-size:2em;} </style> </head> <body> <dummy>ここは<dummy>要素です。</dummy> </body> </html> このHTMLは、IE7では以下のように表示されます。 FireFox2.0だとこうなります。 Opera9.24だとこうなります。 IE7だけスタイルシート
How to Create a Block Hover Effect for a List of Links | Smiley Cat
Among the many things to like about Veerle’s redesign of her blog is the way she does the hover effects for lists of links, such as those in her “approved” section. Rather than force others to wade through Veerle’s CSS (wow, that’s quite a stylesheet!) I thought it’d be helpful to show how to create this “block hover” effect. The Example First, view my link hover effect example and roll over the l
IE6で[a]要素以外にも[:hover擬似クラス]を適用 (ウェブのあれこれ格納庫)
ウェブのあれこれ格納庫 » HTML » CSS » IE6で[a]要素以外にも[:hover擬似クラス]を適用 IE6で[a]要素以外にも[:hover擬似クラス]を適用 Internet Explorer 6（以下IE6）は、<a>要素以外で[:hover擬似クラス]を使うことが出来ない。 例えば下記のように<li>タグに CSS の[:hover擬似クラス]を指定した場合、Firefox や Opera などではマウスオーバー時の CSS 指定が適用されるのに対し、IE6 では適用されない（IE7 は[:hover擬似クラス]に対応済）。 li { color: #666; } li:hover { color: #000; } [:hover擬似クラス]適用例のサンプルはこちら。 そこで便利なのが[csshover.htc]という behavior スクリプト。 <body>タ
画面下部にフッター表示-CSS TIPS
動的サイトで画面の下部にフッターを表示する事は非常に困難です。 さまざまなパターンを想定してフッターを設定することになります。 コンテンツ領域がブラウザの高さより高い場合 この場合、通常の方法で問題なく表示できます。 サンプル（コンテンツのheight:1000px） ただし、コンテンツ領域がブラウザの高さより低い場合、画面下部に大きな余白が発生します サンプル（コンテンツのheight:100px） コンテンツ領域がブラウザの高さより低い場合 この場合は、高さ100%のボックスを作成する方法を使用して、画面に対してheight100%のボックスを作成して、postionを利用して画面下部にフッターを持ってくることで、表示が可能になります。 サンプル ただし、この方法ではIE6以外のブラウザでは、コンテンツ領域がブラウザの高さより高い場合、フッターが初期表示の際の下部に表示されてしまし、ス
CSS PNG Image Fix for IE » Blog » Komodo Media
Komodomedia blog, webdesign, illustration & newsk00l javascript We’ve all seen them, the hoards of PNG fixes for IE6. That is because IE6 is a bag of smashed buttholes. I’m serious. It is. That is why we (web designers of the new world) have to continually come up with creative ways to solve the PNG issue. In case you are lost, just realize that in IE6, PNG images with transparency do not show the
パンくずリスト（Topic Path）を作成する際に使えそうなサンプル8種｜CSS HappyLife
普通のエントリー久々な気がする今日この頃。 今回はトピックパスとかパンくずリストなんて呼ばれてる、ちょっと規模の大きいサイトでは日常茶飯事で見かけるアレのサンプル色々です。 サンプルの前に #main .entryBody #topicPath_01 とかってなってますけど、#main .entryBody はウチのサイトの都合で優先順位上げの為にやってるんで、コピったりする場合はいらない感じです。 #main .entryBody #topicPath_01 { margin:10px 0; } #main .entryBody #topicPath_01 li { display:inline; line-height:110%; list-style-type:none; } #main .entryBody #topicPath_01 li a { padding-right:10
パンくずリストのマークアップを色々考えてみる
久々普通のエントリーだ。 なんか、デジパの中の人が、Web標準の日々に出ちゃうらしいです。 この人→ネットのサラダボウル: Web標準の日々に参加します。 皆色々やってるなぁ～、ボクも負けてられんなぁ～ ソレとは関係ないけど、デジパの社員は半分くらいの人がブログ書いてるんすけど、Ｂ to Ａ 赤坂で働くWebコンサルタントの日記とかのエントリーで逆立ちって。。。。 皆色々やってるなぁ～、ボクも負けてられんなぁ～ さて、そろそろ本題に。 以前のエントリーでパンくずリスト（Topic Path）を作成する際に使えそうなサンプル8種ってのを書いたんだけど、その後色んなサイトで書かれてたパンくずリストのエントリーや、コーディングコンテストのソース覗いてたりして、今後どうやってマークアップしてこうかなぁ～って悩んでた今日この頃。 そんな訳で、良いか悪いかは別として色々考えてみた。 ul要素でやってみ
MOONGIFT: よく使うスタイルをユーティリティ化「logicss」:オープンソースを毎日紹介
CSSを使うのが当たり前になり、Webエンジニアと言えどもある程度のデザインはこなす必要がある時代になっている。だがいざやってみると色々と大変なのがCSSでもある。 よく使われるスタイル指定や、テクニックをまとめてしまったのがこちらのソフトウェアだ。 今回紹介するオープンソース・ソフトウェアはlogicss、どこでも使えるCSSフレームワークだ。 logicssはがちがちな固定ではなく、通常使うタグを便利なように上書きしたり、サブセット化してくれる。例えばh-listというクラスは水平方向に、v-listというリストは垂直方向に項目をリスト化してくれる。 CSSを眺めてみるだけで、便利だと思えるスタイル指定も数多く登録されている。CSSの勉強材料としても良さそうだ。もちろん印刷時の設定もある。 また、サイトのグリッドを定義してくれるツールも付属している。これは指定した幅などで枠線やフォント
CSS Sprite Generator, Editor, and Code
What are CSS Sprites CSS sprites are a way to reduce the number of HTTP requests made for image resources referenced by your site. Images are combined into one larger image at defined X and Y coorindates. Having assigned this generated image to relevant page elements the background-position CSS property can then be used to shift the visible area to the required component image. This technique can
3カラムサンプル18種
本題の前にお知らせ。RSSの登録先をこっちにしてくれるとうれしいです。近々ディレクトリ整理したいので。 http://feeds.feedburner.jp/csshappylife では、本題に。 2カラムサンプル13種で宣言しておいて、放置してましたが重い腰を動かしてようやっと作りました。 というか、エントリー自体も時間が空いてしまい、申し訳ない限りでございます。。。 一度気が抜けると、中々書こうって思えないっすね。 今回は3カラムですが、ネガティブマージンを使ったサンプルが多い感じです。 殆ど経験が無い中作っていたので、なんか楽しくなってました。 個人的にはふいに思いついた、15番のサンプルとかが使えるかも知れないとか思ってます。 広告って載せたいけど、センターの位置をずらしたくない時とか有ると思うのです。 仕様っぽいことと注意事項っぽいこと DOCTYPEは XHTML 1.0 S
デザイナーならこう作るCSSスタイルテーブル『A CSS styled table version 2』 – creamu
かっこいいテーブルをデザインしたい。 そんなあなたにおすすめなのが、『A CSS styled table version 2』。デザイナーならこう作るCSSスタイルテーブルだ。 このエントリーでは、クリーンなソースでコーディングされたテーブルが2つ紹介されている。 » Example 1 背景画像は使わず、セルに背景色を使った例 » Example 2 背景画像を使った例 どちらもページのソースを見るのが早いだろう。 シンプルでとても綺麗なテーブルに仕上がっていると思う。 デザイナーならこう作るCSSスタイルテーブル、チェックして作っていきたいですね。 プランナー、アートディレクターにたくさんのことを教わりました。「とりあえず手を動かすのがレイアウトの基本」だと。あとデザインはピクセルよりも見た目。人間の目にはくるいがあるから見た目で綺麗にそろっていればいい。とにかく手を動かしていこうっ
MOONGIFT: » ついに登場！CSSフレームワーク「Blueprint」:オープンソースを毎日紹介
誰かがきっと作ってくれると思っていた。 prototype.jsのようなライブラリを利用するのは、便利な機能が多いという事もあるが、各ブラウザ間での相違を吸収してくれるという点も大きい。 その点において、CSSもまた各ブラウザ間での表示の差異が大きい。そこで試してみたいのがこれだ。 今回紹介するオープンソース・ソフトウェアはBlueprint、ブラウザ間の描画差異を吸収して簡単にマルチカラムを実現してくれるCSSライブラリだ。 Blueprintはヘッダ、コンテンツ、サイドバー、フッターのようなテンプレートをクラス指定するだけで簡単に作成できる。デフォルトのフォーマットはリセットされているので、ブラウザ間の違いが出るマージンやパディングの差異も吸収してくれている。 また、印刷時のCSSも用意されている。これを使えば印刷時やプリンタ経由でのPDF作成時に綺麗なものが仕上がるようになる。今後の
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Most used CSS tricks | StylizedWeb.com
http://www.dynamicdrive.com/style/csslibrary/item/css_oval_buttons/
Breadcrumb CSS - Appleに習うパンくずデザインCSS - youmos
はてなブログ | 無料ブログを作成しよう
