サンプルコードで学ぶ SVGの読み方、書き方 (1/2)
SVGの概要から基本的な使い方、Web制作での活用方法までをじっくり解説する本連載。前回はSVGができることをおおまかに解説しました。今回は、SVGの仕様をもとに、SVGの書き方、読み方の基礎を学びます。 SVGを描く、そして書く SVGは画像であり、コードを書かずとも、ツールで描けます。例えば、Adobe IllustratorやInkscape、Sketchなどのドローソフトを使えば、画面の操作のみでSVGファイルを作成できます。 ドローソフトを使って用意したSVGファイルは、HTMLでimg要素、あるいはCSSの背景画像などとして読み込むことで、手軽にWebページの一部として表示できます。 <img src="example.svg" alt="" width="600" height="400"> .example{ background: url( example.svg );
いまさら聞けないSVG——Web制作に便利な3つの理由 (1/2)
スマートフォン向けのWebサイトやWebアプリを中心に、「SVG」がいま再注目されています。単なる画像フォーマットを超えて、最近ではさまざまな表現に広く活用されるようになりました。 本連載では、SVGの概要から基本的な使い方、Web制作での活用方法までをじっくり解説。CSSによる装飾やJavaScriptとの連携など、すでに使っている人がもっと使いこなすためのテクニックも紹介します。（編集部） Webの表現を広げるSVGの魅力 SVGと聞くと、「単なるベクターの画像でしょ」と思う方も多いでしょう。確かにSVGは「Scalable Vector Graphics」の略なので、ベクター形式の画像フォーマットであることには間違いありません。 一方で、SVGには、PNGやJPEGといった、他の画像フォーマットとは異なる魅力があります。SVGをWebページに使うことで、これまでのHTMLやCSSだけ
古いiPhoneをネットワークカメラ化できる「あんしん監視カメラ」を徹底解説 (1/2)
留守中に自宅のペットがどうしているのか気になるなら、ネットワークアクセスできる監視カメラが欲しいところ。とはいえ、意外といい値段になるので躊躇してしまう。そんな時は、無料アプリで使わなくなったiPhoneを監視カメラにしてしまおう。今回は、「あんしん監視カメラ」の使い方を紹介する。 無料アプリでクラウド経由の監視カメラを利用できる 「あんしん監視カメラ」はiPhoneを監視カメラにするカメラアプリ。撮影したデータを自動でクラウドにアップロードし、ユーザーはブラウザーから撮影データを閲覧できる。アプリごとに生成されたアカウントを利用するので、最低限のセキュリティーは保たれている。直接カメラに接続するわけではないので、ネットワークの難しい設定は不要。外出先から、家庭のWi-Fiルーターに接続したiPhoneで撮影したデータにアクセスできる。 まずは、カメラにするiPhoneにアプリをインストー
「源ノ角ゴシック」を実現させたアドビ西塚氏の勘と感覚 (1/5)
アドビ Japan R&D 日本語タイポグラフィ シニア デザイナーの西塚涼子氏。「かづらき」「りょうゴシック」のデザインを担当したことでもしられる人物だ 開発に3年をかけたアドビのPan-CJK（汎 中日韓）フォント「Source Han Sans（和名：源ノ角ゴシック）」が7月16日にリリースとなった。 「日本語、中国語の繁体字・簡体字、韓国語いずれも1つのフォントファミリーでカバー」と聞くと、「ああそうなんだ。カバーできるんだ」とすんなり飲み込んでしまうが、Source Han Sansは、日中韓国語をカバーし、かつ「どの国にとっても自然」という点で画期的なフォントだ。 同じ起源を持ち、近い意味を表す漢字でも、日本と中国、韓国とでは書体が異なる。繁体字と簡体字でも全く異なるし、各国に固有の漢字もあるから、話はさらに複雑だ。「どんな書体なら自然なのか」は国によって全く違うのだ。 国ごと
アドビ、日本語対応フォントをGitHubで無料配布
日本語を含む3カ国語に対応したオープンソースフォント「Source Han Sans」をアドビがリリースした。Apache 2.0ライセンスで公開されており、Adobe Typekitのほか、GitHub、SourceForgeから無償でダウンロードできる。 Source Han Sansは、日本語／中国語（簡体字、繁体字）／韓国語の3カ国語（CJK）、台湾および香港の文字セットに対応したOpenTypeフォント。6万5535文字を収録し、Adobe-Japan1-6に含まれる異体字もカバーする。ウェイトはそれぞれExtraLightからHeavyまでの7種類。なお、日本語のフォント名では「Source」の日本語をイメージした「源ノゴシック」と表示される。 開発にあたっては、グーグルが資金提供とテスト、アドビが字形デザインとプロジェクト管理を担当。「6万5000以上の文字を1社で作るのは難
要素をアニメーションでカッコよく並び替えるMixItUp
「MixItUp」 は、要素のレイアウトをアニメーション付きで並び替えたり、絞り込んで表示したりできるjQueryプラグインです。インラインブロックやfloat、flexboxなどのさまざまレイアウト方法に対応しており、HTMLやCSSをほとんど書き換える必要がないので、使いやすいプラグインです。 カテゴリーによって並び替えたり、特定のカテゴリーだけを表示したり、タイル形式・リスト形式を切り替えたりできるので、ポートフォリオサイトやギャラリーサイト、ブログのトップページに向いています。 Google ChromeやFirefoxなどのモダンブラウザーとInternet Explorer 10〜、iOS、Androidに対応しており、アニメーション機能を除けばIE8〜9からも利用できます。 step1 jQueryプラグインの読み込み jQuery本体をjQueryの公式サイトから、MixI
レスポンシブにも対応したドロップダウン FlexNav
「FlexNav」は、クロスブラウザー（IEは7以降）対応のドロップダウンメニューを簡単に実装できるjQueryプラグインです。レスポンシブに対応しているほか、ネスト（入れ子構造）のメニューも作れるので、非常に使い勝手のいいプラグインですね。 Android 2.2以降に対応しているので、古いスマートフォンへの対応を求められる案件で特に重宝します。 step1 jQueryプラグインの読み込み jQuery本体をjQueryの公式サイトから、FlexNav を配布ページからダウンロードしましょう。FlexNav は github で公開されており、ページ右下の「Download ZIP」ボタンからダウンロードします。 jQuery本体と「jquery.flexnav.min.js」を、利用するWebページの body の閉じタグ直前に読み込みます。 //(中略) <script src="
かっこいいプロモーションサイトが作れる multiScroll.js
「multiScroll.js」 は、画面を左右に分割して別々にスクロールして見せられるjQueryプラグインです。最近流行の効果を簡単に実装でき、スクロールスピードの調整やイージングの設定、スクロールのループなどのカスタマイズもできます。 multiScroll.jsはGoogle ChromeやFirefoxなどのモダンブラウザーと、Internet Explorer 8以降に対応しています。スマートフォン用ブラウザーでの動作は保証されていませんが、筆者の検証ではiOS 7.1.1でスムーズに動作していました。スマートフォンサイトの場合はターゲット端末で必ず検証してから利用しましょう。 ライセンスはMITです。ライセンスに従って著作権表示は削除せずに利用しましょう。 step1 jQueryプラグインの読み込み jQuery本体をjQueryの公式サイトから、multiScroll.j
SVG線画が美しいリッチアニメーションの作り方 (1/2)
ページ遷移が楽しい繊細で滑らかな動き CSS3を使った滑らかな動きと大胆なタイポグラフィが魅力的な「Beatrice Creations」。黒と白を基調とした至ってシンプルなデザインながら、つい全ページを見てみたくなる、飽きのこない演出が施されている。 Béatrice Créationsでは、複数ある作品のロゴにSVGが使われており、作品ページを移動するたびに美しいカーブを描く。軽量で、枠線や線画によって繊細でリッチな世界観を演出する、今注目のSVGアニメーションを有効に活かしたサイトだ。 今回はこのサイトをヒントに、SVGの基本と、CSS3アニメーションを使った動かし方を解説する。CSSとHTMLのみで次のような枠線とテキストを描き、最終的にはjQueryを使って色を変えるデモを制作する。 STEP 1：SVGのパスを作成する アニメーションを作る前に、Illustratorを使って素
世界のトップシェアはChrome！ IE天下の日本は少数派 (1/2)
『そういえば、あの業界のシェアは結局どこが一番多いんだっけ……？』 そんな疑問を抱いたことがあるすべてのビジネスマンに捧ぐ連載。仕事でも利用できる業界ランキングや業界地図を私、高橋暁子が手っ取り早く紹介します。 ITジャーナリスト、コンサルタント。書籍、雑誌、Webメディアなどの記事の執筆、企業などのコンサルタント、講演、セミナーなどを手がける。小学校教員、編集者を経て現在に至る。最新刊『スマホ×ソーシャルで儲かる会社に変わる本』の他、『Facebook×Twitterで儲かる会社に変わる本』『図解 一目でわかるITプラットフォーム』（以上、日本実業出版社）、『ネット業界 儲けのカラクリ』（中経出版）など著作多数。http://akiakatsuki.com/ Twitterアカウントは@akiakatsuki ■Amazon.co.jpで購入 前回はOSのシェアをテーマに取り上げたが、ブ
CSS Transitionsを使った3Dロールオーバーのアイデア (1/2)
イギリスのフリーランス、アートディレクター／デザイナーであるアンソニー・グッドウィン氏のポートフォリオサイト。※2014年5月にサイトリニューアルされたため、Internet Archiveを参照。 3Dの動きがおもしろいマウスオーバー 3Dパーツを多用し、ダイナミックにコンテンツを見せる「DESIGN EMBRANCED」。いろいろな場所をついついマウスオーバーしてみたくなるWebサイトだ。CSS Transitionsを採用することで、各パーツのアニメーションはとても滑らかに、ストレスなく動く。制作者の実装へのこだわりが見える。 3Dパーツは、マウスオーバーやページ遷移、ローディングアイコンに使われており、ユーザーに強いインパクトを与え、一貫した世界観を演出している。
Googleフォームで自動返信システムをサクッとつくる (1/4)
Google Apps Script（以下、GAS）を使えば、Googleのアプリケーションにちょっとした機能を加えて実用的なサービスに仕立てられます。今回は、問い合わせフォームを簡単に作成できる「Googleフォーム」を使って、問い合わせメールへ自動で返信するシステムを作ります。 【フォーム作成】問い合わせフォームを作る Googleフォームは、問い合わせやアンケートなどのフォームを簡単な操作で作成できるWebアプリケーションです。まずは企業サイトを想定した、シンプルな問い合わせフォームを作成してみましょう。 1. https://drive.google.comにアクセスしてGoogleドライブを開きます。「作成」ボタンをクリックし、「フォーム」を選んでください。
レスポンシブ動画も実装できるモーダルMagnific Popup｜こうめの“これから使える”jQueryプラグイン
「Magnific Popup」は、可変ウィンドウに対応した高機能なモーダルを実装できるjQueryプラグインです。 画像をLight box風に表示するだけでなく、ギャラリーや動画のモーダル表示にも対応しており、さまざまなエフェクトも用意されています。 また、スマートフォンで厄介なモーダル上のformの動作も問題なく動作しますので（Android 2.3／4.0／4.1／4.2で検証）、レスポンシブWebデザインで役立ってくれそうですね。 step1 jQueryプラグインの読み込み jQuery本体をjQueryの公式サイトから、Magnific Popupを配布ページからダウンロードしましょう。Magnific Popupはgithubで公開されており、ページ右下の「Download ZIP」というボタンからダウンロードします。 最低限必要なファイルはdistフォルダの「jquery
フルードイメージの導入とタイポグラフィの設定 (2/3)
画像の次はタイポグラフィ（文字周り）のスタイルを設定しましょう。最初に、html文書全体のfont-size、font-family、line-heightを記述します。「枝豆隊」では、font-size は16px、font-familyはverdana, sans-serifに指定します。ただし、ブラウザーのフォントサイズはデフォルトで16pxですので実際にはfont-sizeは記述しません。日本語のテキストでは、一般的にフォントサイズの1.5倍がもっとも読みやすい行の高さとされていますので、line-heightプロパティの値には1.5を指定します。 まとめると、以下のようになります。 html { font-family : verdana, sans-serif; line-height : 1.5} このCSSを適用すると、html要素のタイポグラフィ設定は図のような状態になり
決定版！ iPhone 5s／5cは新規、機種変、MNP、どれが得？ (1/5)
「料金」「端末価格」の2つに絞って 3つのキャリアを徹底比較する！ iPhone 5cの予約もスタートし、9月20日の発売がすごく待ち遠しい新iPhone。ドコモからの発売も決まり、これまでiPhoneへの移行を踏みとどまっていた人も注目しているのではないだろうか。 しかし、少々複雑なのが料金だ。MNP（モバイルナンバーポータビリティ）を利用して、電話番号をそのままにキャリアを移動した際のキャンペーンなどがあるため、ますますどのキャリアのiPhoneを買えばいいか悩ましい現実がある。 そこで本記事では「月額料金」「端末価格」に内容を絞り、各キャリアの情報をまとめるとともに、機種変更かMNPかで、どのくらいの料金差があるかについて詳しく比較をしているので、ぜひ参考にしていただきたい。 なお、発売日の9月20日までにも各社から新たなキャンペーン施策や内容変更の発表が行なわれる可能性が考えられる
レスポンシブWebデザインとは (1/5)
スマートフォンやタブレット、PCなどあらゆるデバイスに対応する制作手法として注目されている「レスポンシブWebデザイン」。レスポンシブWebデザインの概念からサイト制作の基本まで、レスポンシブWebデザインによる制作案件を数多くこなす菊池 崇氏が解説します。（編集部） 本連載で紹介したレスポンシブWebデザインの基礎に加えて、画像や動画のレスポンシブ対応、パフォーマンス改善といった商用サイト構築のノウハウを大幅に加筆。さらに、解像度に依存しないレスポンシブWebデザインの考え方やスマートテレビ対応などの応用テクも盛り込みました。 レスポンシブWebデザイン マルチデバイス時代のコンセプトとテクニック 定価：2,625円 (本体2,500円)／形態：B5変 (232ページ) ISBN：978-4-04-886323-0 レスポンシブWebデザイン（Responsive Web Design）
jQuery Mobileを使った国内スマホサイトまとめ (1/3)
jQuery Mobileの採用が国内でも進んでいる。jQuery Mobileは、iPhone/Android、WindowsPhoneやBlackBerryなど、主要なスマートフォンに対応したUIフレームワーク。HTMLに簡単な記述を追加するだけで、スマートフォンに最適化したサイトやWebアプリケーションを制作できる、注目のフレームワークだ。 昨年11月には、待望の「jQuery Mobile 1.0」正式版がリリースされ、実務でも本格的に利用しやすくなった。今後、ますます増えそうなjQuery Mobileを使ったスマートフォンサイトの事例をチェックしておこう。 ※商品紹介／キャンペーンサイトに、「太鼓の達人学園（太鼓の達人×AKB48キャンペーンサイト）」を追加しました。（2012年3月1日16時更新） ※ネットサービスに、「一休.com」「recbike」を追加しました。（201
jQuery Mobileとは――スマホ時代の到来とWeb制作 (1/3)
「jQuery Mobile」は、モバイルWebアプリケーションやスマートフォンサイトの構築でいまもっとも注目されているフレームワークです。jQuery Mobileを使えば、iPhone/Androidをはじめ、さまざまなスマートフォンのブラウザーに対応したスマートフォンサイトを手軽に制作できます。 jQuery Mobileを使ったスマホサイト制作の基本から実践的なテクニックまで、ベストセラー「Web制作の現場で使う jQueryデザイン入門」（Web Professional Books）の著者・西畑一馬さんが解説します。（編集部） 「jQuery Mobile」は、モバイルWebアプリケーションやスマートフォンサイトの構築でいまもっとも注目されているフレームワークです。jQuery Mobileを使えば、iPhone/Androidをはじめ、さまざまなスマートフォンのブラウザーに対
jQueryでロールオーバー！プリロード対応版 (3/3)
画像のプリロード（先読み）処理を追加する ロールオーバーで画像を変更する際、src属性を書き換えてからブラウザーが画像をダウンロードして表示するまでには僅かとはいえ時間がかかります。そのため、画像の切り替え時に一瞬、チラつきが発生する場合があります。チラつきを防ぐために、画像をあらかじめダウンロードしておき、ブラウザーにキャッシュさせておく「プリロード」（先読み）の処理を追加します。 サンプル02にプリロード処理を加えたのが次のスクリプトです。 ▼サンプル03（スクリプト部分） $(function(){ $("img.rollover").mouseover(function(){ $(this).attr("src",$(this).attr("src").replace(/^(.+)(\.[a-z]+)$/, "$1_on$2")) }).mouseout(function(){ $
ASCII.jp：jQueryで作る多階層ドロップダウンメニュー｜Web制作の現場で使えるjQuery UIデザイン入門
基本のドロップダウンメニュー メインメニューにマウスカーソルを重ねると、すぐ下にサブメニューを表示するドロップダウン型メニューから作りましょう。サブメニューの1回層目までの表示に対応したメニューです。 メニューバーのHTML／XHTML（以下、HTML）は以下のように記述します。メインメニューをul/li要素で記述し、メインメニューに対応するサブメニューをli要素の中にul/li要素で入れ子に記述していきます。メインメニューのul要素にはclass属性「menu」を、子カテゴリーのul要素にはclass属性「sub」を付けて親子関係を分かりやすくしておきます。 ▼サンプル01（HTML部分） <ul class="menu"> <li><a href="#">メニューA</a> <ul class="sub"> <li><a href="#">サブメニューA</a></li> <li><a
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
