SVG 円の輪郭のアニメーション | キプレ - UIサンプル紹介
SVGを使って円を描いて、輪郭に沿ったアニメーションをするサンプルです。 このアニメーションはCSSでSVGの属性を操作して、アニメーションを実装しています。 まず、SVGのcircleを用意します。 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 110 110" class="demo" > <circle cx="55" cy="55" r="50" class="demo" /> </svg> CSSでSVGのの輪郭を設定して、数値をアニメーションにします。 svg.demo{ margin:20px; width: 200px; display:block; margin:40px; } circle.demo{ fill:none; stroke:#00F; stroke-width:5px; stroke-dashar
ウェブサイト制作では、游ゴシックはおすすめしない理由
ウェブサイト制作では、游ゴシックはおすすめしない理由こんにちは、こんばんは！せきゆおう です。 游ゴシックは好きですか？僕も印刷物では使いますが、ウェブサイトでは「游ゴシックを使ってください」と指示されるまでは使いません。 また、そう指示された場合もデメリットは必ずお伝えするようにしています。 「游ゴシックってMacでもWindowsでも標準でインストールされているし、デバイスフォントとして使う際に最有力候補では？」という方も多いです。それでも僕は推奨しません。 その理由は4つあります。 ・游ゴシックはWindowsでかすれて見える ・スマホ端末に游ゴシックは搭載されていない ・実はMacOSで游ゴシックは標準では搭載されていない ・今後、システムフォントとして使えないブラウザが増える それら4つの理由を参考資料を交えつつ解説したいと思います。 その前に...游ゴシックの採用率は非常に高い
Home | Open UI
Open UISection titled Open%20UIThe purpose of the Open UI, a W3C Community Group, is to allow web developers to style and extend built-in web UI components and controls, such as <select> dropdowns, checkboxes, radio buttons, and date/color pickers. To do that, we’ll need to fully specify the component parts, states, and behaviors of the built-in controls, as well as necessary accessibility require
【SVG】サンプルアニメーション:サークルのアニメーション - 元Webデザイナー兼コーダーの備忘録
SVGでできる簡単なサンプルアニメーションを書きます。今回は、サークルのアニメーションです。参考サイトで紹介しているSVGのサンプルを、jQueryからJavaScriptに書き換えました。 サークルのアニメーション コード デモ 参考サイト サークルのアニメーション 0～100の数字を入力するとサークルがアニメーションするサンプルです。元のサンプルからCSSとSVGを一部変更しました。 コード <!-- HTML --> <svg id="svg" width="200" height="200" viewPort="0 0 200 200" xmlns="http://www.w3.org/2000/svg"> <circle r="90" cx="100" cy="100" fill="transparent" stroke-dasharray="565.48" stroke-das
Puppeteerによるフルページスクリーンショットを画像遅延読み込みに対応させる - DeNA Testing Blog
こんにちは、薦田です（@toshiya_komoda）。 今回はChromeブラウザのブラウザテスト自動化ツールであるPuppeteerに関するTipsを紹介します。 Puppeteerによるフルページスクリーンショット Puppeteerは、Chrome DevTools ProtocolのNode.jsクライアントであり、Chrome DevToolsチームがメンテナンスしています。 その主な用途の1つにブラウザ自動テストが挙げられます。 PuppeteerはChromeの操作に特化しており、操作対象がChromeに限定されるもののSeleniumにはない便利なAPIを利用できます。 Puppeteerで利用できる便利なAPIの1つに、フルページスクリーンショットがあります。 フルページスクリーンショットとは、ウェブページの上端から下端までを1つなぎの画像としてスクリーンショットを撮っ
サイトの各ページのスクリーンショットを自力で作るのが大変だったのでPuppeteerで一括作成してみた
Puppeteerのインストール。 npm install -D puppeteer これだけスッキリ。 スクショを撮るためのプログラム コード全体 const puppeteer = require('puppeteer'); const fs = require('fs'); // URLの一覧を読み込むファイルパス. const URL_LIST_PATH = 'url-list.txt'; // スクリーンショット出力先. const SCREENSHOT_DIR = 'screenshot'; // ビューポート設定. const VIEWPORT = { width: 1920, height: 1080, deviceScaleFactor: 2 }; (async () => { console.log('--- START ---'); // URLのリストをテキストファ
さくっと複数ページの画面全体スクリーンショットを自動取得したい｜とま
はじめまして。いとま（@bath_ito）と申します。 みなさんはwebサイト制作における実装指示書作成や表示テスト、個人の趣味などで、webサイトのスクリーンショットを大量に撮る時がありますよね（あまり無いですね） そんなときに誰かの仕事が1分でも早く終わる助けになりますように。 URLリストの全ページの自動SS取得CLIを使用します。 Pythonを入れていなければinstallPython公式ページ ※install時、「Add Python to PATH」のチェックを入れ忘れないこと python --versionでインストール出来ていること確認。 Pythonがインストールされている場合、バージョンが表示されるこんなときは…（Windowsユーザー向け）>python --version PythonWindowsで、バージョンを確認してもPythonと表示される場合は Wi
M1 Macで「The chromium binary is not available for arm64」になるとき
M1 Mac で puppeteer インストールに失敗する M1 Mac で puppeteer（puppeteer に依存しているパッケージ）をインストールすると、The chromium binary is not available for arm64と表示され、インストールに失敗します。 手動でパッチを当てる手段のあるようですが、現状下記の方法で動きます。 「--no-quarantine」オプションは、macOS の Gatekeeper（信頼できるソフトウェアだけが実行されるようする技術）によるチェックをスキップするためのオプションです。 オプションを付けずに chromium を実行しようとすると「“Chromium.app”は壊れているため開けません。」というエラーが出ます。 上記オプションを付与しない場合、xattrで拡張属性を削除することもできます。
「Integrity plus（$15）」でサイト構成を出力してサイトマップを作る方法（Macのみ） | SEEDER（シーダー）
リニューアル案件を引き受ける際に、現状のサイト構成を把握することは大切な仕事ですよね。 小規模サイトであれば１ページ１ページリンクを辿って見ていけば良いかもしれませんが、10Pを超えたあたりから超絶しんどくなります。いくら大切な仕事とはいえ、1000Pあるサイトとかだといくら時間があっても足りません。 そんなとき、サイトの構成を瞬時に出力してくれる「Integrity plus」が便利です。 ※Macのみの対応 ダウンロード・インストール・購入 他のソフト同様に公式サイトからIntegrity plusをダウンロードしてインストールしてください。 インストール後、無料版でもサイト構成を見ることができますが、CSVで出力することができません。$15（約1500円）で出力機能を使えるようになりますので、購入することをおすすめします。 使用方法 調査 調査したいサイトのURLを下記の場所に入力し
React.jsを使ってヘッドレスWordPressサイトを構築する方法
React.jsを使ってヘッドレスWordPressサイトを構築する方法 WordPressは、最も人気のあるコンテンツ管理システム（CMS）の1つで、インターネット全体の41%に相当する8億1千万人が利用しています。シンプルでユーザーフレンドリー、多様なカスタマイズオプション、プラグインやその他のリソースの強力なエコシステムを誇り、ウェブサイトを素早く構築したい人にとって優れた選択肢となっています。 WordPressを最大限に活用する方法のひとつが、ヘッドレス化です。 ヘッドレスCMSは、ヘッドレスシステムとも呼ばれ、コンテンツの管理に使用されるバックエンドCMSの一種です。ヘッドレスCMSのAPIを呼び出すだけで、あらゆるシステムやウェブサイトにコンテンツを統合することができます。 ただし、この手法を選択する際には、フロントエンドを別途管理する必要があります。そこで登場するのがAPI
【小規模サイト向け】Next.js ディレクトリ構成とコーディングルール
Next.jsで小規模サイト（ブログやコーポレートサイトなど）を複数人で開発する際のディレクトリ構成とコーディングルールをまとめました。 以下の点を意識した構成になります。 小規模サイトの場合、コンポーネントの量は限られるのでディレクトリ構成は複雑になりすぎないようにする → ファイルへのアクセスのしやすさを重視 複数人での開発なので、できるだけ書き方を統一できるようにする → ESLint, StyleLintを導入 CSS設計やベースコーディングに疎くても一定以上の品質を担保できるようにする → jsxコンポーネントとCSSを同じ階層に配置して直感的に編集可能に → Sassを採用するが、SASS記法ではなく扱いやすいSCSS記法を採用 はじめに ディレクトリ構成はこちらの記事を参考にさせて頂きました。とても分かりやすく解説してくれているので是非読んでみてください。 最近はFeatur
令和のHTML / CSS / JavaScriptの書き方50選
Web制作の技術は日々進化しており、会社やプロジェクトによっては昨今の環境に適さない書き方をしているケースも時折見受けられます。 そこで今回は「2024年のWeb制作ではこのようにコードを書いてほしい！」という内容をまとめました。 質より量で、まずは「こんな書き方があるんだ」をこの記事で伝えたかったので、コードの詳細はあまり解説していません。なので、具体的な仕様などを確認したい方は参考記事を読んだりご自身で調べていただけると幸いです。 1. HTML 画像周りはサイトパフォーマンスに直結するので、まずはそこだけでも取り入れていただきたいです。また、コアウェブバイタルやアクセシビリティも併せて理解しておきたい内容です。 Lazy loading <img>にloading="lazy"属性を付けると画像が遅延読み込みになり、サイトの読み込み時間が早くなります。
pictureタグ・srcset属性の使い方を分かりやすく解説！【検証用デモページあり】 | 東京のホームページ制作 / WEB制作会社 BRISK
pictureタグ・srcset属性の使い方を分かりやすく解説！【検証用デモページあり】 更新日：2022/09/15 Webサイトのコーディングで、画面幅によって表示させる画像を変更したいとき、どのように対応していますか？ 今までは .pc-only / .sp-only といった表示切替用のクラス名を用いて対応するのが一般的でした。 しかし、この方法では画面幅関係なくどちらの画像も読み込まれてしまうため、表示速度が遅くなる原因になっていました。 また、HTML・CSSにそれぞれ記述が必要で、複雑な切り替え方をしたいときに管理がしにくいという問題もあります。 そこで、今回ご紹介するpictureタグとsrcset属性の出番です。 pictureタグとsrcset属性を使うと、デバイスに応じて最適な画像だけを読み込むようにできるので、不必要な画像が読み込まれる心配はありません。 HTML側
WAI-ARIAを学ぶときに整理しておきたいこと
結論 ロールについて知る HTMLの暗黙のロールを知る ロールを知った上でロールに対して使用できるプロパティ/ステートを使う (おまけ) markuplintを使おう aria属性を使う前に まず、いきなりaria-labelやaria-selectedとかに手を出さない。 aria-selectedとかを発見してしまうと「option要素以外にもselectedみたいな意味を付加できるんだ！すげえ！使ってみよう！」みたいな気持ちが沸き上がってしまう。わかる。とってもよくわかるよ。当時ぼくもそうだったから。 ただ、そこはぐっと我慢してほしい。 なぜかと言うと、aria属性は、使っていいときと悪いときがある。きちんとWAI-ARIAという仕様と、ARIA in HTMLやCore Accessibility API Mapping (Core-AAM)という仕様で決められていっている[1]の
TypeScript の基礎を学ぶ初心者向けチートシート - コムテブログ
TypeScript とは？ 一言で言うと TypeScript は、JavaScript に静的な型システムを追加したプログラミング言語です。型チェックを行うことができます。TypeScript の静的型付け以外の部分は JavaScript と同じです。 型注釈（Type Annotation） TypeScript では、変数の宣言時に「型注釈」と呼ばれる型情報を使用して、その変数がどのような型の値を持つべきかを指定することができます。型注釈はコロン（:）に続いて型名を書くことで行います。
［事例紹介］サーバー移転（大塚商会からエックスサーバーへ乗り換え）の流れ・手順を紹介｜BtoBマーケティング改善ならフリーランチ
ウェブサーバー移転とは、ウェブサーバー内のデータを他のサーバーに移転することで、ウェブサイトで使っているレンタルサーバー会社を変更する際などに発生する手続きやデータの移行などを指します。 サーバー移転は、企業などでウェブサイトを新しくしたい、現在のレンタルサーバーの契約内容を見直したい、ウェブサイトからの集客を改善したいといった場合に必要となることも多い一方、専門的な知識も必要となるため自社だけでは進めにくいケースもあります。 この記事では、サーバー移転の概要や移転が必要となる理由、サーバー移転の全体的な流れ、実際に大塚商会アルファメールからエックスサーバーへ移転した事例を元にしたウェブサーバー移転方法の紹介、おさえておきたいポイントや注意点などを紹介しています。 ウェブサーバーの移転とは？ ウェブサーバーの移転とは、ウェブサーバー内のデータを他のサーバーに移転することで、多くの場合、ウェ
【JavaScript】Safari だけじゃないオーディオ再生の制約と再生開始遅延の解決方法 – webfrontend.ninja
オーディオの自動再生に大きな制約があるといえば、以前は iOS Safari に限った話でした。しかし、現在は PC も含め、あらゆるブラウザーでオーディオの自動再生に大きな制約があります。もし再生できたとしても、次に立ちはだかるのが再生開始遅延です。とりわけスマートフォンでタップ音や通知音を再生したい場合は違和感を感じてしまいます。 今回は、HTML マークアップおよび JavaScript によるオーディオ自動再生にどのような制約があるのか、その制約をどう解決するのか、そして、再生開始遅延を解消する方法について、詳しく見ていきます。 Chrome の自動再生ポリシー オーディオの自動再生ができないという制約は、当初は iOS Safari に限った話でした。ところが、Google が自動再生ポリシーを発表してから、メジャーブラウザーすべてがそれに従うようになりました。英語ですが「Aut
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
ETF Stock Exposure Tool
Node.jsでPuppeteerを使いChromeを実行して画面キャプチャを撮る | 株式会社ピース｜PEACE Inc.
このホストの講習めちゃくちゃ為になるな→「ホストっていうより、営業職全般に言えることかな」
