★★CSSだけで簡単！ハンバーガーメニューの作り方（スマホ対応）
HTML <header> <div id="nav-drawer"> <input id="nav-input" type="checkbox" class="nav-unshown"> <label id="nav-open" for="nav-input"><span></span></label> <label class="nav-unshown" id="nav-close" for="nav-input"></label> <div id="nav-content">ここに中身を入れる</div> </div> </header> inputやらlabelやらが入っていて、何のことが分かりづらいかと思うので、少し解説をします。 解説 全体はheaderで囲んでいます。他にもサイトタイトルやロゴ画像を入れるのではないかと思います。<div id="nav-drawer">の中に
W3Cで現在公開されているHTMLとDOM仕様は将来廃止されます - 水底の血
まえがき W3C（とWHATWG）からの公式なアナウンスはまだ確認していませんが、何度目かに結成されるW3C HTML WorkingのDraft Charterと、このCharterから辿れるDRAFT Memorandum of Understanding Between W3C and WHATWG（Memorandumは日本語で覚書などと訳されるので、ここでも覚書と呼びます）がブログエントリーのタイトルのソースになります。もっとも、今確認できる覚書もドラフトですから、変更があるかもしれません。しかしながらURLで観測できるわけですから、大筋でW3CとWHATWGとの間で合意が取れているのではないかと推測します。あとは、覚書だけでなくCharterもドラフトということになっていますが、以下の文章では面倒なので省略します。最後にお約束ですが、このブログエントリーは「だいたいあってる」感
静的サイトをとにかく高速化する話
自分のポートフォリオサイトをサンプルに、どのくらいの容量削減ができるのかを確認してみました。 jsおよびCSSは、サイトの表示に必要な要素を1ファイルにバンドルした状態です。 画像ファイルはjpegの圧縮率などによって最終的なサイズが大幅に変化するので、jsとCSSのサイズ変化のみを取り上げました。 Bootstrap + Font Awesomeのような重量級フレームワークを使用しても、十分に実用的な容量まで削減できました。これならスマホ+3G回線での表示も心配ありません。 手法 適用しやすさを順に手法を並べると、以下のようになります。 遅延する 圧縮する キャッシュする まとめて削る 遅延する サイト上にあるほとんどのリソースは、実際には後から読み込んでも問題なく動作します。 まず最小限の構成でサイトを表示させ、重いファイルは後から読み込みます。 javascriptの遅延読み込み h
Android版Chromeのタブ（アドレスバー）の色を変更する方法
結果 アドレスバーって意外と目立つ部分なので、カラーの選定は慎重に行ったほうがいいですね…うちのブログは目立ちすぎないようにヘッダーの色に合わせました。 あ、ちなみに暗めの色を指定すると読み込み時のプログレスバーの色が白に変わるっぽいです。なんかお洒落。 メリットは… このコードが効くのは、Android5.0以降かつAndroid用Chrome（Ver39以降）から閲覧しているユーザーに限られています。 そのため、参考元のブログ含む各所で「特に必要ない機能」と言われているというのが現状です。悲しいなぁ… ただ、こういう細かいところまでカスタマイズしているブログに出会うと「お、こだわってるねぇ…」という謎の感動を覚える変な人種もいるので、個人的には一応メリットがあると思います。多分。ね。
googleの画像検索の結果がdataスキームに変更：一般システムエンジニアの刻苦勉励：オルタナティブ・ブログ
googleの画像検索の結果がdataスキームに変わったようです。 以前より通常のgoogle検索に挿入される画像検索結果はdataスキームだったように思いますが、 firefoxでの画像検索結果が全面的にdataスキームになりました。 手元の環境で試したところ、chromeでは通常通りの<img src=http://t0.gstatic.com/xxxというURLが用いられています。（なぜこんなに微妙なことに気づいたかというと、firefoxにrequestpolicyを使っているからです。） dataスキームというのはbase64形式に変換された文字列を画像として表示する方法であり、代表的な用いられ方としてはネットワークの行って来いのコストがbase64への変換オーバーヘッドを上回ることを見込まれるような場合に有効です。小さな画像がたくさんあるような場合ですとWebページの1回のロー
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
