特にスマホで活躍する、ダイアログのように浮かび上がるモーダルウィンドウ。初心者でも1から作れるよう、解説します。
初心者でも分かる！モーダルウィンドウの作り方
特にスマホで活躍する、ダイアログのように浮かび上がるモーダルウィンドウ。初心者でも1から作れるよう、解説します。
JavaScriptで画像クリックにより発動される処理を実装する方法を現役エンジニアが解説【初心者向け】
初心者向けにJavaScriptで画像クリックにより発動される処理を実装する方法について現役エンジニアが解説しています。画像をクリックした時にイベント処理を発動させるには、Clickイベントを使います。今回は画像をクリックすると新しいウィンドウで拡大画像を表示するプログラムを解説します。 テックアカデミーマガジンは受講者数No.1のプログラミングスクール「テックアカデミー」が運営。初心者向けにプロが解説した記事を公開中。現役エンジニアの方はこちらをご覧ください。 ※ アンケートモニター提供元：GMOリサーチ株式会社 調査期間：2021年8月12日～8月16日 調査対象：2020年8月以降にプログラミングスクールを受講した18～80歳の男女1,000名 調査手法：インターネット調査 Web制作をしていると、画像クリックをきっかけに動きを作りたいことがありますね。 ページ遷移したり、画像を
.css ファイルを非同期で読み込む - JavaScript | nju33
<head>タグが存在するマークアップだとdocument.headで<head>タグを取得でき、クエリで取得する必要もない一番てっとり早い方法だと思います。なのでここに上記で作成したlinkを埋め込みます。
JavaScriptによって動的に CSSを追加する場合のブラウザごとの挙動の違い
（2011/3/29追記：Firefox4とChrome10の実験結果を追加。） JavaScriptに続いて、動的にCSS（またはstyle要素）を追加する場合の、追加方法の違いによるブラウザごとの挙動も調べた。 調査に使ったJavaScript（HTML5なのでtype属性は省略してある。） window.onload = function() { // divのinnerHTMLに外部CSSの読み込みを突っ込む try { var div1 = document.createElement("div"); div1.innerHTML = '<link rel="stylesheet" href="test1.css" />'; document.body.appendChild(div1); } catch(e) { } // createElementでlink要素を生成して外部
お絵かき掲示板POTI-board EVOでやこうさんパレット(お絵かきーずパレット)を使う｜さとぴあ
POTI-board EVOでお絵かきーずパレットレンタルお絵かき掲示板「お絵かきーず」で採用されたいたやこうさんパレットにはBBSNote版があります。 BBSNoteの雑記帳のSINさんが、ぴくらぼの方々と協力してBBSNoteでも使えるようにしてくれました。 このパレットデータはPOTI-boardでも使えます。 24分割した色相環と白黒、肌、褐、淡、標準合計29種類。 また、最新板のPOTI-board EVOは標準のパレットとお絵かきーずパレットを切り替える事ができます。 パレット切り替え画面。 BBSNoteのパレット切り替えのプルダウンメニューと似たUIですが、パレットデータそのものを切り替えるので動作は違います。 標準のパレットを使った画面。 やこうさんパレット(お絵かきーずパレット)のPOTI-board改二への導入 上記リンク先に設定方法を細かく記載しました。 POTI
かつて人々はお絵かき掲示板から掲示板を切り離したペイントアプリを求めさまよっていた｜さとぴあ
AzLocalPBBS PaintBBS やしぃペインター等のお絵描きアプレットを ローカルで実行し、ファイルを保存 AzLocalPBBSというお絵かき掲示板のお絵かき機能を掲示板と切り離してローカルで実行し単体のペイントアプリのように使うためのアプリがありました。 正確には今もありますがJavaアプレットが動作する環境が必要です。 PCであればChromeの拡張機能CheerpJ Applet RunnerでJavaアプレットをHTML5に変換して使う事もできますが…。 タブレット端末ではペンを動かすと画面もスクロールしてしまうので描く事ができません。 PaintBBS NEOのオフラインで動くサンプル…これってローカルPaintBBSでは？ オフラインで動く動作サンプルを追加しました。 PaintBBS NEOはブラウザだけで動作するHTML5版のPaintBBSです。 2020年6
【jQuery】モーダルウィンドウによる年齢認証の作り方 ｜ KLUTCHE
以前紹介したCookieを使って、モーダルウィンドウの年齢認証を作成する方法の改良版です。 改良点 Javascript がぐっと短くなりました。 CSS によるレイアウト変更が容易になりました。 必要な機能をしぼって、軽量かつ汎用的にしてみました。 まずはデモ デモページ 五木川ダムの渋い魅力はアダルトな感じがするので、年齢認証を設置してみました。 モーダルウインドウは、シックに単色背景透明で作ってみましたが、見た目はCSSで自由に変更できます。 必要なもの Javascript を3つ使います。 ・jQuery ・jquery.cookie.js ・modalConfirm.js jQueryはGoogleライブラリから直接読み込みましょう。 のこり2つのファイルはアップロードしてヘッダ内で読み込みます。 <script type="text/javascript" src="http
【メモ】プルダウンメニューにおける選択した選択肢の取得（JavaScript, addEventListener, changeイベント）
特定非営利活動法人natural science は、知的好奇心がもたらす心豊かな社会の創造にむけて、 現代社会では実感する機会の少ない科学や技術のプロセスを可視化・共有化する場づくりを通じて、 科学を切り口とした地域づくりを目指す、若手主体の団体です。 | More ≫ HTMLはユーザーとのインタラクティブのためのインターフェースが充実しています。 select要素を用いるとプルダウンメニューを作成することができ、JavaScriptを用いるとユーザーが選択した選択肢を即座に取得することができます。 select要素によるプルダウンメニューの作成方法 プルダウンメニューの選択肢はselect要素の子要素に、選択肢の数だけoption要素を用意することで作成することができます。 <select id="word"> <option value="none">選択してください</optio
JavaScript セレクトボックスの値を取得/設定する | ITSakura
セレクトボックスとは 以下は実際のセレクトボックスです。値を選択できます。 上記セレクトボックスのhtmlのコードです。 <select id="select1"> <option value="1">red</option> <option value="2">yellow</option> <option value="3">blue</option> </select> セレクトボックスは、値を選択するときに使用します。利用者は文字入力が不要です。 以下の名称でも呼ばれます。 ・ドロップダウンリスト ・プルダウンメニュー ・ドロップダウンメニュー 選択された値はJavaScriptで取得できます。 getElementByIdメソッドでvalue値を取得する ボタンを押すとセレクトボックスの選択した値を取得するサンプルです。 getElementByIdメソッドを使用します。フォーム
文字列 → 数値実体参照変換
入力した「文字列」を数値実体参照の形に変換します。 入力された文字列はサーバに送信されません。 (基本的にはローカルで処理されます。) 文字列
XSS フィルター回避チートシート - OWASP
この資料は、アプリケーションのセキュリティテストを行う技術者に、クロスサイトスクリプティングのテストを支援するガイドを提供することに重点を置いています。この資料の初期版は、RSnake から OWASP に寄付されたもので、彼のセミナーの XSS チートシートが元になっています(http://ha.ckers.org/xss.html)。現在このサイトにアクセスすると、この新しいサイトにリダイレクトされるようになっており、今後はここで保守や強化が行われる予定です。最初に作成された OWASP 対策チートシート、XSS (クロスサイトスクリプティング) 対策チートシートは、RSnake の XSS チートシートをベースにしています。彼に謝意を表します。私たちは、攻撃に関する複雑なチートシートにあらゆる巧妙なトリックを列挙して、とにかくこれらを防ぐアプリケーションを構築せよと開発者に言うのでは
しぃペインターをGoogle Chromeで使う｜さとぴあ
この拡張機能をGoogle Chromeに入れるだけでJavaアプレットが使えるようになります。Javaプラグインは必要ありません。 許可したサイトでしか起動しないので拡張機能のアイコンをクリックして許可します。 これで、これまでJavaプラグインで動いていたJavaアプレット=しぃペインターが使えるようになりました。 タブレットのデジタルインク機能をオフにするWindows10でデジタルインク機能を使うとスマートフォンのようにペンでブラウザをスクロールする事ができます。 しかし、その状態でしぃペインターを使うとキャンバスがペンと一緒にスクロールして絵を描く事ができません。ワコムタブレットの設定でWindows Inkをオフにします。 PaintBBS NEOは2019年の今も開発者によるメンテナンスされているHTML5の新しいアプリなのでデジタルインク機能がONでも描けます。iPadやス
with - JavaScript | MDN
非推奨;: この機能は非推奨になりました。まだ対応しているブラウザーがあるかもしれませんが、すでに関連するウェブ標準から削除されているか、削除の手続き中であるか、互換性のためだけに残されている可能性があります。使用を避け、できれば既存のコードは更新してください。このページの下部にある互換性一覧表を見て判断してください。この機能は突然動作しなくなる可能性があることに注意してください。 メモ: with 文の使用は推奨されません。混乱を招くバグや互換性問題の原因となる可能性があり、最適化ができなくなり、厳格モードでは禁止されているからです。推奨される代替案は、プロパティをアクセスしたいオブジェクトを一時変数に割り当てることです。
ツイートボタンのカスタマイズまとめ。
「ツイートする」ボタンをカスタマイズして、ボタンをクリックするとモバイルツイッターから投稿できるようにしたり、iPhoneならばTwitterアプリから投稿できるようにしてみる。 まずは公式ボタン。公式ページからソースコードを取得できます。 「カウント数の表示なし、おすすめのユーザーなし、ボタンが表示されるページのタイトルを含む、ボタンが表示されるページのURLを含む」という設定のコードはこんな感じ。 <a href="https://twitter.com/share" class="twitter-share-button" data-count="none" data-lang="ja">ツイート</a><script type="text/javascript" src="//platform.twitter.com/widgets.js"></script>
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
[HTML5] Canvasで描く色を自由に選ぶUI - YoheiM .NET