令和のHTML / CSS / JavaScriptの書き方50選
Web制作の技術は日々進化しており、会社やプロジェクトによっては昨今の環境に適さない書き方をしているケースも時折見受けられます。 そこで今回は「2024年のWeb制作ではこのようにコードを書いてほしい！」という内容をまとめました。 質より量で、まずは「こんな書き方があるんだ」をこの記事で伝えたかったので、コードの詳細はあまり解説していません。なので、具体的な仕様などを確認したい方は参考記事を読んだりご自身で調べていただけると幸いです。 1. HTML 画像周りはサイトパフォーマンスに直結するので、まずはそこだけでも取り入れていただきたいです。また、コアウェブバイタルやアクセシビリティも併せて理解しておきたい内容です。 Lazy loading <img>にloading="lazy"属性を付けると画像が遅延読み込みになり、サイトの読み込み時間が早くなります。
今日から始めるVue.js 3を学んで本格的なWebフロントエンド開発(基礎編) | アールエフェクト
Vue.js 3 を利用して今後本格的な Web アプリケーションを構築したいという人でこれまで一度も Vue.js を利用した経験がない人に向けて作成した文書です。実際に動かしながら学べるようにシンプルなコードを使いながら説明を行っています。読み進めていくためには JavaScript の知識を前提してしていますが難しい関数や構文は利用していません。本文書ではテンプレートリテラル、アロー関数、filter 関数しか出てきませんが、Vue.js を使いこなすためにはスプレッド構文、分割代入、map 関数、 find 関数、Promise、async/await 関数などを学習することをお勧めします。 Vue.js をこれまで使った経験がある人なら気になるところだと思いますが Vue3 では Options API と Composition API という 2 つの記述方法(API)があり
JSでクリエイティブコーディング - テキストを分解しパーティクルにする演出 - ICS MEDIA
パーティクルとは粒子のこと。パーティクルを表現に取り入れると、印象的な演出に役立ちます。JavaScriptやWebGLを使うことで、ウェブの技術でもパーティクル表現の制作が可能です。本記事では題材にパーティクル表現の制作に役立つアイデアや着眼点を紹介します。 作例の紹介 本記事のチュートリアルの完成形はこちらになります。 別タブで再生する ソースコードを確認する この記事で学べること 2Dテキストを粒子化して動かす表現 パーリンノイズによる空気感の再現 GSAPによる大量のトゥイーン制御 WebGLの高速化（PixiJSの応用） 制作の技術 本作例を制作するにあたり、利用しているウェブの技術の概要を紹介します。 WebGL 画面表示はWebGLを利用します。ウェブのレンダリング技術において、もっとも高速な描画性能を得られるのがWebGLであるためです。WebGLは3D表現のための技術と思
canvasで大量の円がランダムに動くパーティクルを実装してみよう！ | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは、フロントエンドエンジニアのぜんちゃんです。 最近はアニメーション表現を増やすために、canvasの勉強を始めました。そこで、今回はcanvasやJavaScriptの基本技術を使って、円がランダムに動くパーティクルアニメーションを実装したいと思います。 今回作るアニメーションはこちらです。 円を作成・描画する canvas要素を作成し、そのcanvas内に円を作っていきます。 まずは一つだけ作りたいと思います。 <canvas id="canvas"></canvas> // キャンバス要素を取得 const canvas = document.getElementById('canvas'); // キャンパスに描画するコンテキストを取得 const ctx = canvas.getContext('2d'); // キャンバスサイズをwindowサイズに canvas.wi
JSer.info 10周年: JavaScript情報の集め方、書き方、まとめ方
JSer.infoは2011年1月16日に公開したJavaScriptの情報サイトで、2021年1月16日で公開してからちょうど10年です。 JSer.infoでは、10年間で10201サイト紹介し、522コの記事書いてきました。 JSer.infoの紹介したサイト数(累計)。ソース 10年間途切れることなく毎週更新していて、月別の記事数は毎年同じ推移です。 JSer.infoの月別の記事数。ソース この記事では、10年間やってきたJSer.infoの目的を振り返り、 JavaScriptの情報の集め方、書き方、まとめ方について書いていきたいと思います。 ⚠️ すべてを書いているのでものすごく長いです。 この記事やJSer.infoに関する意見や感想などは、次の場所に書いてください。 この記事をTweetする Twitter: #jserinfo GitHub Issue: JSer.in
便利なのが登場！スマホにもスクロール時に滑らかなアニメーションを適用できる超軽量スクリプト -lax.js
デスクトップでもスマホでもスクロールした際に、非常に滑らかで美しいアニメーションを簡単に実装できるシンプルで2Kbの超軽量JavaScriptを紹介します。 他のスクリプトへの依存は無く、ReactやVue.jsもサポートされています。 lax.js -GitHub lax.jsの特徴 lax.jsのデモ lax.jsの使い方 lax.jsの特徴 lax.jsはVanilla Javascriptで書かれた2Kbの超軽量スクリプトです。 スクロールをトリガーにあらゆる要素にアニメーションが適用できます。 パフォーマンス面でも施策がとられており、デスクトップでもスマホでも非常に滑らかなアニメーションが実現できます。 lax.jsのデモ デモでは実際のアニメーションを試すことができます。 デスクトップ・スマホ両方の環境でお試しください。 デモページ lax.jsではパフォーマンスを向上させるた
軽量three.jsを作成した話 - Qiita
この記事は、WebGL Advent Calendar 2018 17日目の記事です。 WebGL採用されない問題 気づけばthree.jsもr99までバージョンが上がっており、歴史も長く認知度も非常に高いライブラリとなりました。しかし、実際に多くのサイトで使用されているかと言うとそうでもありません。そもそもWebGLを使用したサイトと出会うことも少ないです。なぜなのでしょうか？ ① WebGLは難しい 皆さんご存知の通りWebGLを扱うには多くの知識が必要です。そもそも3DCGと関わりのないエンジニアにとってはハードルが高すぎます。筆者も元から詳しい方ではなかったので今もまだ勉強中です。。。しかしthree.jsの登場により、WebGLを簡単に扱えるようになりました。しかしWebGLを採用するサイトが爆増したわけではありません。 ② three.jsはファイルサイズが大きすぎる thre
Textillate.js
About Textillate.js combines some awesome libraries to provide a ease-to-use plugin for applying CSS3 animations to any text. Usage Simply include textillate.js and it's dependencies in your project to start creating unqiue effects. Credits Textillate.js is built on top of the simple, yet amazingly powerful animate.css and lettering.js libraries.
JavaScriptで水や波、パーティクル等、ふわふわゆらゆら系の動きを表現 | Webクリエイターボックス
2018年8月6日 JavaScript, jQuery Webサイトのアクセントに、ちょっとした動きをつけたい時ってありますよね。一から作り込むのは大変ですが、プラグインを使えば意外と簡単に実装できますよ。夏らしい涼し気なデザインになりそうです。サンプルがうまく動かない時はデモ画面右上の「EDIT ON CODEPEN」をクリックして別タブで表示してみてください！ ↑私が10年以上利用している会計ソフト！ wavify See the Pen wavify Demo by Mana (@manabox) on CodePen. GitHub wavifyはjQueryのプラグイン。ふよふよと動く波を表現できます。jQueryとTweenMax、wavifyのファイルを読み込み、SVGコードを用意すればOK。 HTML <body> コンテンツ ・・・ <!-- SVG --> <svg
darktooltip: A simple customizable tooltip with confirm option and effects
darktooltip Star Tweet darktooltip is a simple customizable tooltip with confirm option and effects Basic usage: <div id="def" class="box" data-tooltip="Hello world">default</div> $('#def').darkTooltip(); Advanced options You can specify some options to customize the appearance of darktooltip. Like this: $('#def').darkTooltip({ animation: 'flipIn', gravity: 'west', confirm: true, theme: 'light' ..
Flickity v2 · Touch, responsive, flickable carousels
Install Download CDN Package managers License Commercial license Open source license Getting started Initialize with jQuery Initialize with vanilla JavaScript Initialize with HTML Next Feature showcase wrapAround freeScroll groupCells autoPlay lazyLoad Parallax Images View all options Flickity in use People like Flickity Install Download CSS: flickity.min.css minified, or flickity.css un-minified
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
[CSS]フラットなデザインに使いたい！タップ時の新しいエフェクト「波紋」のアニメーションを実装するテクニック
Googleが先日発表したAndroid Lで使われる新しいUX「Material Design」で採用されているようなタップすると波紋のように円が広がるエフェクトを実装するテクニックを紹介します。 タップやクリックでよく見かけるのは、押した感じにへこむエフェクトでしたが、この波紋はフラットにあっててなかなかいいエフェクトですね。 Material Design 波紋状のエフェクトのコードは、下記のようになります。 HTML div要素で矩形のボタンを作成します。ラベルはスタイルシートのcontent属性で配置しています。 <div id="button" class="android-btn"></div> <div id="button2" class="android-btn ink"></div> CSS エフェクトのアニメーション、ボタンのサイズや波紋の大きさは、スタイルシートで
div、table、ulリスト等にソート、ページネーション、フィルタ機能を追加できる「jPList」:phpspot開発日誌
Overview | jPList - jQuery Data Grid Controls div、table、ulリスト等にソート、ページネーション、フィルタ機能を追加できる「jPList」。 div、table、ulなどで列挙されたデータに、次のようなインタフェースを追加して、便利にしてくれるというもの。 既存のHTMLにソートやフィルタなどの機能拡張したい場合に使えそうです。 関連エントリ アイテムをクールにアニメーションしつつフィルタ・ソートが出来るjQueryプラグイン「MixItUp」 リストやテーブル、DIV等の要素を好みにJSでソートできるjQueryプラグイン「SortedList」 テーブルに検索、ソート、ページ分け機能をつけて便利にしてくれる「Dable」
JavaScriptでゴリゴリ実験サイトを作ったよ | fladdict
fladdict.netのトップをリニューアル。JavaScriptの実験場にしてみた。久しぶりにゴリゴリJS書くと、かなり楽しい。 古き良きゼロ年代のFlash実験サイトはほぼ絶滅してしまったわけだけど、それを現代のJSとHTMLでやり直してみたらどうなるか？そんな感じのスタディ。使用ライブラリはpaper.jsとprocessing.js。時間があるときにcreate.jsも導入してみたいけど、ざっと見た感じcreate.jsは冗長すぎてスケッチには向かないと思う。スマホだと重すぎてだと動かないので、時間あるときに分岐するようにしたい。 最近はインターネットも成熟化したのか、グラフィック、インタラクション、プログラミングを三位一体でする人が減ってる気がする。分業化が進んでいるのだろう。インタラクション系がわかるエンジニアは需要があるわりに、新しい人が学ぶ機会が昔にくらべれば激減している
公式 | 進研ゼミ小学講座 ：チャレンジ／チャレンジタッチ | 小学生向け通信教育・学習教材
コロナ規制緩和で行事も多く、1学期思うように学習ができなかったというかたも、新学期本格スタートまでにおさらいができるよう8月号の最終しめ切りを特別延長しました。 「進研ゼミ小1～小5講座」2021年度1月号にご入会いただいたかた向けのキャンペーンです。WEB上の「学習に関するアンケート」を2022/2/10(木)までにご回答いただいたご入会者のかた全員に、Amazonギフト券（Eメールでお届け）1,000円分を謝礼としてお送りいたします。アンケートの回答期間を過ぎた場合は対象となりませんのでご了承ください。 謝礼のAmazonギフト券は、2022年３月下旬ごろにアンケートでご登録いただいたメールアドレス宛にお送りいたします。 本キャンペーンは（株）ベネッセコーポレーションによる 提供です。 本キャンペーンについてのお問い合わせは Amazon ではお受けしておりません。「進研ゼミ小学講座」
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
anime.js
Moving Letters
http://www.aaronvanderzwan.com/maximage/
Loading...
