okyuu.comは、世界規模のノウハウデータベース構築を目指すエンジニア向けコミュニティです。マイミク認証対応のRP作ってみませんか? 特集:いますぐ使えるOpenID|gihyo.jp … 技術評論社の内容に加えて SSL 接続でのサーバ証明書の検証,mixi のマイミク認証についても解説されている。
今日は、CSSを使ってサイトを高速化するテクニック「CSS Sprites(CSSスプライト)」についてのお話をさせていただきます。 サイトの高速化というと、プログラムの最適化を行ったり、サーバのチューニングを行ったりというイメージがあるかと思います。実はCSSを上手に使うことによっても、サイトの高速化を行うことができます。しかも、かなりの効果が期待できるのです。 CSS Spritesとは? 通常、ウェブページを制作する場合、デザインファイル(psdやpngなどの画像)をスライスし、HTMLのimg要素として埋め込んだり、CSSの背景画像として指定していることと思います。 それらの画像を一つにまとめ、1度の読み込みでのリクエスト数を減らすテクニックのことを「CSS Sprites」と呼びます。 このテクニックは、以前からマウスオーバーメニューを実現する際にも使われていたものでもありま
複数の画像を一枚にまとめて、スタイルシートで背景画像として指定するCSS Spritesに利用できる画像置換の実装例の紹介です。 画像置換する際には、CSSオフ時・画像オフ時・印刷時・音声ブラウザ対応・空タグ使用などを考慮する必要があります。 備考 コードは、参考サイトからサイズ指定などを変更しています。 画像置換元は、全てH3要素になっています。 H3は、テキスト(見出しのテキスト)もしくは画像(印刷用の見出し画像)です。 ブラウザに「背景画像」が表示されていれば、期待通りの動作です。 使用している画像は、次の通りです。 背景画像 印刷用の見出し画像 1pxの透過画像 名称は、Revised Image Replacementを参考にしています。 サンプル:01 -Classic FIR デモページ <textarea name="code" class="html" cols="60"
開発裏話1、開発裏話2、と紆余曲折を経てリリースした Twister Alternative ですが、今回はgihyo.jp の連載記事にも関連し、デザイン面からみたサイトの高速化のお話をさせていただきます。 サイトの高速化というと、プログラムの最適化を行ったり、サーバのチューニングを行ったりというイメージがあるかと思います。 デザイン面でサイトの高速化というと不思議に思われる方もいらっしゃるのではないでしょうか。 Google App Engine のリクエスト制限 Twister では当初、Google App Engine で動いていました。Google App Engine ではリクエスト数に制限があるので、1回のページ読み込み時に発生するリクエストは最小限にしなければなりません。サイトの至るところで使われている一つ一つの画像はリクエストを増やしてしまう原因となります。 そこで
CSS(必要に応じてXHTML)に手を加えて、 ページの高速化+更新を楽にする。 ■CSS Sprite 画像置換の拡張版のような感じで、 背景画像を1枚の画像に統合してしまうやりかた。 そういう使い方ができるのはわかってはいたけれども、 ページ高速化も期待できるとは目から鱗。 独学で極める "Webデザイン"の技と心:第10回 CSS Spritesでサイトを高速化|gihyo.jp http://gihyo.jp/design/serial/01/ss-design/0010 CSS Spriteを活用しよう - DesignWalker http://www.designwalker.com/2008/02/css-sprite.html 文字背景などで使う分には全く便利すぎるというか、 そうしていこうと思いましたが、 display: none;で文字を消すのはどうなんだろうと少し
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
即席html5を作成してみました。 ファイル一枚だけで使えます。 yahoo user interface と jquery も付いています。 よろしければどうぞ 続html5 - ミショニポー 即席html5 しょうがないので、html5はxmlでも描けるので、やってみた。 作ったサンプル:Example document <?xml version="1.0" encoding="utf-8"?> <?xml-stylesheet type="text/css" href="html5.css"?> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Example document</title> </head> <body> <header> <h1>hello html5</h1> </header> <nav> <
Lightview allows you to easily create the most beautiful overlay windows using the jQuery Javascript library. By combining support for a wide range of media with gorgeous skins and a user-friendly API, Lightview aims to push the Lightbox concept as far as possible. Lightview uses HTML5 to help you deliver the best experience across every browser. Let it enhance your media automatically or create c
よく海外のブログでみかけるDate StampをCSSでの表示方法の紹介です。 HTML: <div class="date1"> <div class="month">JUN</div> <div class="day">24</div> </div> CSS: .date1{width:60px; height:70px; background:url(images/date1bg.gif) no-repeat; color:#fff; font-weight:700;} .date1 .month{width:100%; text-align:center; position:relative; top:12px;} .date1 .day{width:100%; text-align:center; position:relative; top:12px; font-size:28
とある案件でパンくずリストをどうやってマークアップするのが最適解なのか悩んでいました。例えば、以下のようなヴィジュアルデザインのパンくずリストをマークアップするとします。 まずどんなブロック要素で囲むか?そして > 部分はどうするか?> というのが真っ先に思いつきますが、これはスマートとは言えないのでは・・・などなど。そこでGoogleで情報検索したところ、次の記事を見つけました。 日々のネコゼログログ: アクセシブルな「パンくずリスト」 こちらの記事によると、インフォアクシアの植木さんのインタビューからの抜粋があります。そのインタビューの様子はこちら。アクセシビリティを言い出すと・・・結局はこの人にたどり着くようです。頭が下がります。 あとは、試しにやってみているのですが、パンくずリストの間に挟む矢印を画像にして、「の中の」という代替テキストを入れてあります。こうすると例えば「ホー
当サイトのレイアウトにはエラスティックレイアウトという手法を使いました。コンテナ要素の幅をem単位で指定しています。該当部分の記述は以下の通り。 div#container { width: 90%; max-width: 60em; min-width: 46em; margin: 0 auto; } コンテンツ全体を囲む div#container に対して max-width と min-width をem単位で指定しています。そうすることで、ブラウザで文字サイズを変更すると div#container の幅が変わるようになります。なお、 max-width/min-width プロパティに対応していないIE6以前などのブラウザでは単に width:90% になるだけです。 また、エラスティックレイアウトで2カラムを実現するためにネガティブマージンをレイアウトに使っています。ネガティ
2カラムのサンプルを色々作ってみました。 事の発端は、Layout Gala: a collection of 40 CSS layouts based on the same markup and ready for download!を見ててですが、こういうレイアウトサンプルサイトは色々あって、P O P * P O Pさんでも紹介されていますね。 IE7もサポートしているCSSレイアウトがダウンロードし放題の『CSS Layouts』 | P O P * P O P http://www.popxpop.com/archives/2007/04/ie7csscss_layouts.html で、まぁ日本語のサイトがあんまり無いっていうのと、どーにもこーにも使い勝手が悪い気がしてならないので、自分が使いやすいだろう2カラムのサンプルを作ったという訳です。 細かく作っていけば限りなく出来
clearfix ネタに乗っかってみる。 スタイルシートをめぐる冒険: CSS実験室: clearfixの決定版を作る -モダンブラウザ編- clearfixはちゃんと考えられてた .clearfix:after { height: 0; visibility: hidden; content: "."; display: block; clear: both; } .clearfix { _height: 1px; min-height: 1px; /*¥*//*/ height: auto; overflow: hidden; /**/ } ホップ本でもうーたんが解説してるんだけど、構造に手を加えずに float を clear させるためのいわゆる clearfix ってやつ。結構色々なサイトで紹介されているのを目にすると思うけど、最初の content 生成して clear させる
elastic レイアウトと言っても、固定幅ベースか可変幅ベース(とは言っても min、max-width による半固定だけど)のどちらかからのアプローチになるとは思う。当サイトでは、ここ1年半ほど可変幅ベースの elastic レイアウトを採用しているんだけれども、ちょっと思い立って固定幅ベースの elastic レイアウトのサンプルを 3 つほど作ってみた。 文字サイズの変更に追随する elastic レイアウト 作ったのは 600px(640×480向け)、780px(800×600向け)、960px(1024×768向け)の幅をデフォルトで持っていているレイアウト。それぞれ、だいたいどれくらいの幅を指定すれば良いのか調べたかったってのがサンプルを作った主な理由。ブラウザの表示メニューなどから文字サイズを変更すると、それに追随してレイアウトの大きさも変化する。内包するカラムを黄金比
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く