どんどん進化するCSSの中でも、意外と知られていないのがCSS関数。アイデア次第で実用的で応用の効くCSS関数を、もっと使ってみませんか？ CSSはWeb開発者が思っているよりもっとたくさんの可能性を持っています。スタイルシート言語は年々大きく進化を続け、JavaScriptなしでもブラウザーでさまざまな機能をさせるまでになっています。この記事では、JavaScriptをまったく使わない8つのCSS関数の賢いトリックに注目します。 1.軽量CSSツールチップ たくさんのWebサイトがツールチップを実装するのにまだJavaScriptを使っていますが、実はCSSのほうが簡単です。一番シンプルなのはツールチップテキストをHTMLコード内のデータ属性に記述する方法です（例：data-tooltip="…"）。このマークアップを使って、次のコードをCSSに記述すれば、attr()関数に与えられた値

まずは「GoodReader」をインストールする 最初に紹介したいのが、超高機能ビューアーアプリの「GoodReader」。元々はPDFリーダーアプリだったのが、画像や音楽、動画に対応し、オフィス文書やHTMLファイルまで閲覧できるようになった。何より、連携機能が優れており、ブラウザーからダウンロードしたファイルやメールの添付ファイルを「GoodReader」に取り込んで表示できるのが便利。各種クラウドサービスやメールサーバーとファイルを同期したり、ファイルの圧縮・解凍機能もあるが、これは続編で紹介することにする。 価格はiPhone版とiPad版それぞれで450円。ユニバーサルアプリでないのが残念だが、iPad版はまたさらにすごいアプリに仕上がっているので、納得できることうけあいだ。 USB接続でPCからファイルを転送する まずは、ファイルを転送し、閲覧するまでのキホンをチェックしよう。

「急に言われましても」に対応する フリー素材サイトいっぱいお盆だよスペシャル 気の早い話だが、もうすぐお正月だ。 夏コミあとの冬コミがすぐにやってくるように、夏から年末は一瞬。そして新年。新年といえば、年賀状だ。来年であれば巳年だから蛇のイラストの需要が高まるわけだが……そんなとき、知っておくと助かるのがフリー素材サイトだ。 個人利用であれば無料のものが多く、かつデザインがステキ。またビジネス用のテンプレートも豊富に存在しているので、普段からチェックしてけおけば、「急に言われましても」なイベントにも即対応できる。 ということで、お盆スペシャルとして編集部オススメの素材サイトを一挙に紹介していく。個別にブックマークするよりも、このページをブックマークしておくといいゾ。

本連載で紹介したレスポンシブWebデザインの基礎に加えて、画像や動画のレスポンシブ対応、パフォーマンス改善といった商用サイト構築のノウハウを大幅に加筆。さらに、解像度に依存しないレスポンシブWebデザインの考え方やスマートテレビ対応などの応用テクも盛り込みました。 レスポンシブWebデザイン マルチデバイス時代のコンセプトとテクニック 定価：2,625円 (本体2,500円)／形態：B5変 (232ページ) ISBN：978-4-04-886323-0 前回までで幅320pxの画面を基準としたCSSが完成しました。今回は、タブレットやデスクトップなどの大きなスクリーンでも閲覧しやすいように、メディアクエリーを使ってCSSを切り替えるようにします。また、大画面用のレイアウトのためにグリッドデザインの考え方も導入します。 レスポンシブWebデザインでは、「メディアクエリー」を使って画面幅に応じ

スマートフォンやタブレット、PCなどあらゆるデバイスに対応する制作手法として注目されている「レスポンシブWebデザイン」。レスポンシブWebデザインの概念からサイト制作の基本まで、レスポンシブWebデザインによる制作案件を数多くこなす菊池 崇氏が解説します。（編集部） 本連載で紹介したレスポンシブWebデザインの基礎に加えて、画像や動画のレスポンシブ対応、パフォーマンス改善といった商用サイト構築のノウハウを大幅に加筆。さらに、解像度に依存しないレスポンシブWebデザインの考え方やスマートテレビ対応などの応用テクも盛り込みました。 レスポンシブWebデザイン マルチデバイス時代のコンセプトとテクニック 定価：2,625円 (本体2,500円)／形態：B5変 (232ページ) ISBN：978-4-04-886323-0 レスポンシブWebデザイン（Responsive Web Design）

Siriが日本語に対応したから早速遊んでみた!! 「新しいiPad」の発表に合わせて、日本語版「Siri」も提供が開始された。iOS 5.1にアップグレードすると、iPhone 4Sでのみ利用可能になる。細かいアップデート情報などは、きっとほかのライターさんがやるので、この記事では音声アシスタント機能「Siri」さんと遊んでみたインプレッションをお届けしよう。 「新しいiPad」でも搭載されるという、だいぶ遊べるというか、ものすごくお利口なSiriさんは、アップルのサイト上のPVもを見てもわかるとおり、メール送信や電話発信といったことは、英語版同様に楽々こなしてくれるのだ。 イントネーションがフリーダムで 認識性能がスゴイ まず驚くのは、日本語認識精度の高さだ。多少イントネーションがおかしくても認識してくれるし、「理解できません」というわりには、ちゃんと話した言葉を表示してくれている。たと

安定した読み書き性能で、自作ユーザーから高い信頼性を勝ち取ったPLEXTOR製SSDの新モデル「PX-M3」シリーズや「Intel SSD 520」シリーズなど、最強の座を狙うSSDが続々と登場している。そんな最速、最強の座を不動のものにするべく、ついにPLEXTORが最上位の新モデルを投入してきた。それが、PLEXTOR製SSD＝最強説を打ち立てた最上位の「M2P」シリーズの正統後継モデルとなる「M3 Pro（M3P）」シリーズだ。 今回、編集部では性能と価格のバランスがよい容量256GBモデルをゲットできたので、同容量の「PX-256M2P」と性能を比較しつつ、「PX-256M3P」のパフォーマンスをじっくりとチェックしていこう。 さらに2011年8月の速度向上ファームウェアの登場以来、高いコストパフォーマンスと多数の使用者の口コミで、鉄板SSDのひとつになっているCrucial製「m

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

おとそ気分で社内を暇そうにウロウロしていたら「HTML5の常識、わかっていますよね」と怖い怖い一回り年下の編集長から叱られてしまいました。この後、HTML5関係の仕事がくることは間違いがありません。 しかし、ワタクシは50代。困ったことに、この編集長の「わかる」とワタクシの「わかる」とは程度が違います。これは困りました。正月早々、首筋がすーっと寒くなってしまったので、優しいけど仕事に関しては編集長よりも厳しい二回り年下のデスクに相談。 「HTML 4と比較しながらHTML5の違いをまとめて記事にするところから、始めてみてはどうですか」と先手必勝のようなお題を与えてくれました。どこまでこのお題をこなせるのか。65歳定年になれば、あたりまえの日本企業の縮図のなかで、50歳を過ぎての「HTML5の基礎知識」をまとめてみました。 DOCTYPE宣言が超簡単に DOCTYPE宣言が超簡単になったのは

オーリッドという日本のIT企業が注目を集めている。売上高は40億円規模。法人向けWebサービスを提供していたが、昨年から個人向けサービス「KYBER」を開始した。16日に発売した「KYBER Smartnote」（写真、3冊1500円）は、そのサービスの目玉だ。 見た目はごく普通のノート。メモをしたり、議事録をとったり、普通のノートとして使える。ノートをiPhone付属のカメラで撮影し、KYBERのWebサイトにアップロードすると、画像のデータがクラウドサーバー上で管理される（Androidには10月対応予定）。そこまではこれまでのクラウドサービスにもあったもの。「Evernote」を思い浮かべる人もいるだろう。 だが、話はここからだ。 しばらくすると、手書きのメモが文字データになって送られてくる。いわゆるOCR（画像からの文字起こし）だが、その精度は異様に高い。ほぼ完璧だ。納品までも最速

ローソン、無印良品、テレビ朝日など、国内でもHTML5で企業サイトを制作する事例が増えてきました。今すぐではないにせよ、「次のリニューアルはHTML5で制作したい」と考えるWeb制作者も少なくないでしょう。本連載では、「XHTML 1.0/HTML 4.01からの移行」をテーマに、HTML5マークアップの基本から実務で使用するポイントまで、ライブドアのマークアップエンジニア　浜 俊太朗さんが解説します。（編集部） 「HTML5タグの誤用で恥をかいた」「分厚い仕様書は読み切れない」コーダー＆デザイナーのためのコーディングガイド。最終草案に対応したほか、商用サイトを意識したコーディング例を新たに書き下ろし。HTML5マークアップへ移行するために必要な知識を効率よく学べる1冊です。ネットで話題の「HTML5カルタ」付き! HTML5マークアップ 現場で使える最短攻略ガイド 定価：2,808円 （

スマートフォンの普及を背景に、「レスポンシブWebデザイン」（Responsive Web Design）という制作手法が海外で注目を集めている。レスポンシブWebデザインとはどのようなアプローチなのか？　実例で解説する。 ウィンドウサイズを基準にデザインを調整 レスポンシブWebデザインとは、デバイスごとに複数のデザインを用意するのではなく、ブラウザーのウィンドウサイズに合わせてデザインをフレキシブルに調整する制作手法だ。モバイルサイトの制作では、デバイスやスクリーンサイズごとにページを振り分ける方法が一般的だが、レスポンシブWebデザインではHTMLはそのままに、CSS3のメディアクエリーを利用してスタイルシートだけでデザインを変更する。 レスポンシブWebデザインは、2010年5月、米国のイーサン・マルコッテ氏によって提唱され、海外では企業サイトを含む多くのWebサイトで採用されてい

グーグルが16日、WebブラウザーChrome用アプリの日本語版ストアを公開した。ストアそのものは1年前にアメリカ本国で「開店」していたので（関連記事）、日本支店がオープンしたようなイメージだろうか？ 今回追加された日本語版のアプリは12本だが、これまでに英語版のアプリは約3000本もリリースされている。勝手ながら日本語版オープン記念として、日々の業務を効率化するアプリ（英語版含む）を10本紹介しよう。うち9本は基本無料だ。 「あとで読む」 Read Later Fast いわゆる「あとで読む」系アプリ。ページの登録は、今見ているページもしくはリンクの右クリックで追加できる。本文をオリジナルのまま閲覧できるほか、テキストのみ抽出して登録できるので、スマートフォンなど画面サイズが小さな端末で読むときにも便利だ。「アーカイヴ」でローカルに保存し、オフラインで閲覧することもできる。

jQuery Mobileを利用すると、簡単なHTMLを用意するだけでスマートフォンサイトを作成できます。今回はシンプルな会社案内サイトを実際に作りながら、jQuery Mobileの基本的な使い方を学習しましょう。 以下のような会社案内サイトを作成します。 トップページのメニューをタップすると各ページへスライドして移動するシンプルなスマートフォンサイトです。まずはトップページ部分から作ってみましょう。 jQuery MobileとHTML5 jQuery MobileはHTML5のカスタムデータ属性でさまざまな設定を定義するので、jQuery Mobileを利用するWebページはHTML5で記述します。HTML5と聞くとハードルが高そうですが、最低限の約束ごとさえ守れば決して難しくありません。 次のようなHTMLを雛形として用意します。 <!DOCTYPE html> <html> <h