たった数行のCSSでパララックス風表現ができる「position: sticky」の使い方
短いCSSを書くだけで要素を特定の位置に固定できるCSSの「position: sticky」。ちょっとした工夫で実現できるおもしろい使い方をデモで解説します。 スクロールに応じてページ要素を固定表示できるposition: stickyが便利で面白い使い方ができそうなので実験してみました。仕様がまだ草案（Working Draft）の段階で、将来、細かい部分に変更がないとは言い切れませんが、Edgeを含めた最新のブラウザで、ほぼサポートされています。 position: stickyの仕様 ブラウザ・サポート状況（Can I use…） フィーチャー・クエリ（@supports） と一緒に使えば、position: stickyに対応していないブラウザにも考慮した実装が可能なので、注意は必要ですがちょっとしたエンハンスメントとして使うのに良さそうです。 まずは「こんなのが簡単にできちゃい
jQueryでAjaxするときに知っておきたい、JSONとJSONPの違い
jQueryだけで他のサーバーのコンテンツを読み込もうとすると、クロスドメインの制限がついて回ります。なぜJSONではなくJSONPを使わなければならないのか確認し、他の解決策も検討してみましょう。 ※本記事は2016年7月15日に掲載した記事の翻訳を一部更新したものです。執筆時点の情報をベースにしており、最新ではない可能性があります。 Webベースのアプリケーションを開発し、権限のないドメインからデータをロードしようとすると、おそらくブラウザーの画面に以下のようなメッセージが表示されているはずです。 XMLHttpRequest cannot load http://external-domain/service. No ‘Access-Control-Allow-Origin’ header is present on the requested resource. Origin ‘h
10年遅れたJavaScriptの知識をざっくり10分でアップデートしよう
久しぶりにJavaScriptを勉強しようと思ったら、すっかり浦島太郎状態だった……なんて人も多いのでは？ モダンなJavaScriptの知識をコンパクトにまとめました。 JavaScriptを取り巻く環境がどんどん変化しています。新たなツールやフレームワークが生み出されているだけでなく、言語そのものがES2015（ES6）の登場で大きく変わりました。JavaScript開発の学習がいかに難しいか愚痴をこぼす記事がたくさんありますが、無理もないことです。 本記事ではモダンJavaScriptを紹介します。JavaScriptの進展を解説し、フロントエンドWebアプリケーションを作るために使われているツールや手法の全体像を確認します。JavaScriptを学び始めたばかりの人や、以前は使っていて数年間離れたため変化を知りたい人はぜひ読んでください。 Node.jsについて Node.jsは
これはすごい！ メディアクエリなしでレスポンシブを実装するCSSトリック5選
メディアクエリーのようにビューポートではなく、コンテナの幅に応じてレイアウトを柔軟に調整するテクニックを紹介。calc関数を上手に活用した、マニアックなCSSトリックたちです。 はじめに、タイトルとは裏腹にこの記事は、メディアクエリ不要論を唱えたり、メディアクエリを批判したりするものではないことを伝えておきます。メディアクエリはとても使い勝手が良いので、私はいつもいろいろなことに使っています。とはいえ、メディアクエリでレスポンシブWebデザインにおける課題すべてを解決できるわけではありません。 要素の配置はビューポートではなくコンテナの寸法に基づいて変更するのが望ましい場合がよくあります。この課題を解決するためにエレメントクエリのコンセプトが誕生しました。とはいえエレメントクエリは実際まだ納得のいくものになっていないので、Mat Marquisはこのコンセプトにおける課題を示し、改良してc
Apple、Google、Amazonの「失敗」に学ぶ、フォーム改善3つのヒント
WebデザインやUXデザインの話題では、アップルやグーグル、アマゾンが大人気。でも、ビジネスが成功しているからといって、常にデザインが正しいとは限りません。フォームにおける問題点と改善案を具体的に示します。 これまでに「アップルのように美しく」「グーグルのようにシンプルに」「アマゾンのように分かりやすく」デザインしてほしい、と言われた経験があるでしょうか？ 優れた技術で有名な企業はクライアントから「ゴール」とみなされ、多くの場合そこから学べます。 とはいえフォームのこととなると「デジタルの巨人たち」にさえ改善が必要な点があります。 アップルとアクセシビリティ クライアントはしばしば最初にアップルを引き合いに出すので、ここでもそうします。アップルはフォームを含め、モダンミニマリスト（フラット）デザインのインターフェイスを提供しています。図1に例を示します。 問題はフォームがときどき「ミニマリ
ASCII.jp：データ消失！あのとき、ファーストサーバになにが起こったか？ (1/2)｜データ消失事故から2年！ファーストサーバ、再生への第一歩
今から2年前の2012年の6月20日、レンタルサーバー会社のファーストサーバは、大規模な顧客データの消失事故を引き起こした。あのときなにが起こったか？ ファーストサーバのさまざまな部門の担当に、当時の状態を振り返ってもらった。 ファーストサーバは今も変わらずビジネスを展開している ファーストサーバの顧客データ消失事故に関するドキュメンタリーを書きたいと思った。事故の原因究明や責任の所在を明らかにするのではなく、当事者の話を積み上げていくような記事が書きたいと思った。 そして、今回ファーストサーバの全面的な協力により、事故当時から現場を統率してきた現代表取締役社長の村竹昌人氏をはじめ、営業、開発、運用、マーケティング、広報、サポート、管理など各部門の担当者に話を聞くことができた（以下、敬称略・役職は現職）。 事故から2年間の間、ファーストサーバはひたすら事故の影響を受けたユーザーへの対応と再
Webデザインが3倍速くなる！Photoshop神速テク4つ
カンプのデザインやパーツの作成など、Webデザインにも欠かせないPhotoshop。もっとラクに、もっと速くWebデザインするために、すぐに役立つ4つの時短テクニックを紹介します。 サイズ違いのバナーはまとめて使い回し Photoshopでよく作るモノの1つといえば、バナー。掲載場所や配信先によってサイズが異なるバナーをバラバラに作成すると使い回しが面倒だし、写真や文言に変更があったときにいちいち直すのが大変ですよね。 いろんなサイズのバナーを1つのPhotoshopファイルにまとめて作成し、写真やロゴをスマートオブジェクトで一元化しておくと、バリエーションをスピーディに作れ、修正にも対応しやすくなります。 例として、大中小の3つのバナーを一気に作ってみましょう。作成する最大サイズのバナーが収まるように新規ドキュメントを作成し、大きいサイズのバナーから作成します。 レイヤーに素材を配置して
いまどきメールに添付OKな「ファイルの容量」は何MBまで? (3/4)
10MBオーバーはクラウド共有にしたいが…… では、メールで送れない場合はどうしたらよいだろうか？ 対策として考えられるいくつかのなかで最右翼となるのが、ストレージサービスのファイル転送サービス。ある一定期間データを預かり、特定の人のみダウンロードできるサービスだ。代表的なものには「宅ふぁいる便」や「データ便」、「Firestorage」、「Giga File便」などがある。 少なめの容量や短めの預かり期間であれば、会員登録の必要もなく、手軽さはナンバーワン。ただ、セキュリティーやコンプライアンスの観点から会社によっては使用を禁止しているところもある。 次に考えられるのが、クラウドサービスのファイル共有。「DropBox」や「SkyDrive」、「Google Drive」などが代表格といえる。 サービスによってはファイルをやり取りする相手もサービスを受けている必要があるが、ストレージサー
HTMLの用意とリセットCSSの作成 (1/4)
本連載で紹介したレスポンシブWebデザインの基礎に加えて、画像や動画のレスポンシブ対応、パフォーマンス改善といった商用サイト構築のノウハウを大幅に加筆。さらに、解像度に依存しないレスポンシブWebデザインの考え方やスマートテレビ対応などの応用テクも盛り込みました。 レスポンシブWebデザイン マルチデバイス時代のコンセプトとテクニック 定価：2,625円 (本体2,500円)／形態：B5変 (232ページ) ISBN：978-4-04-886323-0 連載第2回では、レスポンシブWebデザインの設計と素材の準備をしました。今回は、ページの基本となるHTMLとCSSの初期設定を記述します。 ベースHTMLの記述 最初に、「枝豆隊」の基本となるHTMLを用意しましょう。このサイトでは、XHTMLではなくHTML5を採用しています。HTML5はオフライン機能や現在地特定機能などのモバイルデバイ
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
