都道府県選択するやつ。
メモ。 誰かの役にも立つかもしれないしってことで、いつも過去の案件のソースとか探してペタペタしてるけど、何処で使ったのか忘れたりするのでここに貼っておこう。 - コメントにて使用条件を書いてほしいとの事だったので念の為追記しておきます。 特別記載が無いエントリー以外は、どう使うのも自由です。 自分のブログにそのままソース掲載してもらっても、仕事で使ってもいいですし、あらゆる用途に対して自由に使ってください。 もちろん、改変・配布とかも自由です。 ただ、ウチで公開しているソースやサンプルに対して何らかの問題が生じても責任は負いません。各自の責任でご利用ください。 大体こんな感じです。 select要素でマークアップ済みの都道府県のやつ <select name="都道府県"> <option value="">都道府県をお選びください。</option> <optgroup label="北
CSS Sprites化と画像減色でサイトを高速化 - エスカフラーチェLLC
開発裏話1、開発裏話2、と紆余曲折を経てリリースした Twister Alternative ですが、今回はgihyo.jp の連載記事にも関連し、デザイン面からみたサイトの高速化のお話をさせていただきます。 サイトの高速化というと、プログラムの最適化を行ったり、サーバのチューニングを行ったりというイメージがあるかと思います。 デザイン面でサイトの高速化というと不思議に思われる方もいらっしゃるのではないでしょうか。 Google App Engine のリクエスト制限 Twister では当初、Google App Engine で動いていました。Google App Engine ではリクエスト数に制限があるので、1回のページ読み込み時に発生するリクエストは最小限にしなければなりません。サイトの至るところで使われている一つ一つの画像はリクエストを増やしてしまう原因となります。 そこで
CSS Sprites: What They Are, Why They're Cool, And How To Use Them | CSS-Tricks
That adds up to a total of 14.38KB to load the three images. Putting the three images into a single file weighs in at 16.1KB. The sprite ends up being 1.72KB larger than the three separate images. This isn’t a big difference, but there needs to be a good reason to accept this larger file… and there is! While the total image size (sometimes) goes up with sprites, several images are loaded with a si
独学で極める “Webデザイン”の技と心：第10回 CSS Spritesでサイトを高速化｜gihyo.jp … 技術評論社
今日は、CSSを使ってサイトを高速化するテクニック「CSS Sprites（CSSスプライト）」についてのお話をさせていただきます。 サイトの高速化というと、プログラムの最適化を行ったり、サーバのチューニングを行ったりというイメージがあるかと思います。実はCSSを上手に使うことによっても、サイトの高速化を行うことができます。しかも、かなりの効果が期待できるのです。 CSS Spritesとは？ 通常、ウェブページを制作する場合、デザインファイル（psdやpngなどの画像）をスライスし、HTMLのimg要素として埋め込んだり、CSSの背景画像として指定していることと思います。 それらの画像を一つにまとめ、１度の読み込みでのリクエスト数を減らすテクニックのことを「CSS Sprites」と呼びます。 このテクニックは、以前からマウスオーバーメニューを実現する際にも使われていたものでもありま
TRANS [hatena] - 印刷用CSSをまとめてみた。
以前、絵文禄のことのはさんのところで、サイトの横幅を640ピクセルにする理由――統計と現状に基づく結論というエントリーがあった。それから、ちょっと印刷用CSSに興味を持って、色々と調べてみたり、自分で書いてみたりした。そのまとめ。 ちなみに、#naviがグローバルナビゲーション、#primaryがメインコンテンツ、#secondaryがサブメニュー、#footerがフッター。 とりあえず、最低限やっておいたほうがよいこと。 body { font-size: 12pt; color: #000000; background-color: #FFFFFF; } a:link, a:visited { text-decoration: underline; color: #000000; } img { border: 0; } 印刷で読まれることを勘案するのなら、font-sizeはある程度
![TRANS [hatena] - 印刷用CSSをまとめてみた。](https://cdn-ak-scissors.b.st-hatena.com/image/square/860579fb9ea6fc896c86331cc2f3af60ddeb6ef1/height=288;version=1;width=512/https%3A%2F%2Fogimage.blog.st-hatena.com%2F6435988827676522384%2F6435988827676523499%2F1448268251)
SEO業者ですら感動する驚異のCSSテクニック - 不定期更新 SEOコラム
急にお金が必要になってしまいました。キャッシングをするのに、レイクかモビット、どっちを利用するか迷っています。借りるならどっちがお得ですか？ お得という点から言えば、初めてならレイクがよりお得です まず、それぞれの特徴を見ていきましょう。レイクは銀行系で、総量規制の対象外、１万円からお借入可能で、最大500万の限度額、年率4.5～18％、200万まで30日間無利息、または5万までなら180日間無利息、初めてのお借入なら有利な条件ですね。届く封筒は「新生銀行」の名称です。 一方、モビットは消費者金融で、総量規制の対象となります。限度額は500万、年率4.8～18％です。特に無利息期間の指定はありません。WEB完結型なら、審査の電話が入りません。 最高・最低金利だけで見ると、レイクのほうがお得に見えます。また、期間無利息などの点からも、初めての方はレイクのほうがお得な印象です。 反面、新生銀行
Lucky bag: : blog: CSS デザインギャラリー
世の中には (X)HTML + CSS の素ん晴らしいデザインでレイアウトされている方なんつうのはそりゃ沢山いるわけで、そんなサイトを集めたデザインギャラリー（ショーケース）サイトってのを見ていると、おいおいフォトショップ腕自慢かよって感もあるけど、結構インスパイアされたりされなかったり。そんな CSS デザインギャラリーサイトで自分が知っているものをちょっとまとめてみた。（ちなみに順不同） CSS Vault » The Web's CSS Site CSS Beauty | CSS Design Showcase Unmatched Style | CSS Design Gallery and Design Inspiration. CSS Drive css thesis: sites, that's all. » screenspire.com | the leading full
Cool CSS Image Pop-up
Cool CSS Image Pop-up I discovered this effect at www.stunicholls.myby.co.uk this is my modification that I used for one of my real estate sites. This is an Pop-UP image effect that is similar to the ones you see using JavaScript on mouseover or on click but THIS ONE uses ONLY CSS! When you hover your mouse over the thumbnail the larger image appears beside it. Move your mouse off the thumb
Lucky bag::blog: CSS で画像ポップアップ
JavaScript を使わずに、CSS を使ってサムネール画像の拡大画像をマウスオーバーで表示せる方法「CSS ~ Image Pop UP」を参考に、拡大画像をその場で表示させるサンプルを作ってみた。 popup.html 最初に拡大画像を高さ 1px 幅 1px に指定しておき、hover で正寸を指定させることによって実現させている。ちなみに、hover の指定に背景色を指定しないと IE でうまく動作しない。 .photo a.popup:hover { background-color: #fff; } 何となく微妙な感じだけど、サムネールをいっぱい並べて画面遷移なしで拡大画像をみせたい場合に使えるかも。 あの頃のように… - CSS で画像ポップアップさせる (2005年6月10日 19:02) CSS で画像ポップアップ私の中ではかなりの革命です。なぜ今までこれに気が付かな
最速インターフェース研究会 :: テンプレートエディタを作ってみた
こんなのを作ってみました。 http://la.ma.la/misc/tmpledit/ HTMLソースを貼り付けて、ページの構造をダンプすることが出来ます。 とりあえずどんな感じかわかるように、このBlogのアドレスを入れてあるので取得ボタンを押すと出て来る様になってます。XMLHTTPでソース受信してるので外部ドメインのソース取得は無理です。ローカル保存+IEの場合は外部ドメインのソースも解析できます。 こういう感じの作るやつ、と言えばわかりやすいかも。 http://d.hatena.ne.jp/kamioka/20050609/1118324980 まあ、これがやりたかっただけなのですが、ついでにCSSの編集もできるようにしてみました。CSS編集モードに切り替えると、タグ名とクラス名とIDを確認しながらプレビューしつつその場でCSSを編集できます。 CSS適用ルーチンはこれの丸パク
画像なしで角を丸くするCSSテク:<wbr> Nifty Corners -<wbr> PLAYNOTE
普通は「画像 + DIV要素を入れ子 or TABLE」で無理矢理実現させる角が丸いボックス要素を、一切画像を使わずにCSSだけで実現する手法が紹介されててちょっと感動したので実験。その名も Nifty Corners 。 タグ打ちが死ぬほど複雑＆面倒臭いが、同ページで紹介されているJavaScriptを使えば、適用する対象のブロック要素の名前と背景色・前面色を指定するだけでタグを自動生成してくれる。これは便利かも。 中身のないインライン要素（<b>）を大量に使っていてW3C的にアウトだからこのサイトでは多分使わないけど、どっかで使えるかもだから覚えておこう。 上記サイトで紹介されている丸角サンプル 見出し＋本文のセット メニューバーも丸くするとオシャレ 角が丸くてキュートなメールフォーム Nifty Corners を多用した併せ技。カッコいい。
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
CSS Spriteを活用しよう - DesignWalker
IEでもFirefoxでも崩れないレイアウト :: TextOcean
テンプレート/CSS解説
はてなブログ | 無料ブログを作成しよう