素のJavaScriptでアコーディオンメニューを作る（クリックで開閉・jQueryなし・WAI-ARIA対応）｜BringFlower
クリックで開閉するアコーディオンメニューを素のJavaScript（Vanilla JS）で制作する方法を解説します。ここでご紹介する内容は、他のサイトで紹介されているコートだと達成したい仕様が満たされなかったり、実装の仕方が悪いのか挙動がおかしかったりしたので、自作したものです。 使いまわしもしやすいコードで使いやすいものになっていると思いますので、ぜひご活用ください。 またウェブアクセシビリティのためのWAI-ARIAも対応しています。 実装結果デモ まずは実装した結果をご確認ください。 後述する仕様のうち、アコーディオンを開いた時にスクロールを許容する部分はスクロールバーが存在するCODEPENだと表現が難しかったので、その点は別途ご自分でご確認いただければと思います。 See the Pen Accordion by Takahiro Inada (@tkhr1) on CodeP
【VPNって意味あるの？】フリーWi-Fiを盗聴して、VPNの効果を検証してみた！
NordVPNがクーポンで大幅割引中！ クーポン利用で最大66%割引中！世界中で使われているNordVPNがオトクに購入できます。購入は下のバナーから！ NordVPNの割引クーポンを確認する おすすめのVPN「NordVPN」についての詳細はこちら そもそもVPNって？VPNが安全と言われる理由 はじめにWi-Fiでの通信がどのように行われているかについて解説します。 例えば、スマホやPCから、あるウェブサイトにアクセスしたとしますよね。 すると、ふつうはインターネット上のサーバーに直接アクセスが飛びます。 スマホやパソコンからインターネット上のサーバーに向かって、「サイトを見せてください！」というメッセージが送られます。 実はこのとき、スマホから送られた通信データは丸裸になっています。 コンピューターの通信は意外と単純です。封筒に入っていない手紙と同じで、テキストデータがただWi-Fi
jQueryでheaderとfooterを共通化する【load()メソッド】
どうも！かけちまるです！ いきなりですが、HTMLでWebサイトを制作するときにheaderのような全ページで共通な部分をどのようにしているでしょうか？ HTMLごとにheaderを書いていると変更があったときにページ数が多いほど変更箇所が多くなってきますよね。 なので、headerを共通化して変更があっても変更箇所を1か所にしましょう。 この記事では、 ・headerを共通化する方法 ・共通ファイルが読み込まれないときの対処法 ・階層が違うHTMLへの対応方法 がわかります。 Ajax通信を利用して共通化する方法もあります。 少し難易度は上がりますが、保守性はこちらの方が高いのでおすすめです。
JSONをHTMLに埋め込む方法を現役エンジニアが解説【初心者向け】
HTMLへの埋め込み方 JavaScriptとjQueryでの扱い方 JavaScript jQuery [PR] Webデザインで副業する学習方法を動画で公開中 注意点 JSONは、軽量のデータ交換フォーマットです。 JavaScriptのプログラムにも使用できるオブジェクトであるものの、文法としてはkeyの名前の前後にもダブルクォーテーションを記述しなければなりません。 JavaScriptの記述方法を基礎にしているものの、JavaScript専用のデータ形式ではなく、他のプログラム言語にも使用することが可能です。 JavaSciptのオブジェクト var object_sample_data = [ { name : "sample-00", age : 30 }, { name : "sample-01", age : 23 } ]; JSON（JavaScript Object
SSIでHTMLファイルをインクルードする | Recooord | Web制作で扱うコーディングスニペットを紹介
SSIとは「 Server Side Include 」の略になります。 HTMLのヘッダーやフッターを外部ファイルとして読み込みたいときに使います。 SSIを使用するには契約しているサーバーのSSIが許可されている必要があります。 もし使用できない場合はサーバーがSSIに対応しているのか確認をしてください。 .htaccessファイルにSSIを有効にするコードを記述する Options +Includes AddHandler server-parsed html .htaccessファイルに上記コードを記述して、サーバーにアップロードしてください。 1行目の「 Options +Includes 」はSSIを使えるようにする記述で、2行目の「 AddHandler server-parsed html 」はHTMLファイルに対してSSIを有効にするという記述になります。 HTMLファイ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
https://b-risk.jp/blog/2022/01/gulp-ejs-json/
