CSS3には「@font-face」という画期的なプロパティが追加されました。これは、ユーザー（閲覧者）の環境にはないフォントでもWebサーバ上に用意されているフォントを読み込んで表示させることができる、いわゆる「Webfont」を使用したシステムです。
しかし、ブラウザの対応状況や一般ユーザーの閲覧環境を考慮すると、未だ実用レベルであるとは言えません。
しかし、ブラウザの対応状況や一般ユーザーの閲覧環境を考慮すると、未だ実用レベルであるとは言えません。
CSSで出来る最も簡単な画像ロールオーバー（簡易版）
リンク付きの画像をオンマウスすると画像の色が変わったりする「ロールオーバー」。
やり方はたくさんあって、画像に「onmouseover="this.src='ロールオーバー画像'" onmouseout="this.src='元画像'"」を記述するとか、jQueryのプラグイン「jQuery_auto」を使うとか様々です。
やり方はたくさんあって、画像に「onmouseover="this.src='ロールオーバー画像'" onmouseout="this.src='元画像'"」を記述するとか、jQueryのプラグイン「jQuery_auto」を使うとか様々です。
.htaccessを使ってPHPを「.html」の拡張子で動かす
「サイトのリニューアルに伴って、これまでHTMLだったサイトにPHPを導入し、より効率的なサイト運営を実現したい」 ― 私が請け負ってきた案件の中にもいくつかそういったお話がありました。
ヘッダ・フッタ・サイドなど共通のパーツをincludeして一括管理する、よく使うソースや更新頻度の高いコンテンツ部分をタグセットとしてechoする、などなど、制作側としても運営者側としても非常に効率性の高いサイトが実現できます。
ヘッダ・フッタ・サイドなど共通のパーツをincludeして一括管理する、よく使うソースや更新頻度の高いコンテンツ部分をタグセットとしてechoする、などなど、制作側としても運営者側としても非常に効率性の高いサイトが実現できます。
Flashがなくなる？ - 「HTML5」でできること
マークアップエンジニア（いわゆるコーダー）にとって、“今風”の（最先端の）規格や記述方法について行けるかどうかは非常に重要な鍵となります。
筆者が常々申し上げている通り、マークアップ言語とは一つの「ことば」であり、マークアップエンジニアとは、言わば「ホスト（WEBの発信者）」と「ユーザー（閲覧者）」との間を橋渡しする「通訳」のようなものなのです。
当然、言語に流行や新語は付き物で、より流暢に操るにはそういった時代の流れに敏感である必要があるのです。
筆者が常々申し上げている通り、マークアップ言語とは一つの「ことば」であり、マークアップエンジニアとは、言わば「ホスト（WEBの発信者）」と「ユーザー（閲覧者）」との間を橋渡しする「通訳」のようなものなのです。
当然、言語に流行や新語は付き物で、より流暢に操るにはそういった時代の流れに敏感である必要があるのです。
画像読み込みの遅延に伴なうストレスを緩和する
ダイアルアップ→ISDN→ADSL→光…と、個人向けのインターネット回線もずいぶん向上したものです。
しかし、WEBホスティング側の転送速度が遅い場合や、高画質な（重い）画像を載せたりした場合、閲覧者側の回線がどんなに早くてもWEBページ上の画像表示に遅れが生じることがあります。
画像の読み込みを向上させる方法としては、そのためのスクリプトやツールも公開されていますが、面倒な作業が伴ったりバグが起こったりと一長一短です。かと言って、サーバ自体を乗り換えるなんてのもコストと労力が掛かります。
しかし、WEBホスティング側の転送速度が遅い場合や、高画質な（重い）画像を載せたりした場合、閲覧者側の回線がどんなに早くてもWEBページ上の画像表示に遅れが生じることがあります。
画像の読み込みを向上させる方法としては、そのためのスクリプトやツールも公開されていますが、面倒な作業が伴ったりバグが起こったりと一長一短です。かと言って、サーバ自体を乗り換えるなんてのもコストと労力が掛かります。
フリーでフォントを極める（Helveticaからの脱却の巻）
フォントはデザイナーの命。
デザインはタイポグラフィーに始まり、タイポグラフィーに終わる。
私のようにエディトリアル系や広告系、WEBにCIに…と、様々なデザインをやっていると、特に「文字」への思い入れは並々ならず、そうなると必然的に「フォント」へのこだわりも強くなるものです。
せっかく素晴らしいコピーライティングが出来てても、フォントの選択ひとつで駄作へと転がり堕ちることもありえます。
デザインはタイポグラフィーに始まり、タイポグラフィーに終わる。
私のようにエディトリアル系や広告系、WEBにCIに…と、様々なデザインをやっていると、特に「文字」への思い入れは並々ならず、そうなると必然的に「フォント」へのこだわりも強くなるものです。
せっかく素晴らしいコピーライティングが出来てても、フォントの選択ひとつで駄作へと転がり堕ちることもありえます。
秀逸な広告デザイン（海外編） / Creative Ads
Heinz
我が家でも愛用しているHeinz（ハインツ）ケチャップの有名な広告。
モノ自体のストレート過ぎるくらいに大胆な表現方法が素敵です。配色も非常によく考えられてて、シズル感もちゃんと出ています。
我が家でも愛用しているHeinz（ハインツ）ケチャップの有名な広告。
モノ自体のストレート過ぎるくらいに大胆な表現方法が素敵です。配色も非常によく考えられてて、シズル感もちゃんと出ています。
ハックを使わず確実にfloatをclearする方法
今回もまたCSSのコーディングで陥りやすい問題の解決法をひとつ。
ブロック要素や画像などを回り込むよう指定する属性「float」は、tableを使わず正しい記述でマークアップする際には必要不可欠なプロパティです。
基本的にこの指定を行った際には最後に（というか、回り込みが終わった直近のタグで）解除（clear）を指定する必要があるというのが一般です。
ブロック要素や画像などを回り込むよう指定する属性「float」は、tableを使わず正しい記述でマークアップする際には必要不可欠なプロパティです。
基本的にこの指定を行った際には最後に（というか、回り込みが終わった直近のタグで）解除（clear）を指定する必要があるというのが一般です。
IE6以下でリストに隙間が出るバグの対処法
これはWEBコーディングをやっていれば、必ず1度は経験したことがあるはず。
<ul>や<ol>を使ってリストを作った際、IE6以下のブラウザでのみ<li>の間に意図しない隙間が空いてしまうというバグです。
<ul>や<ol>を使ってリストを作った際、IE6以下のブラウザでのみ<li>の間に意図しない隙間が空いてしまうというバグです。
「デザインのサイン」、オープン（*´艸`*）
このブログでは、デザインに関するチュートリアル、裏技や裏話、ためになるサイトやツール、業務の中で気になった話題などなど、とにかくデザイナーやマークアップエンジニア向けの情報をたくさん紹介していきます(*ﾟω｡)ﾉ
登録:
投稿 (Atom)