[CSS]IEで、min-widthやmax-widthを実現する方法
CSS-Tricksで、IE用に「expression」を使用して、min-width、max-widthを実現する方法がエントリーされていました。 The Perfect Fluid Width Layout デモページでは、最小幅780pxを維持しつつ、最大幅1280px以上になると残りの箇所は背景画像が表示されるようになっています(参照：キャプチャ画像)。 min-width、max-widthの箇所は、下記のように記述されています。 #page-wrap{ background: white; min-width: 780px; max-width: 1260px; margin: 10px auto; width:expression(document.body.clientWidth < 782? "780px" : document.body.clientWidth > 12
IE で、透明なオーバーレイ要素に mouseover 、 mouseout イベントが発生しない - IT戦記
はじめに IE では透明なオーバーレイ要素のマウスイベントのハンドリングがおかしい たとえば 以下のページで表示されている要素には透明な div がオーバーレイされています。そして、その要素に mouseover が発生すると背景を青くしています。 試してみてください。 IE では、想定の挙動ができていないことが分かると思います。 http://amachang.sakura.ne.jp/misc/mouseoutover/ ソースコードは以下。 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Test</title> <style> p { border: solid 10px gray; background: pink; padding: 10px; margin: 10px; line-height: 2; }
かわいい上にハイクオリティなフリーのアイコン集
ブログ用からEコマース用まで、極小サイズ、手書き風、折り紙風などシンプルでかわいいフリーのアイコンをIconDockから紹介します。 IconDock キャプチャのアイコンは「20 Free Marker-Style Icons」 IconDockで配布されているアイコンから、フリーのものだけを下記にピックアップしました。 有償のアイコンでは更に素敵なアイコンセットが用意されています。 Stock Icon（有償のアイコンページ）
WEBデザインをプロっぽく仕上げるPhotoshopのグラデーションファイルの厳選まとめ | 日刊ウェブログ式
フォトショップのグラデーションファイルは作業を早めるのに役立ちますし、テンプレートだと色の参考にもなります。PhotoshopやGIMPの色合いが美しいグラデーションを厳選してまとめました。 追記: 2010/12/04 グラデーション追加/リンク切れチェック Photoshop Gradients Nice photoshop gradient set Download Source Web 2.0 Photoshop gradients Download Source Ultimate Web 2.0 Gradients - FREE Download Download Source 黄金比グラデーション・白銀比グラデーション | DesignWalker Download Source 日本の伝統色グラデーションファイル | DesignWalker Download Source
画像を一切使わずにCSS3だけでドラえもんを描いてみた！ - 裏技shop DD
昨日の画像を使わずにCSS3だけで作ったサイト「NetaGear」に引き続き、本日もCSS3の記事です。ここ最近の私のマイブームはCSS3で色々やってみることなんですが、CSS3を使えば画像なんて使わずに絵が描けるんじゃない？という疑問を抱き実際に作ってみました！ 今回作成したのは日本人なら誰もが知っている国民的キャラクターの「ドラえもん」です。使うものはXHTML+CSS3だけで一切の画像は使いません。画像を使えば簡単にできるのは言うまでもないことですが、すべてソースコードから成り立つことが前提です。 CSS3で作ったドラえもんの完成品！ CSS3 ドラえもん 最近のドラえもんというより、大山のぶ代さんが声をやっていた頃のドラえもんの方が好きなので、そっちをイメージして作りました。注意事項としてはGoogle Chromeとfirefoxで閲覧してください。Operaでは一部CSS3に対
ついにウェブでも有名書体が使える！Webフォントサービス Fonts.com Web Fonts β版が運用開始 - フォントブログ
フォントブログ閉鎖と一部記事の移管について 平素はフォントブログをご覧いただき誠にありがとうございます。 数年前よりブログの更新を中止したまま、諸般の事情で過去の記事は公開をしていましたが、 時代に合わない内容や、すでに古い情報をこのまま残しておくのは良くないと考え、 フォントブログを閉鎖することにいたしました。 これまでお世話になった方々、私に様々な機会を与えてくださった方々、 そして約25年間に当ブログをご覧いただいた方々に心より感謝いたします。 私自身2014年に関東から地元へUターンをし、 書体デザイナーやフォントメーカーの方、文字関係者の方と直接お会いする機会が減ってしまったこと、 また私自身の環境の変化により、以前のように情報収集をする時間の確保が難しくなってしまいました。 フォント好きとして初心に帰り、過去の一部の記事は順次個人サイト (PETITBOYS) のブログのほうへ
30分でできる！Webサイトを高速化する6大原則 (1/4)
Webサイトを制作するとき、「パフォーマンス」を気にしたことがあるだろうか？ もしまったく気にしたことがないなら、気をつけた方がいい。閲覧に時間のかかる“遅いWebサイト”はユーザーにフラストレーションを与え、閲覧をやめさせてしまう恐れがある。 下記のグラフは、「Simple-Talk」という海外のオンラインメディアで発表されたユーザー調査の結果だ。アンケートページの表示にかかる時間を意図的にコントロールし、表示時間によってユーザーが感じるフラストレーションの違いを調べたものだ。 縦軸がフラストレーション（10段階）、横軸が表示までの時間を表している。1～5秒以内にページが表示された人に比べ、ページ表示までに5秒以上かかった人は2倍以上もフラストレーションを感じている。フラストレーションがあまりに高ければ、せっかく何らかの目的を持って訪れてきたユーザーも待ち切れずにブラウザーを閉じてしまう
IE5.5, IE6, IE7, IE8の確認が同時にできる -IETester | コリス
IETesterは、IE5.5, IE6, IE7, IE8beta1の確認が同時にできるアプリケーションです。 IETester [ad#ad-2] IETesterを利用するには、上記IETesterのページの「Download IETester」から「install-ietester-v0.2.exe」ダウンロードし、IETesterをインストールします。 IEのバージョンの切り替えは、「New Tab」から切り替えることができます。 簡単に使用しただけですが、IE5.5, IE6, IE7, IE8beta1のレンダリングの違いを確認できました。 バージョン0.2の動作条件は、Windows XP or Vista + IE7以上となっています。XP + IE6の場合、IE7, IE8のモードが動作しません。 Windows XP + IE7, IE8beta1の環境で使用したとこ
Adobeのブラウザ表示チェックサービスBrowserLabが凄い件 - よねのはてな
Adobeさんが、クロスブラウザ表示テストサービス BrowserLabを開始したので使ってみました。 https://browserlab.adobe.com/index.html このサービスを使うと、以下のブラウザでの表示テストが可能です。 Windows XP Firefox 2.0（2.0.0.18） Firefox 3.0（3.0.13） Firefox 3.05（3.5.3） Internet Explorer 6.0（6.0.3790.3959） Internet Explorer 7.0（7.0.5730） Internet Explorer 8.0（8.0.6001.18702） Chrome 3.0（3.0.195.27） Mac OS X Safari 3.0（3.2.3） Safari 4.0（4.0.3） Firefox 2.0（2.0.0.18） Firefo
全てのIT・Web関係者に見つめなおして欲しい「Don’t Make Me Think」 - Feel Like A Fallinstar
”Don't Make Me Think” 訳すと、「いちいち私に考えさせるな！ボケ！」といったところでしょうか。 これは、2001年にSteve Krugが出した書籍の名前なのですが、この「ユーザにいちいち考えさせない」ことを忘れているか、いないかがソフトウェア・Webサイトの勝負を分ける最も大きな分岐点の1つです。 人間は日々の生活の中で、いちいち物を操作したり情報を見るたびにあれこれ考えたくなんてありません。 ユーザをつまらない操作やナビゲーションで考えされればさせるほどストレスは増大し、企業への信用は急激に失われます。 今日は、この”Don't Make Me Think”について、 如何にユーザが考えることを嫌うか 「考えさせない」とはどういうことか を、これまで見てきたユーザ検証の結果なども交えて、少しばかり書いてみようと思います。 あらゆる「無駄な」思考が、ユーザを苛立たせ、
Web2.0 - Logo Creatr
Komponenten einrichten! Auf dieser Seite siehst du eine Übersicht aller zur Zeit verfügbaren Anwendungen, die du in deine Streams einbinden kannst. Hilfe zu den einzelnen Anwendungen und den Komponenten findest du in der umfangreichen Hilfe. Einfach auf den Button hier unten klicken. Hilfe zu den Anwendungen » Slides sind Präsentationen wie Powerpoint oder Impress die unterschiedlich konfiguriert
Yahoo!、Google、Twitterっぽいロゴがつくれるジェネレータ - IDEA*IDEA ～ 百式管理人のライフハックブログ
ドットインストール代表のライフハックブログ
border-collapseについて再度調査してみた | A Day in the Life
October 21, 2009 当ブログの過去のエントリーborder-collapseの内容は2006年当時の内容であるため、検証したブラウザが少々古い物となっています。 なので自分の環境で出来る限りのキャプチャーを取ってみました。検証したブラウザは以下の通りです。クリックするとキャプチャー画像をご覧になれます（画像は2倍に拡大してあります）。 Windows IE6 Windows IE7 Windows IE8 Windows Firefox2 Windows Firefox3 Windows Firefox3.5 Windows Google Chrome3 Windows Opera9.6 Windows Safari4 Macintosh Safari4 Macintosh Firefox2 Macintosh Firefox3 Macintosh Firefox3.5 結果
「サイトの横幅」再論：950px時代のウェブデザイン［絵文録ことのは］2009/01/14
以前、サイトの横幅を640ピクセルにする理由――統計と現状に基づく結論［絵文録ことのは］2006/11/25で、「実際にサイトを閲覧している人のブラウザーの横幅と、ブラウザーによる印刷上の制約から、特に画像は左端から640ピクセルくらいに収まるようにした方がよさそうだ」という結論に落ち着いた。これには、一行字数が多すぎると読みづらい、という、紙媒体の扱いも多いわたしの経験的な見方もある。 もちろん、これにはリキッドデザイン主義者の方から「ページ幅を指定するようなデザインであること自体が悪」という反応があったり、「印刷用CSSを使おう」といった反応があったりしたのだが、「印刷時のことを考えれば640pxという制約がある」という結論は特に揺るがなかった。 その後、今まで約2年経った。閲覧者の環境も変わり、当時主流だったIE6にはなかった「用紙サイズに合わせて印刷」機能を備えたIE7ユーザーも増
WEBページのサイズ
Vol.1 Webページのサイズについて考える ピクセルをミリメートルに換算する Webデザインにおいてサイズというのは悩ましい問題である。特にDTPデザインに慣れた人にとっては、A4とかB4という紙のサイズに相当する概念がないので、まず「いったいどれくらいの大きさで作ったらよいのか」と戸惑うことが多いようだ。それでなくても、Webページのサイズにはモニタの解像度やらブラウザのバージョンやらいろいろな問題がからんでおりことのほかややこしい。Webmonkeyにも「ブラウザをサイズの面から評価する」というコラムがあるくらいだから、昔からWebデザイナーはサイズという問題に頭を悩ませてきたことがわかる。しかし、ここではこの問題をそれほど厳密には取り扱わず、ごくアバウトに考察していきたいと思う。 さて、DTP系のデザイナーがWebページのサイズを決める時、まず留意しておかなければならないのはWe
CSS - tableのwidthはどう解釈されるか | Try | d-spica
tableにCSSでwidthを指定した場合，どう解釈されるかのテストです。DOCTYPEはXHTML 1.0 Strict，XML宣言は省略しています。 Tried at 2007-06-06 まず，tableのマークアップは次の通り <table> <col class="col1" /> <col class="col2" /> <col class="col3" /> <col class="col4" /> <col class="col5" /> <tr> <th scope="col">項目1</th> <th scope="col">項目2</th> <th scope="col">項目3</th> <th scope="col">項目4</th> <th scope="col">項目5</th> </tr> <tr> <td>data11</td> <td>data21
バナーサイズの国際標準
バナーのサイズについて 最終修正日 2009.5.22. バナーとは 国際標準バナーサイズ一覧 国際標準サイズ一覧（画像） バナーとは Bannerは英語で旗の雅語です。サイトの旗です。 そして、日本のCG系に多い、200x40のバナーは日本のローカルサイズなのですね。なので海外ではアニメマニア以外はそのサイズのバナーを用意していません。「世界」と「一般」を意識するなら88x31のバナーも用意しましょう。 ところで海外の個人サイトのバナーサイズは恐ろしくバラバラで、たいていは海外は200x40よりは大きいものです。そのせいでしょうか、海外ではアニメ系でもテキストのみのリンク集が多いです。各サイトのバナーを張るとレイアウトがめちゃくちゃになるからでしょう。読み込みも遅そうですしね。 実はバナーには国際標準サイズというものがあります。 バナーというのは、リンクに添える画像と思われていて、実際個
標準準拠・後方互換モード各々の CSS 解釈の違いをまとめたドキュメントを共有
2007-07-27T21:11:11+09:00 最近のブラウザには DOCTYPE 宣言の有無や種類で大きくわけて2種類の表示モードを切り替え、CSS や HTML の解釈を変える機能が備わっています。マイクロソフトは同様の機能を DOCTYPE スイッチとしており、一般的にもそう呼ばれることが多いように感じます (この記事でも DOCTYPE スイッチとします)。 DOCTYPE スイッチはオンの状態で standards mode (標準準拠モード) に、オフの状態で quirks mode (後方 (過去) 互換モード) になります。標準準拠モードは仕様に準拠した厳格な表示モード、後方 (過去) 互換モードは仕様に準拠していない古いブラウザとの互換を目的とした表示モードです。つまり DOCTYPE 宣言の記述が無いようなコンテンツに対しては、仕様に準拠していない古いブラウザの解釈
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
リゾレーヌ サプリを口コミだけで判断してはダメ？バストアップ効果が口コミ通りなのか試してわかったことを包み隠さず公開します！
