たった数行のCSSでパララックス風表現ができる「position: sticky」の使い方 - WPJ

2018/04/20 101 users sticky position 草案 CSS スクロール

短いCSSを書くだけで要素を特定の位置に固定できるCSSの「position: sticky」。ちょっとした工夫で実現できるおもしろい使い方をデモで解説します。 スクロールに応じてページ要素を固定表示できる position: sticky が便利で面白い使い方ができそうなので実験してみました。 仕様がまだ草案（Working Draft）の段階 で、将来、細かい部分に変更がないとは言い切れません... 続きを読む

CSS GridとFlexboxで驚くほど簡単にレスポンシブレイアウトを実装する方法 - WPJ

2018/03/15 83 users Flexbox レスポンシブレイアウト メディアクエリ 実装

レスポンシブWebデザインの実装に欠かせないメディアクエリを使わずに、CSS GridとFlexboxでレスポンシブなレイアウトを実装する方法を紹介します。 レスポンシブなレイアウトにはメディアクエリが欠かせないわけですが、 CSS GridやFlexboxを使えばメディアクエリなしでもレスポンシブなレイアウトが可能 です。メディアクエリが全くいらなくなるということはないと思いますが、CSS Gr... 続きを読む

Web屋の私が勘違いしていた、世界のネット通信環境の驚くべき状況 - WPJ

2017/11/24 191 users アクセシブル Calibre 知見 手助け Ｗｅｂ屋

アプリやWebサイトをより良く、より速く、よりアクセシブルにする手助けが私の仕事です。 Calibre でWebを構築したり、メンテしたりする際にぶつかる課題について、知見が集まりました。 この1年で本当に驚いたことは、一般のユーザーがどうインターネットにアクセスしているかです。Web業界に従事しているのに、ほとんど理解していませんでした。自分たちがユーザーにコンテンツを配信する方法がいかに時代遅... 続きを読む

ノンプログラマーがJavaScriptを初めて学ぶときにありがちな9つの失敗 - WPJ

2017/10/25 260 users コツ 多く プログラミング言語 アプローチ 学習

Webデザイナーにとってもっとも身近なプログラミング言語といえばJavaScriptですよね。ところがいざ勉強を始めたものの挫折してしまった…という人のために、典型的な失敗例と学習のコツを教えます。 JavaScriptの学習をしても挫折する人の多くは、「JavaScriptは分かりにくい」「自分はWeb開発に向いていない」と言います。悲観的になってあきらないでください。アプローチの仕方を変えるこ... 続きを読む

ついにWindowsへ導入が始まった「Fluent Design System」5つの基本要素 - WPJ

2017/10/17 73 users マイクロソフト 堅牢 実装 既存 統一

10月17日に配信が始まった「Windows 10 Fall Creators Update」に導入された、マイクロソフトの新しいデザイン言語「Fluent Design System（フルーエントデザインシステム）」。コンセプトと実装へ反映する方法を解説します。 独自のデザイン言語やGoogleの Material Design（マテリアルデザイン） など既存の言語を実装して、統一のとれた堅牢な... 続きを読む

いまさら聞けないCSSレイアウトの定番手法 Flexbox再入門 - WPJ

2017/08/04 83 users Translation CSSレイアウト 定番手法

いまさら聞けないCSSレイアウトの定番手法 Flexbox再入門 2017/08/04 Christian Krammer Articles in this issue reproduced from SitePoint Copyright © 2017, All rights reserved. SitePoint Pty Ltd. www.sitepoint.com.　Translation ... 続きを読む

あなたが知らないJavaScriptの便利すぎるショートハンド19選 - WPJ

2017/07/14 80 users ショートハンド ウロコ JavaScript 短縮 日頃

日頃書いているJavaScriptをもっと短く書く方法を知っていますか？ 目からうろこ、すぐに使えるJavaScriptのショードハンドを紹介します。 JavaScriptを使うすべての開発者に向けて、私が長年かけて身につけたJavaScriptのショートハンド（短縮記法）を資料にしました。コードの違いが分かるように通常の記述方法も併記しました。 1．三項演算子 if-else文を1行に収めた短縮... 続きを読む

「フルスタック開発者」を名乗るなら身につけたい技術と知識【2017年版】 - WPJ

2017/07/12 405 users issue reproduced 知識 技術 2017年版

「フルスタック開発者」を名乗るなら身につけたい技術と知識【2017年版】 2017/07/12 Bruno Skvorc Articles in this issue reproduced from SitePoint Copyright © 2017, All rights reserved. SitePoint Pty Ltd. www.sitepoint.com.　Translation c... 続きを読む

10年遅れたJavaScriptの知識をざっくり10分でアップデートしよう - WPJ

2017/06/16 1151 users issue reproduced JavaScript

10年遅れたJavaScriptの知識をざっくり10分でアップデートしよう 2017/06/16 James Kolce Articles in this issue reproduced from SitePoint Copyright © 2017, All rights reserved. SitePoint Pty Ltd. www.sitepoint.com.　Translation c... 続きを読む

さらばjQuery！アニメーションをサクサク処理できるVelocity.jsの使い方 - WPJ

2017/05/22 94 users jQuery CSSアニメーション 出番 アニメーション

「jQueryのアニメーションが遅い」「CSSアニメーションは使いにくい」。そこでアニメーション処理の定番ライブラリー「Velocity.js」の出番です。基本的な使い方を一通り紹介しましょう。「jQueryのアニメーションが遅い」「CSSアニメーションは使いにくい」。そこでアニメーション処理の定番ライブラリー「Velocity.js」の出番です。基本的な使い方を一通り紹介しましょう。 本記事では... 続きを読む

JSのデバッグにはconsole.log()ではなくNodeのデバッガーを使いなさい - WPJ

2017/05/15 424 users デバッガー Transla node デバッグ

JSのデバッグにはconsole.log()ではなくNodeのデバッガーを使いなさい 2017/05/15 Camilo Reyes Articles in this issue reproduced from SitePoint Copyright © 2017, All rights reserved. SitePoint Pty Ltd. www.sitepoint.com.　Transla... 続きを読む

もうjQueryには頼らない！素のJavaScriptでDOMを操作するための基礎知識 - WPJ

2017/04/27 137 users jQuery DOM issue reproduced

古いブラウザーのサポートが必要ないなら、もうjQueryを使わなくてもいいかもしれません。ネイティブなDOM APIの使い方をサンプルとともに解説します。もうjQueryには頼らない！素のJavaScriptでDOMを操作するための基礎知識 2017/04/27 Sebastian Seitz Articles in this issue reproduced from SitePoint Cop... 続きを読む

サンプルあり！Googleが推進するPWAに既存サイトを対応させる方法 - WPJ

2017/04/13 84 users Pwa ネイティブアプリ しくみ PWA化 サンプル

Googleが昨年発表した、Webアプリをネイティブアプリのように使えるようにするしくみ「PWA（Progressive Web Apps」が話題です。既存サイトをPWA化する方法をサンプルコードをもとに解説します。脱ネイティブ！Googleが推進する「PWA」にたった数時間で対応する方法 2017/04/13 Craig Buckler Articles in this issue reprod... 続きを読む

誰も教えてくれない、JavaScript初学者がプログラムを書けるようになる方法 - WPJ

2017/03/30 118 users issue reproduced プログラミング 基本 実際

JavaScriptに限らず、プログラミングの基本を学んだら何か動くモノ（プライベートプロジェクト）を作ってみたくなります。でも実際にどうやって進めたらいいのでしょうか？誰も教えてくれない、JavaScript初学者がプログラムを書けるようになる方法 2017/03/30 Yaphi Berhanu Articles in this issue reproduced from SitePoint ... 続きを読む

もっと優れた開発者になりたければ、いますぐコーディングをやめなさい - WPJ

2017/03/29 205 users Translation コーディング 開発者

もっと優れた開発者になりたければ、いますぐコーディングをやめなさい 2017/03/29 Andrew McDermott Articles in this issue reproduced from SitePoint Copyright © 2017, All rights reserved. SitePoint Pty Ltd. www.sitepoint.com.　Translation ... 続きを読む

2017年のPHPフレームワーク——2強時代に何を学ぶべきか？ - WPJ

2017/03/21 425 users PHPフレームワーク

動きの早いフロントエンド界隈や他の言語の躍進の話題に押されて、いつまでも古い知識のままPHPで開発していませんか？ 知識のアップデートに役立つ、最近のフレームワークの動向を、ちょっと辛口な現状分析とともに。 私が 約1年前に書いた記事 の続きを書くことにしたのは次の質問を受けたからです。 Q：PHP MVCフレームワークについて近況を教えてください。（2017/2/24） A：PHPのフレームワー... 続きを読む

5000人調査でわかった！世界のフロントエンド開発者が使うツールはこれだ - WPJ

2017/03/17 73 users フレームワーク CSS モジュール CSSモジュール 進化

次々とリリースされるJavaScriptライブラリーにフレームワーク、進化を続けるCSSのモジュール……と、変化の激しいフロントエンド開発界隈。いま開発者たちに実際に使われているのはどんなツール？次々とリリースされるJavaScriptライブラリーにフレームワーク、進化を続けるCSSモジュール……と、変化の激しいフロントエンド開発界隈。いま開発者たちに実際に使われているのはどんなツール？ 開発経験... 続きを読む

もう実機は不要!? Chromeのモバイルエミュレーターがとんでもなく進化していた - WPJ

2017/03/09 91 users Chrome 実機

Chromeデベロッパーツール、使いこなしていますか？ モバイルブラウザーエミュレーターの機能が拡張され、通信帯域やセンサーのシミュレーション、PWAの検証まで進化していました。これは便利です！Chromeデベロッパーツール、使いこなしていますか？ モバイルブラウザーエミュレーターの機能が拡張され、通信帯域やセンサーのシミュレーション、PWAの検証など、どんどん進化しています。これは便利です！ W... 続きを読む

これならわかるJavaScript超入門：変数の基本と型の違いを学ぶ - WPJ

2017/03/09 72 users jQuery 変数 issue reproduced 基礎

なんとなくjQueryを使っているけど、実はJavaScriptの基礎がよくわかっていない……。そんなJavaScript初心者のために、変数とデータ型をていねいに解説します。これなら絶対わかる！JavaScriptの変数と型の基礎をいまこそ理解する 2017/03/09 Tania Rascia Articles in this issue reproduced from SitePoint C... 続きを読む

ハイパフォーマンスCSS3アニメーション——60fpsを実現するベストプラクティス - WPJ

2017/03/07 131 users アニメーション issue reproduced 書き方

すっかり普及したCSS3アニメーション。ハイパフォーマンスなアニメーションを実現する、ちょっとした書き方のポイントとは？ハイパフォーマンスCSS3アニメーション——60fpsを実現するベストプラクティス 2017/03/07 Jose Rosario Articles in this issue reproduced from SitePoint Copyright © 2017, All rig... 続きを読む

CodePenライクなChrome拡張「Web Maker」でフロントエンド開発が捗る - WPJ

2017/03/02 85 users ライブラリー Chrome拡張 リアルタイム コード 開発環境

フロントエンド開発にめっちゃ便利！オフライン対応のCodePenライクなChrome拡張 有名なライブラリーを読み込んだり、リアルタイムでプレビューしたり。サクッとコードを書いて確認できるChrome拡張「Web Maker」はオフラインで使えるCodePenライクな開発環境。有名なライブラリーを読み込んだり、リアルタイムでプレビューしたり。サクッとコードを書いて確認できる「Web Maker」は... 続きを読む

面倒な作業も発狂しない！Web制作を超効率化するgulp.jsの始め方（2017年版） - WPJ

2017/02/22 88 users trans Gulp.js Web制作 作業 超効率化

面倒な作業も発狂しない！Web制作を超効率化するgulp.jsの始め方（2017年版） 2017/02/22 Craig Buckler Articles in this issue reproduced from SitePoint Copyright © 2017, All rights reserved. SitePoint Pty Ltd. www.sitepoint.com.　Trans... 続きを読む

「Google丸投げ」でiOSアプリ開発が恐ろしくラクになる！Firebaseの使い方 - WPJ

2017/02/01 649 users Firebase サンプルアプリ ラク iOSアプリ開発 処理

Googleが運営する #Firebase を使えば、面倒なサーバーの処理は任せて、クライアント側の開発に集中できます。サンプルアプリを例に、基本的な使い方を体験してみましょう。「Google丸投げ」でiOSアプリ開発が恐ろしくラクになる！Firebaseの使い方 2017/02/01 Joyce Echessa Articles in this issue reproduced from Sit... 続きを読む

脱「JavaScript疲れ」のために注目すべき、3つの最新ライブラリー - WPJ

2017/01/31 108 users Svelte ライブラリー 年々複雑化 ツール 世界

ツールやライブラリーが乱立し、年々複雑化するJavaScriptの世界。それでも2017年に注目したい3つのライブラリーVue.js、Svelte、Conditioner.jsを紹介します。脱「JavaScript疲れ」のために注目すべき、3つの最新ライブラリー 2017/01/31 Tim Severien Articles in this issue reproduced from SiteP... 続きを読む

あなたが知らないスゴいフロントエンド開発ツール7選 - WPJ

2017/01/26 153 users あなた

2016年も進化し続けたフロントエンド開発ツール。Web Tools Weeklyのキュレーター・Louisが1年を振り返り、Modaal、Jam API、postcss-grid-kissなど、お気に入りのツールを紹介します。2016年も進化し続けたフロントエンド開発ツール。Web Tools Weeklyのキュレーター・Louisが1年を振り返り、お気に入りのツールを紹介します。 1年が過ぎ、... 続きを読む