タグ

ブックマーク / parashuto.com (3)

  • 次世代HTMLの新仕様「レスポンシブ・イメージ(仮)」についてまとめてみた

    レスポンシブWebデザインを実装する際、画像の扱いは一つの課題として残っています。現在、PHPを使用した「Adaptive Images」やJavaScriptを使った「Responsive-Images」などが現実的な対応策としてありますが、どちらもApacheの設定を必要とします。レスポンシブWebデザインが広まって標準的な実装方法の一つになろうとしている今、サーバサイド技術に依存しない解決策が早急に求められています。 そんな中、HTMLの仕様策定の一端を担うWHATWG(Web Hypertext Application Technology Working Group – ワットダブルジーと読む)で、新たな仕様が検討されています。 では、どんな議論がされていて、今どんな状況なのか? なかなか複雑なことになっているようなので、調べてまとめてみました。 ※この記事は、レスポンシブWeb

    次世代HTMLの新仕様「レスポンシブ・イメージ(仮)」についてまとめてみた
  • レスポンシブなデザインにするなら知っておきたい。各ブラウザの小数点以下のピクセル値の扱い

    デザイン要素を固定しないリキッドレイアウトは、未知の端末にも対応するというコンセプトのもとに実装するレスポンシブウェブデザインには必須だと考えています。そのリキッドレイアウトを実装する際に理解しておきたいのが、パーセント値で幅や高さを指定した際に小数点以下になるピクセル値(10.5pxとか9.2pxなど)に対するブラウザの挙動です。 たとえばグリッドシステムを構築する際、計算上はあっているのにブラウザでは思った通りに表示されないといったことが起こります。これは、各ブラウザのサブピクセル(小数点以下のピクセル値)の扱いの挙動差により生まれます。 まずはパーセント指定の基から まずは前提となるパーセント指定の際の計算の基のおさらいから。。。 CSSでパーセント値を使って幅や高さ指定をすると、指定した要素を含む親要素をベースにピクセル値が計算されます。 たとえば100pxの親要素の中にある子

    レスポンシブなデザインにするなら知っておきたい。各ブラウザの小数点以下のピクセル値の扱い
  • レスポンシブWebデザインのウェブサイトを半年運営してみて思ったこと

    昨年2011年10月に仕事で運営に携わっている大学ウェブサイトでレスポンシブWebデザイン (しかもフル可変グリッドレイアウト) を導入して、はや半年。約6ヶ月間、レスポンシブWebデザイン(RWD)で制作したウェブサイトを運営してみて思ったことをまとめてみました。これからレスポンシブWebデザインを導入したいと考えている方の参考になれば幸いです。 プロジェクトの概要 大学のウェブサイトをリニューアルするにあたり、さまざまな状況や制限などを考慮、また、今後3〜5年を見据えて、レスポンシブWebデザインを取り入れた制作を行いました。大学公式ブログでもリニューアルについて紹介しているので、ぜひそちらもご覧ください。そこで書いたように、以下のような思いもあり、このリニューアルを行いました: 今回、新しい試みを行った背景には、このウェブサイトが「大学のウェブサイト」であることが大きな要因の一つとし

    レスポンシブWebデザインのウェブサイトを半年運営してみて思ったこと
  • 1