これは名機の予感 ソニーの5000円台ワイヤレスヘッドフォンがいい感じ (1/2)
sponsored 2.4GHz接続時で最大105時間、Bluetoothで最大210時間のロングバッテリーも魅力！ 選択肢が減ってる大きめ・軽量ゲーミングマウスならコレ！ 左だけでなく右サイドにも2ボタンあるぞ sponsored 最新世代QD-OLED採用の4K解像度で240Hz駆動、0.03msの応答速度を実現 一度画面を見たら液晶では満足できなくなる…究極のゲーミングディスプレー「MPG 321URX QD-OLED」のヤバさをレビュー sponsored Core i7-14700Fでメモリーは32GB、FRONTIERの「FRGHLB760/WSA」をチェック 性能・冷却・デザイン・価格の平均点がかなり高いRTX 4070 SUPERゲーミングPC、25万円台から！ sponsored 快適な着け心地なのにノイズキャンセリング性能は大幅にアップした！ 没入感の高さが印象的！ 強
Grid Layoutが当たり前になったら、CSSレイアウトはどう考えるべき？
新しいCSSレイアウト仕様Grid Layoutを使うには、これまでのCSSレイアウトの考え方を変える必要があります。どう考えていけばよいのでしょうか？ 最近、ようやくCSS Gridを学びはじめてるんですけど、学ぶ課程で「CSS Gridが”普及”するとBootstrapやFoundtionのようなフレームワークの作り方も変わるんだろうなぁ」と考えています。 どう変わるのかというと、まずは、 基本的にレイアウトはCSS Grid（必要に応じてflexbox）でやるようになる コンポーネントはいままでのフレームワークと基本的には同じだけど、CSS Gridに入れ込みやすい設計に変わる もう少し詳しく書くと、 Bootstrapなどで採用されているグリッド・システムが必要なくなる 少なくともrowとcol-4、col-md-6のような書き方はなくなる 独自のグリッド・システムで作っていたレイ
Web屋の私が勘違いしていた、世界のネット通信環境の驚くべき状況
ユーザーの目線でWebサイトを作ることは基本中の基本ですが、グローバルサイトを担当することになったら日本の常識を捨てて現地の状況を理解する必要があります。 アプリやWebサイトをより良く、より速く、よりアクセシブルにする手助けが私の仕事です。CalibreでWebを構築したり、メンテしたりする際にぶつかる課題について、知見が集まりました。 この1年で本当に驚いたことは、一般のユーザーがどうインターネットにアクセスしているかです。Web業界に従事しているのに、ほとんど理解していませんでした。自分たちがユーザーにコンテンツを配信する方法がいかに時代遅だったのかもわかりました。 ここ数年の進歩で、コンテンツをWebからダウンロードする速度は劇的に速くなりました。しかし、「HTMLをロードし、ほかのリソースを探してそれもロードする」という基本は変化していません。 世界中の約46.1%がインターネッ
ついにWindowsへ導入が始まった「Fluent Design System」5つの基本要素
10月17日に配信が始まった「Windows 10 Fall Creators Update」に導入された、マイクロソフトの新しいデザイン言語「Fluent Design System（フルーエントデザインシステム）」。コンセプトと実装へ反映する方法を解説します。 独自のデザイン言語やGoogleのMaterial Design（マテリアルデザイン）など既存の言語を実装して、統一のとれた堅牢なユーザーエクスペリエンスを提供しているリーディングカンパニーが増えてきました。デザイン言語を、直感的・魅力的で見栄えの一貫したアプリやWebサイトを作成できる「確立されたガイドライン」と考えてください。 最近マイクロソフト社は、Windows 10ベースのデバイスにおける広範な使用（つまりユニバーサルWindowsプラットホーム（UWP）アプリ対応）を目的としたFluent Design System
スマホで動画ってホントに見てる？ 渋谷の女子高生たちに聞いてみた
昨今の話題と言えば「動画」です。生活者はインターネット上の動画とどのように関わっているのでしょうか。さまざまな調査データでは、以下のようなことが言われています。 スマートフォンでの動画視聴（率や時間）が伸びている。特に若年層でその傾向が強い。 実際のところどうなのでしょうか。今回は「若年層」の代表（？）女子高生を例に、実際に渋谷にいた女子高生に「スマートフォンでの動画視聴」についてインタビューをしてみました。 概要は以下の通りです。インタビューに協力してくれた女子高生は10名。定量的にものが言える調査ではありません。また、渋谷にいた人、インタビューに答えてくれた人…、とさまざまな条件がつきますので、女子高生一般ではありません。ただ、彼女たちのスマホでの動画視聴のリアルな一面を垣間見ることができました。インタビュー結果からみえてきたことを紹介しましょう。 スマホでの動画視聴は「普通のこと」
サンプルコードで学ぶ 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 );
アドビ、日本語対応フォントを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社で作るのは難
マウスオーバーで動くなめらかカルーセルパネル (1/2)
軽快でなめらかなカルーセルパネル 毎週アップロードされる充実した動画コンテンツを、カルーセルパネルやボックスレイアウトで賑やかかつコンパクトにまとめている「Universiteit van Nederland」。このサイトのカルーセルパネルは、マウスカーソルの位置に応じて軽快でなめらかに動く。 STEP 1：基本構造を用意する 今回作成するカルーセルは、横長のコンテンツをマウスの座標に応じて左右に移動させることで、スクロールの動きを演出している。 通常のボックススクロールでは、overflow: scroll; でスクロールバーを表示させ、スクロールバーの操作によってコンテンツを移動させる。今回のカルーセルは、スクロールバーの代わりにマウス座標を利用するため、overflow: hidden;で表示ボックス（.holder）からはみ出す部分を非表示化。内部（.inner）に横長のコンテンツ
“5年目”を次のステージに導く「iPhone 5」—誰もが予想できなかった魅力を備えて堂々デビュー (1/7)
ほぼ2年に1回のペースで製品の形状を刷新してきたiPhoneシリーズだが、どんなに大胆に形を変えた時でも、決して変えていないポイントがいくつかあった。例えば3.5インチのスクリーンサイズ。Retinaディスプレイ搭載のiPhone 4で解像度が変わった時でも、アップルは3.5インチの画面サイズをかたくなに守り続けてきたが、今回はこれも変えた。 2003年に登場した第３世代iPodで開発され、それ以来、iPhoneにも継承されてきた30ピン横長のドック端子もそのひとつで、今回のiPhone 5で、新たに「Lightningコネクタ」という、ちゃんと名前までついた端子に生まれ変わった。そしてiPod用を元に、リモコンの真裏にマイクを追加した、リモコン付きイヤーバッド（earpad）式ヘッドホンも、新たに３年間かけて開発したという「Apple EarPods with Remote and Mi
フルードグリッドとレスポンシブWebデザインの完成 (1/3)
本連載で紹介したレスポンシブWebデザインの基礎に加えて、画像や動画のレスポンシブ対応、パフォーマンス改善といった商用サイト構築のノウハウを大幅に加筆。さらに、解像度に依存しないレスポンシブWebデザインの考え方やスマートテレビ対応などの応用テクも盛り込みました。 レスポンシブWebデザイン マルチデバイス時代のコンセプトとテクニック 定価：2,625円 (本体2,500円)／形態：B5変 (232ページ) ISBN：978-4-04-886323-0 メディアクエリーを設定し、グリッドデザインで大きな画面にも対応した「枝豆隊」をフルードデザイン（リキッドレイアウト）に変更します。レスポンシブWebデザインによるサイト制作もいよいよ今回で完成です。 フルードグリッドへの変換 前回の記事で、1024px以上のスタイルシートが一通り完成しましたが、この状態ではウィンドウサイズを広げてもpxで幅
もうこれで迷わないHTML5新要素の使い方 (1/3)
「HTML5タグの誤用で恥をかいた」「分厚い仕様書は読み切れない」コーダー＆デザイナーのためのコーディングガイド。最終草案に対応したほか、商用サイトを意識したコーディング例を新たに書き下ろし。HTML5マークアップへ移行するために必要な知識を効率よく学べる1冊です。ネットで話題の「HTML5カルタ」付き! HTML5マークアップ 現場で使える最短攻略ガイド 定価：2,808円 （本体2,600円）／形態：B5変 (240ページ) ISBN：978-4-04-866070-9 HTML5では、セクションに関連する要素以外にも、新しい要素が追加されたり、意味が変更されたりしています。今回から数回にわたって、HTML5で新たに登場する要素や、変更された要素について解説します。第6回は、一般的なWeb制作で使用頻度の高い要素と、ルビ関連の要素を取り上げます。 各要素の解説では、冒頭に「カテゴリー」
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
iBooks AuthorでHTML5の電子書籍作ってみた (1/4)
アップルが1月20日に発表した電子書籍作成ツール「iBooks Author」。さっそくダウンロードして使ってみた方も多いのではないでしょうか？ アップルは、学生が使用する電子教科書の作成を目的としたツールとしていますが、iBooks Authorを使えば、画像や動画などのリッチコンテンツを埋め込んだインタラクティブな電子書籍を手軽に作成できます。 注目は、電子書籍の中にHTMLも埋め込めることです。つまり、自分で作成したHTML5+JavaScriptのプログラムを組み合わせて、よりインタラクティブな電子書籍を作成できるのです。 実際に試してみると、MP3形式などのサウンドは埋め込めないなど、若干の制限はありますが、ちょっとしたゲームや観光案内コンテンツなどを1つのパッケージとして配布できるのはメリットです（ただし、有料で販売する場合はiBooks Storeを介する必要があります）。
スマホサイトを作る前に見たい国内38社の実例 (1/7)
この記事で取り上げているスマートフォンサイトの「BEFORE & AFTER」を以下の記事で紹介しています。合わせてご覧ください。 日本のスマホサイトは2年間でこんなに変わった iPhone、Androidの普及を背景に、スマートフォンのブラウザー向けにコンテンツや表示を最適化した「スマートフォンサイト」（スマホサイト）を開設する企業が増えている。当初はiPhone（iOS）の標準UIに倣った画一的なデザインが多かったが、最近では独特のレイアウトや斬新な色使いの個性的なスマートフォンサイトも増えてきた。 好評だった前編に引き続き、Web制作者が見ておきたいスマートフォンサイト（日本語／企業サイト限定）を業種別に分類して紹介する。スマートフォンサイトの制作に入る前にチェックしておこう。
jQuery MobileのCSSを変更してテーマをカスタマイズ (1/3)
CSSを駆使することでjQuery Mobileでもオリジナルデザインを実現できますが（関連記事）、フルカスタマイズではかなりの手間がかかります。今回はjQuery Mobileのテーマカラーのみを変更する、手軽なセミカスタマイズの方法を紹介します。 jQuery MobileのCSSを解剖する テーマカラーをカスタマイズするために、jQuery MobileのCSSがどのように設計されているか、見てみましょう。 jQuery MobileのCSSは、「共通CSS」と「テーマCSS」の2つで構成されています。共通CSSは、要素のサイズや間隔、余白など、ページの構造やレイアウトに関する設定が記述されており、すべてのテーマで共通して利用されます。 一方、テーマCSSは、data-theme属性で指定したテーマ（デフォルトでは「a」～「e」までの5種類）のスタイルを記述したCSSで、指定したテー
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
iframe対応！初めてのFacebookページの作り方 (1/4)
Facebookを企業で活用するために、Facebookページの開設・運用方法を解説する本連載。第1回では、Facebookページの概要と基本的な機能について、事例を挙げながら紹介しました。今回はASCII.jp Web ProfessionalのFacebookページを例にとって、Facebookページの作成方法を具体的に解説しましょう。 さっそくですが、完成したWeb ProfessionalのFacebookページを紹介します。 Web Professional編集部では、「固定読者を育てることで媒体価値をアップさせる」ことを目的にFacebookページを開設しました。「いいね！」をしてくれたユーザー（ファン）に対して、ニュースフィードを通じて最新情報を提供し、ウォールによる記事へのフォードバックや、ファンの友人を通じた潜在的な読者へのリーチも狙います。Web Professiona
Dreamweaver CS5.5でスマホアプリ作ってみた (1/3)
たった1年で新バージョンの登場となったDreamweaver（関連記事）。5月下旬発売の「Dreamweaver CS5.5」はCS5からのアップグレードでも1万5750円という価格設定に驚かされる。だが、ベータ版を触って価格以上に驚いたのがスマートフォン対応機能の“本気度”だ。 Dreamweaver CS5.5では、オープンソースのJavaScriptフレームワーク「jQuery Mobile」をテンプレート的に利用することで、iPhoneやAndroidに最適化されたスマートフォンサイトをわずか数ステップで作れてしまう。jQuery Mobileは、iPhone/Android/Windows Phone/BlackBerryなどで利用できるクロスプラットフォーム設計のフレームワーク。以下のようなシンプルなスマートフォンサイトなら、PhotoshopもFireworksも使わず、Dr
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
講談社が導入した国内初のデジタル輪転機を見てきた (1/3)
アディダスに学ぶ「気持ちいい」サイトを作る4つのしかけ
