TIME誌に見るレスポンシブWebデザインの威力
レスポンシブWebデザインが国内で話題になってから1年あまりが経ちました。2012年にもっとも読まれたWeb Professionalの記事が『レスポンシブWebデザインとは』だったことからも、レスポンシブWebデザインがいかに注目された1年だったかが分かるでしょう。 Googleトレンドで「レスポンシブWebデザイン」「Responsive Web Design」を検索すると、欧米よりは遅れているものの、着実に国内でも注目が高まっていることが分かります。 "TIME"のリニューアルで見えたレスポンシブの成果 もっとも影響力のある100人を選出する企画「TIME 100」などで知られる米国の週刊誌『TIME』のWebサイトは、タブレットやスマートフォンによるWebサイトへアクセスが2011年ごろから増加し、2012年には10％に達したため、レスポンシブWebデザインによるリニューアルを実施
ASCII.jp：JSでWeb制作を自動化するAdobe Bridge活用入門｜古籏一浩のJavaScriptラボ
画像管理だけじゃない、「Adobe Bridge」の隠れた魅力 「Adobe Bridge」（以降、Bridge）は、Adobe Creative Suiteに同梱されている画像管理ソフトです。もともとPhotoshop CSに搭載されていた画像管理機能が、Photoshop CS2から分離独立してBridgeとなりました。Adobe Creative Suite 3では「Bridge CS3」、Adobe Creative Suite 4では「Bridge CS4」が同梱されています。 「Bridgeって単なるビューアーソフトでしょ？」と思っている人は多いでしょう。というよりもビューアーやファイラーとしての機能しか知らない人がほとんだと思います。Bridgeは表面的には画像管理ソフトですが、実は強力なJavaScriptを搭載しており、Webや他のソフトと連携してさまざまな処理を自動化す
30分でできる！Webサイトを高速化する6大原則 (1/4)
Webサイトを制作するとき、「パフォーマンス」を気にしたことがあるだろうか？ もしまったく気にしたことがないなら、気をつけた方がいい。閲覧に時間のかかる“遅いWebサイト”はユーザーにフラストレーションを与え、閲覧をやめさせてしまう恐れがある。 下記のグラフは、「Simple-Talk」という海外のオンラインメディアで発表されたユーザー調査の結果だ。アンケートページの表示にかかる時間を意図的にコントロールし、表示時間によってユーザーが感じるフラストレーションの違いを調べたものだ。 縦軸がフラストレーション（10段階）、横軸が表示までの時間を表している。1～5秒以内にページが表示された人に比べ、ページ表示までに5秒以上かかった人は2倍以上もフラストレーションを感じている。フラストレーションがあまりに高ければ、せっかく何らかの目的を持って訪れてきたユーザーも待ち切れずにブラウザーを閉じてしまう
CSSの記述が3倍速くなる「LESS」の使い方 (1/2)
2012年02月09日 13時58分更新 文●斉藤祐也／<a href="http://css.studiomohawk.com/">CSS Radar</a> 最近のWebサイトは大規模傾向にあり、Webアプリケーションを構築する機会も増えてきました。jQueryやMooToolsなど、JavaScriptを手軽に利用できるようにするライブラリーが普及する一方、Webサイトの表示を担うCSSにも、「Blueprint」や「960 Grid System」に代表されるフレームワークが登場しています。 「LESS」や「Sass」のようなCSS拡張メタ言語は、こうしたフレームワークとは異なり、CSSの言語自体を拡張し、CSSには存在しない機能を追加するものです。CSS拡張メタ言語を利用することで、変数、ミックスイン、入れ子ルール、名前空間、四則演算、関数などの動的な処理をCSSに追加でき、CS
いまから始める、jQuery Mobileの基本 (1/4)
jQuery Mobileを利用すると、簡単なHTMLを用意するだけでスマートフォンサイトを作成できます。今回はシンプルな会社案内サイトを実際に作りながら、jQuery Mobileの基本的な使い方を学習しましょう。 以下のような会社案内サイトを作成します。 トップページのメニューをタップすると各ページへスライドして移動するシンプルなスマートフォンサイトです。まずはトップページ部分から作ってみましょう。 jQuery MobileとHTML5 jQuery MobileはHTML5のカスタムデータ属性でさまざまな設定を定義するので、jQuery Mobileを利用するWebページはHTML5で記述します。HTML5と聞くとハードルが高そうですが、最低限の約束ごとさえ守れば決して難しくありません。 次のようなHTMLを雛形として用意します。 <!DOCTYPE html> <html> <h
普通のtableタグを1行で動く表にするJSライブラリ (1/5)
大量の情報を分かりやすく一覧で見せたい。そんなときには、やはり「表（テーブル）」をうまく使いこなしたいもの。罫線やセルの色分け、文字サイズの調整などを調整して見やすくデザインすることはもちろんですが、同時に、ユーザーが求める情報を的確に、分かりやすく表示する仕掛けがあるといいでしょう。 ヤフーが運営する「Yahoo！不動産」は、ユーザーの操作によってテーブルを分かりやすく表示するユーザーインターフェイスが参考になるサイトです。単なる見た目の装飾ではなく、実際に使い勝手を向上させるためにAjaxを活用した好例と言えるでしょう。 今回は、このYahoo！不動産をお手本に、Webサイトのブラッシュアップに取り組みます。 今回のお手本サイト：『Yahoo！不動産』 ヤフーが運営する不動産総合情報サイト。日本全国の売買／賃貸物件の情報が大量に掲載されており、「写真掲載の有無」「部屋の広さ」といったさ
これは便利だ！Excel→Table化するjQueryプラグイン
Webページに掲載する面倒な表（テーブル）の作成を楽にしたい――。以前、本サイトではExcelファイルを簡単にHTML（Tableタグ）に変換するExcelアドイン「XLS2HTMLTable」を紹介した（関連記事）。XLS2HTMLTableはとても便利なツールだが、それでも表が大量に必要な時にはやはり手間がかかる。 今回はさらに楽をできて便利なアイテムを紹介しよう。それが、CSVファイル（カンマ区切りテキスト）を読み込み、Tableに整形して表示するJavaScriptライブラリ「jquery.csv2table.js」だ。 JavaScript関連の著書も多い高橋登史朗氏が作った「jquery.csv2table.js」は、名前のとおりjQueryのプラグインとして動作するもので、HTMLにわずか数行のスクリプトを書き加えるだけで使える手軽なライブラリだ。さっそく実際にjquery.
0日目：jQueryプラグイン作成の基礎知識 (1/2)
この記事は「【短期集中連載】この冬作ろう！ jQueryプラグイン講座」のウォーミングアップ編です→[連載インデックス]へ 数あるJavaScript／Ajaxライブラリの中でも2008年、もっとも勢いがあったのが「jQuery」だ。jQueryは従来の“Webアプリケーション”のプログラマーだけでなく、コーダーやデザイナーといった“Webサイト”の作り手からも広く支持を集めた。そのjQueryの特徴の1つである「プラグイン」の作成方法について本連載では解説する。簡単なプラグインを1日1本、 実際に作っていく6日間の集中講座だ。ぜひこの冬休みを利用して、楽しみながらjQueryプラグインを作ってみよう。 そもそも「jQuery」ってなんだ？ 「jQuery（ジェイクエリー）」は代表的なAjax/JavaScriptライブラリの1つです。jQueryの特徴としては「少ないプログラムコードで、
HTML5/CSS3で作るスマートフォンサイトの基本 (1/5)
スマートフォンサイトのサイト設計、画面設計に続き、今回はデザインとHTML/CSSの制作です。前回作成したワイヤーフレームをもとにデザインカンプを作成し、HTML/CSSをコーディングしていきます。 Photoshopでデザインカンプを作成する 最初に、グラフィックソフトを利用してデザインカンプを作成します。今回はPhotoshop CS5を使いましたが、FireworksやIllustratorなど使い慣れたツールで構いません。 デザインにあたっては、スマートフォンのブラウザーの画面領域を定義したテンプレートを用意してからデザインパーツを作成、配置していきます。画面領域はサイズを測ってガイドを引いてもよいですが、本連載の第5回で紹介したデザインテンプレートを利用するのが手軽です。
HTML5でiPhoneアプリを作ってみた (1/3)
iPhoneアプリを開発するには、従来「Objective-C」というプログラミング言語を習得する必要があり、プログラミング経験が無い人には手が出しにくい存在でした。ところが最近ではHTMLとJavaScriptで作ったWebアプリをネイティブアプリに変換するツールやサービスが登場し、より手軽にアプリを開発できるようになっています。実際、「Objective-Cは分からないけれど、HTMLやJavaScriptなら書ける」という方は少なくないでしょう。 エースホーム株式会社の「ワクワクぬりえタウン」も、HTML/CSS＋JavaScriptで制作されたiPhoneアプリの1つです。APPLIYA株式会社のOEMサービスを利用してiPhoneアプリに変換し、iTunes App Storeで配布しています。
超マニアックなCD屋「メカノ」はなぜ潰れないのか (1/5)
HMV渋谷店の閉鎖に代表される、大手リテーラーチェーンの規模縮小が進む中で、小規模ながら、なぜか立派に営業を続けているCDショップがある。 サブカルの聖地、東京の中野ブロードウェイの3Fにある「メカノ」がそうだ。インディーズの委託販売から中古CDの買取りまでを行なう、ごく小さな店舗だ。しかし平沢進関連の聖地として全国的な知名度があり、80年代からのテクノやニューウェイブに強いお店としてマニア筋にも名が通っている。 このメカノを一人で切り盛りする中野泰博さんは、かつてディスクユニオン渋谷2号店の店長を務めていた人物。ターゲットの絞り込みや、経営規模の設定など、それまで大型店舗で培ってきたノウハウがこのお店にはつまっている。 今時必要とされているCDショップのあり方とは何なのか。その一例として中野店長のお話を伺ってみたい。
実務で使えるjQueryプラグイン3選 (1/3)
jQueryを使ったJavaScriptライブラリー「jQueryプラグイン」を使うと、Webサイトを手軽に装飾できます。「Web制作の現場で使えるjQuery UIデザイン入門」最終回では、実用性の高いjQueryプラグインを3つピックアップし、それぞれの具体的な使い方を紹介します。 table要素にソート機能を付ける「table sorter」 「table sorter」は、テーブル（表組み）にソート機能を追加できるjQueryプラグインです。大量のデータを表形式で表示したいときに重宝します。 ■利用方法 jQuery本体と配布ページからダウンロードしたtable sorterのプラグインファイル「jquery.tablesorter.min.js」を、利用したいWebページのhead要素内で読み込みます。 <script type="text/javascript" src="jq
ASCII.jp：Twitter APIとGAEでおもしろWebサービスを作ろう！ ｜Twitter＆Google App Engineで始めるWebプログラミング入門
みなさんこんにちは。ふむふむソフトの飯島です。 さっそくですが、みなさんはTwitter APIを使ってプログラミングしていますか？ すでに星の数ほどTwitterアプリやWebサービスはありますし、バリバリ使っている方も多いと思いますが、「知っているけれど、なかなか触るチャンスがなくて……」という方もたくさんいるのではないでしょうか？ そこで今回から5回にわたって、Twitter APIを使ったWebサービスのプログラミングについて解説したいと思います。ただAPIの使い方を解説するだけでは面白くないですから、Webサービスを公開するサーバーとしてグーグルのクラウドサービス「Google App Engine（以下GAE）」を使い、自分でサーバーを用意することなく全部無料で遊んでみましょう。 本連載では、サンプルコードのダウンロードはもちろん、Twitter APIの準備からGAEの準備、
Twitterをディープに使い倒す 便利なウェブサービス (1/4)
Twitterはアプリケーションやウェブサービスの開発者に向けて、APIを公開している。日本語版Twitterが開始してから2年も経っていないが、すでに多数のTwitterに関連するウェブサービスが登場している。普段から使いたくなる検索サイトや、定期的にフォロワーを整理する時に使う分析サイトなど、公式サイトを超えるサービスが目白押しだ。今回は、中でもビギナーにお勧めのウェブサービスを集めてみた。 フォロー／フォロワーを探す、管理する twinavi http://twinavi.jp/ Twitter公式ナビゲーター。有名人や企業のアカウントがたくさん登録されている。Twitterを始めたばかりの人は、ここで興味のあるユーザーをフォローするといいだろう。Twitterの基本的な使い方も紹介されているので、操作に迷ったらチェックすればいい。また、Twitter関連のサービスや企画などの情報も
40分で覚える！jQuery速習講座 (1/6)
いまやWeb制作に欠かせなくなったJavaScript。でも、「JavaScriptはほとんど“アリモノ”で済ませている」という方も多いのでは？ そこで、WebデザイナーやマークアップエンジニアなどのWeb制作者の方向けに、いま一番人気のJavaScriptライブラリー「jQuery」の基本を学べる特別レッスンをお届けします。題して、「40分で覚えるjQuery」。要点だけにぎゅっと絞って解説しますので、手を動かしながら今すぐjQueryを始めましょう。 【0分目：導入編】 jQueryのダウンロードと利用方法 jQueryのライブラリー本体（JavaScriptファイル）は公式サイトからダウンロードし、head要素などにscript要素を書いて読み込みます。
MacBookのバッテリーと長く付きあう3つのコツ (2/2)
その1 寿命を把握しよう システムの突然死で悶絶しないためには、時折バッテリーの「寿命」をチェックする必要がある。 最も簡単な方法は、メニューエクストラの残量インジケーターを「option」を押しながらクリックすること。そうすると、普段は表示されない「状態：○○」という文字列が現れるはずだ。これが「普通」であれば差し当たっての問題はないので、また1ヵ月後チェックすればいい。 状態が「間もなく交換」の場合は、そろそろバッテリー交換を検討していい頃だ。「今すぐ交換」の場合は、おそらくフル充電の状態から数十分程度しか持たないはず。MacBook Proの機動性を活かすためにも急いで交換すべきだ。「バッテリーの交換修理」は臨終寸前なので、いますぐ取扱店かジーニアスバーに予約を入れよう。 アップルの公式見解によれば、現行MacBook Proの内蔵バッテリーは、充電サイクルが最高1000回までは80
HTML5対応のリファレンスサイトがオープン！
アスキー・メディアワークスは、HTMLの次世代版「HTML5」のドラフト版にいち早く対応した『ASCII.jp HTMLリファレンス』とCSS 2.1に対応した『ASCII.jp CSSリファレンス』を本日より公開しました。 ASCII.jp HTMLリファレンス 「ASCII.jp HTMLリファレンス」は、HTMLの各タグの定義や使い方を解説したものです。書籍『超図解 HTML ＆ CSSリファレンス』（エクスメディア、2006年1月刊行）をベースに大幅に加筆。現在提案されているHTML5の仕様まで含め、合計123項目を収録しリファレンス性を高めています。WebデザイナーからWebプログラマーまで、幅広く、末永くご利用いただける内容に改訂しました。 ASCII.jp CSSリファレンス 「ASCII.jp CSSリファレンス」は、CSS（Cascading Style Sheets ）
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
ASCII.jp：Web制作の現場で使えるjQuery UIデザイン入門