読者です 読者をやめる 読者になる 読者になる

ふろしき.js

Web + Mobile + UX + Performance Tech

用語・TIPS

Web開発のガイドライン・ツール集

★ Windows 7のWebシステム開発は、IEの方針転換により変化が求められる Windows XP時代に主流であった「バージョン依存型」は、非推奨となりました。IEはかつて、様々なバージョン特化の作り込みを支援する機能を提供してきましたが、バージョンアップを繰り…

1300の優良サイトが選んだWeb制作のベストプラクティス集

Web制作/開発に関わっていると、自分のやり方は本当に正しいのかと疑問に感じることはないでしょうか?Webの技術は目まぐるしい速度で進化していますが、そのノウハウは個人へ依存しているように思えます。体系的に学ぶにも、多くの学校ではツールや綺麗な作…

1300の優良サイトが選んだ「ページレイアウト(Page Layout)」ライブラリ集 - タイルレイアウト・可変グリッドレイアウト・レスポンシブWebデザインなど

1300の優良サイトを調査してみたシリーズ、第13回は「ページレイアウト(Page Layout)」です。タイルレイアウト・可変グリッドレイアウト・レスポンシブWebデザインと、様々なページレイアウトの思想が時代の流れとともに生み出されてきました。ふろしき.jsの…

1300の優良サイトが選んだ「ページスクローラー(Page Scroller)」ライブラリ集

1300の優良サイトを調査してみたシリーズ、第12回は「ページスクローラー」です。ボタンクリックなどのイベントに反応して、ページの先頭や任意の要素にスクロールさせる機能を、「ページスクローラー」といいます。ふろしき.jsの調査では、1300中68サイト(5…

1300の優良サイトが選んだ「コンテンツスクロールバー(Content Scroll-bar)」ライブラリ集

1300の優良サイトを調査してみたシリーズ、第11回は「コンテンツスクロールバー」です。利用規約などを表示する画面では、CSSの「overflow:scroll」プロパティを利用して、ブロック要素に対してスクロールバーを与えることがあります。これを「スクロールバ…

1300の優良サイトが選んだ「フルスクリーンバックグラウンドイメージ(Full Screen Background Image)」対策ライブラリ集

1300の優良サイトを調査してみたシリーズ、第10回は「フルスクリーンバックグラウンドイメージ(Full Screen Background Image)」です。背景にフルスクリーンの状態で画像を表示させるには、独特なノウハウを必要とします。この対策への呼び名は日本にはまだ…

1300の優良サイトが選んだ「オーバーレイイメージ(Overlay Images)」ライブラリ集

1300の優良サイトを調査してみたシリーズ、第9回は「オーバーレイイメージ」です。Webページ上の画像をクリックした際に、同一ウィンドウ内に拡大された画像を表示する処理を、「オーバーレイ」や「オーバーレイイメージ」といいます。ふろしき.jsの調査では…

1300の優良サイトが選んだ「pjax」ライブラリ集と問題点

1300の優良サイトを調査してみたシリーズ、第8回は「pjax」です。Webアプリケーションには、「http://〜/sample.cgi」のようなクエリストリングでなく、「http://〜/#!/sample」のようにハッシュとして持たせ、Ajaxによってデータを動的に取得する仕組みのも…

現実指向コーディング 〜Web標準やブラウザ仕様に負けない、現実的な方法を模索する〜

★ 最新の機能が使いたいんだけど・・・ HTML5の登場で、既存の機能にも置き換えが進んでいます。とはいえ、古いIEがシェアを得てしまっている現状を鑑みると、いきなり新しいWeb標準を使うわけにもいきません。古いIEのために、Shim/Polyfillと呼ばれるライ…

1300の優良サイトが選んだ「コンテンツスライダー(Content Slider)」ライブラリ集

1300の優良サイトを調査してみたシリーズ、第7回は「コンテンツスライダー」です。画像ファイルや動画ファイルをスライドショーのように表示させるアニメーションを、「コンテンツスライダー」といいます。デザインに関わるためどれがベストとも言えませんが…

1300の優良サイトが選んだ「マウスオーバー・ロールオーバー」ライブラリ集

1300の優良サイトを調査してみたシリーズ、第二回は「マウスオーバー・ロールオーバー」です。画像やブロック要素などのオブジェクトは、マウスポインタが当たった際にビジュアルデザインが変化することを求められることがあります。これを広義では「マウス…

「マルチブラウザ」と「クロスブラウザ」の違いは何か?

最近頻繁に耳にする、「マルチブラウザ」と「クロスブラウザ」。この2つを違いを理解して、使い分けできているでしょうか?国内だと両者は同じ意味として捉えられており、IT用語の解説を行っているサイトでも同義として扱うことが多いようです。しかし海外…

1300の優良サイトが選んだ「AMD・遅延ロード」のベストプラクティス

1300の優良サイトが選んだシリース、第3回は「AMDと遅延ロード」です。JavaScriptファイルのロードのパフォーマンス向上を図るメカニズムを「AMD(Asynchronous module definition)」といいます。Webアプリ開発を行なうデベロッパの方は、今後重要な知識にな…

1300の優良サイトが選んだ「CSSリセット」のベストプラクティス

1300の優良サイトが選んだシリース、第2回は「リセットCSS・ノーマライズ」です。Webブラウザごとに異なるCSSのデフォルト値を、均一化させることを「リセットCSS」と言います。「ノーマライズ」と言います。 reset.css / YUI Library (76件) 公式サイト:ht…

1300の優良サイトが選んだ「PNG Fix」のベストプラクティス

ネット上の優良1300サイトを調査してみたシリーズ、第一回はPNG Fixです。IE5.5-6はPNGフォーマットを表示できますが、アルファ値(透明度)は正しく反映されない仕様です。また、IE7-8のPNG表示では、半端なアルファ値が正しく表示されない等の問題を持ちま…

ナビゲーションバーを作るためのベストプラクティス(clearfix法とinline-block法)

横並びのブロック要素の作成はWeb技術入門者にとっての最初の難関であり、その考え方を理解するのに多くの時間を要します。テーブルレイアウトに逃げてしまう元凶でもあります。ボタンを左から右に向かって並べるナビゲーションバーなんて、まさにその好例で…

Internet Explorer11とユーザエージェント

※この記事は古くなっています。最新情報はこちらです。IE11もリリースが近いので、検証を始めてみました。流石にInternet Explorerオンリーイベントを主催した自分が、新しいIEをおさえてないのはまずいので・・・。あと、このイベントで、MicrosoftMVPの@he…

「フルスタックエンジニア」という存在について考えてみた

最近、「フルスタックエンジニア」という言葉をよく聞きます。 もしかしたら近いうちにバズワードになるかもしれません。初期のクラウド・コンピューティングが異常なまでに混沌としていたように、バズワードは、利害が絡みそうな人間が強引に意味を追加して…

CSSのロードタイミングの不備が引き起こす、FOUCとは?

FOUC(Flash of Unstyled Content)とは、Webページへアクセスした直後、CSSによるデザインが有効でないページが一瞬だけ表示される現象のことです。まず、下の例をご覧下さい。 <html> <head> <meta charset="utf8" /> <title>Example</title> <link rel="stylesheet" href="hoge.css" type="text/css" /> </head> <body> ・・・ </body> </html> この例では、CSSの外部ファイルをhead要素内から呼び出…