MdN Design｜総合情報サイト
viewportを使えば、Webサイトの横幅をスマートフォン向けに最適化できる。基本的な書式は【1-1】のとおりだ。viewportにはさまざまなプロパティが用意されているので、コンテンツの内容に合わせた適切な値を指定しよう 【1-2】。 【1-1】指定しないプロパティはデフォルト値が適用されるため、すべてを記述する必要はない 【1-2】viewportのプロパティ一覧 viewportのプロパティの中でも特に重要なのがwidthの指定だ。iPhoneのデフォルト値は980pxに設定されているため、何 も指定しないとコンテンツが小さく表示されてしまう【2-1】。 値には数値も指定できるが、「devicewidth」で指定するのが一般的である【2-2】【2-3】。 【2-1】viewportのwidth指定なしの状態。コンテンツが縮小され、文字が小さくて読めない 【2-2】width=dev
MdN Design｜総合情報サイト
2013年1月29日発売のweb creators特別号「いますぐ悩みが解決する! Webデザイン 仕事で役立つ54のアイデア」から、毎週記事をピックアップしてご紹介! 近年さかんに目にするパララックス効果やMasonryを利用したレイアウトをはじめ、見やすくて使いやすいナビゲーション、フォームや製品紹介ページのユーザビリティを向上するインタラクション、表現の可能性を広げるHTML5+CSS3の機能、制作効率を向上するフレームワークの紹介、スマートフォンサイト制作のポイントとTipsなど、Web制作の仕事に役立つ54のアイデアが満載です。 ※本記事はweb creators特別号『いますぐ悩みが解決する! Webデザイン 仕事で役立つ54のアイデア』からの転載です。この記事は誌面でも読むことができます。
MdN Design｜総合情報サイト
ナビゲーション＆メニュー 2-01 画像なしでグラフィカルなパンくずリストに 画像を使用せずに、ほぼCSSのみで実装できるグラフィカルなパンくずリストの作り方を解説する。今回はIE8のバグ対策で少しだけjQueryを使用する。 制作・文／佐藤とも子・サチコ（螺旋デザイン） BROWSER IE…8over Firefox…3.6over Safari…3.1over Chrome…10over 01 今回のパンくずリストはCSSとIE8用にjQueryを使用している【1-1】。 HTMLはolタグでパンくずリストを表現する【1-2】。 現在地である最後の項目はaタグではなくstrong でマーキングする。 ul にはパンくずリストを表すid「breadcrumbs」をつけておく。CSSを作る際にはこの id を利用しよう。 【1-1】パンくずリストの作成に必要なファイル構成。 【1-2】パ
WEBデザインスタイルアップTips 第7回 目次 - MdN Design Interactive
ナビゲーションのひとつとしてパンくずリストを取り入れたり、手順を踏んでユーザーに操作してもらう場合はステップ全体がわかるようにデザインすることは多いはずだ。「pixels and digital bits」の「Tutorial - CSS Overlapping Arrow Buttons」（www.firefly-multimedia.com/chatterbox/?p=26）で取り上げられている例を参考に考えてみよう【1】。 【1】パンくずナビゲーションやステップを示すデザイン 【2】アイコンの背景色をCSSで指定まずはHTML【2】とCSS【3】を用意しよう。参考サイトで取り上げてある方法では左右の画像との余白がとりにくいのでspan要素を追加する。見た目が調整しやすくなるはずだ。li要素の背景色にアイコンとしての色を指定しておき、そこにアイコンの形で透過している左右画像【4】を載せ
花火で文字をかたどり鮮烈な印象を演出する - MdN Design Interactive
ロゴ／タイポグラフィ／文字レイアウト 文字を主役にするか！ 名脇役として扱うか！ 文字を自由に操る72のデザイン手法 まずは、Photoshopで背景レイヤーを黒で塗りつぶし、横書き文字ツールで文字を入力。この文字に沿ってペンツールでパスを描いていく 1-1 。続いてツールパネルの描画色を白にし、ブラシツールを選択。ここで、ツールオプションバーのブラシプリセットピッカーで［ソフト円ブラシ（27pixel）］を選び、［マスター直径：30pixel］に変更する。さらに新規レイヤーを作成したのち、パスパネルのメニューから“パスの境界線を描く...”を選び、表示されるダイアログの［強さのシミュレート］をチェックして適用した 1-2 。
MdN Design｜総合情報サイト
作業効率がアップする隠れた使い方教えます！ WEB制作、プロの無料サービス活用術 ──コーディングに使えるツール（2） [technique 11] フォントをオンラインで視覚的にテスト比較する 文＝小山勝正（Chameleon Graphics） Tool Typetester URL http://www.typetester.org/ フォントに関するCSS指定をサイト上で確認しながら一括出力することができるWebサービスが、この「Typetester」だ。要するにWebサイトで一般的に使われるフォントや手持ちのフォントをオンラインで視覚的にテストと比較ができるのが特徴で、入力できるテキストは日本語にも対応しており、表示も可能だ。 サンプルテキストは編集できるため、まずはここを日本語とアルファベットの混在した文章に置き換えよう。Typetesterでは横3列に指定項目が並んでいて、そ
フォントサイズの比率をemや%を一覧で表示する - MdN Design Interactive
作業効率がアップする隠れた使い方教えます！ WEB制作、プロの無料サービス活用術 ──コーディングに使えるツール（2） [technique 09] フォントサイズの比率をemや%を一覧で表示する 文＝ハヤシユタカ（（有）ムーニーワークス） Tool PXtoEM URL http://pxtoem.com/ デザイン作成時において、テキストはpxかptで作成し、コーディング時には%かemが主流になっているが、pxかptでの文字サイズは「PXtoEM」を使用すれば、デフォルトのフォントサイズを決め、その数値からフォントサイズの大小比率をemや%を一覧表で表示してくれる。そのほか「Get CSS」でCSSファイルを参考にしたり、カスタムフィールドで細かい数値の参考値を計算したりしてくれるので、まだ文字の調整に自分のルールを持っていない人にオススメのツールだ。 左のリストからベースにしたい文字
CSS Spriteを手軽に作成する - MdN Design Interactive
作業効率がアップする隠れた使い方教えます！ WEB制作、プロの無料サービス活用術 ──コーディングに使えるツール（2） [technique 07] CSS Spriteを手軽に作成する 文＝東 孝之（（株）ゼネラル・プレス） Tool CSS Sprite Generator URL http://ja.spritegen.website-performance.org/ CSS Spriteは、読み込みのリクエスト数を減らすことができるので、ページ最適化に有効な手段だが、実装するのに手間がかかる。そんなときは「CSS Sprite Generator」を使うといい。「CSS Sprite Generator」は、複数の画像を一枚の画像にし、CSSで表示位置を変更するスタイルシートをオンラインで生成するジェネレータである。これを使えば、複数の画像をひとまとめにして連結画像とCSSを作成し
「Web制作者が覚えておくべきガンブラーの基礎知識と対策-前編」 - MdN Design Interactive
「Web制作者が覚えておくべきガンブラーの基礎知識と対策──前編」 2010年02月01日 TEXT：野本幹彦 正規のWebサイトがウイルスの配布元になってしまう 2009年春ごろから大きな話題となり、その猛威を振るっている「ガンブラー」（gumblar）。特に2009年末から2010年にかけては、大手企業のWebサイトが標的となり、たびたびニュースにもなっている。ではガンプラーとは、Web制作者にとってどのような脅威があるものなのだろうか。 ガンブラーとは、簡単にいえば、Webサイトが改ざんされることによって、ユーザーが閲覧すると悪質なWebサイトにリダイレクトされ、PCにウイルスなどがダウンロードされる攻撃のことだ。ちなみに、最初にこの攻撃が認知された誘導先のドメイン名が「gumblar.cn」であったことから、この名前が使われている。 ガンブラー被害の仕組み ガンブラーを仕込もうと企
MdN Design｜総合情報サイト
飽きさせないレイアウトやちょっとした一工夫で、デザインをよくするテクニックをビジュアル重視で紹介。実践的なWebデザインを通して、デザインを構成していくための考え方を学ぼう。 （解説：佐藤好彦） Webデザインは、PCのディスプレイという二次元上に表示される。二次元の範囲を超えて表現することはできない。しかし、三次元の現実世界を写したものだ。つまり、Webデザインの中に写真を使うことは、現実世界のもつ三次元の奥行きを二次元に取り込むということでもあり、写真を効果的に使うことで、二次元のWebに三次元的な奥行きを感じさせることが可能になる。とはいえ、写真も最終的には二次元であることに変わりはない。なぜ写真に奥行きを感じるのか。その多くは、ものの見える角度、影、ぼけに影響される。 遠近法の絵画に見られるように、正面を向いているものよりも、斜めに置かれたもののほうが、遠近感を感じやすい。加えて影
MdN Design｜総合情報サイト
第16回（最終回） 最新のデザイン表現を適用する ここまで紹介してきたCSSのレイアウトや装飾テクニックは、現在利用者の多いInternet Explorer 7や8、Safari、FirefoxなどのWebブラウザでほぼ問題なく動作するものでした。本連載の最終回は、未来に向けた準備として現在策定中の「CSS 3」の中からモダンブラウザで既に適用可能なスタイルをいくつか紹介します。 （公開日：2010年4月16日 解説：こもりまさあき） 現在策定中のCSS 3について CSSで指定したスタイル指示は、WebブラウザのCSSサポートの度合いによって適用できるかどうかが異なります。例えば、今現在の主流であるブラウザの多くではCSSレベル2（CSS 2）をサポートしているものがほとんどです（特定のプロパティだけ未サポートも含め）。その一方、現在CSSの次のバージョンにあたるCSSレベル3（CSS
MdN Design｜総合情報サイト
第4回「CSS3を使ったより強く、より良い、より手軽なデザイン」 2010年01月05日 翻訳元サイト：Smashing Magazine http://www.smashingmagazine.com/ 原文：Stronger, Better, Faster Design with CSS3 http://www.smashingmagazine.com/2009/12/16/stronger-better-faster-design-with-css3/ 著者：ZURB 翻訳：中野恵美子 ※本記事は「Smashing Magazine」様より許可を得て翻訳、掲載しています CSS3に関する前回の記事「Pushing Your Buttons With Practical CSS3」で、私たちはCSS gradients、角丸の囲み罫、ドロップシャドウなど、CSS3の新しいテクニックを使
立体感で魅せるクールな文字演出 - MdN Design Interactive
制作・文 ドルバッキーヨウコ［D-design］ URL http://www.dholbachie.com/design/ 使用ソフト Photoshop CS2/CS3 まず、Photoshopの新規ファイルを開き、背景レイヤーを黒で塗りつぶす。次に、新規レイヤーを作成し、横書き文字マスクツールでテキストを入力したら、出来上がった選択範囲内を白で塗りつぶした 1-1 。その後、レイヤーメニュー→“レイヤースタイル”→“ベベルとエンボス...”と“ドロップシャドウ...”を任意の値で実行する 1-2 。 1-1 ▼ 1-2 続いて、選択範囲を保持したまま文字のレイヤーを複製し、選択範囲メニュー→“選択範囲を変更”→“拡張...”を［拡張量：10pixel］として適用 2-1 。レイヤーパネルで背面のほうの文字のレイヤーを選択し、描画色を薄いグレーに変更して、編集メニュー→“塗りつぶし..
MdN Design｜総合情報サイト
目立つ文字はさりげなく特徴を 大きく目立つ文字には、スタンダードな書体を使ってプラスαの味付けをするのが印象アップに効果的だ。文字にさりげない加工を施すほか、最近は本文用の書体をあえてキャッチコピーや見出しとして大きく扱う例なども見受けられる。 【1】は、キャッチコピーに「新聞明朝」という書体を使っているページ。本来はオーソドックスな書体だが、新聞用の明朝体は一般的なものに比べて個性的な形をしていて、大きく使うとその個性が引き立つ。個性といっても周囲のビジュアルなどとの組み合わせで、新聞のイメージにつながってはおらず、知らないで見ていればここで使われている書体が新聞明朝という名前だとは思わないだろう。 【2】はタイトル文字に昔の活字を連想させる書体が使われている。バックに配置された本の画像、また本の街である神保町という地名と合わさって、ページのイメージづくりに大きく貢献している。タイトル文
重厚感のあるハードな写真演出 - MdN Design Interactive
制作・文 舛森拓郎［MINIMUM］ URL http://www.flickr.com/photos/minimumgraphic/ 使用ソフト Photoshop CS/CS3 まず、基となる写真をPhotoshopで開いたら 1-1 、レイヤーメニュー→“新規”→“背景からレイヤーへ...”を実行して通常レイヤーに変換し、イメージメニュー→“色調補正”→“レベル補正...”などを使ってコントラストを強調 1-2 。続けて、イメージメニュー→“色調補正”→“彩度を下げる...”で画像をモノクロ調に処理する 1-3 。 1-1 1-2 1-3 次に、荒れた壁の写真をPhotoshopで開いたら、コピー＆ペーストで作業ファイル上に配置し、イメージメニュー→“色調補正”→“彩度を下げる...”を実行 2-1 。続いて、選択範囲メニュー→“色域指定...”で画像の白い部分をクリックして選択範囲
MdN Design｜総合情報サイト
Webデザインには、あなたの知らない「落とし穴」がたくさん。大きなものから小さなものまで、それが及ぼす影響はさまざまだ。カンペキだと思っているあなたのサイトも、実はすでに暗い穴の中かも・・・。 ブラウザは、認識できないタグは無視するようになっているので、JavaScript未対応の場合スクリプトの中身がHTMLに表示されてしまうことがある。それを防ぐために、スクリプト全体をコメントタグ（＜!-- と // --＞ ）で囲みコメントアウトしよう【1】。コメントとして認識させることでJavaScript未対応ブラウザでページを見ても、スクリプトの表示を防ぐことができる。「//」 を書き忘れると、Netscape ブラウザではエラーとなってしまうので注意。 また、＜noscript＞タグを使用し、JavaScript未対応ブラウザの人がページを訪れた際には、自動的に＜noscript＞タグの内部
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
MdN Design｜総合情報サイト
MdN Design｜総合情報サイト
シーズン到来!! クリエイターのための確定申告 MdN Interactive - 特集4
コルク素材をそのまま使用したUSBメモリ - MdN Design Interactive
