快速ページ表示のためのblank.gifのdata URI化、最短表現や処理の重さを実際にテストしてみた | 初代編集長ブログ―安田英久
今日は、Webページを素早く表示するために、lazyloadやスプライトで使うblank.gif画像をdata URI化する手法に関して。モダンブラウザで表示に問題のない最短文字数とデコード処理にかかる時間を調査してみました。ちょっと技術的です。 blank.gifというと、古い人には「スペーサーかよ！」と思われるかもしれませんが、今でも画像のlazyloadに使ったり、スプライト画像のベースに使ったりと、意外と使うものです。 このblank.gifを「data URI化」するとページ表示が早くなるんじゃないかと思い、調査したりテストしたりしてみました。結論としては、次のようなものでした。 モダンブラウザで正しく表示されるblank.gifのdata URIは最短74文字の次の表現：data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAA
フッターの下の謎の隙間を排除せよ！
2014年6月20日に作成されたページです。 情報が古かったり、僕が今以上のど素人だった頃の記事だったりする可能性があります。 全件リストはこちら。 どもです。 というわけで、本日はHTMLとCSSの話。 SPサイトを作ろう、という話になりまして、 数カ月前に作ったPCサイトのデザインを確認しながらデザインしていたのですが。 こんな隙間、コーディングしたときには無かったハズ…… サイト運営に支障はありませんが、これは美しくない。 取り敢えずエレメントを確認してみました。 以前、解析系スクリプトをfooterの下、bodyの上に突っ込んだのですが、 それらが勝手にimgとspanを出力してしまったようです。 CSSからbody直下のimgとspanにposition:absoluteを指定。高さをなくします。 これで解決しました。 特に、スクロールバーが表示されているのにフッター下に隙間がで
HTML上でPHPを動かす(さくらサーバー：改訂）
ちょうど１年前にさくらサーバーで、SSHを使ってHTML上でPHPを認識させるための記事を書きました。ちなみにさくらサーバーのプランはスタンダード以上です。ライトプランでは動作を確認していません。 当時は問題なかったのですが、昨年の夏ごろ、PHPの脆弱性により不正アクセスされるケースがさくらサーバーで確認されるようになりました。 これは、さくらサーバーの不備ではなく、独自でPHPを設置した際に、そのバージョンが古く、新しいバージョンにしなかったというのが主な原因です。 私もすっかり自分でPHPを設置したことを忘れていたため、不正アクセスの餌食になりました。 随分時間が経過してしまったんですが、改めて、さくらサーバーでHTML上でPHPを動かすための方法をまとめたいと思います。 php.cgiの作成＆アップロード テキストエディタに下記の２行を記述して、さくらサーバーの wwwフォルダの直下
さくらインターネットのレンタルサーバーでHTMLのファイルでもPHPが使えるようにする方法 | 9ineBB
さくらインターネットのレンタルサーバーは特殊でした！ 他のレンタルサーバーだと.htaccessに2行ほど追加するだけでHTMLでもPHPが実行できるようになるのですが、さくらインターネットでは無理でした。 たぶんcgi版でPHPが動いてるから？ さくらインターネットでHTMLファイルでもPHPを実行できるようにする方法 まずは普通のサーバーだったらHTMLでPHPが実行できるようにする方法を紹介しておきます .htaceessに以下の2行を追加する AddType application/x-httpd-php .php .html AddHandler application/x-httpd-php .php .html さくらインターネットの場合は、.htaccessとphp.cgiファイルが必要 まずはCGIファイルをゲットしなければいけません さくらインターネットのサーバーに F
H76: クライアントサイドで瞬間的にリダイレクトするために、meta 要素の refresh を使用する | WCAG 2.0 達成方法集
この達成方法の目的は、クライアントサイドで利用可能なリダイレクトを、利用者を混乱させることなく用いることである。リダイレクトはサーバーサイドで実装するほうが望ましいが (SVR1: クライアントサイドではなく、サーバーサイドで自動リダイレクトを実装する (SERVER) を参照)、コンテンツ制作者がサーバーサイド技術を管理しているとは限らない。 HTML 及び XHTML では、meta 要素に http-equiv 属性には「Refresh」という値、content 属性の値には「0」(ゼロ秒を意味する) を、ブラウザが要求すべき URI を後に伴って指定することができる。重要なのは、新たなページを読み込む前にコンテンツが表示されるのを避けるために、タイムアウトをゼロに設定することである。リダイレクトのコードを指定したページには、リダイレクトに関する情報のみを含めるべきである。 コード例
携帯サイトの作り方
ここでは、携帯向けサイトの作り方を簡単に紹介します。 PC向けサイトを作ったことのある人を対象とさせていただきます。 まず、携帯版のファイルはPC版と完全に分けましょう。 共通のファイルで済まそうとするのはかなり無理があります。 PCと携帯の違い いくつかあるので順に説明します。 ファイルサイズの制限 これが一番大きなところでしょう。 後で詳しく説明しますが、携帯向けサイトでは1ページ当りのファイルサイズを 画像も含めて5Kbytes程に収めなければなりません。 5Kbytesでは足りない、と思われる方も多いと思いますが 試しに5Kbytesの文章を書いて携帯で表示させてみましょう。 携帯の小さい画面から見ればこれでもかなりの情報量だと感じるはずです。 スタイルシート関連 携帯向けサイトでは、一切のスタイルシートが使えません。 もともと、スタイルシートとは細かな装飾方法をアレンジするための
iPhone,iPad用サイトでlabelタグが使えない件-パソコン・office・PHP・フリーソフトなどの各種豆知識をご紹介｜SGブログ-
フォームを作る際に、ユーザビリティを激的に向上させるひとつに、チェックボックスやラジオボタンと一緒に使うlabelタグがあります。 例えば↓これが普通のチェックボックス チェックして下さい これにlabelタグをつけてあげると↓こんな感じ チェックして下さい こうすると、「チェックして下さい」をクリックしても、チェックボックスにチェックが入ります。 ただ、iPhoneやiPadに搭載されているブラウザのMobile Safariでは、このラベルタグが使えません。。 使えるようにして欲しいですがしょうがないです。 なのでJavaScriptで解決！ 手っ取り早くjQueryでliにclickイベントを発動させてあげるだけ！ jQueryを読み込んでいる前提で、下記の感じで <!-- ↓html↓--> <ul> <li><input name="test" value="test" type
.htaccess実践活用術
現在、WEBサーバのシェアとしてはApacheが過半数を占めています。英国Netcraft社の調査によると2016年4月におけるApacheのシェアは49.15％である（active sitesにおけるシェア。参照：Netcraft: April 2016 Web Server Surveyy）。 2位のnginxを大きく引き離しています。このような世界的に人気の高いApacheをウェブマスターとして使いこなす方法として、このホームページでは.htaccessの利用法について解説します。httpd.confに触ることのできない一般のウェブマスターさんを対象に、「アクセス制限」「カスタムエラーページの設定」「MIMEタイプの設定」など実用度の高い利用法に絞って紹介します。「何をしたいか」のかを中心に、.htaccessの利用法を説明する構成になっています。
印刷用 CSS で背景画像を印刷させる方法 - lucky bag
media="print" な印刷用 CSS を用意している場合、そこに背景画像を設定していたとしても印刷されない。ヘッダに画像を使って CSS で文字を非表示にしているウェブサイトの場合、ユーザーがそのサイトのヘッダ画像を含めて印刷したいのに、タイトルが味気ないテキストだけで印刷されるのを不満に思うとしたら、どう解決すれば良いのかってことで下記リンク先のバッドノウハウ。 wg:Printing CSS background images (sort of) カラクリを大雑把に言うと、印刷用 CSS の指定で当該箇所を display:list-item; にして、list-style-image に印刷させたい画像を指定するって感じ。以前紹介した「letter-spacing を使って背景画像置換」を使って、テキストを非表示にするんだけど、これって IE だと 1 バイトの文字はうまくい
HP作成講座 > 画像系タグ > 画像のみ右クリック禁止
Home > HP作成講座 > 画像系タグ > 画像のみ右クリック禁止 ●右クリック禁止 サンプル ●右クリック禁止(アラート表示) サンプル
KAYAC Engineers' Blog
SREチームの長田です。 今回は、カヤックのメンバーが業務で使うために開発・公開しているOSSなプロダクトをまとめて紹介しようという企画です。 KAYAC organization以下にあるものだけでなく、在籍中のメンバーが作ったものもひっくるめて、実際に業務で使用しているものを中心に 紹介しています。 以下の3つのカテゴリに分けて記載しています。 各カテゴリ内はアルファベット順です。 ツール編 人間が手動で実行するもの アプリケーション編 どこかに常駐して、イベントを受け取ると動作するもの ライブラリ編 ツールやアプリケーションから参照されるもの 集めてみたらそこそこの量になったので、本記事では詳細な説明は省いています。 GitHubリポジトリのURLや関連記事のリンクを併記していますので、より詳しく知りたい場合はそちらを参照ください。 (...) 内はそのプロダクトで使用している主なプ
知らない人は損してる？コーディングが3倍速くなるZen-Codingを導入してみた - EC studio デザインブログ
最近になって急に盛り上がってきているZen-Codingをみなさんご存知ですか？ Zen-CodingはHTML/CSSをショートカット＋スニペットで簡略化してコードを書くことができるライブラリです。 独立したテキストエディタソフトではなく、既存のHTML/CSSエディタにプラグイン的に導入するものです。 Zen-Codingというのもがどういうもので、どんなすごいものなんだ、というのはこちらの動画を見てください。 ※音が出ますのでご注意ください。 Zen Coding v0.5 from Sergey Chikuyonok on Vimeo 一体何がおこわれているのか？という感じだと思われますが、今回の記事ではこのZen-Codingの導入方法と使い方の一例を紹介します。 Zen-Codingに対応しているエディタは色々あるのですが、今回は弊社の開発環境しているAptana Studio
リンクを選択すると現れる点線枠を消す。onFocus="this.blur()"
上の画像やリンク文字を選択してください。 周囲が点線で囲まれます。フォーカス(forcus)を他に移すと消えます。 リンクの選択が良く判っていいのですが 場合によってはデザイン的に目障りな場合があります。 この点線枠（アウトライン）を最初から現れないようにする方法は 点線枠を消したい a 要素に onFocus="this.blur()"を追加します。 style="outline:none;"はFirefoxでは動作します。 Firefoxはイメージマップのリンクではアウトラインは出ません。 <a href="リンク先URL">サンプル集</a> <a href="リンク先URL;" onFocus="this.blur()">サンプル集</a> 下の画像、リンクをクリックしても点線枠は表示されません。 JavaScript スタイルシートサンプル集 onFocus="this.blur
[J] a タグの href に # とか javascript:void(0) とかする理由 - Jamz (Tech)
以下のような記述を見かけるが、これはリンクを無効にするため。 a href="javascript:void(0);" こうした上で、a タグの onclick で関するを呼び出すパターンが多い。 つまり、以下のような感じ a href="javascript:void(0)" onclick="function_name(); return false;" っで、関数呼出し後の return false も肝で、クロスブラウザで挙動を合わせる場合に、onclick に関しても、見せ掛け上、処理が無効となるよう return false する必要がある。 実際には、途中の処理が実行されるので別ウィンドウ開くなどのアクションは正常に処理される。 プログラミング > JavaScript - void(0)onClick に false を返すと、クリック自体が無効になり、リンクしなくなります
MdN Design｜総合情報サイト
デザインする グラフィックアプリの使い方から、デザインの基礎、最新の表現手法まで、デザイナー、イラストレーター、写真家が知りたい情報が満載！
HTML5 を学ぶための情報源まとめ
ちょっと更新サボりすぎでしたが、最近 HTML5 関連の話もとっても増えてきましたので、ここらで HTML5 に関する情報を集めるときに情報源として有益なサイトをまとめてみたいと思います。やはり、英語での情報が多くなってしまうので、英語能力が残念な私なんかは結構厳しいんですが、いくつか日本語での情報源も挙げてみましたので、併せて見ておくといいと思います。 ちょっと更新サボりすぎでしたが、最近 HTML5 関連の話もとっても増えてきましたので、ここらで HTML5 に関する情報を集めるときに情報源として有益なサイトをまとめてみたいと思います。 やはり、英語での情報が多くなってしまうので、英語能力が残念な私なんかは結構厳しいんですが、いくつか日本語での情報源も挙げてみましたので、併せて見ておくといいと思います。 ちなみに、XHTML 好きな私としては、XHTML5 で次のサイトリニューアルとか
★はじめに | Search | Google Developers
フィードバックを送信 コレクションでコンテンツを整理 必要に応じて、コンテンツの保存と分類を行います。 モバイルサイトとモバイルファースト インデックスに関するおすすめの方法 Google のインデックス登録とランキングでは、スマートフォン エージェントでクロールしたモバイル版のサイト コンテンツを優先的に使用します。これをモバイルファースト インデックスと呼びます。 モバイル版のページを用意することは、コンテンツを Google の検索結果に表示させるための要件ではありませんが、非常に強く推奨されています。このページで説明するおすすめの方法は、モバイルサイト全般にあてはまり、当然のことながら、モバイルファースト インデックスにもあてはまります。 ユーザーに最適なエクスペリエンスを提供できるよう、このガイドで紹介されているおすすめの方法を実践してください。 モバイル フレンドリーなサイトを
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
XHTMLが使用する言語コード一覧 -- 高樹凱.COM
3.5ping.org
2/3 CSSハックを使わずIEのバグに対処する方法 [ホームページ作成] All About![2/3 CSSハックを使わずIEのバグに対処する方法 [ホームページ作成] All About](https://cdn-ak-scissors.b.st-hatena.com/image/square/8f530daf3cb408d6b6a0ba6f38ed7ccece36cffc/height=288;version=1;width=512/https%3A%2F%2Fimg.aacdn.jp%2Faa%2Fcommon%2Fogp300_300.png)
