Gracefull Degradation と Progressive Enhancement の概念紹介

こんにちは

フェノメナ技術担当のレミです。

今日はGracefull Degradation (グレイスフル デグラデーション) と Progressive Enhancement (プログレッシブ エンハンスメント)、という概念について紹介させて頂きたいと思います。

英語でウェブ技術に関する記事を読む方は、よく見たことのある言葉かと思います。

この二つについての定義は様々であり、困難なことだという印象を持った方は少なくないでしょう。でも実は、非常に簡単なことです。

Gracefull DegradationとProgressive Enhancementの最もポイントとなる要素をわかりやすく説明させて頂きます。

続きを読む

HTMLでの空白文字表示について

こんにちは。すーさんです。

今回はウェブページ内での(半角の)空白文字について、最近調べて分かったことを書いてみたいと思います。
知ってる人にとっては今更な内容だと思いますが、私は今まで知らなかったのでまとめておきます。

これまで、ウェブページで連続して複数の空白文字を表示するときは、昔誰かに「 」を使うと教えられて以来、「 」を使ってきました。
ある日、本文に「 」と表示されているメールを受信しました。これが何を意味する記号なのか分からなかったので調べてみたところ、これも空白文字を表す記号でした。
またこの他にも、「 」、「 」などがあるということが分かりました。

それぞれは、以下のようになります。
・ 
  ノーブレークスペース。通常の半角スペースと同じサイズの空白を挿入できる。
・ 
  en space。”n”字幅の空白で、 よりも少し広め。
・ 
  em space。”m”字幅の空白で、 の2倍。
・ 
   よりも狭い空白。

「 」は自動改行しないスペースとなり、連続して空白文字を表現する場合以外に、英文を改行させたくない場合に使ったりできるようです。

自動改行しないということで今まで困った事はなかったのですが、これから使用する際は少し意識してみようと思いました。

※参考サイト
・HTML内で用いる実体参照による「空白(スペース)」の種類。|Webディレクター視点で語るWeb制作・開発Tipsブログ【Labs to Web】
・All About Web上で使えるスペース(空白文字)いろいろ
・  は半角スペースではないというお話

Data URIとBase64の基本を理解する

working desk

1. DATA URI

Data URI (データURIスキーム)は、外部データを直接ウェブページに埋め込む手法です。導入の結果、ウェブサイトからのHTTPリクエスト回数が少なくなり、パフォーマンスが向上するとされています。大まかには、CSSのスプライト・シートと同じ目的で導入するのものと言えます。

どのような外部ファイルでも埋め込むことが可能ですが、直接「バイナリーデータ(バイト)」のまま埋め込んでしまうと、ネットワークに通信する際に問題が起こる可能性があります。何故かと言うと、

続きを読む

このブログから情報発信しているUIデザイン専門家集団のホームページ :
フェノメナエンターテインメント株式会社