【JavaScript】HTML 要素の寸法の取得方法まとめ – webfrontend.ninja
JavaScript から HTML 要素の横幅と高さを取得する方法はいくつか存在します。しかし、それぞれの方法で取得する寸法が微妙に違います。今回は HTML 要素の寸法を取得する方法を一気にまとめて紹介します。 CSS ボックスモデル HTML 要素の寸法を扱ううえで CSS ボックスモデルの理解は欠かせません。まずは CSS ボックスモデルの概要を説明します。 たとえば div 要素があったとしましょう。この div 要素が表現する矩形の寸法とはどこを指すでしょうか。div 要素のような HTML 要素にはマージン、パディング、ボーダー、コンテンツが関係しています。横幅はマージンを含む？パティングは含む？ボーダーは含む？さて、どれでしょうか。 CSS ボックスモデルでは、これらの領域をどこまで含むかを明確に示すためにボックスを区別して名前を付けています。内側から順に 4 つのボックス
【2024年最新】モダンフロント学習教材まとめ - Qiita
はじめに 今回はフロントエンド(主にReact, Next, TypeScript)でおすすめの学習教材をまとめました。 対象者 エンジニア初心者 モダンフロント技術を学びたい人 ロードマップ Developer Roadmaps エンジニア向けの学習ロードマップが整理されています。 現在の自分の立ち位置を把握し、次にやるべきことの方向性を知ることができます。 エンジニアが使うであろう、ほぼ全技術が網羅的にまとめられているので、まずはこのロードマップを使って現在の立ち位置を掴んでみてください。 TypeScript typescriptlang 公式が提供している学習サービス。 基本文法から実践的な内容まで学ぶことができる。英語が苦手でなければここで一通り学ぶべき。 サバイバルTypeScript 実務で使えるTypeScriptの実装方法を学ぶことができる。応用的な内容も多いが、解説が丁
先進的且つ多機能で安定したYoutube用JavaScriptライブラリ・「YouTube.js」 - かちびと.net
YouTube.jsは先進的且つ多機能で安定したYoutube用JavaScriptライブラリです。Innertube APIのフル機能ラッパーでYoutubeをシンプルで効率的に扱う方法を提供する為に作られています。 機能は動画やプレイリスト、アルバム等の検索、購読/購読解除やLike/Dislikeやコメント、視聴履歴の取得、ライブチャット及びライブ統計情報の取得、アカウントの設定と管理、動画のダウンロードやGoogleアカウントのログインなどなど多くの機能を備えてあります。※ログインが必要な機能は当然ですがログインが前提となります。 公式のAPIではないためAPIキーは必要ありません。これはメリットではありますが将来的にデメリットにもなり得る点に注意が必要です。使用方法や機能詳細に関しては以下でご参照ください。 YouTube.js
JavaScriptを打ってキャラを操作する対戦ゲーム、Steamで配信 Rustなど計13以上の言語にも対応
JavaScriptに加え、Webブラウザ上でプログラミング言語を実行するためのフォーマット「WebAssembly」を通じてC、C++、TypeScript、Go、C#、F#、Swift、D、Pascal、Zig、Rust、Kotlinでの操作にも対応する。 「このゲームに必要なのは基本的なプログラミングスキルだけ。もしあなたがプロの開発者であるなら、あなたのスキルを限界まで発揮することができる」（Screeps） 今回配信するバージョンは、アーリーアクセス版。今後、プレイヤーからのフィードバックを参考にアップデートしていく予定。 関連記事 中学1年の過半数が「プログラミングできる」 “競プロ”勢も1.7％ 東進ハイスクール調べ 東進ハイスクールなどを運営するナガセが、高校生と中学生10万7450人に調査を行った結果、中学1年生の過半数が「プログラミングができる」と回答した。「競技プログ
JavascriptでPDFを作成する - Qiita
javascriptでPDFを出力する 利用ツール pdfMake 手順 ①pdfMakeをダウンロードしてくる https://github.com/bpampuch/pdfmake ※上記からcloneしてきても、zipでダウンロードしてきてもOK ②日本語化フォントを取得 https://github.com/naoa/pdfmake から日本語化フォント取得 日本語化フォントのある場所は、buildフォルダ内にあります。 naoa様が日本語化のフォントを作成してくださっています。 http://blog.createfield.com/entry/2015/12/16/052221 ipagp.tff等のフォントを利用して作成してもいいのですが、個人的には naoa様が作成しているフォントセットを利用することをお勧めします。 ipagp.tffなどのフォントセットは、フルで日本語フ
iOS13+でジャイロ許可、やっぱりDeviceOrientationControlsを使いたい
iOSアップデートはいつだって後悔 衝動的にiPhoneのアプリ更新をまとめて片づける休日の午後。 更新内容のほとんどに、iOS13への対応が含まれている模様である。 「どうせなら時間のあるときに」と、“後悔するのを覚悟”でiOSも13へアップデートする。 後悔の念は思ったより早く来た。 トカチニッチの記事用に制作途中だったthree.jsをsafariで走らせるも全く動かないのだ。 慌てて“納品済み”のプログラムを確認するが、そちらは大丈夫な様子。 安定性を考慮した「OrbitControls」のみのthree.jsは動くのに、スマホのジャイロ機能を用いる「DeviceOrientationControls」が含まれると動かない。 ※この記事のプログラムも動かなくなった。 iOS12.2で必要になった「モーションと画面の向きのアクセス」がsafariの設定から消えているのが原因なのだろう
Three.jsを使い360度画像をドラッグとジャイロセンサーで視点操作する。
【所要時間】 約4時間(11月30日、12月1日) 【概要】 360度画像をWebページ上で表示、視点操作する。Android, iosの場合はジャイロセンサー、それ以外はドラッグで視点操作。Three.jsで上記の操作を行う。完成ページ https://astatsuya.github.io/three360/完成レポジトリ https://github.com/astatsuya/three360【要約・学んだこと】 かなり紆余曲折しながら作ったが、とりあえず触ってみる場合は →ドキュメントのGetting Startedを一通り読む(そんなに多くない)。 →ブラウザで確認しがら調整する。 →OrbitControlsを読み、調整の仕方を学ぶ。 の流れがいいと思った。 まずどのライブラリを使えばいいかを探すのに時間がかかり、ドキュメントのどこを読めば必要な情報が載っているのかわからなか
<audio>: 埋め込み音声要素 - HTML: ハイパーテキストマークアップ言語 | MDN
HTML チュートリアル HTML の基本 HTML 入門 HTML 入門の概要 HTML を始めよう ヘッド部には何が入る? HTML のメタデータ HTML テキストの基礎 ハイパーリンクの作成 高度なテキスト整形 文書とウェブサイトの構造 HTML のデバッグ 評価課題: 手紙のマークアップ 評価課題: コンテンツのページの構造化 マルチメディアとその埋め込み マルチメディアとその埋め込みの概要 HTML の画像 動画と音声のコンテンツ object から iframe まで — その他の埋め込み技術 ウェブへのベクターグラフィックの追加 レスポンシブ画像 評価課題: Mozilla のスプラッシュページ HTML の表 HTML の表の概要 HTML の表の基本 HTML 表の高度な機能とアクセシビリティ 評価課題: 太陽系の惑星データの構造化 リファレンス HTML 要素 <a>
Web Audio API の使用 - Web API | MDN
Web Audio API の入門を見てみましょう。ここではいくつかの概念を短く確認してから、簡単な boombox の例で、音声トラックの読み込み、再生と一時停止、音量やステレオ位置の変更の方法を学びましょう。 Web Audio API は <audio> メディア要素を置き換えるものではなく、むしろその機能を補完するものであり、 <canvas> が <img> 要素と並行して存在するのと似ています。どちらを利用するかは、その目的によります。音声トラックの再生を制御したいだけであれば、 <audio> メディア要素の方がよりよく、 Web Audio API よりも早く解決できるでしょう。再生だけでなくもっと複雑な音声処理が必要であれば、 Web Audio API ははるかに強力な制御を行うことができます。 Web Audio API の強力な要素の一つは、厳格な「音声の呼び出しの
Web上でアニメーションを表示するなら「Lottie」がおすすめ！特徴や使い方など | Web Design Trends
Web上でアニメーションを表示するなら「Lottie」がおすすめ！特徴と使い方など Webサイト上でアニメーションを実装する場合、簡易なアニメーションはCSSやJavaScriptで手軽に作ることができますが、リッチなアニメーションを作ろうと思ったらコード量も結構なボリュームになってしまいます。 そんな時におすすめなのが「Lottie」です。LottieはAfter Effectsで作成したアニメーションを簡単にWebやアプリで表示することができ、パフォーマンスにも優れています。 今回は、Lottieの特徴や使用するメリット、使い方などをご紹介したいと思います。 Lottieとは LottieはAirbnbが公開しているアニメーションを表示するためのライブラリです。スマホなどのネイティブアプリがメインのようですが、Webサイト上でも高クオリティのアニメーションを簡単に表示することができ、非
すべての新米フロントエンドエンジニアに読んでほしい50の資料 - Qiita
はじめに さいきんのWebはSPA技術を中心としたフロントエンドが賑わっていますね💪 従来サーバーサイドを扱っていた人もフロントを触る機会が増えていたり、これからプログラミングを学んでいく人も、フロントエンド領域に興味を持っているのではと思います。 そこで、フロントエンドの経験が浅い方や初学者向けに、おすすめのドキュメントや勉強すべき領域をまとめました。 とりあえず動けば良い段階から一歩進んで、フロントエンドエンジニアとして、良いアプリケーションを作るために必要な知識を浅く広く紹介します。 ※補足 新米と表記しましたが、実際には新卒や未経験でなく、新卒2~3年目の若手フロントエンドエンジニアやフロント分野に苦手意識のあるバックエンドエンジニアの方を対象としています。 数日で目を通せるような内容ではないため、マイルストーンやスキルセットの一つの参考にして頂けると幸いです。 フロントエンド入
React + Reduxアプリケーションプロジェクトのテンプレートを作る ― その1: Node.jsとYarnとBabelとwebpack | To Be Decided
昔、Dojo Toolkitを使ってFlashなUIをJavaScriptに書き換えた時以来、仕事でWeb UIを触ることはなかったんだけど、最近になってWeb UIを書かなければいけなくなるような気がして再学習を始めた。 題材はReact (とRedux)。 今一番人気のフロントエンドフレームワークで、昔触ったこともあるので。 前回の記事でReactが生まれた経緯を学んだので、今回から実習に入る。 (2018/11/21更新) プロジェクト作成 ちょっとCreate React Appを触ってみたけど使わないことにした。 すぐ開発始められるのはよかったんだけど、裏でなにが起こっているかわからな過ぎて肌に合わないし、使うライブラリが結構固定されちゃいそうだったし、トラブルシュート(特にライブラリのバグを踏んだ時)が大変そうだったので。 代わりに、公式で紹介されているブログ記事であるCrea
フォームのinput要素に電話番号・日付・時間・金額など、数字のフォーマットを定義できるスクリプト -Cleave.js
クレジットカード番号・電話番号・日付・時間・金額などを入力するフォームのinput要素に、数字を区切ったり、記号文字を加えたり、入力する数字のフォーマットを簡単に定義できる軽量スクリプトを紹介します。 単体のスクリプトとしてだけでなく、Reactコンポーネント、AngularJSディレクティブでも利用できます。 Cleave.js -GitHub Cleave.jsの特徴 Cleave.jsのデモ Cleave.jsの使い方 Cleave.jsの特徴 Cleave.jsは、フォームのinput要素に入力する数字のフォーマットを簡単に定義できます。 クレジットカード番号のフォーマット 電話番号のフォーマット 日付・時間のフォーマット 数値のフォーマット 区切り文字、プレフィックス、ブロックパターン
slick - the last carousel you'll ever need
Features Fully responsive. Scales with its container. Separate settings per breakpoint Uses CSS3 when available. Fully functional when not. Swipe enabled. Or disabled, if you prefer. Desktop mouse dragging Infinite looping. Fully accessible with arrow key navigation Add, remove, filter & unfilter slides Autoplay, dots, arrows, callbacks, etc... Single Item
React を TypeScript で使う際のツール考察 2018 春 | La Verda Luno
最近のフロントエンドの流れから取り残されている感じがしたので、一念発起して React で小さなアプリを作ろうと思いました。 せっかくなので、 React 関連ツールはなるべく統合して使うようにし、コード本体は TypeScript を使って開発しようと設定を始めました。 （ webpack 4 が出てきてしまいましたので、まだ周回遅れです。） 残念ながら、 create-react-app でテンプレートを作成してからツールを追加していくたびにエラーに見舞われたので、メモ書きとして記録しておきます。 執筆に長い期間かかってしまいましたので、もしその間にライブラリがアップデートされ、動かなくなっていたら申し訳ありません。 目次と使用ツール （以下のリンクは関係する部分へジャンプします。） TL;DR create-react-app React 16 TypeScript webpack
[JS]タッチ操作にも対応した快適なスライダー・カルーセルを実装する軽量スクリプト -Glide.js
jQueryなどのスクリプトやアニメーションのCSSに依存せずに、レスポンシブ対応の快適なスライダー・カルーセルを実装する軽量のスクリプトを紹介します。 スライダーは最後を表示した際に1枚目に巻き戻し、カルーセルは最後を表示した際に巻き戻さずにそのまま1枚目を表示します。 Glide.js Glide.js -GitHub Glide.jsの特徴 Glide.jsのデモ Glide.jsの使い方 Glide.jsの特徴 Glide.jsは他のスクリプトに依存性がないJavaScript ES6で実装されたスライダー・カルーセルです。軽量で快適に動作し、カスタマイズ性にも優れています。 依存性はなし スライダー・カルーセルに必要なものはすべて含まれています。 超軽量 22kb（gzip: 7kb)にすべての機能が搭載されています。 モジュール式 スクリプトはモジュール式。必要のない機能を削除
![[JS]タッチ操作にも対応した快適なスライダー・カルーセルを実装する軽量スクリプト -Glide.js](https://cdn-ak-scissors.b.st-hatena.com/image/square/ff1d16e9316c76742c63906c5f9dd35a2bf6ab85/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201802%2F2018041501.png)
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
CEP-Resources/Documentation/Product specific Documentation/Photoshop Scripting at master · Adobe-CEP/CEP-Resources
Artyom.js - Webサイトにボイスコマンドを追加 MOONGIFT
GitHub - yubinbango/yubinbango
iOSでダブルタップしないとリンク反応しないバグ対応について - Qiita
