logicalyze::blog

Archive for the ‘CSS’ tag

レスポンシブデザイン対応のサイトを作ってみる

leave a comment

レスポンシブデザイン

CSS3フレームワーク(Bootstrap、Foundation、等々)のグリッドシステムを利用してレスポンシブ対応(レスポンシブWebデザイン)のサイトを作ってみました。(デモ)

レスポンシブデザインとは、Webページを表示する機器(ブラウザ)の画面サイズに対応して自動的に表示を変えるスタイルのものです。

過去には、ブラウザサイズ(環境取得)からページ(HTMLファイル)や対応するCSSファイルを分岐したりと言った手法が取られていた時期もありましたが、最近はHTML5の普及やブラウザの実装にともなってCSS3フレームワークを利用するのが主流のようです。

写真のデモではWordpressの独自カスタマイズとCSS3フレームワークを使って対応しています。

スマートフォンやタブレットの普及状況を考えれば、ホームページを「レスポンシブデザイン」で作るというのは企業にとっても必須になるんじゃないでしょうか?

どうですか? おひとつ・・・(^^)

Written by admin

5月 10th, 2014 at 4:26 pm

アドビからHTML5アニメーション作成ソフトプレビュー版が登場

leave a comment

アドビからHTML5アニメーション作成ソフトのプレビュー版が登場しました。

さっそくアドビラボからダウンロードしてみました。

プレビュー版をインストールしサンプルを起動してみると画面はこんな感じです。
(iMac-27での画面キャプチャなので余白が・・・)

Flashのようにタイムラインでアニメーションを作成するのでコードを記述する画面が無いようです。
実際、プラウザでプレビューしたときにソースを確認すると下記のようになってます。
Read the rest of this entry »

Written by admin

8月 1st, 2011 at 6:40 pm

Posted in AJAX / HTML5,Apple

Tagged with , ,

sIFR 2.0 リリース

leave a comment

logo_sifr2.gif前回取り上げたsIFRの最新バージョン2.0が正式にリリースされました。
sIFR(Scalable Inman Flash Replacement)とは、JavaScript + CSS + Flash(SWF)を組み合わせた複合技術でHTMLに表示するテキストをFlashテキストにダイナミック(動的)に置き換えるものです。

ベーシックとなる技術理論はバージョン1.1.4とほぼ同じですが添付のJavaScript、CSSが全面的に書き換えられているようなのでかなりブラッシュアップされたのではないかと思われます。

■sIFR 2.0を配布しているサイト(ブログ)

このsIFRを使うことにより明らかに見た目の表示は美しくなりますが、反面、ウェッブ翻訳のようなアドオン・ソフトウェアや各社翻訳サービスでは、対象となる英語テキストをまともに認識しなくなってしまいますので、ちょっと”いたしかえし”かも・・・
試しに、上記のofficial sIFR 2.0 example pageを翻訳してみてください。

[ This Font Is Bigheadline. ]


上の文字がグリーンの場合は、sIFRが機能しています(黒字の場合はエラー)

Written by admin

4月 30th, 2005 at 3:36 pm

sIFR(Scalable Inman Flash Replacement)

leave a comment

sFIR logosIFR(Scalable Inman Flash Replacement)とは、JavaScript + CSS + Flash(SWF)を組み合わせた複合応用技術でHTMLに表示する見出しテキスト等をアンチエイリアスのかかった綺麗なテキスト(SWF)にダイナミック(動的)に置き換えます。
また、SWFファイルにフォントを埋め込むことでクライアントの状況に関わらず任意のフォントスタイルで見出し等を表示することができます。

仕組みの詳細はファイルをダウンロードし実際の動きを確認してみてください。

Introduction to Scalable Inman Flash Replacement (sIFR)-Macromedia DevNet
download version sIFR 1.1.4
download version sIFR 2.0 RC4
sIFR Documentation and FAQ
Example Page

■sIFRを見出しに利用したサイトサンプル

[ This Font Is Bigheadline. ]


上の文字がグリーンの場合は、sIFRが機能しています(黒字の場合はエラー)

最近は、Ajax(Asynchronous JavaScript + XML)「非同期JavaScript + XML」とか、既存技術をうまく組み合わせた応用系が花盛りですね(笑)

Written by admin

4月 5th, 2005 at 11:39 pm

Posted in AJAX / HTML5,TechNotes

Tagged with , , ,