LocalStorageの使い方 LocalStorageは、ブラウザにデータを保存するためのWebストレージAPIの1つです。LocalStorageは、セッションやクッキーとは異なり、データの保存期間が長く、ブラウザを閉じても保存されます。 LocalStorageを使用すると、JavaScriptを使用して簡単にデータを保存および取得できます。データは、キーと値のペアとして保存されます。キーは一意であり、値は文字列である必要がありますが、JSON.stringifyを使用してオブジェクトを文字列に変換し、JSON.parseを使用して文字列をオブジェクトに変換することができます。 LocalStorageに保存できるデータの量には制限がありますが、通常は5MB程度です。また、同じオリジンのページ間でのみアクセスできます。別のオリジンのページからアクセスしようとすると、セキュリティ制限

どのサービスで悩みを解決しますか？ １『SEOコンサルティング』：サイト全体の戦略設計からプロが伴走 ２『記事作成代行サービス』：業界の専門家によるSEOに強い記事作成 ３『SEO内製化支援プラン』：社内に知見と実行をインストールし、成果最大化 ４『コンバージョン改善サービス』：サイト改善によるCV創出で成果最大化 .htaccessとは？ .htaccessとは、Webサーバーで利用されるApache（Webサーバーソフトウェア）を、ディレクトリ単位でコントロールするためのファイルです。 特定のディレクトリに.htaccessファイルを設置し、ファイル内にアクセス制限やリダイレクト指令を記述すれば、設置されたディレクトリとその下層のディレクトリ内に対して適用されます。 リダイレクトやIP制限など、Webサイト運営で欠かせない様々なシーンで活用できます。詳しくは次の章をご覧ください。 .h

初めに HtmlのdivタグやspanタグにCSSを適用するためには、id名もしくはclass名を付けます。特にcalssセレクタは頻繁に使われていますが、その中でも複数のクラス名を一つの要素に並べるケースについてその理由とcssの記述について纏めてみました。 目次 idとclassの違い 同じタグ内に複数のclass名を付ける理由 同じタグ内に複数のclass名が並んだ場合のCSS記述 複数のクラス名が入れ子構造（ネスト）の場合 複数のclassに同じcssを適用する場合 まとめ idとclassの違い id属性はhtml文書内でたった一つしかない要素に対してスタイルを適用する時に使います。なので同じ文書内に同じid名が複数存在することはあり得ません。これに対してclass属性の場合、複数のタグに同じclass名を付けてそれぞれ同じスタイルを適用することができます。「この部分は絶対このス

Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article?

デイリーポータルZが「Vue.js勉強会」というWeb開発系のイベントを開催した。サイトを知っている人なら「え？あのデイリーが？なんでそんな真面目なイベントを？」と驚くかもしれない。 急に真面目なことをやりだすと、ヤンキー母校に帰る的な心変わりでもあったのかと心配になる。 僕自身がWeb開発の仕事をしているため「ふざけたサイトがやる勉強会なんて…」と最初は不安に思っていた。しかし、蓋を開けてみればエンジニア業務を擬似体験できるくらい内容のしっかりした勉強会だった。 大学中退→ニート→ママチャリ日本一周→webプログラマという経歴で、趣味でブログをやっていたら「おもしろ記事大賞」で賞をいただき、デイリーポータルZで記事を書かせてもらえるようになりました。嫌いな食べ物はプラスチック。（動画インタビュー） 前の記事：ドラクエに出てくる「やくそう」は現実だとどう使うのか専門家に聞く ＞ 個人サイト

HTML例<div class="item"> <button class="js-accordion"> <div> <p> テキストテキストテキストテキストテキストテキストテキストテキストテキスト </p> </div> </button> <div class="accordion-box"> <p> テキストテキストテキストテキストテキストテキストテキストテキストテキスト </p> </div> </div> <div class="item"> <button class="js-accordion"> <div> <p> テキストテキストテキストテキストテキストテキストテキストテキストテキスト </p> </div> </button> <div class="accordion-box"> <p> テキストテキストテキストテキストテキストテキストテキストテキストテキスト<br

<input id="btn" type="button" value="ボタン" /> <script> 'use strict'; function hoge(e){ console.log(e.target.id) } document.getElementById("btn").addEventListener('click', hoge, false) </script>

標準組み込みオブジェクトArrayコンストラクターArray() コンストラクター静的メソッドArray.from()Array.fromAsync()Array.isArray()Array.of()静的プロパティArray[Symbol.species]インスタンスメソッドArray.prototype.at()Array.prototype.concat()Array.prototype.copyWithin()Array.prototype.entries()Array.prototype.every()Array.prototype.fill()Array.prototype.filter()Array.prototype.find()Array.prototype.findIndex()Array.prototype.findLast()Array.prototype.find

JavaScriptでリストで取得しているHTML要素にidを連番振りする方法を紹介しています。 HTML要素にidを連番振りする HTML要素にidを連番振りするJavaScriptのサンプルコードになります。 例えば以下のリストタグのHTML要素に連番付けしたidを付与する場合の方法です。 <ul id="target"> <li>ItTEM 01</li> <li>ItTEM 02</li> <li>ItTEM 03</li> </ul> サンプルではquerySelectorAll()を使って要素を取得しています。 配列のループ処理はfor ofを利用、連番用にキーも欲しいのでentries()メソッドを使ってキー（i）と要素（e）を取得できるようにする。 idプロパティにて連番を加えて作成したid名を付与しています。 let elements = document.querySe

WindowインスタンスプロパティcachesclosedcookieStorecredentialless Experimental crossOriginIsolatedcryptocustomElementsdevicePixelRatiodocumentdocumentPictureInPicture Experimental event 非推奨; external 非推奨; fence Experimental frameElementframesfullScreen 非標準 historyindexedDBinnerHeightinnerWidthisSecureContextlaunchQueue Experimental lengthlocalStoragelocationlocationbarmenubarmozInnerScreenX 非標準 mozInnerScree

html5のcanvasがなかなか面白い． お絵かき的な使い方がメインにはなるのだけれど，ほとんどすべてjsでいじくり倒せるので，とても面白い． そんなcanvasを重ねてみた． いわゆる，レイヤー的な使い方ができるので，おすすめです． ちなみに，レイヤー用canvasの生成もjs内で行います． そしてそこに画像を描画していく！（描画するものはなんでもいいです）． $("#figure").click( function(){ var $img_canvas = addCanvas(100,100); var img_ctx = $img_canvas[0].getContext('2d'); var img = new Image(); img.src = "filename.png"; img.onload = function(){ img_ctx.drawImage(img, 0,

このページはコミュニティーの尽力で英語から翻訳されました。MDN Web Docs コミュニティーについてもっと知り、仲間になるにはこちらから。 View in English `�W ��Always switch to English 前のページ 次のページ <canvas> 要素は、ウェブで 2 次元グラフィックを描画するためにもっとも広く使用されているツールのひとつです。しかし、ウェブサイトやアプリがキャンバス API の限界付近まで使用するようになって、パフォーマンスが悪化するようになりました。この記事では、キャンバス要素の使用を最適化して、グラフィックを確実に改善するための提案を行います。

ゲームエンジンや3Dソフトウェアを利用して高度な表現ができるこの時代でも、プリミティブな描画や動き、アルゴリズムから学べることは多い。それらをJavaScriptで書くクリエイティブコーディングという形で学べる手引書が本書となる。