HTML+CSSデザインのモジュール化 - haruki からの平面波
たとえば、スタティックなページと、複数のＷＥＢアプリのページでデザインを同じにしたいなんてことが良くありますよね。その際、コピーペーストでやるのを避けるには、HTML+CSSデザインのモジュール化をしておかなければなりません。 モジュール化って言うのは何かというと、たとえばナビゲーションメニューであれば、ナビゲーションメニューのところだけを独立してHTMLを書いて、それをメインのページからインクルードしてページ全体を構成するという方法です。 それを実装するにあたり、HTMLページの構成要素を見てみると、 HTML ページ CSS 画像 と3つからなります。 ですので、上述のナビゲーションメニューであれば、 navi.html navi.css images/navi/*.png というように、グループ化しつつ、メインページとは独立して書いてやればいいということになります。 （ナビのコンテン
Webデザイン エンジニアリング 第16回 ボタンを押させるテクニック：ITpro
対象とするユーザーの“慣れや知識”によって，画面の構成を変えたほうが伝わりやすいとするならば，画面上の「ユーザー・インタフェース（UI）部品」の色や形状も，ユーザーに応じて変えるべきでしょう。今回は，代表的なUI部品でありながら，なかなか作り手の思うように押してくれない「ボタン」について考えます。 わかりやすいボタンの形状はユーザーによって違う まず，前回とほぼ同じ絵を用います。Webシステムの操作方法への「熟知度（PCリテラシ）」を縦軸，「提供したいサービスに対する知識」を横軸とします。そして，それぞれの「軸」に対して，受け入れやすいと思われる「ボタン」の形状を例記しました。 上図の【A】や【B】のタイプに当てはまるPCリテラシの高いユーザーは，ボタンの“ラベル”に「submit」と書かれていようが「GO」と書かれていようが，ボタンを認識することはさほど苦ではありません。 しかし，PCに
PHPで画像を雑誌風に自動レイアウトするクラス:phpspot開発日誌
A List Apart: Articles: Automatic Magazine Layout Auto-resized images are a common feature on the web now. Automating the process of resizing images saves a lot of time?it’s certainly quicker than manually resizing images in Photoshop?and is a good way to manage images on a site. But when a good designer crops your images manually, they always looks better. PHPで画像を雑誌風に自動レイアウトするクラスが公開されています。 例えば、次の
「色に情報を運ばせる」テクニック
昨日のエントリーで、プレゼンの資料において、「色に情報を運ばせる」ことについて簡単に触れたが、少し説明が不十分だったと思われるので、具体的な例をあげてもう少し分かりやすく説明しよう。 まずは下の図を見て欲しい。 ブログに関わる人たちをグループ化した図だが、グループが三階層に分かれることと、その数が上位層になるほど数が少なくなることを表現する、という目的はきちんと果たしている。 問題は色使いである。せっかくカラー画面を使ってプレゼンをするのだからと、色を着けたのだろうが、色分けそのものは何の役も果たしていない。「役目はないが、無駄ではなかろう」というのが通常の考え方だが、Tufteはそれを「情報量の無駄使い」と呼ぶ。彼ならば、こんな「色使い」を薦めるだろう。 上位層に行けば行くほどブログとのかかわりが「濃い」ことを色の濃淡で表している。つまり色情報がちゃんと役割を果たしているのだ。それに加え
WD Live! Web標準時代に求められるサイト構築法
Web標準時代に求められる サイト構築法 木達一仁 株式会社ミツエーリンクス WEB開発チーム フロントエンドエンジニア Web Standards Projectメンバー k-kidachi@mitsue.co.jp / kidachi@kazuhi.to 株式会社ミツエーリンクス WEB開発チーム フロントエンドエンジニア（2004年2月～） Web標準準拠サービスの立ち上げ/運用 Web標準Blogの運営 W3C Advisory Committee Representative 海外のWeb標準関連書籍和訳版の監修 Web Standards Project（WaSP）メンバー mixiにてWeb標準コミュニティを主催（2006年5月25日現在3260人が参加） 7月15日「Web標準の日」開催
札幌チャットレディ・プロダクション「ミント札幌」！ 高時給アルバイトなら！
弊社は全ての事業所にて、上記写真の製品を利用した衛生管理を行っています。 「99.9 消臭」 ウィルス対策や除菌・抗菌に効果的、マスクの消臭や除菌にも有効 業務では、厚生労働省のガイドラインに則り、特に、以下の3点を徹底しております。 ・出勤時、トイレ使用後、事務所・チャットルームへの入場時には手洗い、手指の消毒 ・できる限りマスクを着用し、マスクがない時に咳をする場合にはテッシュ・ハンカチや袖等で口や鼻を被覆 ・特に机、ドアノブ、スイッチ、テーブル、椅子、トイレの流水レバー、便座等人がよく触れるところの拭き取り清掃 札幌でチャットレディ求人を お探しなら、 即日現金払いが嬉しい 札幌駅店は 札駅16番出口～徒歩1分、 大通り駅店OPEN！ 大通り11番出口～徒歩5分！ 面接交通費札幌最大 5,000円！！！ チャットレディ経験のある 女性スタッフがいるので安心 2023年3月25日 -
トップページだけでもなんとかしたいのよ
ホームページデザインに悩んだら試してみましょ。スカスカで薄っぺらいトップページだけでも、かっこよくする情報が、ここにあります。
第4回 Rich Internet Application（RIA）とは？
これまで時代背景や，システムの変遷，機能的な特徴を見てきましたが，実際のところ，Rich Internet Application（RIA）と呼ばれるシステムには，どんなものがあるのでしょうか。 BROADMOOR HOTEL（ブロードムーアホテル） 下図は，「RIA」という言葉が生まれた原点とも言えるシステムです。ホテルの予約システムなのですが，従来の複数画面に分かれての予約プロセスを，一画面で実装したことで注目されました。 それまでのホテル予約のプロセスは，宿泊予定日を入力し，空いている部屋を選び，個人情報を入力し，決済情報を入力する，という四つの「画面（ページ）」から構成されていました。このシステムが革新的だったのは，画面が一つしかないという点です。やっていることは同じなのですが，この画面遷移の（ページの切り替り）時間のイライラをなくし，利用者自身が今何の情報を入力しているのか（コン
デザイン能力を身につける方法 - 分裂勘違い君劇場 by ふろむだ
まず、この記事で紹介されていたUIの話。 あのUIは、オイラ的に解釈するなら、こんな感じ。 まず、いちばん最初に目につくのが、「レトリック」を使った導線設計をしているということ。 つまり、まず、確信犯的かつ計画的にユーザに「誤解」させる。 つまりこの「スクロールバーに見える」というのは、「釣り」なわけで。 ユーザは、それに釣られて、スクロールバーだと思って、使ってみる。 そこで、すかさずネタばらしの「釣り宣言」をする。 「スクロールバーだと思ったでしょーwww。うそぴょーん。」というわけだ。 しかし、「期待を裏切られたユーザ」は、その裏切りの価値を認めるわけだ。 「なんだ、これ、スクロールバーじゃないけど、スクロールバーよりも便利じゃん」というわけだ。 オイラがよくやるブログ記事の書き方と同じだ。唯一の違いは、このUIのレトリックは目論見どおりに成功し、オイラのレトリックは単にすべりまくっ
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Buttonator