本気で使いこなす「SVG」再入門【2015年版】スマートフォン向けのWebサイトやWebアプリを中心に、「SVG」がいま再注目されています。単なる画像フォーマットを超えて、最近ではさまざまな表現に広く活用されるようになりました。 SVGの概要から基本的な使い方、Web制作での活用方法までをじっくり解説。CSSによる装飾やJavaScriptとの連携など、すでに使っている人がもっと使いこなすためのテクニックも紹介します。
試してわかるルーティング
パケット通信のTCP/IPを理解するには、ルーティングの知識が必須である。まずはルーティングの基礎となるIPアドレスの仕組みを解説した上で、実際のルータを使って、機器の設定画面やパケットキャプチャ画面を見ながらルーティングを解説していこう。 2011年05月17日 06時00分 ネットワーク 利用するための手順から仕組みを理解する 第13回 OSPFを実際に設定してみよう！ OSPFの設定は、基本的な部分だけであれば難しいところはほとんどない。RIPのように、コマンド1つというわけにはいかないが、OSPFを有効にするコマンドがインターフェイスごとになったというくらいの感覚だ。 2011年05月10日 06時00分 ネットワーク RIPよりも柔軟なルーティングが可能なルーティングプロトコルを知ろう 第12回 OSPFの通信手順と代表ルータを理解しよう OSPFの通信手順、そしてOSPFのキモ
Material Designの利用とWebデザインへの影響 (1/2)
グーグルが発表した、次期Android OS （通称Android L）向けの新しいデザイン原理「Material Design」の使い道や使い方について、背景にある思想やWebデザインへの影響を紹介します。 普及の鍵を握るSDKとPolymer Material Designは、次期Android OS（通称 Android L）のデザイン原則として、Androidデバイスで動くアプリやサービスへの適用が求められています。Androidの場合、iOSのようにプラットフォーム側がアプリ提供側を審査しないので、基準が示されるだけでは普及のきっかけがありません。 グーグルはこの問題点を、Material Designのデザイン原則を盛り込んだSDKの提供で克服しようとしています。 SDKの仕様に沿ってアプリやサービスを開発すれば、半ば自動的にMaterial Designの原則に沿ったUIが構
本格バナー制作で学ぶGoogle Web Designerの使い方 (1/4)
Google Web Designerの基本からアニメーションの作成までを学ぶ連載。第3回では、Google Web Designerを使って実際の業務を想定したクリエイティブバナーを作成します。 基本操作については前回の記事で解説しましたので、今回は主にアニメーションモードの詳しい使い方を中心に学びましょう。 Google Web Designerで実際にクリエイティブバナーを作成しよう 今回作成するのは、次の2つのバナーです。 1つ目は、「クイック」アニメーションモードで制作した不動産会社のバナーで、夜景の写真が横にスライドするシンプルなものです。2つ目は、「詳細」アニメーションモードで制作したカフェのバナーで、スライドとフェードを組み合わせて、複数ページを切り替えます。 「クイック」アニメーションモードで作る不動産会社のバナー 最初に、背景が横方向に流れるような動きのバナーを作りまし
チュートリアルで学ぶ企業サイト用テンプレートの作り方 (1/5)
企業サイトの構成と変更手順 今回制作する架空企業「株式会社ウェブプロ」のサイト構成は以下のとおりです。会社概要、製品情報、お知らせ、採用情報、お問い合わせの5つのコンテンツを掲載します。 下記の順番で「Blog2014テーマ（ブログ用）」を修正し、トップページ、一覧ページ、詳細ページの設定をしていきます。 「Blog2014テーマ（ブログ用）」の修正準備 企業サイトに不要なパーツを削除 テンプレートを分割／カテゴリーごとにテンプレートを設定 ページに見出しをつける 1.「Blog2014テーマ」の修正準備 カスタマイズのための下準備から始めましょう。カスタマイズのベースとなる「Blog2014テーマ（ブログ用）」を格納している「blog2014」フォルダーを複製し、「webpro」にフォルダー名を変更します。 第1回の手順どおりにインストールが済んでいれば、「blog2014」フォルダーは
動画：Photoshopで共通パーツを効率よく作る方法
「この間のデザインカンプだけど、やっぱりヘッダーの色を変更したいって。もう1回作り直してもらえる？」。えー、そこはもうFIXしたはずなのに……。そんなときも大丈夫。ヘッダーなどの共通パーツは、Photoshop CCの「リンクを配置」で作っておけば、一発で修正できちゃいます。 以下はそのムービー。 トップページのヘッダーを共通パーツの画像として［ファイル］→［リンクを配置］で各ページに配置します。元の画像を青地に変更すると、自動的に各ページに配置された画像が変更されます。画面右下は、作業中のキーボード、マウス操作画面
「a-blog cms」を使うべき3つの理由 (1/5)
WordPressがCMS1強時代を築きつつある中、名古屋のWeb制作会社「アップルップル」が開発しているCMS「a-blog cms（えーぶろぐ しーえむえす）」が着実に採用実績を伸ばしています。有料なのになぜ売れているのか？ その魅力は？ 実際に企業サイトを作成しながら、a-blog cmsの使い勝手を体験できる連載をお届けします。解説は開発元のアップルップルにお願いしました。（編集部） a-blog cmsはアップルップルが開発・販売している商用CMSです。Web制作会社として培ってきたノウハウを盛り込み、必要な機能を簡単・便利に使うことを目指して、2009年6月にVer. 1.0をリリースしました。2013年12月にはVer. 2.0をリリースし、1400を越えるサイト、350事業者に利用されています（2014年1月現在）。 クライアントに優しい3つの特徴 ユーザーに優しい編集画面
最新＋無料のHyper-V Server 2012 R2に触れてみよう！
この連載では、無料で使える最新の仮想化ソフトウェア「Hyper-V Server 2012 R2」について、基本的な使い方から少し進んだ使い方までを紹介していく。初めてHyper-Vに触れるという読者の皆さんにも、できるだけわかりやすくお話していきたい。 2014年01月08日 14時00分 ソフトウェア・仮想化 初めての仮想化でも大丈夫！な仮想化プラットフォーム入門 物理マシンからの仮想化（P2V）、Azureクラウドへの展開 最終回の今回は、物理マシンを仮想化する「P2V」、仮想マシンのエクスポート／インポート、そして仮想マシンを「Windows Azure」クラウド上へ移し、実行する方法を紹介する。 2013年12月25日 14時00分 ソフトウェア・仮想化 初めての仮想化でも大丈夫！な仮想化プラットフォーム入門 Hyper-Vマネージャーからのさまざまな仮想マシン操作 今回は、前回
PHPで動的に表示できるHTML5グラフアニメーション (1/2)
アニメーションなどのHTML5コンテンツを手軽に制作できるオーサリングツール「Adobe Edge Animate」。前回は、Edge Animateで制作したトップバナーを既存のサイトに埋め込む方法を紹介しました。 今回は、Edge Animateでグラフアニメーションを制作します。Edge Animateを使えば、簡単にリッチなグラフアニメーションを作れます。また、PHPで作成した既存のページにアニメーションを埋め込んで、グラフの値を動的に変化させる方法も解説します。 完成サイトは以下のリンクを参照してください。 グラフアニメーションを制作する 最初に、Edge Animateで元になるグラフアニメーションを制作します。 Step 1. ステージを設定する Edge Animateを起動し、新規プロジェクトを作成しましょう。ステージの大きさは、幅880×高さ320pxです。
絶対見たいレスポンシブWebデザインの海外事例7選
国内でも着実に採用が進みつつあるWebサイト制作の手法「レスポンシブWebデザイン」。今年7月に刊行され、すでに2刷となっている書籍『レスポンシブWebデザイン マルチデバイス時代のコンセプトとテクニック』の著者・菊池 崇氏が、いま見ておきたいレスポンシブWebデザインの事例を紹介する。 「この業種や規模ではレスポンシブWebデザインは難しい」。そう考えているWeb制作者に見てほしいのが、海外の先行事例だ。レスポンシブWebデザインの導入で先を行く海外では、個人サイトから大規模サイトまで、業種を問わず、参考になるサイトがたくさんある。 ここで紹介するWebサイトは、筆者が日頃からさまざま々なテクニックを吸収したり、教科書として参考にしたりしているWebサイトだ。みなさんも、ぜひ一度目を通してほしい。「レスポンシブWebデザインの限界」を乗り越えるキッカケになるだろう。 1. Time.co
こうめの“これから使える”jQueryプラグイン
圧倒的な人気を誇るJavaScriptのライブラリー「jQuery」。サイトに効果をあたえるプラグインが多数あることが魅力ですが、そのプラグインを探すことがWeb制作者の手間になっています。本連載では、「こうめ」さんこと大竹孔明さんがおすすめのプラグインと実装方法、実装例を紹介します。
ASCII.jp：たった4行で電話が作れるAPI「Twilio」とは？ (1/2)｜Twilioではじめるクラウド電話開発
Twilioは簡単に言うと、「Webから電話を簡単に操作できるAPI」です。ほとんどの連絡をメールやSNSで済ませるようになった昨今、「いまさら電話？」と思った方もいるかもしれません。しかし、エンジニアの視点から、またサービス企画の視点から見て、Twilioは実に多くの可能性を秘めたAPIなのです（筆者もまた、その可能性に注目している1人です）。 Twilioを使うと何ができるのか？ どんな可能性があるのか？ その魅力を、連載を通じて紹介しましょう。 まずはTwilioを体験してみよう Twilioとはどんなものなのか？ まずは手元の携帯電話などから以下の番号に電話をかけてみてください（通話料がかかります）。 電話につながると、ややぎこちない女性の声でメッセージが流れたと思います。実はこの自動応答システム、Twilioを使って、たった4行のコードだけで実現されています。 <?xml ver
【 CSS-Tips マージンの相殺について - ページ下部 】 - ASCII.jp：フルードイメージの導入とタイポグラフィの設定 (3/3)
見出しの指定 次に、h1〜h6までの見出し要素のフォントサイズと行の高さを指定します。見出し要素のサイズや行の高さは適当に決めるのではなく、前に決めた1行の高さ（24px）を基準にして一定の間隔で要素が配置されるように考えます。要素同士の距離に規則性を持たせることで、読みやすく、バランスの取れたデザインができます。 ここでは、h1要素を48px、h2を36px、h3を24px、h4、h5、h6を16pxに指定しました。h1要素とh2要素が2行分の高さ（48px）、h3要素とh4〜h6要素が1行分の高さ（24px）になるように、line-heightの値を調整します。見出しレベルとfont-size、line-height、要素の高さの関係を下の表のようにまとめました。 見出しレベルfont-sizeline-height要素の高さ （font-size × line-height）
新Webエンジン「Blink」—GoogleはなぜWebKitを捨てたか？ (1/3)
先週、Webブラウザーの世界にふたつほど衝撃的なニュースが走った。ひとつ目はMozillaがSamsungと共同でプログラミング言語Rustをベースにした新Webレンダリングエンジン「Servo」の開発を進めていくと表明したこと、そしてもうひとつが今回の主題、GoogleがWebKitを離れて「Blink」への移行を表明したことだ（開発者向けバイナリーを配布するGoogle Chrome Canary（28.0.1468.0 canary）では、すでにBlinkが含まれている模様）。 Mozillaの抱えるGecko、AppleとGoogleが推進するWebKit、そしてMicrosoftのTridentの3つは、Webブラウザー業界においてシェアのほとんどを握る3大勢力となっている。その勢力のうちのふたつが従来の技術とは別の新しいエンジン採用と開発推進をほぼ同時に発表したことは、今後のト
サンプルで学ぶHTML5の仕様変更要素・前編 (1/4)
「HTML5タグの誤用で恥をかいた」「分厚い仕様書は読み切れない」コーダー＆デザイナーのためのコーディングガイド。最終草案に対応したほか、商用サイトを意識したコーディング例を新たに書き下ろし。HTML5マークアップへ移行するために必要な知識を効率よく学べる1冊です。ネットで話題の「HTML5カルタ」付き! HTML5マークアップ 現場で使える最短攻略ガイド 定価：2,808円 （本体2,600円）／形態：B5変 (240ページ) ISBN：978-4-04-866070-9 HTML5では、新たに加わった要素だけでなく、従来とは意味や使い方が変わった要素もあります。HTML4.01やXHTML1.0から仕様が大きく変更された要素もありますので、しっかり確認しておきましょう。 各要素の解説では、冒頭に「カテゴリー」と「コンテンツモデル」という項目が登場します。カテゴリーとコンテンツモデルにつ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Webサービス開発者のためのTwitter Bootstrap入門
サンプルで学ぶTwitter Bootstrapの使い方：中編 (1/5)
あの有名サイトの裏側をのぞく
ゼロから始めるレスポンシブWebデザイン入門
清水 誠の「その指標がデザインを決める」
