tag:blogger.com,1999:blog-60115081848838161932024-10-24T21:35:36.903+09:00デザイナーをはじめとしたクリエイティブ関連に携わる人たちのための使えるTips、ライフハック、チュートリアル、ソフト情報WEBマガジン。naturalogyhttp://www.blogger.com/profile/07611212981594596656noreply@blogger.comBlogger10125tag:blogger.com,1999:blog-6011508184883816193.post-81545274487414708682010-07-15T14:02:00.001+09:002010-07-15T14:04:03.528+09:00

CSS3には「@font-face」という画期的なプロパティが追加されました。これは、ユーザー（閲覧者）の環境にはないフォントでもWebサーバ上に用意されているフォントを読み込んで表示させることができる、いわゆる「Webfont」を使用したシステムです。しかし、ブラウザの対応状況や一般ユーザーの閲覧環境を考慮すると、未だ実用レベルであるとは言えません。そこで、現状は通常通り「font-family」によるフォントの指定が必要になるのですが、果たしてどのような設定が最適なのでしょうか。肝となるのは、ズバリ「出来るだけMSゴシックで表示させたくない」、これに尽きるでしょう。それにプラスして、OS間でのフォントの違いを考慮することも重要です。では、実際に私がコーディングに携わる際に記述するフォントの指定はどうかというと、font: small "メイリオ", Meiryo, "ヒラギノ角ゴ

sandijazzhttp://www.blogger.com/profile/03819086515635398270noreply@blogger.comtag:blogger.com,1999:blog-6011508184883816193.post-15538019869687150502010-05-24T10:31:00.000+09:002010-05-24T10:32:42.032+09:00

リンク付きの画像をオンマウスすると画像の色が変わったりする「ロールオーバー」。やり方はたくさんあって、画像に「onmouseover="this.src='ロールオーバー画像'" onmouseout="this.src='元画像'"」を記述するとか、jQueryのプラグイン「jQuery_auto」を使うとか様々です。今回ご紹介するのは、その中でも超簡易版で、ロールオーバー後の画像も用意する必要なし、CSSのみで出来る非常に簡単なマウスオーバー効果です。ただ単に元の画像を薄くする（透過する）というエフェクトなので、シンプルですがカーソルを合わせて反応するまでの遅延もありません。では、その記述方法です。対象の画像のhover要素に対して、{filter: alpha(opacity=80);opacity: 0.8;}を指定するのみ。※「80」と「0.8」は透過をかける度合い。この場合、

sandijazzhttp://www.blogger.com/profile/03819086515635398270noreply@blogger.comtag:blogger.com,1999:blog-6011508184883816193.post-38240073921985426342010-03-10T00:00:00.001+09:002010-03-10T15:53:08.584+09:00

「サイトのリニューアルに伴って、これまでHTMLだったサイトにPHPを導入し、より効率的なサイト運営を実現したい」　―　私が請け負ってきた案件の中にもいくつかそういったお話がありました。ヘッダ・フッタ・サイドなど共通のパーツをincludeして一括管理する、よく使うソースや更新頻度の高いコンテンツ部分をタグセットとしてechoする、などなど、制作側としても運営者側としても非常に効率性の高いサイトが実現できます。しかし、怖いのは、それまで培ってきた「.html」のページランクやリンクポピュラリティがリセットされてしまうこと（ドメインに対する評価もあるので完全にリセットというわけではありませんが）。当然ながら、検索エンジンのクローラーは「index.html」と「index.php」は違うページとして認識するので、PHPとしてリニューアルしたサイトはあくまで「新規」もしくは「ページ追加」

sandijazzhttp://www.blogger.com/profile/03819086515635398270noreply@blogger.comtag:blogger.com,1999:blog-6011508184883816193.post-81729661271912597672010-03-08T00:00:00.005+09:002010-03-12T18:09:16.734+09:00

マークアップエンジニア（いわゆるコーダー）にとって、“今風”の（最先端の）規格や記述方法について行けるかどうかは非常に重要な鍵となります。筆者が常々申し上げている通り、マークアップ言語とは一つの「ことば」であり、マークアップエンジニアとは、言わば「ホスト（WEBの発信者）」と「ユーザー（閲覧者）」との間を橋渡しする「通訳」のようなものなのです。当然、言語に流行や新語は付き物で、より流暢に操るにはそういった時代の流れに敏感である必要があるのです。WEB制作の仕事に携わる方々なら誰しも聞いたことがあるWEB標準化の推進機関「W3C」が2008年1月22日に草案を発表した「HTML5」。予定では2012年3月頃、正式な勧告がなされます。これはその名の通り、HTMLの歴史で5度目の大幅な仕様改正となり、これまでの中で最も革命的なものになることが予想されます。特筆すべきは、「Adobe Flash

sandijazzhttp://www.blogger.com/profile/03819086515635398270noreply@blogger.comtag:blogger.com,1999:blog-6011508184883816193.post-46385462793813201602010-01-25T13:56:00.010+09:002010-02-23T00:46:41.459+09:00

ダイアルアップ→ISDN→ADSL→光…と、個人向けのインターネット回線もずいぶん向上したものです。しかし、WEBホスティング側の転送速度が遅い場合や、高画質な（重い）画像を載せたりした場合、閲覧者側の回線がどんなに早くてもWEBページ上の画像表示に遅れが生じることがあります。画像の読み込みを向上させる方法としては、そのためのスクリプトやツールも公開されていますが、面倒な作業が伴ったりバグが起こったりと一長一短です。かと言って、サーバ自体を乗り換えるなんてのもコストと労力が掛かります。というわけで、今回ご紹介するのは、あえてその遅延と上手く向き合っていくための方法です。端的に説明すると、画像を読み込む場所に予め「ローディング中」と分かるアニメーションGIF（よく見るAjaxライクなあれです）を表示して、実際に画像が読み込まれるまでの遅延時間の「場つなぎ」を行うのです。つまり、こんな感じに

naturalogyhttp://www.blogger.com/profile/07611212981594596656noreply@blogger.comtag:blogger.com,1999:blog-6011508184883816193.post-28059113013488001082009-10-09T03:31:00.003+09:002010-02-23T00:48:05.690+09:00

フォントはデザイナーの命。デザインはタイポグラフィーに始まり、タイポグラフィーに終わる。私のようにエディトリアル系や広告系、WEBにCIに…と、様々なデザインをやっていると、特に「文字」への思い入れは並々ならず、そうなると必然的に「フォント」へのこだわりも強くなるものです。せっかく素晴らしいコピーライティングが出来てても、フォントの選択ひとつで駄作へと転がり堕ちることもありえます。残念ながら、和文フォントに関してはそのキャラクター数の膨大さから、なかなかフリーで素晴らしいものは見込めませんが、欧文フォントについては驚くほど高いクオリティのものがたくさん無料配布されています。今回は、そんな中でもずば抜けて“デザイナー想い”なサイトをご紹介します。creamundohttp://www.creamundo.com/このサイトにはなんと9800書体ものフォントが公開されています。しかも、

naturalogyhttp://www.blogger.com/profile/07611212981594596656noreply@blogger.comtag:blogger.com,1999:blog-6011508184883816193.post-30924547070984785242009-09-29T11:39:00.003+09:002010-02-23T00:48:25.219+09:00

Heinz我が家でも愛用しているHeinz（ハインツ）ケチャップの有名な広告。モノ自体のストレート過ぎるくらいに大胆な表現方法が素敵です。配色も非常によく考えられてて、シズル感もちゃんと出ています。HeinzもうひとつHeinzですが、これは上で紹介したものとは対照的に、「Fear of Loss（失った時の恐怖感）」という広告業界の鉄則的な手法を巧く使った模範的広告です。ちなみに、この「Without Heinz」には他にもいくつかのパターンがあります。LEGO私も小さい頃にお世話になったLEGOブロックの広告。親ならば誰しも子供に養って欲しいと願うのが「創造力」と「想像力」。その2つをまさにLEGO流に表現した、CI性の高い圧巻の広告。GlassEx Cleanerこれは発想力が決め手の広告。この商品を使うと金魚鉢が透き通り過ぎて、というユーモアですが、何が良いって、この金魚の顔です

naturalogyhttp://www.blogger.com/profile/07611212981594596656noreply@blogger.comtag:blogger.com,1999:blog-6011508184883816193.post-15669585614763587972009-09-25T18:26:00.013+09:002010-02-23T00:51:20.060+09:00

今回もまたCSSのコーディングで陥りやすい問題の解決法をひとつ。ブロック要素や画像などを回り込むよう指定する属性「float」は、tableを使わず正しい記述でマークアップする際には必要不可欠なプロパティです。基本的にこの指定を行った際には最後に（というか、回り込みが終わった直近のタグで）解除（clear）を指定する必要があるというのが一般です。しかし、実際にはブラウザやそのバージョンごとに微妙な解釈の違いがあったり、どうしても解除を指定することができないケースがあったりと、いろいろな弊害やリスクが付きまといます。WEB系の制作会社などに勤めていると「floatさせてるから挙動が変だ」というぼやきを聞くこともしばしばで、残念なことに、いわゆる「clearfix」と呼ばれるハックによる解除法が流行してしまう始末…。そこで、ぜひ皆さんに試して頂きたいのが、今回ご紹介する方法です。図を見てもら

naturalogyhttp://www.blogger.com/profile/07611212981594596656noreply@blogger.comtag:blogger.com,1999:blog-6011508184883816193.post-27443742310365855322009-09-22T21:41:00.007+09:002010-02-23T00:49:03.334+09:00

これはWEBコーディングをやっていれば、必ず1度は経験したことがあるはず。<ul>や<ol>を使ってリストを作った際、IE6以下のブラウザでのみ<li>の間に意図しない隙間が空いてしまうというバグです。CSSでmarginとpaddingを0に指定してようが、line-heightを100%にしようが、一向に解決されずイライラしたことがある人も多いかと思います。HTMLのソース上で<ul>から</ul>までの間の改行とインデントを無くせば一応隙間は消えるのですが、抜本的な解決じゃないし、何しろソースが美しくない('A`)というわけで、スマートかつ簡単な解決法。CSS上で該当のリストのliに対して「zoom: 1;」を入れるだけでOK。要はこういうことです。ul li {zoom: 1;}簡単ですね。ただし、場合によってはこれでも

naturalogyhttp://www.blogger.com/profile/07611212981594596656noreply@blogger.comtag:blogger.com,1999:blog-6011508184883816193.post-78903723175843390742009-08-29T10:13:00.006+09:002010-02-23T00:49:13.915+09:00

このブログでは、デザインに関するチュートリアル、裏技や裏話、ためになるサイトやツール、業務の中で気になった話題などなど、とにかくデザイナーやマークアップエンジニア向けの情報をたくさん紹介していきます(*ﾟω｡)ﾉできるだけエディトリアル（出版）系・広告系・WEB系をバランス良く織り交ぜていくつもりですが、どうしてもその時こなしている業務内容に左右されてしまうのは「ご愛嬌」ということで。尚、筆者は、自分の仕事効率を過信するがために膨大な仕事を詰め込んでしまうというタイプで、かなりの割合で時間に追われています。つまり、何が言いたいのかと申しますと、「更新頻度に関してはあまり期待しないで下さい」でございますｗ

naturalogyhttp://www.blogger.com/profile/07611212981594596656noreply@blogger.com