1ピクセルのずれも許せないWebデザイナのためにResetting Again | エンタープライズ | マイコミジャーナル
CSSがWebページデザインの主要技術になってから、WebデザイナはCSSの振る舞いに頭を抱えなかったことはない。もっとも悩ましいのは、同じCSSでもWebブラウザごとに表示が異なるところにある。なるべく同じ表示を実現しようと、一見すると奇っ怪にみえる設定を加えたり、意味がないような行を加えたり、背景色と同じ色の画像を調整用に追加したり、涙ぐましい努力は後を断たない。 世界中のWebデザイナやフロントエンドデベロッパが同じ悩みを抱えているから、Webブラウザ間の互換性を実現するCSSライブラリがいくつも登場したり、ベストプラクティスをまとめたCSSリファレンスドキュメントが登場したり、CSS擬似クラスといったテクニックが紹介されたり、IEのCSS/HTML非準拠に対処するライブラリが登場するといったことが相次いで起こっているわけだ。 しかし、ほかのライブラリに依存せずにいちから自力でCSS
小粋空間: CSS の after 擬似要素で回り込みを解除する
float プロパティで設定したテキスト等の回り込みを、CSS の after 擬似要素を用いて解除する方法を紹介します（通常の解除方法も併せて掲載しています）。 １．「回り込み」とは 例えば、画像の左（または右）にテキストを表示することを「（テキストの）回り込み」と呼びます。 マークアップ <p> <img src="hogehoge.jpg" alt="image" style="float:left" /> 回り込みテキスト～（略）～回り込みテキスト </p> 表示 回り込みテキスト回り込みテキスト回り込みテキスト回り込みテキスト回り込みテキスト回り込みテキスト回り込みテキスト （X）HTMLでこのような表示を行う場合、先に出現する要素（ここでは img 要素）に対して float プロパティを与えます。float プロパティは、指定された要素を左または右に寄せて配置する際に使用しま
技術メモ帳 - URI の data スキーム
今日初めて知ったのだが、data スキームを使えば URIにデータを組み込めるそうだ。 以下のようにすれば、 dataスキームで、任意の画像を表示させる事が出来る。 <img src="data:image/gif;base64,BASE64データ"> たとえば、 google のロゴを dataスキーム を 利用して表示したかったら、 $ curl -s http://www.google.com/images/logo_sm.gif | openssl base64 | tr -d '\n' こんな感じで base64 化したロゴ画像データを 該当部分に、貼付ければ良い。 <img src="data:image/gif;base64,ここに貼付ける。"> 該当RFC: http://www.ietf.org/rfc/rfc2397.txt
複数の画像を１枚にて表示用のCSSも吐いてくれるHTTPパフォーマンス向上ツール「CSS Sprite Generator」:phpspot開発日誌
複数の画像を１枚にて表示用のCSSも吐いてくれるHTTPパフォーマンス向上ツール「CSS Sprite Generator」 2007年10月03日- Website Performance | CSS Sprite Generator 複数の画像を１枚にて表示用のCSSも吐いてくれるHTTPパフォーマンス向上ツール「CSS Sprite Generator」。 GoogleはHTTPコネクションを減らすため、画像は一枚で出力しています（参照）。 同じことをやろうとすると結構面倒ですが、複数の画像をZIP圧縮してアップロードするだけで、画像の結合＆CSS出力を行ってくれるサービスが登場しました。 使い方は簡単。画像ファイルをZIPでまとめて圧縮後、アップロードします。 positionに関するCSSが出力されています。 ページ下部には画像を表示したい位置に「background: url〜
TRANS - * { magin: 0;}だけでは物足りない！zoom: 1;を使おうよ！
IE6からIE7が今後本格的にマーケットシェアを取って行くことを考えると、IE7の仕様やバグを考えた上でのマークアップが欠かせないとは思います。でも、僕らはまだIE7がどんなものかが分からない。そのため、とりあえず* { zoom: 1;}を指定しておくことが安全策なのかもしれません。 IE7のZoom機能で、見事にこける。 先日、うちの本体のサイトを更新し終わった際に、スタッフから「あれ、しゃらくのサイトずれてるよ」と指摘されました。更新箇所が多く、CSSも多少いじくったので、どこか消してしまったのかもしれません。そこで、自分のブラウザで確認するも、どうも問題が再現できない。そのスタッフのブラウザを見ると、こんな感じになっていました。 僕のFirefoxで見てみても問題ないし、そのスタッフが使っているIE7でも問題なし。「うーん」と悩んでみるものの、意外と答えは簡単なところにありました。
WEB サービスを作るために必要な 108 の法則 ( 1 ) / glover
インターネットサティスファクション！（ADSL って超早いネ！） ということで、先日ペパボでは新サービス開発に向けてのプレゼン大会が催されました。 レンタルサーバー、ブログ、ネットショップ、SNS など、数多くのインターネットサービスを提供してきたペパボが、また新たな未来へ進みだす、まさに Tomorrow Never Knows な大会なのであります！ プレゼン大会を行うという案内は 8 月下旬に社内 SNS 上で告知され、それを機にペパボの野心家たちはメラメラと闘志を燃やし、さっそくその日には決起集会という名目で、居酒屋に集まり、未来の新サービスに向けて熱く語り合ったのでした。（主にガッキーのかわいさについて） 一方でプレゼン大会が近づくにつれ、プレゼンターたちは他の人がどんなサービスをプレゼンするのかが気になり、裏では盗聴行為や買収工作、マイミクの削除、不幸の手紙の送信などが行われ
ウノウラボ Unoh Labs: hasLayoutとは何か
yamaokaです。 CSSに携わっている方なら、Holly hackを使ったことがあるかもしれません。 /* Hides from IE5-Mac \*/ * html .foo { height: 1%; } /* */ Internet Explorer（以下IE）で、レイアウトに問題のある要素に 上記のようなスタイルを指定をすると、 あら不思議、まともな表示がなされるというものです （上記のままではIE7に対応していませんが…）。 さて、どうしてレイアウトが意図したとおりに行われるようになるのでしょうか。 IEのhasLayoutプロパティ IEでは、全ての要素が 「hasLayout」という読み取り専用のプロパティを持っています。 これはそれぞれの要素がレイアウト情報（＝要素の幅・高さなどに関する属性情報）を 保持しているかどうかを示す値で、 デフォルトの状態では「hasLayo
はてなブックマーカーなら当然知ってる25個の技をわざわざ書いてみた - 記憶する部屋 - はてブクロニクル
はてなグループの終了日を2020年1月31日(金)に決定しました 以下のエントリの通り、今年末を目処にはてなグループを終了予定である旨をお知らせしておりました。 2019年末を目処に、はてなグループの提供を終了する予定です - はてなグループ日記 このたび、正式に終了日を決定いたしましたので、以下の通りご確認ください。 終了日: 2020年1月31日(金) エクスポート希望申請期限:2020年1月31日(金) 終了日以降は、はてなグループの閲覧および投稿は行えません。日記のエクスポートが必要な方は以下の記事にしたがって手続きをしてください。 はてなグループに投稿された日記データのエクスポートについて - はてなグループ日記 ご利用のみなさまにはご迷惑をおかけいたしますが、どうぞよろしくお願いいたします。 2020-06-25 追記 はてなグループ日記のエクスポートデータは2020年2月28
HTTPのリクエストを最小化するためのTIPS:phpspot開発日誌
How To: Minimize HTTP Requests ? The Most Important Guideline for Improving Web Site Performance In my previous article 7 Easy-to-Apply Tips to Improve Your Web Site Performance, I described methods to achieve better client-side performance. HTTPのリクエストを最小化するためのTIPS。 イメージマップを使って読みこむ画像数を減らす 複数の画像を読み込んで、画像に個別にリンクするより、イメージマップで読みこむ画像を減らしてリクエスト減少 画像を１個にしてCSSで背景で領域指定する 「Googleの検索結果ページは画像を一つしか読み込んでいない」の方法
ActiveXパッチがあたったIEでFlashなどを従来通り表示させるためのJavaScript（Flashのバージョン検出機能付き）
2006年4月のActiveXパッチがあたったIEでFlashなどを従来通り表示させるためのJavaScript（Flashのバージョン検出機能付き） Eolasの特許回避のため、2006年4月の月例パッチでInternetExplorerのActiveX周りに変更が加えられました。 具体的には、従来のようにHTMLページ内にobjectタグやembedタグでFlashを表示するように記述した場合、Flash上にマウスカーソルを持って行くと「このコントロールをアクティブ化して使用するにはクリックしてください」 と表示され、そのFlashがクリックを受け付けたり、マウスの位置情報を取得したりするためには（インタラクティブに振る舞うには）、一旦Flash上でクリックなどをしてFlashコントロールをアクティブ化しなくてはならなくなりました。 これの回避方法として、外部JavaScriptによっ
cyano: Google Analyticsで高度なトラッキングをする方法
ユーザーがページをロード開始してから閲覧できるようになるまでのロード時間はユーザーが自分のページを快適に閲覧できているかどうかを示す重要なファクターです。Google Analyticsのイベントという機能を使用することで、ユーザーの実際の体感速度を可視化することができます。 たとえば、このブログのある期間における体感速度のグラフはGoogle Analytics上で以下のように出ています。 44.84%のユーザーは100〜499msでロードできており、1秒未満でロード完了しているユーザーは合わせて73.49%であるとわかります。また、3秒以上かかっているユーザーも7.42%居ることも分かります。3秒以上ロードにかかるようだと離脱率も高くなるので、7.42%のユーザーに対して何かの施策が必要であるということも分かります。 このように、ユーザーが実際感じている体感速度を可視化することで、この
ITmedia Biz.ID：オフィスソフトで100段落の“長文”ダミーテキストを自動生成する
WordやPowerPointでちょっと何かを試したいとき、適当な文章（ダミーテキスト）を作成したり、既存の文章からコピペする場合がある。実はもっと簡単にダミーテキストを生成する方法があるのだ。 WordやPowerPointで資料を作っているとき、ちょっとしたダミーテキストが必要になる場合はないだろうか。また、後輩に使い方を教えたり、自分で新機能を試したりするときも適当なサンプルが必要になったりする。そんなとき、適当に文章を作成したり、既存の文章からコピーする場合が多いが、実はもっと簡単にダミーテキストを生成する方法があるのだ。 オフィスソフトには、ダミーテキストとして利用できるサンプルテキストの生成機能が用意されている。まずはWordとPowerPointの場合だが、文頭に「=rand()」と入力してみよう。オートコレクト機能が有効になっている場合は、ダミーテキストが生成されるはずだ。
画像もDBに格納して管理する －扱いがめんどうなLOB(ラージオブジェクト)は使わない方法も含め
Ywcafe.net This Page Is Under Construction - Coming Soon! Why am I seeing this 'Under Construction' page? Related Searches: Health Insurance High Speed Internet Work from Home Healthy Weight Loss Best Penny Stocks Trademark Free Notice Review our Privacy Policy Service Agreement Legal Notice Privacy Policy
[ CSS ] pre でも改行を生かしたまま折り返す
pre 要素で囲んだ一行が長い場合、親要素の幅に収まりきらず、スクロールバーが出てしまいます。 なんとか親要素の幅内で収めたい。 で、適当な位置で改行するように、 pre { overflow: auto; white-space: normal; } なる CSS を追加したのですが、今度は、私が追加した任意の改行まで無くなってしまいました。 調べてみると、下のようなコードを追加すると、改行を生かしたまま折り返してくれます。 pre { white-space: -moz-pre-wrap; /* Mozilla */ white-space: -pre-wrap; /* Opera 4-6 */ white-space: -o-pre-wrap; /* Opera 7 */ white-space: pre-wrap; /* CSS3 */ word-wrap: break-word;
![[ CSS ] pre でも改行を生かしたまま折り返す](https://cdn-ak-scissors.b.st-hatena.com/image/square/4859fdea696635237235f320155e9d5ee90f1a78/height=288;version=1;width=512/https%3A%2F%2Fbowz.info%2Fwp-content%2Fuploads%2F2015%2F10%2Fpre-wrap-win-ie7.gif)
ウノウラボ Unoh Labs: フォームのユーザビリティを改善する10のTips
GT Nitro: Car Game Drag Raceは、典型的なカーゲームではありません。これはスピード、パワー、スキル全開のカーレースゲームです。ブレーキは忘れて、これはドラッグレース、ベイビー！古典的なクラシックから未来的なビーストまで、最もクールで速い車とカーレースできます。スティックシフトをマスターし、ニトロを賢く使って競争を打ち破る必要があります。このカーレースゲームはそのリアルな物理学と素晴らしいグラフィックスであなたの心を爆発させます。これまでプレイしたことのないようなものです。 GT Nitroは、リフレックスとタイミングを試すカーレースゲームです。正しい瞬間にギアをシフトし、ガスを思い切り踏む必要があります。また、大物たちと競いつつ、車のチューニングとアップグレードも行わなければなりません。世界中で最高のドライバーと車とカーレースに挑むことになり、ドラッグレースの王冠
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Ywcafe.net
[CSS]横並びのレイアウトをfloatで配置するTIPS -Floater
知っておくと便利なHTMLで書ける特殊文字一覧『HTML/XHTML Character Entities』 | P O P * P O P
フォームボタンCSSデザインするテクニック （Rediscovering Button Element） - youmos
Purchase Intent Data for Enterprise Tech Sales and Marketing - TechTarget