昔と違う2021年のHTML制作。アンケート結果から分析するイマドキのウェブ制作 - ICS MEDIA
ウェブ業界の当たり前だと思っていることでも、他社の人には違う常識があるかもしれません。自分が業界多数の傾向と違うところはどこなのか・・・、この連載ではアンケートデータから国内のウェブ業界の傾向を分析します。 連載7回目となる本記事では「ウェブ業界で、2010年代から変化したもの」をテーマとしてアンケート結果を紹介します。 floatプロパティーは現役？ floatプロパティーは、CSSレイアウトのために2000年代中頃からテーブルレイアウトに代わって使われてきました。FlexboxやCSS Gridなど、他にレイアウト手法が存在する現在において、floatプロパティーはどれほど使われているのでしょうか。 1829票の回答があり「とてもよく使う」が5.7%、「たまに使う」が19.8%、「ほとんど使わない」が69%、「floatを知らない」が5.5%でした。 現在はfloatプロパティーを使う
gapの余白指定が便利！ gridとflexでできる新しいCSSレイアウト手法 - ICS MEDIA
CSSのgapプロパティーは余白を指定できる新しめの手法です。余白といえば、marginプロパティーやpaddingプロパティーを思い浮かべる方が多いと思いますが、CSS GridやFlexboxでgapプロパティーを使うと柔軟にレイアウトを組めます。もともとgapプロパティーはCSS Gridでのみ利用できていましたが、macOS Safari 14.1およびSafari on iOS 14.6からFlexboxでもgapプロパティーが使えるようになりました。 この記事ではFlexbox、CSS Gridで利用できるgapプロパティーを活用したレイアウト手法とそのメリットを紹介します。今までmarginプロパティーで要素間の余白を調整していたものもgapプロパティーで柔軟に対応できる場面もあります。なお、下記サンプルでmarginプロパティーは一切使っていません。 サンプルを別ウインドウ
新感覚！メソッドチェーンでアニメーションがスラスラ書ける「Tween24.js」を作りました - ICS MEDIA
新感覚！メソッドチェーンでアニメーションがスラスラ書ける「Tween24.js」を作りました アニメーションを作る時に、「思いついた演出をすぐに実装したい」「頭の中ではできているのに、コーディングするのが面倒」と思ったことはありませんか？アニメーション作成にはライブラリを使用することが多いと思いますが、使い方を調べて覚えて、ドキュメントからコピペしたり、ひたすらタイピングをして… 私はこれらの問題を解決するために、「Tween24」というライブラリを作りました。Tween24はメソッドチェーンで記述するのが特徴で、たった1行でアニメーションが実装できます。依存ライブラリもなく、単体で動作します。アニメーションライブラリの多くはオブジェクト型でプロパティを指定するためタイピングが多くなりがちですが、メソッドチェーンであればエディターのコード補完機能でスラスラと記述できます。 その他にも、メソ
VS Code & TypeScriptとp5.jsで始めるモダンなクリエイティブコーディング入門 - ICS MEDIA
ページの背景で動くダイナミックなパーティクルやラインアニメーション、あるいはちょっとした遊びごころの溢れるキャラクターアニメーションなど、webページにクリエイティブな表現を組み込めるようになりたいと考える方はエンジニアにも多いでしょう。 この記事では、基本的なJavaScriptの知識があれば誰でも始められるp5.jsというライブラリを使用して、クリエイティブな作品作りの入門を解説します。 環境面では、フロントエンド開発のデファクト・スタンダードとも言えるVisual Studio Code（以下VS Code）とTypeScriptを使用して、モダンで快適な開発環境を作ります。 環境構築といっても、とくに難しい作業はありません。記事を読みながらぜひ、オリジナルの作品作りにチャレンジしてみてください。 ▼ VS Codeでp5.jsを使って制作している環境の例 クリエイティブ・コーディン
Chrome・Safari・Firefoxで比較！クリエイティブ表現のレベルアップに使える最新ブラウザーの開発者機能（パフォーマンス編） - ICS MEDIA
Chrome・Safari・Firefoxで比較 クリエイティブ表現のレベルアップに使える最新ブラウザーの開発者機能（パフォーマンス編） この記事は『Chrome・Safari・Firefoxで比較！クリエイティブ表現のレベルアップに使える最新ブラウザの開発者機能』の後編になります。 前編ではブラウザーの開発者ツールがJavaScriptやCSSのコーディング・デバッグだけではなく、もっとクリエイティブな領域でも活用できることを示しました。アニメーションのリプレイやイージングの編集など、すぐに使える機能がたくさんあることをお伝えできたと思います。 後編ではもう一歩踏み込んで、アニメーションやインタラクションのパフォーマンス改善に使える開発者ツールの機能を紹介します。パフォーマンスについてはどのブラウザーもとても力を入れているので、開発者ツールも自ずと高機能です。 ブラウザーのレンダリングプ
Chrome・Safari・Firefoxで比較！クリエイティブ表現のレベルアップに使える最新ブラウザーの開発者機能（前編） - ICS MEDIA
どのブラウザーでも、アニメーションのパネルを開いている状態で画面を操作すると、発生したトランジション・アニメーションが自動的に記録されます。記録したアニメーションはもう一度ゆっくり再生したり、対象の要素やスタイルを調べたりすることもできます。 ChromeのAnimationsパネルの特徴 Chromeの場合、検出されたトランジションやアニメーションはトリガーが同じもので自動的にグループ化され、グループの単位で詳細を見たり再生したりが可能です。また、アニメーションのタイミングや長さをドラッグで調整する機能もあります。 Firefoxのアニメーションパネルの特徴 Firefoxのアニメーションパネルはインスペクターの一部になっているので、要素を絞り込んでこの要素に適用されているトランジション・アニメーションだけを表示できます。また、色のトランジション・アニメーションの場合、タイムラインが色の
JavaScriptのモダンな書き方 - ES2017〜ES2018のawait・async, includes(), padStart()等を解説 - ICS MEDIA
JavaScriptのモダンな書き方 - ES2017〜ES2018のawait・async, includes(), padStart()等を解説 ECMAScript 2015がリリースされて以降、JavaScriptの機能は大きく強化されました。const/let、アロー関数、クラス構文、Promiseなどが有名なところですが、ES2016、ES2017、ES2018、･･･ES2022、そしてさらにその先へJavaScriptの仕様は日々進化しています。JavaScript・TypeScriptの開発では、これまで当たり前だと思っていた手法を新しい新機能で置き換えることが何度もありました。 本記事では、JavaScriptのモダンな書き方について説明します。おもに2017年から2018年頃に搭載されたES2017・ES2018の機能について焦点を当てて解説します。 非同期のProm
現場で使えるアニメーション系JSライブラリまとめ（2022年版） - GSAP, CreateJS, WebAnimation, Velocityなど - ICS MEDIA
現場で使えるアニメーション系JSライブラリまとめ（2022年版） GSAP, CreateJS, WebAnimation, Velocityなど ウェブサイトのインタラクションやUIの振る舞いなど、HTMLでモーションを実装する機会は多々あります。HTML要素の簡易的なアニメーションであればCSS Transitionを使ったことのある方も多いでしょう。しかし、WebGLやCanvas、SVGなどJavaScriptが実装の中心となる制作作業では、CSS Transitionでは対応しきれず、アニメーションライブラリ（トゥイーンライブラリとも言います）が必要となる場面があります。 JavaScriptのアニメーションライブラリは多種多様なので、どのライブラリを採用するのか悩みどころ。本記事ではHTMLのJavaScriptライブラリについて、使い勝手や書式を紹介します。 今回紹介するメジ
次世代のフォント技術 バリアブルフォントの世界 - ICS MEDIA
補完するのは登録された軸のみになります。たとえばitalの値が1種類しか登録されていないフォントはitalの値によらず一定の傾きをもちます。 オプティカルサイズとは、サイズに連動した文字のスタイルです。フォントサイズが小さなときは簡略化された表記、大きなときは細かく装飾されたフォント、というように設計されることがあります。 標準ではフォントサイズに依存しているため手動での変更はできませんが、一部のフォントでは変更が可能です。先ほどのデモにおいても、オプティカルサイズに応じて文字バランスが微妙に変更されることが確認できますね。 Roboto-Flexフォントを例に バリアブルフォントはまだそれほど普及していないこともあり、入手元がそれほど多くありません。今回は、オープンフォントライセンスで配布されているRoboto-Flexフォントを使用します。 GitHub - Roboto-Flex 記
配列を征する者はJSを制す。JavaScriptのスマートな配列操作テクニック - ICS MEDIA
JavaScriptでコードを記述する際、配列の各要素について処理をするケースは頻出します。開発の現場で配列操作の処理を見ていると、次のようなケースがよくあります。 配列の非破壊の望まれる場面が増えているが、元の配列を破壊操作している filter()やevery()など配列のメソッドで書けるところを、forEach()メソッドやfor ... of文を使ってコードを記載し、冗長になっている 記述しても効果のないArray.from()を使用している コード的には問題なく、アプリケーションは意図的に動作しているかもしれません。しかし、冗長な記述は可読性が低下し、予期せぬバグを誘発する可能性があるでしょう。 本記事では、配列操作でよく見かける冗長な記述を、簡潔な記述で置き換える方法について解説します。 本記事で紹介するJavaScriptの配列操作のチートシートを用意したので、まとめて読みた
最新のユーザーエージェント対応はどうするべきか？ - ICS MEDIA
ユーザーエージェント文字列は、ユーザー分析やデバイス・ブラウザーで処理を分けたい時に広く用いられています。取得方法は昔からあまり変わっておらず、ウェブブラウザーの種類・バージョン・プラットフォームごとに固有の文字列を取得しています。 実は、この文字列が近い将来固定化され、正常に情報を取得できなくなってしまうことをご存知でしょうか？ 今回はユーザーエージェント文字列の変遷を追いながら、現在策定されている新しいユーザーエージェント仕様である「User-Agent Client Hints」の概要を紹介します。 User-Agent Client Hintsの使い方、ユーザーエージェント文字列が固定化された時の対応についてもまとめています。 旧来のユーザーエージェント判別方法 従来のユーザーエージェント文字列取得は、navigatorオブジェクトのuserAgentプロパティを参照する方法です。
エラーは出ないけど…何か変？？Vue.jsでやりがちな「サイレント・ミス」（ロジック編） - ICS MEDIA
Vue.jsは初学者にもとても手厚いサポートを提供してくれるフレームワークです。 たとえば、以下のコードで「リセット」ボタンを押すと「propsのcountは子コンポーネントから変更すべきではない」とわかりやすくエラーを表示してくれます。 <template> <div class="CountViewComponent"> カウント={{count}} <button @click="reset">リセット</button> </div> </template> <script> export default { props: { // 表示するカウント値 count: { type: Number, default: 3 } }, methods: { // カウントをリセットします reset() { this.count = 0 } } } </script> それでも時として、
君は真に理解しているか？z-indexとスタッキングコンテキストの関係 - ICS MEDIA
CSSで要素の重なりを表現する時はスタッキングコンテキストによって決められています。スタッキングコンテキスト（Stacking Context）はウェブページ上の仮想的な奥・手前方向の概念であり、「重ね合わせコンテキスト」、あるいは「スタック文脈」とも言います。 z-indexによる重なり位置の指定もこのスタッキングコンテキストのうちの一つです。今回はz-indexより広い概念のスタッキングコンテキストの深淵を覗いてみます。 z-index:5がz-index:53万に勝つ方法 重なりといえば、z-indexです。z-indexはWeb初心者キラーなプロパティで、その値が必ずしも重なりの順序になりません。例えば次のようなz-indexが53万と5の要素があったとします。この場合、53万の要素が上にきます。 <div class="wrapper wrapper-freeza"> <div
君は使い分けられるか？CSS/SVG/Canvasのビジュアル表現でできること・できないこと - ICS MEDIA
ブラウザーで新たにインタラクションやアニメーションを作る時、皆さんはどのようにして使う技術を選んでいますか？ 使い慣れたライブラリに機能がないかドキュメントを調べてみたり、流行りのキーワードであればGoogle等で検索してみることも多いでしょう。一方、独自のビジュアル表現やアニメーションの場合、そもそも検索するキーワードがわからないことも多いのではないでしょうか？ この記事では、webのビジュアル表現・アニメーションを実現するベースの技術であるCSS・SVG・Canvas（WebGL）の3つについて、それぞれのできること・できないこと（得意・不得意）を作例とともに紹介します。 クイズ：どうやって実現する？ webでできるさまざまな表現 下の図はこの記事で紹介する9つのサンプルを並べてみたものです。すべてのサンプルはCSS・SVG・Canvas（WebGL）のいずれかを中心に実装されています
SourceTreeの使い方 | コミット間の差分ファイルの抽出 （カスタム操作を使う方法） - ICS MEDIA
今回はGitクライアントソフトのSourceTreeから[カスタム操作]という機能を利用して「コミットの差分ファイルをzipファイルとして書き出す」ことを行います。この処理は納品で前回のリリースとの差分のファイルが必要なときに使用すると便利です。 カスタム操作のデモ動画 カスタム操作としてバッチ・スクリプト・exeを登録すると、上図のようにメニューから実行できるようになります Gitをインストールする ※Gitをすでにインストールされている方はこの作業は不要です。SourceTreeの内蔵Gitを使用しているかたはgitコマンドが環境設定に登録されておらず、これから紹介するバッチが実行できない可能性があります。 インストールされているかチェックするためには、Windowsなら「コマンドプロンプト」、Macなら「ターミナル」上で下記コマンドを実行して確認します。 git --version
CSS疑似クラスを活用した、モダンでインタラクティブなフォームの作り方 - ICS MEDIA
モダンブラウザでサポートされているCSSの疑似クラスを使えば、JavaScriptでフォーム状態を監視することなく、CSSで状態を検知できるようになりました。また、HTMLのpattern属性を使えば入力バリデーション機能（※）もつけられます。これらを活用することで以前よりも手軽にインタラクティブなフォームを実現できます。 デモを別ウインドウで再生する ソースコードを確認する ※あくまでform要素への入力バリデーションなので、送信される値に対して保証はありません。送信される値をチェックするにはサーバー側のバリデーションが別途必要になります。 さまざまな状態を選択できる疑似クラス 疑似クラス（Pseudo-classes）はCSSで使えるセレクターの一種で特定の状態の要素を指定できます。:hoverも疑似クラスの1つです。::afterは「疑似要素」と呼ばれ、表記は似ていますが呼び名が違う
box-shadowだけじゃない！CSSでできる色々な影の表現と意外に知らない落とし穴 - ICS MEDIA
box-shadowだけじゃない！CSSでできる色々な影の表現と意外に知らない落とし穴 ウェブページのデザインやコーディングをしている人なら、誰でも一度は影をつけたことがあるでしょう。一方でその影にどれほどの表現や技術のバリエーションがあるか、意識したことのある人は少ないかもしれません。 影を付ける方法としてはCSSのbox-shadowが一般ですが、そのほかにもいくつもの技術・手法が存在します。ウェブの世界に限らず、年々変化するデザイントレンドにおいても影の扱いは重要なテーマです。 たとえば少し前に流行したロングシャドウや今年のトレンドとも言われるNeumorphism（ニューモーフィズム）など、ユニークな表現には影のテクニックを活用できるものがたくさんあります。 ▼ CSSで作成したロングシャドウ（画像上部）とニューモーフィズム（画像下部）の例： デモを別ウインドウで表示 デモのソース
React今昔物語 - ICS MEDIA
機能改善だけでなく、非推奨になった機能も多いですね。 2015年〜 ES2015の正式リリース前 2015年6月まではES2015が正式リリースされていなかったため、Reactのコンポーネントの作成にはReact.createClassが使われていました。 React独自のクラスコンポーネントを生成する機能です。 var Component = React.createClass({ render: function() { return ReactDOM.tagName({options, "Hello"}) } }); React.renderComponent( Component(null), document.getElementById("root") ) 2016年〜 クラスコンポーネントの時代 Reactバージョン15.0.0からはReact.createClassはほとん
JavaScriptのモダンな書き方 - ES2020のオプショナルチェーン、null合体演算子、動的import、globalThis等を解説 - ICS MEDIA
JavaScriptのモダンな書き方 - ES2020のオプショナルチェーン、null合体演算子、動的import、globalThis等を解説 JavaScriptの仕様であるECMAScriptは年次で仕様が更新されています。ECMAScript 2020（ES2020）は2020年6月にリリースとなりました。現行のすべてのブラウザでES2020の機能は利用できますが、フロントエンドエンジニアにとって使いこなしたい記法ばかりです。 本記事ではES2020に焦点をあて、JavaScriptの新しい記述方法のメリットと使いどころを解説します。 オプショナルチェーン Optional Chaining（オプショナルチェーンやオプショナルチェーニングと呼ばれています）とは、?.構文を用いてnullやundefinedになりうる値へ安全にアクセスできる仕組みです。 利用シーン nullやunde
モダンなJSとCSSで作るライブラリ不要の全画面スクロール演出（2019年版） - ICS MEDIA
スクロールで全画面がスライドのように切り替わるウェブサイトの表現があります。手軽にこの表現を実装するJSライブラリ、fullPage.jsを使ったことのある方もいるのではないでしょうか？ かつては無料で使えたこのライブラリですが、現在はGPLライセンスのプロジェクト以外では使用料がかかります。 その一方、CSSとJavaScriptの進化により、このような表現をライブラリを使わずとも比較的簡単に実装できるようになりました。本記事では、基本的な機能をおさえた、全画面スクロールの実装方法を紹介します。 この記事を通じて以下の技術も学べます。 スクロールをピタッと止めるCSSプロパティscroll-snap-type 画面と要素の交差を検知するIntersection Observer API スムーススクロールが実装できるJavaScriptメソッドscrollIntoView() デモを別ウ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
