タグ

ブックマーク / hyper-text.org (7)

  • 改行削除するくらいなら gzip したらいいじゃない

    CSSJavaScript ファイルなどを gzip 圧縮して転送量の削減や Web サイト表示速度の向上を実現する方法を解説。既存 Web サイトのソースには一切手を加えない方法でまとめています。おまけでキャッシュ関連の記述もあり。 いや、1バイトの無駄もゆるせねぇんだよとか、難読化したいとかなら別にやればいいんですけど、CSSJavaScript ファイルの改行やスペースを削除しただけでファイル容量圧縮、読み込み速ーい的なこという人がいるので今さらですが書いてみます。すでに色々なところで書かれてるのでかぶるのは承知の上で。 改行や無駄なスペースなどを削除すること自体が悪いと言ってるわけではありませんのでその辺は誤解ないようにお願いします。ただ、gzip 使って圧縮するのに比べたら、改行削除して削れるファイルサイズなんて微々たるものです。もちろん、両方やれば最大限ファイルサイ

    改行削除するくらいなら gzip したらいいじゃない
  • Web コンテンツアクセシビリティの JIS 規格が改訂、JIS X 8341-3:2016 として公示される

    Web コンテンツのアクセシビリティに関する JIS 規格、「JIS X 8341-3 (高齢者・障害者等配慮設計指針-情報通信における機器,ソフトウェア及びサービス-第3部:ウェブコンテンツ)」 が改訂され、「JIS X 8341-3:2016」 として公示されました。 経済産業省サイトでも 3 月公示の JIS 規格として案内されています。改正の案内については同ページに掲載されている PDF 資料でも確認できます。 日工業規格(JIS規格)を制定・改正しました(平成28年3月分) : 経済産業省 ウェブコンテンツの JIS 改正 (PDF形式 / 518KB) 実際の JIS 規格をとりあえず閲覧したいという場合は、下記の日工業標準調査会サイトで PDF による閲覧ができます。 JIS X 8341-3 : 日工業標準調査会 JIS 規格の購入は日規格協会サイトから。直でリンク

    Web コンテンツアクセシビリティの JIS 規格が改訂、JIS X 8341-3:2016 として公示される
  • ページ内リンクはスムーズスクロールしなくても一瞬点滅すればいいんじゃないかという実験

    スムーズスクロール以外の方法で、ページ内リンクによって画面が切り替わったことを利用者にわかりやすく伝える方法はないかということで、ページ内リンクでの移動時に画面を一瞬点滅させるスクリプトを jQuery で書いてみました。 タイトルが (謎) な感じですが...... ページ内リンクでページ上部に移動させたりするとき、最近は所謂スムーズスクロールってやつを実装するのが当たり前になっていますよね。パッと瞬時に画面が切り替わってしまうと、ページ内で移動したことがわかりにくいので、スクロール処理を入れることでわかりやすくしてあげましょうって言う、親切心から採用されるケースが多いと思います。 実装方法は JavaScriptCSS アニメーションの組み合わせや、JavaScript (というか jQuery) でというのが多いと思いますが、今回はそのスムーズスクロールの実装方法はどれが良いの

    ページ内リンクはスムーズスクロールしなくても一瞬点滅すればいいんじゃないかという実験
  • 新しい Google Maps Embed API が公開、埋め込み地図のカスタマイズが簡単に

    Google が新しい Google Maps Embed API を公開しました。 埋め込む地図の URL に様々なパラメータをつけることで、ルート案内や周辺検索など、様々なカスタマイズを簡単に行いつつ、Web ページ上に地図を表示することが可能です。 Adding the new Google Maps to your website just got easier with the new Google Maps Embed APIGoogle Geo Developers Blog Google Maps Embed APIGoogle Developers Google Maps Embed API - Developer Guide 埋め込みコード生成用のページも用意されています。下記にアクセスしてみましょう。 Google Maps Embed API -- Ge

    新しい Google Maps Embed API が公開、埋め込み地図のカスタマイズが簡単に
  • HTML5 勧告候補に main 要素が追加、hgroup 要素は予定通り削除

    ちょっと前に 「hgroup 要素が HTML5 の勧告候補 (Candidate Recommendation) から削除されるようです」 って記事を書きましたが、実際に削除されたみたいですね (Editor's Draft では)。 ついでに、すでに HTML 5.1 Nightly にはすでに追加されていた、main 要素が、HTML5 勧告候補の方にも追加されたようです。 HTML5 W3C Candidate Recommendation 17 December 2012 hgroup 要素が HTML5 勧告候補から削除される main 要素とは? main 要素は元々、Steve Faulkner 氏 (Web アクセシビリティ関連の方) が HTML5 の拡張仕様として提案し、HTML 5.1 に正式に取り入れられた要素で、その名の通り、文書内の、「主要な部分」 をマークア

    HTML5 勧告候補に main 要素が追加、hgroup 要素は予定通り削除
  • CSS で作る Tumblr モバイルアプリ風メニュー

    1年くらい前に 「CSS で作るスマートフォン向け片手操作メニュー」 って記事書いたんですが、同じようなのをまたやってみたので紹介。 Tumbler の Android アプリ (Tumblr for Android) の新規投稿の UI がカッコよかったんで、これを CSS と超簡単な JavaScript (jQuery 使用) で再現してみました。実際のサンプルは下記に。 CSS で作る Tumblr モバイルアプリ風メニュー サンプル 現在最新版の Firefox、Safari、Chrome では動くと思います。あと手持ちの iOS 6 Safari では動作確認しました。他のスマートフォンとか知らない。IE? 一応、IE10 は問題なく動作します。IE9 だと動作はするけどアニメーションとかしないです。 元ネタを下記に貼っておきますね (画像は 「Tumblr Staff」 から

    CSS で作る Tumblr モバイルアプリ風メニュー
  • Google+ は OGP より Microdata を優先するみたい

    Google+ にリンクを投稿する際、ページに指定された OGP よりも Microdata の方が優先されることで起こった問題と、その解決方法について解説します。 この Blog では、Google+ ページも運用していて、記事を更新した際にそっちにも投稿しています。 ところが、ちょっと前からリンクを投稿したときに、OGP (Open Graph Protocol) に指定した概要文 (og:description の値に入れてるテキスト) とかが無視されて、Blog 自体の概要が出ちゃって、なんでかなぁって思いながらも今度調べよってことで放置していたわけですが、さっきちょっと時間を見つけてテストしてみたら、どうも Microdata の指定の仕方でこういう現象が起こるらしいことがわかったので、共有します。 具体的にどういう現象が起こるか OGP に指定した概要文が無視される件ですが、例

    Google+ は OGP より Microdata を優先するみたい
  • 1