MdN Design｜総合情報サイト
2013年1月29日発売のweb creators特別号「いますぐ悩みが解決する! Webデザイン 仕事で役立つ54のアイデア」から、毎週記事をピックアップしてご紹介! 近年さかんに目にするパララックス効果やMasonryを利用したレイアウトをはじめ、見やすくて使いやすいナビゲーション、フォームや製品紹介ページのユーザビリティを向上するインタラクション、表現の可能性を広げるHTML5+CSS3の機能、制作効率を向上するフレームワークの紹介、スマートフォンサイト制作のポイントとTipsなど、Web制作の仕事に役立つ54のアイデアが満載です。 ※本記事はweb creators特別号『いますぐ悩みが解決する! Webデザイン 仕事で役立つ54のアイデア』からの転載です。この記事は誌面でも読むことができます。
約4割の企業がWeb閲覧にIE6以前を利用―Web広告研究会調べ - MdN Design Interactive
公益社団法人日本アドバタイザーズ協会 Web広告研究会は、「第4回企業内Web閲覧環境に関する調査」を実施。その結果、約4割の企業がInternet Explorer 6.x（もしくはそれ以前）を利用していることが判明した。 同調査は、日本アドバタイザーズ協会加盟企業およびびWeb広告研究会加盟企業445社、官公庁104団体に対して2011年11月7日から12月1日に実施。160社からの回答が寄せられた。具体的には、Internet Explorer 6.x以前が38.6％ともっとも多く、2位はInternet Explorer 8.xの24.2％、3位はInternet Explorer 7.xの13.7％という結果になっている。会社規模が大きいほどInternet Explorer 6.x以前の比率が高く、従業員5000名以上の企業では過半数を超える52％になったという。 また各種We
理屈がわかれば応用はいくらでも利く! Illustratorの正しい教科書 - MdN Design Interactive
理屈がわかれば応用はいくらでも利く! Illustratorの正しい教科書 Illustratorの操作法や実装されている機能をひととおり理解したら、あとは実践あるのみ。ここではさまざまなパーツやパターンの制作方法を解説。Illustratorの機能もより深く理解できるようになるはずです。 Illustratorで実際につくる
MdN Design｜総合情報サイト
スマートフォンと違い、iPadなどのタブレットに最適化された表示を行っているサイトはまだまだ少ない。 そこで今回は、LESSON 13同様、別HTMLを用意せず、同じHTMLにJavaScriptとCSSを使用して、タブレットタイプ用に表示を最適化させる。 タブレット用にするからといって特別にHTMLの作り方を変える必要はなく、正しくマークアップできていれば基本的に問題ない。 ただ、あまりにも無駄に多い入れ子構造や、レイアウトは避けたほうがよい。あくまでも(X)HTML/CSSを意識して作ろう。 今回はタブレットにも使用されるので、HTML5やCSS3を駆使してPC用も作ってよいが、IEなどの未対応ブラウザへの対応が発生するので注意が必要だ。 【1】のような、ブログ形式のPCページ構成をベースに構築していく。 使用するCSSは ・PC用CSS（デフォルト） ・スマートフォン用CSS ・タブ
MdN Design｜総合情報サイト
Node.jsのインストールと 下準備 Node.js のインストールは、UbuntusやMacを利用するのが簡単だ【4】。ちなみに今回はMacとパッケージ管理システムMacPortsを利用してインストールしている。MacPorts のインストールは、Web サイトからpkg 形式のインストーラが配布されているので参照して欲しい【5】。 Node.jsには開発を便利にするパッケ ージが多数配布されている。これらの一括管理には、パッケージ管理システムnpm(node package manager)【6】を使うとよい。npmはMacPortsではインストールできないため、curlを利用してインストールする。curlのインストールはMacPortsで可能だ【7】【8】。 Node.jsでWebSocketを利用したい場合、Socket.ioが便利だ【9】。Node.jsのパッケージとして配布さ
MdN Design｜総合情報サイト
text-shadowはその名のとおり、テキストに影をつけるプロパティだ。うまく使えば画像を使わずとも、テキストを際立たせることができる。運用の効率化や、テキストコピーができるなどメリットも多い。 基本的な指定方法は、テキストから影までの距離（縦、横）とぼかしサイズ、影の色を指定して調整する【1-1】。CSS3でよく使われる、-moz-や-webkit-などのベンダープレフィックスの記述は、textshadowでは必要ない。カンマで区切れば、1つの要素に対して複数の影を指定できる【1-2】。また、影の色はrgba（半透明）で指定することもできる。影を半透明にしておけば、どのような背景色でも自然になじませることができるので便利だ【1-3】。 【1-1】「ぼかしサイズ」と「影の色」は省略可能 【1-2】カンマ(,)区切りで複数指定できる。工夫次第で複雑な表現も可能だ 【1-3】カラーコードをr
MdN Design｜総合情報サイト
作業効率がアップする隠れた使い方教えます！ WEB制作、プロの無料サービス活用術 ──サイトチェックに使えるツール（1） クラウド隆盛の昨今、ソフトウエアと同等か、それ以上に便利な機能を持ったオンラインサービス／ツールが豊富に取りそろってきた。本記事では、オンラインサービスの中でも無料利用が可能なものを選りすぐり、Web制作を6つのシーンに分類してより快適に作業するための82の活用術を紹介する。Webサイトが完成しても即納品というわけにはいかない。不具合がないかを検証することもWeb制作の一部といっても過言ではない。ここではチェックツール活用例を紹介する。 ■バックナンバー 第1回 デザインに使えるツール（1）はこちら 第2回 デザインに使えるツール（2）はこちら 第3回 デザインに使えるツール（3）はこちら 第4回 コーディングに使えるツール（1）はこちら 第5回 コーディングに使えるツ
手軽にWebを彩るCSSコーディングテクニック50 - 海外デザイン事情第7回 - MdN Design Interactive
第7回「手軽にWebを彩るCSSコーディングテクニック50」 2010年03月15日 基本的なCSSを使ったWeb制作はそれほど難しくないが、より高いレベルのデザインを実現しようとすると、難易度はグッと上昇する。そんなときは、世界中のデザイナーやデベロッパーが提供しているCSSテクニックを使ってみるとよいだろう。ここでは、世界各国のデザイナーやデベロッパーが紹介している、ビジュアル表現やレイアウトなどを中心としたCSSのコーディングテクニックを紹介していこう。 翻訳元サイト：Smashing Magazine http://www.smashingmagazine.com/ 原文：50 Useful Coding Techniques (CSS Layouts, Visual Effects and Forms) http://www.smashingmagazine.com/2010/0
MdN Design｜総合情報サイト
作業効率がアップする隠れた使い方教えます！ WEB制作、プロの無料サービス活用術 ──プロジェクト管理に使えるツール（1） Web制作では制作物のクオリティも重要だが、プロジェクトの進行管理を効率化し、コストを抑えることも大きな課題だ。そうしたツールの活用術を紹介しよう。 ■バックナンバー 第1回 デザインに使えるツール（1）はこちら 第2回 デザインに使えるツール（2）はこちら 第3回 デザインに使えるツール（3）はこちら 第4回 コーディングに使えるツール（1）はこちら 第5回 コーディングに使えるツール（2）はこちら 第6回 オフィス作業に使えるツール（1）はこちら 第7回 オフィス作業に使えるツール（2）はこちら Tweet [INDEX] >>> [technique 01]クライアントも巻き込んでプロジェクト管理をする >>> [technique 02]メモや注釈などのウィジ
iPhone 4S/4買ったらまずはじめに買いたい! iPhone 4S/4ケース情報総まとめ - MdN Design Interactive
初出：2010年6月23日／最終更新：2011年11月22日（一部修正） TEXT：MdN Design Interactive編集部 いよいよiPhone 4の発売が明日になりました! 6月24日のiPhone 4発売に備え、すでにApple Store銀座やソフトバンク表参道店に並んでいる人も出始めています。6月15日からの事前予約で、ショップから入荷の電話をもらった人も、まだ電話が来ないでドキドキ中の人もいることでしょう。いずれにしてもiPhone 4を買ったらまずはじめに買いたいのがiPhone 4用のケースですよね？ そこでMdN Design Interactive編集部では、iPhone 4の発表以降、いままでに発表または発売が開始されたiPhone 4ケースをご紹介します。色や素材などであなたのiPhone 4を自由に彩ってみてはいかがでしょうか。 ※編集部註：新製品の情報
MdN Design｜総合情報サイト
デザインする グラフィックアプリの使い方から、デザインの基礎、最新の表現手法まで、デザイナー、イラストレーター、写真家が知りたい情報が満載！
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Webデザインとグラフィックの総合情報サイト - MdN Interactive - Webデザイン超基本のお作法50選
MdN Design｜総合情報サイト
これだけは覚えておきたい！スタイルシートの知識と技