DesignHack

使いやすいWebをデザインする


@IT Sepcial

【@ITスマートフォンアプリ選手権
レポート】
学生からプロまで入り乱れてのアプリ合戦頂上対決!

スマートフォンアプリ選手権の決勝大会がお台場で開催され、予選を勝ち抜いたアプリとその作者が集合。面白プレゼンで盛り上がったイベントをレポート

2012/1/13

新着記事

NFCやLTE対応予定のiPhoneと、先行するAndroid
カイ士伝のアプリライフ(10) iPhoneとAndroid、そしてWindows Phoneという3つのOSの今後を占う。それぞれの通信規格とコンセプトは?

New! リッチクライアント & 帳票」フォーラム 2012/02/09
家電のUIになるブラウザ
D89クリップ(38) 未来の家電はインターネットに接続でき、ブラウザが内蔵されてくる。家電にブラウザが載ったらどうなるか? 未来のホームネットワークを想像しよう

New! リッチクライアント & 帳票」フォーラム 2012/02/03
「汎用のUI技術」として広がるHTML5
HTML5とかtopi(1) すさまじい勢いで成長しているHTML5を中心としたオープンなWebプラットフォーム。HTML5やAPI、Webブラウザのアップデート情報をお伝えする

リッチクライアント & 帳票」フォーラム 2012/02/02
ビヨンド・クールジャパン!?
中村伊知哉のもういっぺんイってみな!(6) コンテンツという文化力と、ものづくりという技術力を掛け合わせる。両方を国内に持ち合わせている国は多くない。チャンスなのだ

リッチクライアント & 帳票」フォーラム 2012/01/27
Qt5で10億人ユーザーへ、OSSコミュニティ化で健在に
D89クリップ(37) ノキアから売却されてQtはどうなったのか? 弱体化してしまうのではとの心配をよそにダウンロード数は飛躍的に伸びている

リッチクライアント & 帳票」フォーラム 2012/01/20

連載記事一覧

中村伊知哉のもういっぺんイってみな!

この十数年もの間、IT政策の最前線で走り続けている中村伊知哉教授によるカジュアルなつぶやきコラム。政策へのもどかしさがほとばしります!

New!最終更新 2012/2/10

Web Fontsの歴史と使い方

WebFontsを利用すると、Web上にあるフォントファイルを読み込んでフォントを表示できるようになる。さっそく勉強して使ってみよう

最終更新 2011/12/13

WordPressでFacebookページを作ろう

企業がいま活用したいソーシャルサービスのFacebook。CMSとしてWordPressを用いた、コンテンツの作成方法やマネジメントの方法を紹介します

最終更新 2011/10/6

Chrome Web Store特集

Chromeブラウザ用のWebアプリのオンラインマーケットプレイス、Chrome Web Storeでは、3000以上のWebアプリが公開されている

最終更新 2011/8/23

Zen-Codingで高速HTML&CSSコーディング

Zen-Codingのテキストプラグインを使うと、効率的にHTMLが書ける。記事内でパワフルな展開の様子を試してみよう

最終更新 2011/7/21

コレスジ!

いいデザインにはスジがある!Webサイトやプロダクトのデザインの中で「よいデザイン」とされるものは、そのデザインへといたるまでに、はっきりとした“スジ”が存在します。その“スジ”を探っていきます

最終更新 2011/6/29

速いFlash/ActionScriptチューニング入門

Flash/ActionScriptチューニングの基礎知識から実践的テクニックまでを紹介する連載。読みながら試せるオンライン・サンプルもあります。Adobe AIR/Flexにも応用可能です

最終更新 2010/7/22

D89 CSS/スタイルシート リファレンス辞典

無数にあるCSS/スタイルシートのプロパティを大まかに分類し、1つずつ正しい使い方を紹介しながら、リファレンス辞典を完成させていく連載です。コードサンプルやDOMの指定方法まで丁寧に説明します

最終更新 2011/4/21

AR三兄弟が考える拡張現実とマッシュアップ

iPhoneアプリのセカイカメラで、いま話題のAR(Augmented Reality:拡張現実)ですが、既存のWebサービス・概念・製品とマッシュアップすることによって、ARはさらにユニークな方向に可能性を広げることができます

最終更新 2009/10/5

D89クリップ

デザイナーのためのセミナー/イベントのレポートなど、Webデザインに役立つ出来事/情報をお届けします

New!最終更新 2012/2/3

Design tool

ICON

一撃デザインの種明かし

Webサービスのアイデアをデザインとして形にするためのハウツー連載です

2011/5/24

ICON

マウスだけでもプログラミングできる!

非プログラマのためのプログラミング講座。MITが作った「Scratch」を使って、ITちゃんに枕投げをさせるまでを解説する

2009/11/5

Design tool > Webオーサリング

ICON

どこまでできる? 無料ツールでWebサイト作成

無料のWebサイト作成は業務レベルでどの程度使えるのか? 本連載では、さまざまな無料ツールを使用したサイト開発を掘り下げていく

リッチクライアント & 帳票 2008/4/7

ICON

Webオーサリングツールを使ってみよう

ホームページ・ビルダー、Dreamweaver 8、Expression Webを解説。CSSによるレイアウトや表現力で優れているのはどれだ

リッチクライアント & 帳票 2007/7/6

ICON

Webデザイン・ツール「Expression Web」を試してみた

Expression Web製品レビュー(前編)

Webクリエイター市場での巻き返しを狙い、Microsoftは新しいWeb構築ツールをリリースした。その使い勝手や特長をレビュー

Insider .NET 2007/2/16

Design tool > CMS(Contents Management System)

ICON

独断と偏見のCMS比較

いまやWebサイト立ち上げ期に、Webサイトの内容を効率的に管理する「コンテント管理システム(Content Management System)」は必要不可欠。CMS製品を開発するUEIの清水氏が分類するCMSの3ユーザーと9つの機能とは?

2009/12/3

ICON

HTMLを知らない人でもWebサイトが作れるCMSとは?

どこまでできる? 無料ツールでWebサイト作成(7)

HTMLなどの知識を必要とせずにWebサイトのコンテンツ管理を実現するCMS。無料のものをいくつか紹介します

リッチクライアント & 帳票 2008/4/7

ICON

CMSビジネス活用術

Webサイトは一般の企業にとっても大きな武器だが、うまくビジネス活用するにはツール、方法論、体制などさまざまな点を考慮する必要がある

仕事の改善 2007/1/30

Design tool > jQuery/Ajax

ICON

ざっくり覚えて始められるjQueryセレクタ入門

デザイナのためのWeb学習帳(4)

現在大流行中のjQuery。CSSセレクタのように使えるらしいけど、実際どうなの? というデザイナのために、その基本をざっくり紹介

2009/12/1

ICON

CSSの書き方も分かるjQueryプラグイン実践活用法

jQueryと、そのプラグインの使い方を、UI効果(エフェクト)のテーマごとに紹介する連載。jQuery/JavaScript/HTMLコードだけではなく、CSSの書き方も解説することで、より実践的にjQueryプラグインを使うための参考ドキュメントになることを目指しています

2010/6/17

ICON

jQueryで学ぶ簡単で効果的なAjaxの使い方

いま話題の「jQuery」を使って、目的を持ったAjax開発の効率化や使いどころ・注意点などについてサンプルを見ながら解説していきます。Webデザイナ/プロデューサーも必見!

リッチクライアント & 帳票 2009/7/30

ICON

いまさら聞けない、“Ajax”とは何なのか?

いまさら聞けないリッチクライアント技術(3)

Googleマップで有名になり、もはやWebの定番といっても過言ではないAjax。その生い立ちや仕組み、構成技術について解説

リッチクライアント & 帳票 2007/8/23

ICON

パターンとライブラリで作るAjaxおいしいレシピ

Ajax開発においてみなさんはMVCを意識していますか? 本連載では、デザインパターンとライブラリを活用し、MVCで設計する分かりやすいプログラミングの仕方をサンプルを見ながら解説します

リッチクライアント & 帳票 2008/10/22

Design tool > グラフィック/フォトレタッチ

ICON

D89 デザインTips - デザインのハウツーテクニック集

Wデザイン初級者でも分かるデザインツール基礎/応用Tips(ハウツー・小技・テクニック)集です。[写真加工/フォトレタッチ編][イラスト/ドロー編][アニメーション編]など、随時公開していきます

2010/5/18

ICON

Webにおけるグラフィック表現手段としてのFlash

D89クリップ(6)

デザイナ川上俊氏のセッション「ウェブとタイポグラフィー、伝達と表現」から、FlashとAIRのツールとしての原点とプラットフォームとしての可能性を考える

2009/3/3

ICON

絵心がなくても簡単に絵が描けるProcessing

アートやデザインのためのプログラミングを実現するオープンソース環境Processing。とにかく簡単にグラフィックを作れるので、ビジュアル表現に興味があるけど二の足を踏んでいた方にお勧めです

2008/12/17

ICON

いまさら聞けないSVG、なぜ知られていないのか?

いまさら聞けないリッチクライアント技術(9)

「SVG? 聞いたことないなあ……」と思うは無理もないことです。知られていない理由とその秘めたる実力について解説します

リッチクライアント & 帳票 2008/2/15

Design tool > Flash/ActionScript

ICON

いまさら聞けない! FlashとActionScriptについて

いまさら聞けないリッチクライアント技術(5)

今回は一般的にもおなじみの技術であるFlashの利点や欠点、作り方、中核技術であるActionScript、歴史などについて解説

リッチクライアント & 帳票 2007/10/18

ICON

Flashの基礎を無料で習得! ActionScript入門

ActionScriptを知っていますか? Flash技術の要となる言語で無料で簡単にFlashアプリケーションを作れます。そのActionScriptについて初心者のために一から丁寧に解説していきます

リッチクライアント & 帳票 2008/7/11

ICON

Flash制作を簡単にするActionScriptライブラリとは?

Flasherに便利なオープンソース「Spark project」

Flashの複雑なアニメーションや機能をどのように制作していますか? 実は、無料で簡単に実現する方法があります

2008/12/10

ICON

速いFlash/ActionScriptチューニング入門

Flash/ActionScriptチューニングの基礎知識から実践的テクニックまでを紹介する連載。読みながら試せるオンライン・サンプルもあります。Adobe AIR/Flexにも応用可能です

2010/7/22

ICON

新藤愛大――「Spark projectは生活の一部」

広がれ エンジニアの輪(9)

Flashが好きで、いつの間にか仕事になってしまったフリーランスエンジニア。コミュニティ「Spark project」は生活の一部と化している

コミュニティ活動支援室 2008/12/17

ICON

Flashとポリシーファイルの密接なカンケイ

星野君のWebアプリほのぼの改造計画 番外編(1)

赤坂さんは星野君の担当する仕事に興味津々。Flashでもセキュリティ対策はきっちりやらないと!

Security&Trust 2007/1/30

ICON

AR三兄弟が考える拡張現実とマッシュアップ

iPhoneアプリのセカイカメラで、いま話題のAR(Augmented Reality:拡張現実)ですが、既存のWebサービス・概念・製品とマッシュアップすることによって、ARはさらにユニークな方向に可能性を広げることができます

2009/10/5

Design tool > Flex/Adobe AIR

ICON

Flexフレームワークで変わるRIA開発の現場

Adobe CS5の新しい中核を担うFlex 4のフレームワーク。ワークフローを初めRIA開発現場がどう変わるかを、Flash Builder 4やFlash Catalyst、Adobe AIR 2などの技術・ツール・フレームワークなどの機能を紹介しながら解説する連載

リッチクライアント & 帳票 2010/8/5

ICON

画像とコードの触媒Flash Catalystについて語りますと

WebとUIをつなぐトリックスター(3)

先月発表があったアドビの新ツールFlash CatalystとFlex Builder 4を実際に使ってみた。その感想とアドビ社員たちが語ったことを紹介しよう

2008/12/26

ICON

作って学ぶAIRウィジェットの基礎→応用

最近よく聞くAdobe AIRって何だっけ? ウィジェットを簡単に作れるらしいけど…… と曖昧な知識のあなたに贈る超入門連載。楽しいサンプルを作って基礎から応用まで学ぼう

リッチクライアント & 帳票 2008/4/21

ICON

現場で使えるFlex実践テクニック

本連載では、Flex開発で基本となる特徴的な機能から一歩進んで、実開発の現場でよく使われるテクニックについて、より実践的に解説します

リッチクライアント & 帳票 2007/12/14

ICON

Apollo改めAIRプログラミング入門

&Apolloプログラミング入門

連載「Apolloプログラミング入門」が「AIRプログラミング入門」としてリニューアル!AIRになってからの新機能をイロイロ紹介します

リッチクライアント & 帳票 2007/12/20

Design tool > Silverlight

ICON

プロトタイプ機能を備えた“本物”のデザイナーのツール

Expression Blend 3+SketchFlowを使ってみた

先日発表された最新デザインツールについて、主な新機能6つと、Silverlightアプリに肉付けできるプロトタイプ機能を紹介

2009/07/27

ICON

デザインツールで始めるSilverlightアニメ/グラフィック

Silverlight 2で.NET技術をカッコよく使おう(3)

「Silverlightってプログラマのものでしょ」と思っていませんか? アニメやグラフィックを制作できるツールもあるんです

リッチクライアント & 帳票 2009/2/27

ICON

Silverlightコントロールの「デザイン力」

Expression Blendで体験しよう

Microsoft Expression Blend 2.5を使ったSilverlightコントロールのデザイン方法を学習しながら、その「デザイン力」を実感してみよう

リッチクライアント & 帳票 2008/7/24

ICON

.NETを知らない人でも分かるSilverlight入門

「マイクロソフトの技術は.NETを知らないと学習できないのでは?」という読者にこそ読んでもらいたい、リッチクライアント技術Silverlightの入門連載。 もちろん、知っている人も大歓迎!

リッチクライアント & 帳票 2008/8/4

User Experience

ICON

リッチクライアントの新たな潮流:
エクスペリエンス・テクノロジー(経験創出技術)とは?

ユーザーインターフェイス技術、分析・管理系技術、開発手法の3つの融合が実現する、リッチクライアントの新しい潮流を解説する

リッチクライアント & 帳票 2009/9/1

ICON

時代のキーワード:“エクスペリエンス”とは何か

連載:eビジネスが生み出すエクスペリエンス 第1回

エクスペリエンスとは、単なる「体験」ではない。成功しているeビジネスはエクスペリエンスの設計が違うのだ

仕事の改善 2001/8/7

User Experience > いま話題のトピック/コラム

ICON

D89クリップ Webデザインに役立つできごと/ヒントになるインタビュー

デザイナーのためのセミナー/イベントのレポートなど、Webデザインに役立つ出来事/情報をお届けします

2011/3/17

ICON

おばかアプリ図鑑

「おばかアプリ」「おばかアプリ選手権」とは何かを解説し、これまでの選手権で登場したアプリたちを、カタログ形式で五十音順に紹介しよう。今後の参考にしてほしい

2010/2/19

ICON

Windows 7でどんだけ“おばか”なアプリが作れるの?

おばかアプリ座談会

おばかの発想の源やアプリの作り方などについて、おばかアプリ選手権の歴戦の受賞者や、マイクロソフトの代表者に話を伺った。アイデアのご参考に

2010/3/4

ICON

楽しいWindows 7アプリ作成入門

「あんなこといいな」「できたらいいな」というアイデアをWindows 7の表現力で具体的なというアプリという形にするには、どうすればいいのだろうか? 具体的なコードやデモとともに一から教えます

2010/5/14

ICON

Flashと人〜あの人からの6つの回答

Flashを取り巻く人を追うリレーコラム。気になるFlasher(フラッシャー)がバックグラウンドや注目のできごと、未来を紡いでいきます

2009/4/14

User Experience > 使いやすさ/ユーザビリティ

ICON

デザイナにおすすめのユーザーインターフェイスデザイン
6つのポイント

従来のデスクトップアプリケーションでのGUIやインタラクションの原則から、Webアプリケーションのデザインを考えよう

2009/1/5

ICON

ユーザビリティのヒント

Webアプリケーションのユーザーインターフェイスデザインに役立つさまざまなヒント集。自動販売機でジュースを買うときの不要な動作から考える

リッチクライアント & 帳票 2006/10/20

ICON

「使える、使いやすい、使いたい」と思えるUIとは?

WCR Watch(15)

ツールを採用しただけではリッチクライアントは成功しない。リッチクライアントのパフォーマンスを最大限に引き出すUIの条件をいくつか考えてみたい

リッチクライアント & 帳票 2006/8/31

ICON

ユーザビリティ(使いやすさ)の大切さ

[連載]安藤幸央のランダウン(3)

同じWebアプリケーションでも使いやすさで大きく差が出るのはなぜだろうか? 使いやすさ、使いにくさに潜む秘密に迫る

Java Solution 2001/9/29

ICON

ペルソナに機能とユーザビリティを決めてもらおう!

自社プロダクト立ち上げ奮闘記(2)

アプリケーションのイメージを具体的にしていくためBacklog開発チームが採用したのが、本稿で紹介する「ペルソナ法」だった

プロジェクト管理 2007/1/17

ICON

Webユーザビリティ、次ラウンド

Opinion:小川誉久

当初はバラエティに富んでいたWebページ・デザインも、最近では一定のセオリーができつつあるようだ。Webユーザビリティの現在と未来について考える

Windows Server Inside 2002/1/24

ICON

書評:Webユーザビリティとメディア表現

Webデザインの未来を考える6冊

Web製作者はユーザビリティを意識しなければならなくなったが、そのメソッドはまだ確立していない。その立場の差を6冊から読み取る

IT戦略 2001/8/29

User Experience > デザインのヒント

ICON

話題のアイトラッキングを使ってみた

アイトラッキング調査の実践

ユーザーはどのようにWebページを閲覧しているのか? @ITの直帰率を下げるための方法を探る方法として、アイトラッキングで調査してみた

2009/5/25

ICON

Webアプリケーションのユーザーインターフェイス

従来のデスクトップアプリケーションでのGUIやインタラクションの原則から、Webアプリケーションのデザインを考えよう

リッチクライアント & 帳票 2006/4/2

ICON

インタラクションデザインパターン

インタラクションデザインパターンの原則や秩序の歴史を見てみよう。20年前のAppleはどのようにして質の高い開発を目指していたか

リッチクライアント & 帳票 2007/5/11

ICON

タッチパネル携帯に新提案、iPhoneと違う“操作感”

進化するモバイル技術の基礎講座(3)

パネル押下の強弱だけで画面をズームイン/アウトできるなど、日本写真印刷が企画段階から協力・開発したタッチパネルを紹介

MONOist > 電子機器 2009/11/26

ICON

感性価値のこれからとモノのインタラクションデザイン

価値づくり、モノづくり(1)

技術競争や価格競争で疲弊するくらいなら、モノの価値の高め方を探求したい。インタラクションデザインのさまざまな試みからモノの価値を考える

MONOist > 生産管理 2009/9/30

ICON

モノ/ヒトをつなぐこれからの「場」のデザイン

ユビキタス空間において求められるユーザーインターフェイスの形とは何か。若手技術者と若手クリエイターが、ユーザー中心の視点に立った空間デザイン論を考える

RFID+IC 2008/9/2

ICON

プロフェッショナルなWeb制作に役立つ5冊

優れたWebサイトでは、デザインと使い勝手、ファイルの大きさといった、相反する要素をバランスさせる必要がある。こうした問題を解決するのに参考になる書籍を紹介しよう

Master of IP Network 2000/5/22

ICON

書評:“情報の力”を獲得する「情報デザイン」

情報との付き合い方を再考する6冊

IT業界にいるわれわれは「情報」をどのように扱ってきただろうか? 多彩な視点で書かれた6冊を通じて「情報デザイン」を考えみる

IT戦略 2002/1/8

User Experience > SEO/アクセス解析

ICON

いまさら聞けない「SEO」で検索結果の優位性を学ぶ

いまさら聞けないリッチクライアント技術(13)

検索エンジンで結果が上位に表示されることの優位性と最適化の方法論、具体的なTipsをおさらいしましょう

リッチクライアント & 帳票 2008/6/18

ICON

スタートアップが押さえておくべきSEOの極意、6カ条

人間に見やすく、ロボットにも好まれるサイト作りを

これからスタートするWebサイトが押さえておくべきSEO6カ条。SEOで成功したフォートラベルの山路氏が伝授する

2008/8/28

ICON

アクセス解析ツールを比べてみよう

アクセス解析ツール比較

Webサイトの利用増で、ユーザーのアクセス状況を分析することが重要になっている。市場のツールを比較してみよう

リッチクライアント & 帳票 2007/2/21/

ICON

アクセス解析結果を活かす術

あなたは、Web解析をうまく利用できていますか? 指標の意味を理解し、ひとつひとつの要素を分析していくことが重要です。サイトの運営戦略に役立てる方法を伝授します

リッチクライアント & 帳票 2008/10/3

ICON

いきなりナウでヤングなWebサイトを管理しろって……

ツールを使ってネットワーク管理(7)

誰が管理者なのかさえも不明な律子さんの会社のWebサイト。社長が「うちのホームページも注目を集めたいのだ」といい出したらしい

Master of IP Network 2006/3/14

Teamwork

ICON

Silverlight制作をデザイナと開発者でコラボしてみた

実録:デザイナ×開発者コラボを成功するポイントとは

Expression Blend×Visual Studioのコラボは本当に簡単なのか? 面白コンテンツの制作過程をドキュメントでお届け

2009/9/7

ICON

もうWebデザインしないなんていわないよ、絶対

Webデザイナの卵が立派なWebデザイナになるまでの回顧録。成長ステップごとに必要なツールや考え方など、デザイナの仕事やチームワークに役立つ情報をお伝えしていく

2009/11/26

ICON

WebとUIをつなぐトリックスター

Webサイト制作の要となるエンジニアとデザイナのチームワーク。異なる者同士をつなぐトリックスターからヒントを探る

2010/6/11

ICON

GoogleSitesを使って制作プロジェクトをハックしよう

GoogleSitesでプロジェクト管理

Web制作の現場をサンプルに、GoogleSitesをツールに用いたプロジェクト管理の方法を紹介する。使いこなしてプロジェクトをハックしよう

2009/3/17

ICON

開発現場のUIトラブルを解決!? 画面プロトタイプ入門

いまさら聞けないリッチクライアント技術(16)

アプリ/サイト納品後に顧客に「使いにくい」「あれ追加して」といわれた方へ。前もって画面イメージを簡単に作る方法が……

リッチクライアント & 帳票 2009/3/11

ICON

Flex/AIR開発でデザイナとの協業を楽にする「yui」

デザイナとプログラマを“結”ぶオープンソース(前編)

Flex/AIR開発でデザイナと協業することになったら、ぜひ試してみてほしいオープンソースのフレームワークがあります

リッチクライアント & 帳票 2008/10/1

ICON

人・チームが成功の鍵となるリッチクライアント

WCR Watch(6)

大手国内航空会社の航空券予約サイトなど、RIA開発に豊富な実績を持つセカンドファクトリーに、RIA構築における成功のポイントを聞いた

リッチクライアント & 帳票 2005/8/4

ICON

ルネサンスの巨匠たちに学ぶエンジニアリングの技

The Rational Edge(37)

偉大な絵画の多くはチーム作業の成果だ。師匠がデザインを描き、重要な部分を塗る。そして、熟練労働者や見習いが残りの作業を分担した

アーキテクチャ 2005/9/23

ICON

デザイナーとの飽くなき闘争−前哨戦

ASP.NET Webアプリ開発の裏事情(2)

Webデザイナーとチームを組んでのWebアプリ開発は今や当たり前。感性も思考方法も異なる彼らと共同作業するためには……

Insider.NET 2004/11/27

ICON

MVCモデルという言葉をよく聞きますが何のことですか?

Java Solution FAQ

Webアプリケーション開発におけるデザイナーとプログラマーの分業に欠かせない必須知識である「MVC」とは何かを分かりやすく解説します

Java Solution 2000/12/7

ICON

MVCによる分業と相互不干渉の効率性

開発現場の天国と地獄(2)

カットオーバー2カ月前。MVCによる分業と相互不干渉の効率性を説明します

プロジェクト管理 2004/12/22

ICON

仕様書いらずの新ネットサービス構築法

インターネットを使った新サービス構築(1)

仕様書を書かず、開発途中で挙がってくるさまざまな機能要求をツールで管理しながら、プロトタイプを改良し、β版にこぎつける

Webマーケティング 2007/7/12

ICON

プロジェクトメンバーを1つにまとめる

プロジェクトマネジメントスキル 実践養成講座(1)

現場でありがちなシチュエーション。そこから、プロジェクトマネジメントに必要なことを学んでいこう

スキル創造研究室 2004/2/4

ICON

5分で絶対に分かるマインドマップ

ITエンジニアの注目を集めるマインドマップ。その利点、書き方のコツ、マインドマップでWBSを作成する方法などを5分で解説。どんどん活用して、仕事の効率を高めよう!

スキル創造研究室 2008/7/16

Web学習帳

ICON

デザイナのためのWeb学習帳

Webを構成する技術を超初心者向けに説明します。まずは基本の基本である「HTML」から攻略していこう!

2010/7/27

ICON

いまさら聞けない「Webブラウザ」超入門

いまさら聞けないリッチクライアント技術(11)

インターネットに接続するために、当然のように利用するWebブラウザ。Webサーバとのやりとりから、その仕組みを知っておこう

リッチクライアント & 帳票 2008/4/14

ICON

インターネットのモヤモヤを解消する

PCから先のネットワークの仕組みのモヤモヤ。入門書を読む前に、もう一度、急に管理を任された文系女子とTCP/IPを学ぼう

Master of IP Network 2008/9/8

ICON

本音のWebサービスガイド

毎日、多種多様なWebサービスが誕生しています。多すぎてどれを使えばいいのかお悩みの皆さんに1つ1つを丁寧に紹介します。4人のご意見番も登場して本音で語ります

2010/2/4

Web学習帳 > HTML/CSS

ICON

D89 Web標準HTMLタグリファレンス

Web標準に基づいたXHTMLタグの正しいマークアップ方法のリファレンス一覧です。Web標準のタグリファレンスを7回連載でおさらいします

2009/8/7

ICON

WebデザイナのためのHTMLチューニング入門

Webサイトを見た人の印象を良くするのか悪くするのかには“速度”が大きくかかわってきます。FirefoxのプラグインYSlowで測る7つの計測ポイントから“速い” HTMLの書き方を学びましょう

2009/8/20

ICON

いまさら聞けないCSS/スタイルシート入門

Webデザインにあると便利なCSS。ちょっとサイトをステキにするためのスタイルシートです。基本の基本を学びませんか?

2008/12/2

ICON

Webブラウザ別CSSハック&フィルタTips

Webブラウザの違いにより起こるレイアウトの表示ずれ問題に泣かされるWebデザイナのために、Webブラウザごとに使えるかどうかの表を交えながら問題を解決するためのさまざまなCSSハック&フィルタTipsをお届けします

2009/12/16

ICON

D89 CSS/スタイルシート リファレンス辞典

無数にあるCSS/スタイルシートのプロパティを大まかに分類し、1つずつ正しい使い方を紹介しながら、リファレンス辞典を完成させていく連載です。コードサンプルやDOMの指定方法まで丁寧に説明します

2011/4/21

Web学習帳 > HTML5/CSS3

ICON

HTML5“とか”アプリ開発入門

最近よく目にする「HTML5」という言葉。JavaScriptのAPIやCSS3、SVGなどを含め、急速な広がりを見せつつある「HTML5」の基礎を学べる入門連載です。「HTML5を使うと、何ができるのか」「それを実現するには、どのようなプログラムを書いたらいいのか」をお届けします

2011/4/5

ICON

HTML5が拓く新しいWeb

新たなアプリのプラットフォームとなるHTML5に対してWebブラウザベンダの取り組みを聞くインタビュー

2011/3/14

ICON

デザイナは要注目! 明日から語れるHTML5&CSS3

一撃デザインの種明かし(13)

Webデザイナのみならずプログラマも必修となるHTML5&CSS3について、具体的な表現の例や、タグ、今後の予想、ツールなどを紹介します

2010/9/27

ICON

標準化と実装が進む次世代Web規格「HTML5」とは?

用語解説(12)

ChromeやOperaなどのWebブラウザへの実装が始まっているHTML5。何が新しくなるのか? HTMLの歴史を振り返りながら、その目的や特徴を解説する

Windows Server Insider 2010/8/19

ICON

HTML5で何が変わる? InfoTalk#17 フォトレポート

Development Photography(6)

HTML5で、アプリとWebの関係は、JavaScriptはどう変わる? コネクティ若狭氏&サイボウズ・ラボ竹迫氏が登壇した勉強会をレポート

自分戦略研究所 > 自分戦略研究室 2010/4/19

- PR -
   @IT CORE特集

クラウドを制するものは、ITを制す! クラウドに関する情報をまとめた@IT特設コーナーです。クラウドを理解して最適なサービスを比較・検討し、SaaS・PaaS・IaaS・DaaSといったクラウド活用(雲活)へつなげてください

このたびの大震災で被災された皆さま、ご家族ならびに関係者の皆さまに、心からお見舞いを申し上げます。災害の復旧支援に関する記事を集めました。お役立ていただければ幸いです

IT業界を目指す方、ITエキスパートに向かって勉強中の方のために、@ITに掲載された基礎解説記事を集めました

盛り上がるiPhoneアプリ開発。そのハウツーや魅力に関する@IT記事一覧です

アプライアンスの登場で盛り上がるデータウェアハウス市場。基本から各ベンダの動向まで解説



リッチクライアント用語辞典

リッチクライアントやユーザーインターフェイス技術に関する用語集です。
Ajax Flash HTML
CSS JavaScript Silverlight
Flex Adobe AIR リッチクライアント


D89 CSS/スタイルシートリファレン
無数にあるCSS/スタイルシートのプロパティを大まかに分類し、1つずつ正しい使い方を紹介する、リファレンス辞典です。コードサンプルやDOMの指定方法まで丁寧に説明します


■アルファベット順プロパティ一覧

Webブラウザ別CSSハック&フィルタTips

IE 6で泣かないための、9つのCSSハック

Webブラウザの違いにより起こるレイアウトの表示ずれ問題。ユーザーの多いIE 6での問題を解決するテクニックを紹介します
  1. 透過PNGを表示させる方法
  2. min-width、max-widthを使いたい
  3. min-heightを対応させる方法
  4. heightを100%にする方法
  5. フロート時の2倍マージンを通常に戻す方法
  6. リストの縦並びメニュー
  7. リサイズ時にずれる
  8. フロート時にテキストが3pxずれてしまっていた場合
  9. 外側の要素にoverflow:auto;を指定していた場合
■ Webブラウザ別CSSハック

Webブラウザごとに使えるかどうかの表を交えながら、CSSハックを紹介。文法的に正しいかどうかも一目瞭然!


(※表の見方は連載第2回第3回をご参照ください。大きい表は、連載インデックス「Webブラウザ別CSSハック&フィルタTipsをご参照ください。(下記、IE=Internet Explorer、Ff=Firefox 3.5、Sa=Safari 4、Ch=Chrome 3、Op=Opera 10)
名称 Windows Mac OS X バリ
デー
ション
IE 6 IE 7 IE 8 Ff Sa Ch Op IE 5 Ff Sa Op
スターハック × × × × × × × × ×
2スターハック × × × × × × × × × ×
アンダースコアハック × × × × × × × × × × ×
インポータントハック × × × × × × × × × ×
チャイルドセレクタ
ハック
×
隣接セレクタハック ×
オーウェンハック ×
属性セレクタハック × ×
スター+ハック × × × × × × × × ×
IE7スターハック × × × × × × × × × × ×
スター7ハック × × × × × × × × ×
ハッシュハック × × × × × × × × × ×
アスタリスクハック × × × × × × × × × ×
全角スペースハック × × × × × × × × × ×
タイトル属性ハック
(<link>要素)
× × × × × × × ×
タイトル属性ハック
(<style>要素)
× × × × ×
コメントハック
(p/* */ {})
×
コメントハック
(html>/**/body p {})
× × ×
コメントハック
(head~/* */body p {})
× × × ×
コメントハック
(/**/ html* p {})
× × × × × × × × ×
コンディショナル
コメント
× × × × × × × ×
ユーザーエージェント
ハック
× × × × × × × ×
ルートセレクタハック × × × ×
ファーストオブタイプ
ハック
× × × × ×
否定lang疑似クラス
ハック
× × × × ×
ノットターゲットハック × × × × ×
構造的な疑似クラス
ハック
× × × × ×
否定Nth child
疑似クラスハック
× × × × × × ×
ファーストチャイルド
ハック
× × × × × × × × ×
モズエニー
リンクハック
× × × × × × × ×
モズドキュメントハック × × × × × × × × × ×
コメントモズエニー
リンクハック
× × × × × × × × ×
xmlns属性セレクタ
ハック
× × × × × × × × × ×
ウェブキットハック × × × × × × × × ×
MacIEスターハック × × × × × × × × × ×
インポートハック ×
メディアタイプ混合
ハック
×
ホーリーハック、
バックスラッシュハック
(/* \*/)
×
ホーリーハック、
バックスラッシュハック
(/* \*//*/)
× × × × × × × × × ×
ホーリーハック、
バックスラッシュハック
(/*\*/)
× × × × × × × × ×

Webブラウザ別CSSハック&フィルタTips

 デザイン初級者でも分かるデザインツール基礎/応用Tips(ハウツー・小技・テクニック)集です。[写真加工/フォトレタッチ編][イラスト/ドロー編][アニメーション編]など、随時公開していきます。

写真加工/フォトレタッチ編

イラスト/ドロー編

アニメーション編



[2012年1月人気記事 TOP 10]
1
108もあるぞ! HTML5の要素数
2
学生からプロまで入り乱れてのアプリ合戦頂上対決!
3
jQuery Mobileでサクッと作るスマホWebアプリの基本
4
Webの3つの問題を解決する「HTML5」とは何なのか
5
Qt5で10億人ユーザーへ、OSSコミュニティ化で健在に
6
これなら分かるAR(拡張現実)
7
グランプリは生徒と先生が作った役に立つAR
8
Google Chromeの隠し機能を使いこなしていますか?
9
ビヨンド・クールジャパン!?
10
生中継初心者必見! Ustreamの基本的な使い方とは