Copyright (C) Mainichi Communications Inc. All rights reserved. 掲載記事の無断転載を禁じます
Copyright (C) Mainichi Communications Inc. All rights reserved. 掲載記事の無断転載を禁じます
ここでは、携帯向けサイトの作り方を簡単に紹介します。 PC向けサイトを作ったことのある人を対象とさせていただきます。 まず、携帯版のファイルはPC版と完全に分けましょう。 共通のファイルで済まそうとするのはかなり無理があります。 PCと携帯の違い いくつかあるので順に説明します。 ファイルサイズの制限 これが一番大きなところでしょう。 後で詳しく説明しますが、携帯向けサイトでは1ページ当りのファイルサイズを 画像も含めて5Kbytes程に収めなければなりません。 5Kbytesでは足りない、と思われる方も多いと思いますが 試しに5Kbytesの文章を書いて携帯で表示させてみましょう。 携帯の小さい画面から見ればこれでもかなりの情報量だと感じるはずです。 スタイルシート関連 携帯向けサイトでは、一切のスタイルシートが使えません。 もともと、スタイルシートとは細かな装飾方法をアレンジするための
注目!Flashを応用してHTML&CSSだけでは通常作れない画像効果を得る「swfIR」 2007年02月27日- swfIR: swf Image Replacement When you start to use swfIR, you’ll need the ability to style it, the same way that you can do with regular images. Flashを応用してHTML&CSSだけでは通常作れない画像効果を得る「swfIR」。 こういった仕組みで、久しぶりに感動させられました。 Ajaxにこだわらず、Flashも応用することでこんなことも出来るんだ、と思わせられたものでした。 なんと、<img src="〜"> な画像タグがあったとして、この画像に、動的に角丸やシャドウ効果、回転効果やボーダーを直接かけることが出来ます。 次の
※ 下記の記事に誤りがありました。謝罪&修正記事はこちらへ。 あいかわらず流行っている角丸系パーツですが、新しいテクニックが紹介されていたのでエントリー。 » Even More Rounded Corners With CSS – Schillmania.com 一つの透過処理されたPNG画像とCSSだけで下のようなパーツを作れてしまいます。 PNG画像を縮小したりしているみたいですね。もちょっと複雑なデモページはこちら。スクリプトのダウンロードもできます。 » Even More Rounded Corners (Fluid, Alpha-transparent, Single Image Approach) Using CSS 透過処理もされていてなかなかきれいですが、一長一短があるアプローチなので用途に合わせてお使いください。
現時点で約200個以上のウェブサイトテンプレートが無料でダウンロード可能になっており、ライセンスも商用利用可能なものからGPLライセンス、CCライセンスまでいろいろ。 特筆すべきは検索機能の充実具合で、XHTML準拠、ライセンス別、明るい系か暗い系か、幅は固定かそうでないか、カラムの数、色名を組み合わせて絞り込みが可能。 詳細は以下の通り。 Open Design Community - Download Free Web Design Templates - OpenDesigns.org http://www.opendesigns.org/ 強力な検索機能の利用は以下から。 Search Designs ・ OpenDesigns.org 以下からサムネイル画像でテンプレートのプレビューを見ることもできます。サムネイル画像の上にマウスを乗せれば詳細な情報が表示されるので便利。クリック
前回は,Web開発者が,時にクライアントに反対するかのような意見を述べる必要もあるということを書きました。今回は,なぜそのようなことになるのか,Web開発者の視点はどこにあるのかを述べましょう。 ハイプ曲線 本題に入る前に,一つだけ共通知識を持っておきましょう。ご存知の方も多いとは思いますが,「ハイプ曲線」です。ガートナーが考案した,新しい技術が時間とともにどのように推移するかを示すものです。それぞれの「山」や「谷」の部分の深さや長さが,それぞれの技術によって異なり,その程度によって社会へのインパクトを視覚化できると言われています。 本来の意味は様々な文献がネット上に存在するので,ここでは私の意訳的な解釈を述べたいと思います。 テクノロジーの黎明期 技術が生まれて,まだ告知が十分に知れ渡っていない期間。極々少数の開発者仲間の内で認知されている期間。この後爆発的に広まるかどうかは,この人たち
手持ちの写真にいろいろなフィルムエフェクトを施すことができる無償のプラグイン集です。Photoshop用だけでなく、これ単体でも実行可能ですので、Photoshopを持っていなくても利用できます。 収録されているのは「Black and White」「Contrasting Levels」「Duotone」「Starlight」「Starpoint」「Grain」「Monotone」「Tonal Streak」「Warm Cool」の9種類。どれもこれもシンプルですが既存の写真を簡単かつお手軽にいかにもそれっぽくすることができます。かなり便利です。 詳細は以下の通り。 PixelSampler Details ダウンロードは以下から。Windows版とMac版があります。右下にあるPixelSamplerからダウンロード可能。 TwistingPixels 体験版ダウンロード 「Black
「7 Habits of a Highly Successful Freelance Web Designer」という興味深い記事がありました。 原文はフリーランスWebデザイナとして成功する方法を説いていましたが、内容を見るとプログラマや、その他フリーランサーにも当てはまりそうな内容でした。 以下、要約してみました。 誤訳などの可能性があるので、詳細は原文をご覧下さい。 1. 仕事を愛す 大企業で働いていれば、まわりに合わせて仕事をすることができます。 その日に仕事が終わらなければ次の日にまわしたりもできます。 自分が何をしているのかに対して興味を持たない従業員が多い組織もあります。 彼らにとっては、日々の仕事は単なる報酬に対する対価でしかないのです。 フリーランスとして成功するには、自分が行っている仕事を愛する必要があります。 情熱があれば、カフェインの力を借りながら夜遅くまで働き続け
熱帯魚屋さんとskypeでお話をしているときに「何故、Webサイトを外注しないのですか?」という話を聞いてみました。 色々見ていると、大手ではない熱帯魚ショップの多くはホームページを自作しているように見えます。 色々聞いていると、Web制作会社から毎週のように電話はかかってくるようです。 1週間に3本ぐらいは電話が来るそうです。 電話ではなく、実際に足を運んで営業活動に来る人は1ヶ月に一人いるかいないかぐらいだそうです。 で、どの会社からの電話もある程度のパターンがあるそうです。 1. ホームページ持っていますか? 2. if (yes) 業者に頼んでいますか? 3. それで成績はどうですか? 4. さらに良くする方法がありますよ それぞれの項目に対しての感想は以下のようなものだそうです。 ホームページ持っていますか? サイトを自作して何年もやっているのに「ホームページ持っていますか?」と
Webサイトを構築をするにあたっては、完成するまでの間、いやそれだけではなく、完成後の運用・更新なども含めてさまざまなプロセスが存在する。アクセシブルなWebサイトを構築し、またそれを維持したままで(もしくはより向上させて)運用していく上では、各プロセスごとに考慮すべき事項がたくさんある。本連載では個々のプロセスに焦点を当てていきたいと思っているわけだが、まずは各論に移る前に、全体の流れを簡単に紹介していこう。 今回はWebサイトの構築・運用をしていく際のワークフローについて、Webアクセシビリティの観点から考えてみることにした。特に、各プロセスにおいて、どのポジションの人がアクセシビリティについて考える必要があるのかといったことを確認していこうと思う。なお、以降はWebアクセシビリティはどんなWebサイトにも必要である、ということを前提としてのフローである。と書くと、「Webアクセシビリ
この連載では,ユーザビリティ系の使いやすさをテーマにしていますが,今回はそれをマーケティング活動につなげていくことについて書いてみます。 古典的商品絞り込み機能 まずは,RIA(Rich Internet Application)の歴史でもはや古典的な名サイトを紹介しましょう。visokio(旧iokio)の「CameraFinder」です。リンクを張っておきますので,ぜひともご自分で操作して,「体験」してください。 操作はいたって簡単です。デジタル・カメラ屋さんの店頭で実際に見るように,最初は様々なデジカメが並んでいます。しかし,右側にある「スライダーバー(青い部分)」を操作することで,その条件にマッチしたデジカメだけが絞り込まれていく(画面に残っていく)という仕掛けです。 仕組みも単純です。各商品に属性として,それぞれの「スライダーバー」に対応する情報が埋め込まれていて,指定された条件
Resources for the webmaster/website builder - SiteAdminStuff.com WEBマスター/WEB開発者、御用達のサイトリンク集。 XHTML, Apache, Blogging, CSS, DynDNS, Domain等、開発者必須の便利サイトがまとまっています。 上記サイト上で発見したのですが、JS の WYSIWYG なエディタって結構あるんですね。 TinyMCE, FCKEditor しか知りませんでした:-) Xinha I've used this. FCK Editor Mozile From Mozilla Cross-browser RTE from Kevin Roth (I've used it) Kupu Easily integratable with different CMSs TinyMCE Open-
(追記)皆様のコメントやブクマでの指摘によると FireBug + FIrefox2.0 で発生するようです。 ここに落ちなくする設定方法が書いてあります。 http://d.hatena.ne.jp/mhrs/20061030/p1 自己責任でお願いします。 JavaScriptに以下のコードを書く #1#信じられない人はURL欄に javascript:#1# どうやら SpiderMonkey のソースに JS_HAS_SHARP_VARS というのがあり、そこらへんで落ちてるっぽい。 この謎の仕様 SHARP_VARS って何なんだろ。有識者の方、教えてください。 SHARP_VARS 続報 どうやら、JavaScriptでは以下のように値を保持することができるようだ。 #1=[1,2,3]; #2={hoge: 'fuga'};これらを参照するときに #1#; #2#;とするらし
プロローグ~連載を始める前に~ 皆さんには,企画書1本で,顧客を振り向かせたり,唸らせたり,感動させた経験があるだろうか? また,制作したWebサイトで,顧客を舞い上がらせたり,驚かせたり,感激させた経験はあるだろうか? そのような体験に,企画力は不可欠だ。技術仕様の理解や制作技術の習得以上に重要だ,と言っても過言ではない。 だが,現状はといえば,どうだろうか。 美辞麗句を並べたパワーポイントによるプレゼンテーションや,美しいトップページのラフデザイン,さらに短納期低予算が評価されて,受注確定。その結果は,理念が見えない企業紹介。素通りする経営方針。お決まりの項目だけのデータベース検索。良く言えば「標準的」悪く言えば「ありきたり」。「何か」が足りない。 足りない原因は,顧客と制作者の間の顕著なヒエラルキーにある。顧客の希望だけを落とし込んだ企画書,顧客からの原稿そのままのテキスト。制作者側
リダイレクト Fromにサイトパスを入力、ToにURLを入力 301 Moved Permanently 恒久的に移動 From: To: From: To: From: To: 302 Moved Temporarily 一時的に移動 From: To: From: To: From: To:
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く