静的サイトジェネレータ「Astro 3.0」正式リリース。JavaScriptなしでSPAのようなアニメーションの画面遷移など新機能
静的サイトジェネレータ「Astro 3.0」正式リリース。JavaScriptなしでSPAのようなアニメーションの画面遷移など新機能 オープンソースで開発されている静的サイトジェネレータ「Astro」の最新バージョンとなる「Astro 3.0」が正式にリリースされました。 Astro 3.0 is out now! 30% faster and more powerful than ever. View Transitions, Image Optimization, JSX Fast Refresh, and so much more. https://t.co/vOi44246Hg — Astro (@astrodotbuild) August 30, 2023 Astroは、ReactやVue、Svelte、Alpine.js、TypeScriptなどのさまざまなフレームワークやライ
【最新】Swiperの使い方・カスタマイズを解説！サンプルやオプション15個付き ー基礎から応用までー | 東京のホームページ制作 / WEB制作会社 BRISK
TOPブログ【最新】Swiperの使い方・カスタマイズを解説！サンプルやオプション15個付き ー基礎から応用までー Webサイトのコーディングをするなら必修とも言えるスライダー。 スライダー実装用のJSプラグインはいろいろありますが、本記事ではその中でもSwiperを使用した実用的なカスタマイズ例をご紹介します。 デモページを見る まずはこちらのデモページをご覧ください。 片方だけはみ出しているスライダー、サムネイルと連動するスライダー、SPだけスライダーにする方法などなど、実際によく必要になる機能を網羅できるようなデモを厳選してご用意しました。 初心者さん向けのかなり初歩的な内容から、いろいろカスタマイズを加えた応用編まで解説していきます。 メインビジュアルの作例5つ（#11 ～ #15）については、Swiperのカスタマイズ方法だけでなく、アニメーションやデザインの参考になればと思い様
getElementsByClassNameで指定したクラスを全消しする
getElementsByClassNameで指定したクラスを全部消す 最近ReactとかAngularとかカッコいいJavaScriptライブラリでてるし、 jQueryを使ったらシロートっぽく思われて嫌だなぁ…と思っているみなさんこんばんわ。たくみです。 今日はjQueryで$('.TARGET_CLASS').removeClass('REMOVE_CLASS');相当のことを pure JavaScriptでする方法を伝授します！ ぶっちゃけjQuery使ったほうが早(ry pure JavaScript大好きの方はご存知かもしれませんが、 document.getElementByIdで取得したDOMにclassList.removeを使うと 指定したクラスが消えますよね。 ですが、document.getElementsByClassNameを使って取得したDOMは そのままだ
JavaScriptでwindowの幅による条件分岐を作る方法｜DESIGN REMARKS [デザインリマークス]
サイト構築をしていると様々な場面で条件分岐が必要になることがありますよね。特にレスポンシブデザインになってからはウィンドウ幅による条件分岐をよく使います。 CSSであればメディアクエリーでやればいいのですが、JavaScriptの場合にはどうしていますか？普通にウィンドウ幅を取得して分岐ということが多いかと思いますが、今回は私なりの方法をご紹介します。 まず正確なウィンドウ幅を取得します。 ウィンドウ幅を取得するにもスクロールバーを含めたり含めなかったりと色々な方法がありますが、今回はCSSのメディアクエリーの反応と同じにするため、スクロールバーを含めた値を取得することにします。ここが間違っているとその先が全部狂ってしまうので、以下の記述で正確な値を取得しましょう。 $windowWidth = window.innerWidth; javascriptでのwindow.innerWidt
![JavaScriptでwindowの幅による条件分岐を作る方法｜DESIGN REMARKS [デザインリマークス]](https://cdn-ak-scissors.b.st-hatena.com/image/square/1df2ffc9c393e7fe206a538b68990e865bac68fa/height=288;version=1;width=512/https%3A%2F%2Fdesign-remarks.com%2Fwp-content%2Fuploads%2F2018%2F11%2Fwindow-width-branch_1.jpg)
JavaScriptでモーダル（ポップアップ）を表示させる方法
今回は、JavaScriptを使ってモーダル（ポップアップ画像）を表示させる方法を紹介します。 jQueryは使わずに、生のJavaScriptだけでやります。2つのパターンを想定してます。 モーダルとは？ 画像や広告などが表示されて、クリックや閉じるなどの操作をしないとページが閲覧できないような表現です。 実際にデモを見れば分かると思います。 1.ページが表示された時に表示されるパターン 広告とかで使われるパターンです。ウザいので結構嫌われてます。 DEMO 2.ボタンをクリックしたら表示されるパターン 画像の拡大表示などで使われるパターンですね。 DEMO それぞれの実装方法を紹介します。 ページが表示された時に表示されるモーダル（ポップアップ） まずはこちらのパターンです。 DEMO あらかじめCSSの前にFontAwesome アイコンを呼び出してください。 <link href=
任意の画像と同じ色の影を作るシンプルなスクリプト・「cosha」 - かちびと.net
coshaは任意の画像と同じ色の影を作るスクリプトです。上サンプルのようにステンドグラスのように同じ影が出来ています スクリプトは非常に軽量で依存性もありません。手軽で使いやすい印象です。だいぶ前ご紹介したImage-shadowよりも少ないコードで実装されていました コンテンツ次第では自然にも不自然にもなるので使い方に注意という感じでしょうか。ライセンスはMITとの事 cosha
JavaScript：作成・取得・追加・削除・各要素への処理など、配列に関する基本操作のまとめ - NxWorld
JavaScriptで複数のデータを取り扱いたいときに使う配列には多くのメソッドが用意されており、それらを単独または複数組み合わせて使用することで配列に様々な処理・操作を行うことができます。 ただ、JavaScriptを勉強し始めたとかこれから配列について勉強するという場合に、とりあえず漠然とメソッドを覚えてと言われても抵抗がある人もいると思うので、どんな処理ができるかやどんなメソッドがあるのかが少しでもわかりやすいように、**「この処理をしたいときにこのメソッドを使う」**のような形で基本操作としてよく使われるものをまとめて紹介します。 ここで紹介している方法の一部は「この処理を行うなら絶対にこれを使う」ということではなく、あくまで「この処理を行う方法のひとつとしてこれを使う」というものになります。 紹介している内容の一部はブラウザによって非対応のものもあります。 自身の環境で動作確認を
簡単にJavaScriptでSPAのブログを構築して公開できるライブラリ「CMS.js」を使ってみた！ - paiza開発日誌
どうも、まさとらん（@0310lan）です！ 今回は誰でも簡単にJavaScriptでブログなどを構築可能なCMSツールを実現するライブラリをご紹介します！ Jekyllなどの静的サイトジェネレータと考え方は似ていますが、こちらはサーバサイドスクリプティングが一切不要ですべての作業をフロントサイドで完結できるのが特徴です。 GitHub Pagesと組み合わせることですぐにでもブログを構築して公開することができるので、ご興味ある方はぜひ参考にしてください！ なお、JavaScriptはpaizaラーニングの「JavaScript入門編」（完全無料）で学ぶことができます。そちらも合わせてチェックしてみてください。 【 CMS.js 】 ■「CMS.js」の使い方 それでは早速ですが、実際に「CMS.js」を使ったブログを作って公開してみましょう！ 本来は「CMS.js」のライブラリをダウンロ
要素が存在するかどうか調べる
JavaScriptで要素が存在するかどうか調べてみます。 サンプルコード 調べ方はいくつか種類があるようですが、jQueryを使わない場合と、jQueryを使う場合から2種類を試してみます。 HTML <div class="hoge"></div> .hogeが存在するかどうかを試してみます。 JavaScript // パターン1 if(document.getElementsByClassName('hoge').length) { console.log("document.getElementsByClassName('hoge').length の結果: true"); } else { console.log("document.getElementsByClassName('hoge').length の結果: false"); } // パターン2 if(documen
「え？それそんなかかるの？」簡単そうに見えて案外時間のかかるWebサイト上のJavaScriptあるある仕様8選 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
多！ そのため、仕様の洗い出しが不十分になりがちになる、という点で厄介です。 ただし、今はSwiper, Slickといった優秀なプラグインがあります。こいつらは大抵の仕様は満たしてくれますので、積極的に使うと良いと思います。 参考 Swiper Slick フィットスクロール 厄介度：★★★ 紙芝居スクロールなどといったりもします。 海外のオサレなブランディングサイトや、ランディングページなんかでたまに見かけますね。 カッコイイ！うちもこんなんやりたい！と思うかもしれません。がしかし…… イメージ ハマりポイント スクロールに関する他の機能実装 これを実装する場合ブラウザにデフォで備わっているスクロールは使わず、別の方法（CSSのtransformとJSを組み合わせるなど）で実装することになるかと思います。 するとまず、スクロールイベントが取れないんですね。 そのため、スクロールに合わせ
今年、JavaScriptでの仕事の幅を広げた技術６選 - Qiita
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? こんにちは。久しぶりのQiita投稿です。 今回は「ex-KAYAC Advent Calendar」の13日目の記事として寄稿させていただきます。 さて、改めて私の今やっていることを紹介させていただきますと、独立してから株式会社Lucky Brothers & co.という会社を設立し、主にWebの受託制作を行っています。 かれこれ３期目に突入致しました。 アドベントカレンダーということで改めて2018年という年を振り返ってみたのですが、一言で言うと「今年はフロントエンドエンジニアにとって大きな当たり年であった」と言えるのではないかと
jQueryを使わずに滑らかに動くトップに戻るボタン | q-Az
よく色々なサイトで実装されているトップに戻るボタンをピュアな JavaScript のみで実装してみます。 jQuery を使えば数行で実装できますが、リニアな動きであればネイティブな JavaScript でもそんなに大変ではありません。 アニメーションの原理JavaScript でアニメーションをさせます。少し古い記事になりますが以下の記事が大変参考になります。 参考：これでできる！ クロスブラウザJavaScript入門 第17回 アニメーションの基礎 ものすごく簡単に言うと「パラパラ漫画の要領でアニメーションさせる」です。jQuery の fadeIn などのアニメーションも基本これと同じパラパラ漫画実装です。 トップに戻るボタンの場合は、単位時間ごとに数ピクセル上にスクロールさせる動きを連続でさせれば OK ということになります。 ネイティブ JS でトップに戻るボタンHTML<
jQueryとSVGでクリッカブルマップ - MJHD
クリッカブルマップというのは，こんなの． 今回はクリッカブルという名のもとでクリック機能に対応していないのだが，便宜上クリッカブルマップと呼ぶ． 実際，クリック対応も数行追加するだけで楽々と対応できる． 用意するもの SVG吐き出せるソフト(今回はInkscape) jQuery だけ． マップ画像の作成 inkscapeを使い，適当に日本地図を書く． そして，inkscapeのXMLエディタを開き，各地域，都道府県などにidを追加する． あとは，PlainSVGとして書き出すだけ．(今回はjapan-map.svgとして書き出した) jQueryプラグインを書く jquery.svg-japan-map.js (function($) { $.fn.svgJapanMap = function(options) { function composeIdName(prefix, name,
HTML5 SVG + CSS + JS で柔軟なマウス領域を実現 - Qiita
HTML5でサポートした <svg> 要素と、CSS、JavaScriptを組合せて、マウス処理する複雑な形の領域を作ります。次のような関東地方の地図のデモを作成しました。都道府県の形に沿ってマウスイベントが発火するのが、確認できるかと思います。 Kanto SVG map - CodePen はじめに HTML5でサポートした <svg> 要素により、HTMLドキュメント内にSVGを描画できるようになり、従来の矩形（<div>など）だけでは難しかった複雑な形の要素も配置できるようになりました。SVG画像を描画するだけでなく、<svg> ... </svg> 内の要素（<path> や <rect>）に、これまでのHTML文章同様、CSSによるスタイルの指定や、JavaScriptによる要素の変更、イベントリスナの登録が可能となります。 これまで <area> タグで指定していたマウスの処
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
年齢を自動計算するJavaScriptのプログラムを作りました。ブログなどに使ってみてください。 | ゴトーのブログ