<button></button>は最も使用されている要素の一つです。フォームの送信、モーダルを開く時、データを表示する時など、インタラクションのトリガーとして使用されています。button要素の詳細とすべてのブラウザで機能するようにスタイルを完璧に定義する方法について紹介します。 さらに、よく使用されるボタンのスタイル方法をはじめ、ボタンの実装時にある落とし穴の解決方法についても明らかにします。 Styling The Good Ol' Button Element by Ahmad Shadeed 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 button要素のデフォルトのスタイル button要素の基本的なデザイン アイコン付きのボタン 複数行のボタン アンカーリンクとしてのa要素とbutton要素 アウトラインボタンの

フォームにテキストを入力した時など、ユーザーインタラクションにおいてどの程度の遅延だと煩わしく感じるかを検証するためのデモサイトを紹介します。 当然きびきびと操作できるのがベストですが、実際にどの程度の遅延が許容範囲なのか確認してみるのも一考です。 Typing delay experiment GoogleのMonica Dinculescu氏（@notwaldorf）が制作したサイトで、Audio delay experiment（音の遅延）と比較できます。 デモサイトの操作は、簡単です。 遅延時間を定義し、フォームにテキストを入力すると、遅延を体感できます。しっかりと体感するには、一度に多くの文字を入力してください。

スクロールの速度に合わせたアニメーション、スクロールの位置に合わせたパララックス、マウスの位置・速度に合わせたパララックス、ビューポートのサイズに合わせたレイアウト変更などを実装するために、ビューポートを監視し、その状態を簡単に取得できる軽量JavaScriptライブラリを紹介します。 位置を取得できるのはよくありますが、速度まで取得できるのは珍しいですね。 Tornis Tornis -GitHub Tornisの特徴 Tornisのデモ Tornisの使い方 Tornisの特徴 Tornisは、ブラウザのビューポートの状態を監視する軽量のJavaScriptライブラリです。ビューポート・スクロール・マウスなどに何か変化があった時にその値を取得できます。 マウスの位置 マウスの速度 ビューポートのサイズ スクロールの位置 スクロールの速度 デバイスの向き（近日対応予定） ユーザーが操作し

Node.jsおよびChromiumベースのブラウザで使用されるJavaScriptエンジンの仕組みについてGIFアニメーションで分かりやすく解説された記事を紹介します。 🚀⚙️ JavaScript Visualized: the JavaScript Engine by Lydia Hallie 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 JavaScriptを視覚的に解説: JavaScriptエンジン JavaScriptはクールです（私はそう思います）が、あなたが書いたコードをマシンが実際に理解するにはどうすればいいのでしょうか。JavaScriptデベロッパーは通常、コンパイラを自分で扱う必要はありません。しかし、JavaScriptエンジンの仕組みを理解し、人に優しいJavaScriptコードをどのように処理

Visual Studio CodeでWeb制作・開発のコードを書く時に役立つ設定・テーマ・機能拡張、知っておくと便利なテクニックを紹介します。 My Web Development VS Code Settings, theme, Extensions, tips and tricks br lampewebdev(@lampewebdev) 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 私がVSCodeを使用している理由 VSCodeのテーマ・アイコン・フォント VSCodeの機能拡張 VSCodeの設定 VSCodeの便利な使い方 私がVSCodeを使用している理由 私はプログラミングを始めて以来、たくさんのエディタやIDEを使ってきました。Eclipse、Netbeans、Notepade ++、Brackets Ed

手書きスタイルのグラフやチャートを簡単に作成できるJavaScriptライブラリを紹介します。手書きの度合いも調整でき、ちょとラフな感じ、雑な感じ、かなり雑な感じ、ぐちゃぐちゃな感じにもできます。 グラフやチャートに使用するデータは外部.csvファイルにも、カンマ区切りのテキストデータにも対応しています。 roughViz.js -GitHub roughViz.jsの特徴 roughViz.jsのデモ roughViz.jsの使い方 roughViz.jsの特徴 roughViz.jsは、ブラウザで手書きスタイルのグラフやチャートを作成するためのJavaScriptライブラリです。D3.jsとrough.jsをベースにしており、MITライセンスで利用できます。 グラフやチャートは、現在7種類に対応しています。 棒グラフ（垂直） 棒グラフ（水平） ドーナツ 折れ線グラフ 円グラフ 散布図

10/5にアップデートされたAdobe Photoshop 2020（v21.0）の新機能と改善点を紹介します。 スウォッチのグループ分け、レイヤーのズーム、属性パネルの強化、そしてAIも更に賢くなり、すぐ便利になる機能が盛りだくさんです。 Photoshop 2020のスプラッシュスクリーン Adobe MAX2019に合わせて、Photoshopもアップデートがリリースされました。 Adobe Creative Cloudからアップデートできます。 Photoshopのアップデート つい先日、アップデートされたPhotoshop 20.0.7はバグフィックス版でした。 参考: Photoshop 20.0.7がリリース、macOS Catalinaで起きていた不具合に対応 今回のPhotoshop 21.0では、新機能が満載です！ 数が多いので、さくっと新機能を紹介します。 参考: U

ここ数年、PWA（プログレッシブウェブアプリ）が非常に注目されています。通常のWebページとスマホアプリそれぞれの利点を兼ね備えており、導入したサイトではコンバージョンやユーザーエクスペリエンスの改善が大きく見込めます。 WebサイトをPWAにする手順とその必要性を紹介します。 Turn Your Website into a PWA by Luca Spezzano 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 PWA（プログレッシブウェブアプリ）とは なぜPWAを構築する必要があるのですか？ すでにPWAを採用しているのはどこですか？ PWAを作成する時に必要なもの Web App Manifest Service Worker PWAを5分で構築しよう 静的キャッシュ 動的キャッシュ 静的と動的のどちらを使用すべきですか

アイソメトリックの斜めから俯瞰したイラストなどをよく見かけますね。そのアイソメトリックをWebページにつくりだすCSSのライブラリを紹介します。 HTMLは非常にシンプルで、要素をアイソメトリックにしたり、斜めのグリッドを配置したり、アニメーションさせたりできます。 IsometricSass IsometricSass -GitHub IsometricSassの特徴 IsometricSassのデモ IsometricSassの使い方 IsometricSassの特徴 IsometricSassはJavaScriptを必要としないSassベースのフレームワークで、CSSの3D Transformsを使用してアイソメトリックの空間をWebページ上につくりだします。MITライセンスで、商用でも無料で利用できます。 要素を配置するだけでなく、シャドウをつけたり、アニメーションに浮かせたり、回

Vue.jsでさまざまなUIコンポーネントやインタラクションを実装するチュートリアルやリソースがまとめられたVue.js Examplesを紹介します。 ページやアプリのレイアウトをはじめ、スクロールコンテンツ、カード型コンポーネント、オーバーレイ、フォームや検索、ナビゲーションやページネーション、Lazy Loadなど、最近見かけるものが揃っています。

Webページやスマホアプリで要素がビューポート内に入った時に、パララックスやさまざまなスクロールのエフェクトを実装できるJavaScriptライブラリを紹介します。 要素をスクロールに追従して表示させたり、視差効果を使ったパララックスやカーテン効果なども簡単に実装できます。 Locomotive Scroll Locomotive Scroll -GitHub Locomotive Scrollの特徴 Locomotive Scrollのデモ Locomotive Scrollの使い方 Locomotive Scrollの特徴 Locomotive ScrollはWebページやスマホアプリでビューポート内の要素検出と視差効果によるスムーズなスクロールを簡単に実装できるJavaScriptライブラリです。virtual-scrollにレイヤーとして構築され、要素がビューポート内に入った時にc

Webページやスマホアプリのコンテンツ、カードやナビゲーションや画像などのコンテナに美しいシャドウを簡単に与えることができるスタイルシートを紹介します。 htmlの要素にclassを加えるだけの簡単仕様。ホバーなどの操作に対応して、ふわりとシャドウを与えることもできます。

CSSの進化は早いですね。 一昔前までは、JavaScriptを使用しなければできなったこと、かなり複雑なコードを書かなければできなかったことが、CSSだけで簡単にできるようになっています。 知っておくと便利なCSSのプロパティや疑似要素をまとめて紹介します。 CSS can do that? by Ananya Neogi 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 1. box-decoration-break 改行する際の表示形式を定義 2. attr() -簡単ツールチップ 3. backface-visibility -フリップするカードも簡単 4. conic-gradient -円グラフを簡単に実装できる 5. filter -画像に多彩なフィルタを適用 6. mix-blend-mode -画像やテキストにも

Visual Studio Codeが、Webページやアプリのフロントエンド開発用ビジュアルツールになる機能拡張「Gimli」がリリース予定なので紹介します。 CSS GridやFlexboxの実装が単純化されるビジュアルツールで、React、VueJS、Angularなど、さまざまなフレームワークやライブラリもサポートされています。 Gimli Gimliはフロントエンド開発者を対象にしたVisual Studio Codeの機能拡張です。多くのビジュアルツールがリリースされており、それらは「コード無し」を売りにしていますが、Gimliは「コード有り」を特徴にしています。 Visual Studioのコード開発環境とビジュアルツールの融合です。 Gimliのデモ Gimliは複雑なレイアウトを作成するプロセスを非常に単純化するビジュアルツールが用意されています。もちろん、CSS Grid

ユーザーフローを構築する場合でも、Macのインターフェイスを構築する場合でも、現在利用できるデスクトップのGUI素材はほとんど見かけません。 macOSのインターフェイス、Safari, Chromeなどのブラウザに含まれるUI要素をはじめ、メニューバーやドロップダウン、カーソルまで、デスクトップ用のGUIが揃った無料のデザイン素材を紹介します。 Desktop Kit -Facebook Design Desktop KitはFacebookによるもので、素材としてのクオリティは非常に高品質です。 ダウンロードファイルは.sketchで、macOSのデスクトップ用のさまざまなGUIが揃っています。

実際のところ、Flexboxはどのくらい使用されているのか、CSS Gridはどうなのか、どのCSSの機能がよく使われ、どのフレームワークやツールが採用されているのか、CSSのプロパティ・機能やツールについて、2019年現在の使用状況や認知度を調査した「The State of CSS 2019」を紹介します。 The State of CSS 2019 The State of CSS 2019は、The State of CSS Surveyで今年の2月にアンケートを行った調査結果をまとめたものです。私も1票分参加しました。 ちなみに、代表者の人はフランスの方で、現在は京都に住んでいるそうです。 「日本のデベロッパーにも楽しんでもらえたら、嬉しいです」とメッセージを頂きました。 下記は、特に気になった調査をピックアップしたものです。 ※元サイト様にライセンスを得て掲載しています。

髪型、髪の色、髭、目、鼻、口、肌の色、洋服など、パーツを組み合わせて、自分にそっくりな似顔絵のイラストを使ったアイコンやアバターが作成できるSketchライブラリを紹介します。 100種類以上のパーツが用意されており、パーツはシンボルなのでカスタマイズして、オリジナルのパーツを作成することもできます。

フロントエンドのコーダーがデザインを見た時にどんなことを考えるのかを紹介します。デザインカンプを手がかりに、そのデザインが意味する仕様上のさまざまな可能性やそれらを実現するための実装方法を考えるなど、コーダーとして最も楽しい時間の一つです。 Your Brain on Front-End Development 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 デザインがあがってきた！ 複数行のテキストの長さに沿った背景 ヘッダはFlexboxで レイアウトはCSS Gridで 縦書きの要素 テキストの省略 カスタム フォント 画像上のテキスト SVGアイコン・レイティング ハンバーガーメニュー デザインがあがってきた！ フロントエンド デベロッパーの仕事は、さまざまなテクニックとテクノロジーを使用して望まれるUIとUXを引き出す

就職や転職の面接は、面接官が投げかけてくる質問に答えるだけではありません。面接の最後に、「質問はありますか？」と必ず聞かれます。その会社にWeb制作者として就職するにあたって、答えを知っておきたい質問を紹介します。 私は面接を受けたことも、面接官をした経験もあるのですが、どちらの立場でもこれを読んでおけばまた違ったアプローチができたのかな、と思いました。 10 Questions You Should Ask In A Web Dev Interview by Milecia McG 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに プロジェクト管理はどのように扱われていますか？ 1ヵ月にいくつのプロジェクトに取り組むことができますか？ コードを管理するプロセスはどのようなものですか? 典型的なスプリントはどのくらいです

Webページやアプリに外部スクリプトと数行のコードだけで、使いやすいカラーピッカーを簡単に実装できる超軽量のスクリプトを紹介します。 レスポンシブに完全対応しており、デスクトップのマウス操作でもスマホのタッチ操作にも対応しています。 他のスクリプトやスタイルシートに依存はなく、React、Vue、Angular、jQueryなどと一緒に利用することもできます。また、Bootstrap、MaterializeなどのCSSフレームワークへの互換性もあり、幅広く利用できます。 カラーピッカーの使い方は、簡単 HEX, RGBa, CMYK, HSLa, HSVaをサポート jQueryなどの他スクリプトへの依存は無し Bootstrap, MaterializeなどのCSSフレームワークへの互換性 複数の色表現 色の比較 不透明度のコントロール タッチデバイスをサポート Nodejsのサポート