How to create signature pad in html | signature pad JavaScript
How to create signature pad in html | signature pad JavaScript Hello guys, today I am going to show you how to create a signature pad using HTML CSS & JavaScript, in this video, I will create a JavaScript signature pad using the signature pad JavaScript library. JavaScript signature pad step by step Step 1 — Creating a New Project In this step, we need to create a new project folder and files(inde
ウェブブラウザを使ったVJ活動 - hitode909-vj-workshop
ウェブブラウザを使ったVJ活動 2019/11/30 Audiovisual Workshop with TOPLAP Japan at 甲南女子大学 hitode909 はじめに、の前に いまのうちにGoogle Chromeをダウンロード、インストールしておいてください ワークショップ教材はGoogle Chromeで動作確認している Google Chrome ウェブブラウザ はじめに はじめに(15分) 今日のワークショップでやること VJについて、ブラウザについて やってみよう(30分x3で1.5時間) HTMLを書こう VJとして適した形のHTMLを作ろう コントローラをくっつけて操作できるようにしよう おわりに(15分) 今後の進め方 参考になる情報について 自己紹介 hitode909 株式会社はてな アプリケーションエンジニア はてなブログ(ブログサービス)やGigaVi
Web開発アーキテクチャ「JAMスタック」がなぜ人気になっているのか
静的サイトジェネレーターが最近、非常に普及してきました。 それに合わせて注目されているのが「JAMスタック」です。JAMスタックとは何なのか、なぜJAMスタックが人気になっているのかを紹介します。 Why JAMstack is Becoming so Popular by Luca Spezzano 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに JAMスタックとは JAMスタックを使用する利点 JAMスタックはなぜ人気があるのか まとめ JAMスタックの有用なリソース はじめに 最近、静的サイトジェネレーターが非常に普及してきています。静的サイトジェネレーターは使い方が簡単で、最新のテクノロジーとVue.jsやReactなどのJavaScriptフレームワークに基づいて実装されています。静的サイトジェネレーターをは
2019年9月の、これだけは押さえておきたいWeb関連の動き
「Web系の最新情報を知りたいけど、日々業務が忙しくて追いかけられない」という方のために、1ヶ月のWeb系ニュースの中で「これだけは押さえておきたい」というものを1つの記事にまとめています。 Figma XD→Figmaに変えた理由とその運営方法やメリットについて｜駒ヶ嶺 亮一｜note 今月はXDやSketchからFigmaへの乗り換えの記事が多かった気がします。 共有用と開発用のURLを生成・更新する必要がなく、共有用のURLは即自に共有できる というのはXDと比較したメリットですね。 デザインツール「Figma」を5名のデザインチームに導入して半年経った振り返りとビジネスメリットについて｜rinoside｜note こちらはSketchからFigmaへの乗り換え。Sketchだと周辺ツールの月額費用がかかりますが、それが込みになっているのは大きそうですね。 Figma FAQ 、 よ
Webサイトをダークモードに対応させよう
Webサイトをダークモードに対応させようダークモードとは画面の背景を黒基調にしたデザインのこと。OS側での設定の他、人気アプリやWebサイトで続々対応されています。これまでは明るい部屋でモニターを眺めることが多かったのですが、スマートフォンの普及で暗い場所でも画面を見る機会が増え、夜間目に優しいダークモードが増えてきているわけですね。有機ELディスプレイでは省エネにもなるそうです。今回はそんなダークモードの設定を紹介します！ とにかく夜間見えづらい！私、夜間に車を運転していると、暗い所では対向車のライト以外ほとんど何も見えない状態なんですが、みんなそんなもんだと思ってたんですよね。でも話しているとどうやら私以外の人はライトじゃない部分もちゃんと見えていると…。みんな見えてるからちゃんと運転できてるってことか！こりゃー私には危険だわってことで夜間の運転はやめました。運転していなくても田舎道の
JavaScriptのせいでSEOに大失敗したサイトの事例 | 海外&国内SEO情報ウォッチ | Web担当者Forum
Web担当者に役立つ最新情報JavaScriptのせいでSEOに大失敗したサイトの事例 元グーグル社員がシェア （Pedro Dias on Twitter） 海外情報サイトでJavaScriptを積極的に使うようにリニューアルしたことが原因で検索エンジンに正しくインデックスされなくなってしまったサイトの失敗事例を、元グーグル社員のペドロ・ディアス氏がツイッターに投稿した。 JavaScriptフレームワークを使ってブラウザ側でコンテンツをレンダリングするようにサイトを変更したところ、検索トラフィックが激減してしまったのだそうだ。 This is not a penalty. This is a website that migrated to a client-side rendered JS framework. Even with JS rendering on, most tool
Webサイトの画像の取り扱いでやってしまう10の間違い | DevelopersIO
現在のWebサイトで画像が占める役割は大きいです。最近では画像がWebサイトの全帯域幅の60%以上を占めています。最先端のWebデザインの場合、さらに顕著でしょう。Pinterestのレイアウトのように、画像の豊富なソーシャルWebサイトにおいては、この数字は 85% 以上 (!) にまで上ります。 帯域幅は、残念ながらコストのかかるものです。トラフィックの多いWebサイトでは帯域幅がIT費用の大部分を占め、ホスティングやストレージの費用をも容易に上回ります。さらに、そのような大量のトラフィックは時間がかかるため、サイト訪問者がWebサイトを開いた際に画像の読み込みで長く待たされる可能性があります。 一方ではITのコスト、もう一方で読み込み時間による閲覧者の喪失を考えると、今どのようにオンラインで画像を管理しているかよく見直したくなるでしょう。このように、1秒ごとにWebサイト全体のコンバ
Chrome Dev Summit 2018が開催！Web制作者がチェックしておきたい、CSSとJavaScriptの最新情報 | コリス
先週、サンフランシスコで開催された「Chrome Dev Summit 2018」から、Web制作者が特に注目しておきたいハイライトを紹介します。 ナビゲーションの新しい遷移方法、Squooshの開発秘話、新しいPageSpeed API、ChromeでもLazyloadをサポートなど、これからの制作に役立つものばかりです。 Highlights from Chrome Dev Summit 2018 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 ナビゲーション遷移（Navigation transitions） Squoosh -15kbのJavaScriptアプリ PageSpeedとLighthouse APIによる統一されたパフォーマンス分析 ChromeでもLazyloadをネイティブにサポート ナビゲーション遷移（
Webデザイナーの私はこんな風に情報収集しています
Webデザイナーの私はこんな風に情報収集しています先日CSS Nite in KOBE, Vol.34にて登壇させていただきました！ご参加くださった皆さん、ありがとうございました！その中でデザイナーとしての情報収集・情報発信についてパネルディスカッションもあったのですが、時間の関係であまり多くを語れませんでしたので、今回改めてまとめてみようと思います！ CSS Nite in KOBE, Vol.34 情報収集する時のルールただやみくもに、なんとなーく情報収集してみても、結局ダラダラしてしまいます。なので事前にルールを作っておくと続けやすいですよ。 1. 制限時間をつくる一番大事なルールがこれかなーと思っています。Twitter で素敵なイラストが流れてくると見入っちゃいますよね！初めて見る面白そうなスクリプトがあると試したくなっちゃいますよね！わかります！！でも時間は有限。メリハリつける
A Strategy Guide To CSS Custom Properties — Smashing Magazine
Dynamic properties provide opportunities for new creative ideas, but also the potential to add complexity to CSS. Custom properties have a huge potential to change how we write and structure CSS and to a lesser extent, how we use JavaScript to interact with UI components. To get the most out of them, we might need a strategy for how we write and structure CSS with custom properties. In this articl
HTMLの<dialog>要素とCSSで、モーダル・ダイアログ ボックスを実装する方法と注意点
モーダル・ダイアログ ボックスはWebサイトやスマホアプリでよく見かけます。しかし、その実装方法は何通りもあります。その多くはWebを視覚的にナビゲートしないユーザーにとっては実質的にモーダルボックスを使用できず、アクセシブルに実装するのは困難でした。 HTML 5.2で登場した新しい<dialog>要素はこの問題を解消し、実装方法を迷うことなくモーダルやダイアログ ボックスを利用できるようにするものです。 <dialog>要素で、モーダル・ダイアログ ボックスを実装する方法と注意点を紹介します。 Meet the New Dialog Element 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 HTML 5.2の新機能: モーダル・ダイアログ ボックスを実装するための<dialog>要素 <dialog>要素の基本機能 <
W3C、「HTML 5.2」勧告。同時にHTML 5.3のファーストドラフトを公開
Web技術の標準化団体であるW3Cは、HTML 5のマイナーバージョンアップである「HTML 5.2」の策定を完了し、勧告としました。 HTML 5.2ではいくつかの機能追加、削除、バグフィクスなどが行われています。 機能追加の例では、ダイアログボックスを表示する＜dialog＞要素が追加されました。下記は＜dialog＞要素を用いたサンプルです。 ... <body> <div> <!-- body content --> </div> <dialog> <h1>Add to Wallet</h1> <label for="num">How many gold coins do you want to add to your wallet?</label> <div><input name=amt id="num" type=number min=0 step=0.01 value=10
インクルーシブ HTML + CSS & JavaScript の読書感想文（＆推薦コメントを書きました）
HTML + CSS & JavaScript が式に見えて、どこかをカッコで括らないと落ち着きがないのですが、私だけでしょうか...。 さておき、インクルーシブHTML+CSS & JavaScript 多様なユーザーニーズに応えるフロントエンドデザインパターンのご紹介です。 恐れ多くもカバー裏に推薦コメントを寄せさせていただいたご縁もあり、恵贈賜りました。 コーディング Web アクセシビリティに続いて Heydon Pickering 氏の訳書です。原著の軽妙な語り口とユニークすぎるジョークの訳に苦労するような趣もあったようですが、読み手としては軽く読めるのでわりと好きです。 推薦コメント ≒ 読書感想文 一見して見慣れない「インクルーシブ」という主題だが、フロントエンド開発の本質をよくにとらえている。利用環境がどのような条件下にあっても使用に耐えうる堅牢な実装は、サービスやコンテン
『インクルーシブ HTML + CSS & JavaScript』をレビューしました - 水底の血
アクセシビリティなピンク本と緑本*1でお馴染みの、太田さん（@bakera）と伊原さん（@magi1125）のコンビによる新たなウェブ技術関連の訳書がまもなく世に送り出される運びになりますが、そのお手伝いをほんのちょっぴりしました、というお話です。要するに書籍の宣伝と言う類いのものです。 さて、訳書と言うことは当然原著が存在するわけですが、原著者は緑本と同じ、ヘイドン・ピカリング（@heydonworks）さんです。緑本の"あの"独特な感性は本書でも健在であります。ちなみに、原著のレビュワーとして、W3C HTML 5.1のエディターでもあるスティーブ・フォルクナー（@stevefaulkner）さんの名前が見えます。図らずも書籍で同じページに名前が載ることになりました。うふふ。 日本語版レビュワーは私を含めて4人いたりするのですが、私以外にはWebsite Usability Infoの
Reactアハ体験 - Qiita
Ryan Florence氏のReact Rally talkはこの原則をより深くカバーしているのでオススメです。 2つのコンポーネントがstateを共有したい場合、stateを同期させるのではなくstateを持ち上げる必要があります。 コンポーネントベースのアーキテクチャでは、stateの共有は自ずと困難になります。2つのコンポーネントが同じstateに依存する場合、そのstateはどこにあるべきでしょうか？これは最終的にReduxで決着した解決策のエコシステム全体を活性化するような人気のある質問でした。Reduxの解決策は「store」と呼ばれる別の場所にstateを集約することです。コンポーネントはstoreを必要な部分だけ購読でき、storeを更新するための「actions」をdispatchすることもできます。Reactの解決策は2つのコンポーネントの最も近い親を探し、そこで共有
I decided to disable AMP on my site - alexkras.com
Table of Contents My Issues with AMP As a Publisher My Issues with AMP as a User Scrolling sucks Sharing links is hard AMP content is usually butchered AMP is not optional for users Why I Enabled AMP on my site in the first place It is spreading Users don’t need AMP Please speak up I have a long history with Google’s Accelerated Mobile Pages (AMP) project, but yesterday I drew the final straw. I w
超便利！確認しておきたい最新CSSツール、リソースガイド 2017年度
トレンドの変化やCSSの進化によって、最近は大量のツールや便利なリソースが公開されるようになりました。 この記事では、2017年これまでにリリースされた便利CSSツールやリソースをカテゴリごとにまとめてご紹介します。 制作時間の節約にもなるCSSライブラリとツールは、より手軽に利用できるだけでなく、Flexbox や CSS Grid といったまだ完全に理解していないCSSプロパティを習得するのにも最適といえるでしょう。 【2016年版】ウェブ制作を快適にする、知っておきたい無料オンラインツール50選 デザイナーが確認しておきたい、デザインリソース完全ガイド 2016年度 コンテンツ目次 1. CSS Flexbox ツール＆ライブラリ 2. CSS Grid ツール＆ライブラリ 3. CSSコンポーネント 4. CSS アニメーションツール＆ライブラリ 5. CSSリファレンス、ガイド＆
AMP HTML でアコーディオンやカルーセル表示などを実装する拡張コンポーネントを使ってみる
AMP 拡張コンポーネントには、カルーセルやスライドショー、あるいはアコーディオン式の UI を実装したり、ソーシャルボタンを設置するためのコンポーネントも用意されています。そこで個人的に気になったものをいくつか取り上げて、簡単に解説してみたいと思います。 以前、AMP （Accelerated Mobile Pages） HTML に関する基本的な記事と、拡張コンポーネントを利用した AMP HTML への Google Analytics 導入方法について記事を書きました（下記リンク参照）。 AMP （Accelerated Mobile Pages） HTML を出力するようにしてみたけど面倒くさかった話 amp-analytics コンポーネントを使用した AMP HTML への Google Analytics 導入方法 AMP の拡張コンポーネント （Extended comp
Pure CSS Scrollable Table with Fixed Header
Also see the The Bullet Resistant Version :: Wider range of support and degrading of Browsers Browser Support (table is scrollable with fixed headers) Opera 7.x + (All Platforms) :: Tested with 7.2x and 7.5x Mozilla 1.x + (All Platforms) :: Tested with 1.0x and 1.6x IE 6.x + (Windows) :: Tested with 6.0x Safari 1.x + (MacOS) :: Tested with 1.2x Konqueror 3.x + (Linux / BSD) :: Tested with 3.2x Alm
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
HTMLとCSSの現在のテクニックに焦点を合わせて、基本からしっかり身につけることができる良書
