rel=preload - HTML: ハイパーテキストマークアップ言語 | MDN
This feature is well established and works across many devices and browser versions. It’s been available across browsers since January 2021. * Some parts of this feature may have varying levels of support. Learn moreSee full compatibilityReport feedback preload は <link> 要素の rel 属性の値で、その HTML の <head> の中で読み取りリクエストを宣言し、ページのライフサイクルの早期の、ブラウザーの主なレンダリング機構が起動する前に読み取りを始めたい、すぐに必要なリソースを指定することができます。これにより、そのリ
<script>: スクリプト要素 - HTML: ハイパーテキストマークアップ言語 | MDN
This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015. * Some parts of this feature may have varying levels of support. Learn moreSee full compatibilityReport feedback <script> は HTML の要素で、実行できるコードやデータを埋め込むために使用します。ふつうは JavaScript のコードの埋め込みや参照に使用されます。 <script> 要素は WebGL の GLSL shader プログラミング言語、 JSON 等の他の言語にも使用することがで
スクリプト: async, defer
最近の web サイトでは、スクリプトは HTML よりも “重い” ことがしばしばです: ダウンロードサイズはより大きく、処理時間も長くなります。 ブラウザが HTML をロードし、<script>...</script> タグに遭遇すると、DOM の構築を続けることはできません。すぐにスクリプトを実行する必要があります。外部スクリプト <script src="..."></script> についても同じです: ブラウザはスクリプトをダウンロードし、それを実行するまで待つ必要があり、その後にページの残り部分の処理をすることになります。 これは2つの重要な問題につながります: スクリプトは、それ以降の DOM要素は認識することができないため、ハンドラーを追加したりすることはできません。 ページの先頭に重いスクリプトがあると、“ページをブロック” します。利用者はそれがダウンロードされ実行
貴社のサイトも要注意！ jQuery脆弱性対策のポイント | デジタルマーケティングTips | 株式会社マックスマウス
Webサイト内で古いjQueryを使っている場合は、脆弱性によるサイト改竄等のおそれがあるため、最新版に置き換える改修が必要です。本記事では改修が必要な理由と実際の作業の流れを解説します。 要点 jQuery旧版はXSS脆弱性あり。最新版に換えるべし 古いjQueryの置き換えは付随する改修が多い。大仕事になる場合も 単独で対策するほか、サイトの機能改修のついでに脆弱性対策も行うという方法も吉 現代のWebサイトに必要不可欠な「jQuery」とは jQueryは、2006年に初版が発表され、現在では世界中のWebサイトで使用されているJavaScriptライブラリです。JavaScriptコードの記法・構文を簡略化することで開発効率が上がること、ブラウザ間での動作の差異や不規則さを抑えられること、jQueryに合わせて開発された各種ライブラリ(jQueryライブラリ)を動かすための基礎動作
CSP: script-src - HTTP | MDN
HTTPガイドHTTP の概要HTTP の進化典型的な HTTP セッションHTTP メッセージMIME タイプ（IANA メディア種別）HTTP の圧縮Compression Dictionary Transport Experimental HTTP キャッシュHTTP 認証HTTP Cookie の使用HTTP のリダイレクトHTTP 条件付きリクエストHTTP 範囲リクエストコンテンツネゴシエーションHTTP/1.x のコネクション管理プロトコルのアップグレードの仕組みプロキシーサーバーとトンネリングHTTP クライアントヒントHTTP セキュリティ実践的なセキュリティ実装ガイドHTTP ObservatoryPermissions Policy Experimental コンテンツセキュリティポリシー (CSP)Cross-Origin Resource Policy (CORP
Element: classList プロパティ - Web API | MDN
ドキュメントオブジェクトモデル (DOM)ElementインスタンスプロパティariaActiveDescendantElementariaAtomicariaAutoCompleteariaBrailleLabelariaBrailleRoleDescriptionariaBusyariaCheckedariaColCountariaColIndexariaColIndexTextariaColSpanariaControlsElementsariaCurrentariaDescribedByElementsariaDescriptionariaDetailsElementsariaDisabledariaErrorMessageElementsariaExpandedariaFlowToElementsariaHasPopupariaHiddenariaInvalidariaKeySh
JavaScriptで画像を拡大する方法を現役エンジニアが解説【初心者向け】
JavaScriptで画像を拡大する方法はいくつかありますが、CSSのtransformプロパティを使うとシンプルに画像を変形できます。tramsformプロパティは要素を回転、拡大縮小、傾斜、移動することができます。複数の変形の組み合わせも可能です。 例えば以下は大きさを2倍に拡大して位置を(80px,80px)にずらす例です。 transform: scale(2.0, 2.0) translate(80px, 80px); transformプロパティについて詳しくは以下のページも参考にしてください。 MDN – transform またtransformプロパティはtransitionプロパティと併用されることが多いでしょう。transitionプロパティは2つの状態の遷移を指定します。例えば以下はすべての動作に対して遅延なしで0.5秒かけて状態遷移を行います。 transitio
別窓を開かずにその場クリックで拡大画像を表示する4つの方法 [ホームページ作成] All About
初心者向けの「わかりやすさ」を重視した解説に定評があるウェブ系テクニカルライター。ウェブの黎明期に趣味で始めた個人サイト製作からその「楽しさ」に魅了され、作成方法に関する様々な情報を発信。企業や団体のウェブサイト製作・解説書籍の執筆なども行っている。 ...続きを読む 画像クリックで拡大表示されるJavaScriptが便利 HTML内にたくさんの写真や画像を掲載するアルバムページなどでは、最初にサムネイル画像（縮小画像）だけを並べておき、閲覧者がそれをクリックしたりタップしたりした際にだけ拡大画像を表示するデザインがよく使われています。 ウェブページ上で拡大画像を表示する際には、ポップアップウインドウを出したりページを移動したりすることなく、その場で拡大画像を表示できる方法の採用が手軽で望ましいでしょう。例えば、下図のように画像を拡大表示する動作です。 この種の表示に便利なのが、Light
![別窓を開かずにその場クリックで拡大画像を表示する4つの方法 [ホームページ作成] All About](https://cdn-ak-scissors.b.st-hatena.com/image/square/6ec4b03d1cb7a6f647ea70376bdd657185b7fdae/height=288;version=1;width=512/https%3A%2F%2Fimgcp.aacdn.jp%2Fimg-a%2F1200%2F900%2Faa%2Fgm%2Farticle%2F2%2F3%2F9%2F7%2F5%2F201708241603%2Ftopimg_original.png)
JavaScriptとPHPを書く人は必ず知っておくべきifとundefinedの違い
JavaScriptとPHPのifの違い PHPはWeb開発に適しており、JavaScriptと同様にHTMLに埋め込むこともできるので、JavaScriptとPHPは同じ人物が書くことがある。 JavaScriptとPHPのifでは判定内容によってはboolean値の結果に違いが出るので注意が必要だ。 JavaScriptでは if ('0') と if (Array()) はtrueを返すが、PHPの if ('0') と if (array()) はfalseを返す。 JavaScriptとPHPのifの違いサンプル もしPHPのifをJavaScriptのifと同じ結果にしたい場合はif ('0')はorで '0'ならtrueを返して、if (Array())はis_arrayを使用する。 JavaScriptのifをPHPのifと同じ結果にしたい場合はif ('0')はandで'
jQuery リファレンス：jQuery(function)
索引 ├ リファレンス目次 ├ アルファベット順 └ 検索 Core：コアとなる仕組み ├ 目次 ├ jQuery(selector) ├ jQuery(html) ├ jQuery(function) ├ jQuery.holdReady() ├ jQuery.noConflict() └ jQuery.sub() 他ページ参照 └ jQuery.when() Selectors：セレクタ └ 目次 基礎 ├ *（すべて） ├ element（html要素） ├ #id名（ID属性） ├ .class名（clas属性） ├ 複数のセレクタ(and) └ 複数のセレクタ(or) 階層関連 ├ 先祖 子孫 ├ >（子要素） ├ +（直近の後要素） └ ~（後要素） 属性 ├ [属性名] ├ [属性名='値'] ├ [属性名!='値'] ├ [属性名^='値'] ├ [属性名$='値'] ├
【JavaScript入門】Ajaxの使い方とGET・POST通信まとめ！ | 侍エンジニアブログ
基本的に、サーバーと正常な通信をしている場合は、statusの値が「200」なのでこれと条件分岐するのが良いでしょう。さらに、「readyState」と「status」は別々に条件分岐するよりも同時に確認する方が効率的です！ xhr.onreadystatechange = function() { if (xhr.readyState === 4 && xhr.status === 200) { //データ取得処理を書く } }; このように「&&」で一緒に確認できることも合わせて覚えておきましょう！ 「GET」で通信する方法 この章では、実際にAjaxを使ってGET通信を行う方法について見ていきましょう！ 基本的なGET通信のプログラム作成からデータの取得までを学んでいきます。 「GET」によるAjax通信のサンプル例 「XMLHttpRequest」を使ったAjax通信では、主に「G
これでXMLHttpRequestが理解できる | アールエフェクト
XMLHttpRequestとは XMLHttpRequestはJavaScriptを使ってブラウザとWEBサーバ間でデータの送受信を行う際に利用することができるオブジェクトです。XMLHttpRequestはWEBサーバからすべてのデータを読み込んだ後でもデータの送受信を行うことができるため、ページをリロードすることなくページ内容を書き換えることが可能になります。XMLHttpRequestを使ったデータの送受信は今のWEBサービスにとって不可欠なものです。現在はWEBサーバとのデータの送受信にXMLHttpRequestを直接利用する機会は少なくaxios(XMLHttpRequestを利用)やfetch関数を利用します。しかしそれらの技術を理解する上でもXMLHttpRequestは重要な機能なので理解を深めておきましょう。 XMLHttpRequestの使用方法 サーバからデータ取
JavaScriptイメージモーダル（画像拡大表示）を作ろう | logsuke
完成画像 サムネイル画像をクリックすると、サイト全体を覆うモーダルを表示させて、拡大画像を表示させるようにしていきます 全体のコード <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="style.css"> <title>imagemodal</title> </head> <body> <div class="modal-wrapper"> <img src="" alt="" class="modal-image"> </div> <div class="wrapper"> <img src="images/img
window.onloadの利用はお勧めしない その理由
window.onloadを書いたけど、動かないことが多々あります。 これは、同じページ内で複数のwindow.onloadが記述されている場合に、一つしか動作できないのが原因なようです。 また、「一つしか動作できない」というのは、正確には、関数を上書きしてしまっている（オーバーライド）しているようです。 複数の開発者で開発していた場合には、自分の書いた部分を上書きされてしまい、障害として発生してしまう恐れもあるため、使用はお勧めできません。 例えば、外部ライブラリの中にwindow.onloadの記述があった場合には、その機能が正常に動作しないなどのことも考えられます。 何を使うべきかもし、window.onloadを使用するのであれば、 window.addEventListener('DOMContentLoaded', function() { もしくは、 window.addEv
セレクトボックス（select要素）の選択した項目を取得・変更する ‐ JavaScript ‐ GRAYCODE
セレクトボックス（select要素）の選択した項目を取得・変更する 最終更新日：2024-01-06 公開日：2020-10-22 フォームのセレクトボックス（select要素）で選択された項目を取得したり、選択状態を変更する方法について解説します。 この記事のポイント セレクトボックスの選択状態はselectedプロパティを参照する 複数選択のときの値や、選択項目のラベルを取得したいときはoption要素を参照する セレクトボックスの選択状態はselectedプロパティにtrueを設定すると選択状態になる セレクトボックス（select要素）の選択状態を取得する フォームにあるセレクトボックス（select要素）の選択している項目を取得するときはvalueプロパティとselectedプロパティを参照します。 今回は解説用に以下のHTMLコードを使います。 HTMLコード例 <form m
初心者でも分かる！モーダルウィンドウの作り方
特にスマホで活躍する、ダイアログのように浮かび上がるモーダルウィンドウ。初心者でも1から作れるよう、解説します。
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
PHPで画面幅によってHTML出力を変えたいんですが、うまくできません。。
サブリソース完全性 - ウェブのセキュリティ | MDN
window.addEventListener('DOMContentLoaded',...) を採用する理由
ブラウザにデータを保存する「localStrage」の使い方と実際の使用例 - 株式会社グローバルゲート公式ブログ