電脳麻将HTML5 + Javascriptで動作する麻雀アプリ
JavaScript の MIME タイプが `text/javascript` に統一されようとしている
現在、 JavaScript の MIME タイプは2006年4月に公開された RFC 4329(www.rfc-editor.org) にて text/javascript (OBSOLETE) application/javascript (COMMON) text/ecmascript (OBSOLETE) application/ecmascript (COMMON) の4つが定義されています。 この RFC 4329 では text/* の2つは OBSOLETE 扱いな一方で、 JavaScript を呼び出す HTML の仕様では HTML5 以降、 <script> 要素の type 属性を省略することが推奨 されたうえで、省略時の値は text/javascript である とされました。 このように RFC 側と HTML 側で矛盾が生じる事態が長い間続いています。 実
行列固定テーブル
行数: 列数: ダミー: 行列を適当に入力して実行してみましょう。 スクロールバーを動かしてみると、行列が固定されたテーブルであることが分かります。 HTMLでも少し工夫をすれば、EXCELのように行列固定テーブルを作ることが可能です。 行列固定テーブル用のライブラリもありますが、これぐらいは自前で作れるようになっておいたほうがよいでしょう。 では、ロジックの説明をします。行数7,列数7の場合で説明します。 まず、HTMLから見ていきます。 DIVを4つ作成し、それぞれのDIVの子要素にTABLEを指定します。 右上のテーブル(topLeftTable)だけtr,tdがありますが、これは行数列数に依存しないためです。 次にCSSを見ていきます。 注目すべきは、#topRightAreaと#bottomLeftAreaのoverflowがhiddenになっている箇所と、 #bottomRig
HTMLやCSSやJavaScriptなどのコードをかっこよく魅せるために使用できる無料ツールのまとめ
HTMLやCSSやJavaScriptなどのコードをかっこよく魅力的に見せるために使用できるツールを紹介します。 プレゼンなどでコードを人に見せる時をはじめ、TwitterやFacebookやInstagram用にコードの画像を最適化して見せることもできます。 6 Awesome Ways To Present Your Code 🔥 by Niharika Singh ⛓ 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに Carbon Codeimg.io Pastie Rust Playground Silicon Polacode はじめに Web制作者はいつか、コードを発表する時がくるかもしれません。プレゼン、ツイート、ブログ、あるいはスニペットを人に見せる時です。 あなたのコードを素敵に見せるために使用できる
jQuery でセレクトボックスのプルダウン項目（option 要素）を追加／削除する方法
フォームオブジェクトの中でも、セレクトボックスの操作は少し特殊です。記述方法を覚えてしまえば問題ないのですが、同じようなミスをして調べる機会が多いのもセレクトボックスの特徴ではないでしょうか。 jQuery を使えば、様々な需要に合った操作ができるようになります。ここではプルダウン項目の追加・削除について触れますが、基本となるセレクトボックス操作の知識は必要不可欠なので、ぜひ次の記事も一緒に確認していただければと思います。
Wikiの記述にHTMLタグを使用したい — Redmine.JP
Redmine 5.0は3つのテキスト書式「Textile」、「Markdown」、「CommonMark Markdown」に対応していますが、このうち Markdown と Textile についてはセキュリティ上の理由からHTMLタグの使用が制限されています。 HTMLタグを使用したい場合のテキスト書式ごとの対応 HTMLタグを使用する方法は現在選択されている「テキスト書式」の設定（「管理」→「設定」→「全般」画面）により異なります。 CommonMark Markdown CommonMark MarkdownではそのままでHTMLタグが使用可能です。特別な対応は不要です。 Markdown 「テキスト書式」の設定（「管理」→「設定」→「全般」画面）を「CommonMark Markdown」に変更してください。Redmine内部で使用されるMarkdownエンジンが Redcar
document.フォーム名.action－JavaScriptリファレンス
HTML + JavaScriptソース <script> <!-- function sample() { document.sampleform.action="sample/formresult.php"; document.sampleform.method="get"; } // --> </script> <form name="sampleform" onSubmit="sample()"> <input type="text" name="sampleinput" value="あいうえお"> <input type="submit" value="送信する"> </form>
【Javascript】colspan、rowspanをJavascriptでセットするとき at softelメモ
テーブル（table）要素をjavascriptで動的に生成、操作するとき、colspan、rowspanをセットするときは、属性名をcolSpan、rowSpanで指定する。全部小文字で大丈夫な場合もあるが、現時点では素直にcolSpan、rowSpanと、Sを大文字で書くのがよさそう。 以下の説明で、変数 td や ID #xxxx は適当なTD要素とする。 基本は col”S”pan と大文字にする //直に td.colSpan = "3" //DOM関数で td.setAttribute("colSpan", "3") //jQueryで $("#xxxx").attr("colSpan","3") 今風の書き方 + 最近のブラウザ（Firefox、IE8、Chromeなど）の組み合わせなら、小文字でも大丈夫だった 古いブラウザ（IE7など）はダメ。 //DOM関数で td.se
jQuery から Vue.js へのステップアップ - Qiita
はじめに 最近耳にする Vue.js（ビュージェイエス） ってどんなもの？ jQuery とどう書き方違うの？とか、jQuery でやってたこういう事って Vue.js だとどうやるの？jQuery しか使ってないけど Vue.js も使ってみたいなぁ～と思っている人向けの小難しいことは省いた記事です。私もそちら側から来たものです。 Vue.js 日本公式ページ（日本語翻訳率が半端ないと評判） もともと「jQuery から Vue.js への移行」というタイトルでしたが、それだと jQuery を完全にやめる、的なニュアンスになってしまうので、少し変更しました🐹 jQuery と Vue.js の違い jQuery は、セレクタ操作に特化したライブラリで HTML の一部をちょっとだけ弄るには手軽に扱えます。更新のたびにセレクタから要素を探して操作をするため、複数の UI を連携させるよ
How to scroll to an element inside a div?
I have a scrolled div and I want to have an event when I click on it, it will force this div to scroll to view an element inside. I wrote its JavasSript like this: document.getElementById(chr).scrollIntoView(true); but this scrolls all the page while scrolling the div itself. How to fix that? I want to say it like this: MyContainerDiv.getElementById(chr).scrollIntoView(true);
けものフレンズっぽいロゴのジェネレータができたよ！ - Qiita
けものフレンズのロゴってカラフルでかわいいですよね！そんなわけで、けものフレンズっぽいロゴを作れるジェネレータをつくりました。たぶんだいたいのブラウザで動くと思います。（ただしＩＥはブラウザではないものとする。また、一部のブラウザでセキュリティ制限のため保存ができないという情報が入っています） けものフレンズ ロゴジェネレータ つかいかた！ 使いかたはサーバルちゃんでもわかるくらい簡単！テキストボックスに文字を入れれば、それがそのままロゴの文字に反映されます。あとはそのロゴの画像を右クリックとかそういうので保存すればＯＫです。下の方にダウンロードボタンもつけたので、これを押しても保存できます。ロゴの画像は背景が透明のPNG画像なので、何かの素材としてお使いください。なお、カラーリングや文字の傾きなんかは、ページを再読み込みをするとランダムに変化します。配色が気に入らない場合は再読み込みして
ファイルアップロードをajaxで行う IE対応 - AUSGANG SOFT
ファイル選択をしたら自動的にajaxでアップロードする機能をつくっていたのだけど、やっぱりIE対応でつまづいた。いちおうIE8対応を目指した。 ajax送信は、このライブラリを使用。 jQuery Form Plugin http://malsup.com/jquery/form/ そのままだとIEで動かない。 596行目のfinallyがIEではエラーになるので、コメントアウト。 次、ファイル選択で自動アップロードしたかったので、jQueryのchangeイベントで処理を書いたが発火してくれない。 jQueryのchangeイベントで気をつけること http://d.hatena.ne.jp/sho-yamasaki/20120319/1332168988 onchangeならうまくいくらしい。 あと、ファイル選択部分を以下をつかって整えた。 JavaScript · Jasny Boo
[JavaScript] FormDataの使えないIE8やIE9での代替策 : してログ - LANDHERE
FormData があると Ajax でファイルアップロードできるようになって大変便利なのですが、困るのが IE8 と IE9 の対応です。 IE10 からは FormData が使えますが、未だに IE8 の要求は来ます。 かつての IE6 のポジションを受け継いでいる臭が漂っています。 諦めて POST で画面リロードするところでしたが、ちゃんと調べて見ると代替策がありました。 使うのは POST ですが、見せ方としては非同期通信っぽく動きます。 サンプルコードは載せませんが、要点を箇条書きにしますので、参考にしてください。 親ページに iframe を配置して見えないようにします（display:none だと Safari でまずいみたいなので、横幅＆縦幅をゼロにします） フォームのターゲット要素（target="<iframe名>"）で、配置した iframe を指定します サー
PhpStormで他の言語を埋め込む - Qiita
PhpStormには、PHPのコード中の一部をPHP以外の言語として扱えるLanguage Injectionという機能があります。 文字列の中にHTMLやSQLを書いたときに自然とハイライトされるアレです。 ちなみにSQLはPhpStormでDBの接続設定を行うとテーブルやカラム名の補完やチェックも行ってくれます。すごい。(実際の設定は割愛します) 通常の文字列中で、自動的に言語の判別をしてくれるのはHTMLやSQLの一部の言語だけで、それら以外は手動でLanguage Injectionを設定することが出来ます。alt + Enterで現れるコンテキストメニューからLanguage Injectionを選択し、候補から選ぶことが出来ます。 シンタックスチェックが行われるのでプレーンテキストではわかりにくかったシンタックスエラーが一目瞭然です。文字列中にHTMLやjavascriptを埋
静的サイトで JS/CSS のキャッシュを防ぎつつレポジトリをキレイに保つ
「ABOUT」のページをリニューアルしました。 １つ前のデザインのままだったものを、現在のデザインに沿って作りなおして、ついでに文章やレイアウトなども整えました。 公開したものの問題発生 意気揚々と公開してみたのですが、１つ問題が見つかりました。 ページを公開したあと、本番環境を表示するとデザインが崩れていました。そのあと、ページをリロードすると期待通りの結果になりました。 原因は CSS がキャッシュされていた ことでした。 たとえページが更新されていたとしても、JavaScript や CSS は古いキャッシュを使い続けてしまうことがあります。 で、この問題に対処しようとしたのですが、「静的生成」「生成結果を GitHub で管理」「キャッシュ問題への対策」の 3 つのいいとこ取りをしようとすると、意外に複雑でした。 その話をいまからします。 キャッシュ問題の一般的な解決策 よく見る解
beforeunload
このイベントによって、ウェブページがダイアログボックスを表示し、ユーザーにページを終了するかどうかの確認が求めることができます。ユーザーが確認すれば、ブラウザーは新しいページへ遷移し、そうでなければ遷移をキャンセルします。 仕様書によれば、確認ダイアログを表示するためにはイベントハンドラーでイベントの preventDefault() を呼び出すことになっています。 しかし、すべてのブラウザーがこのメソッドに対応しているわけではなく、一部はイベントハンドラーに古い方法二つのうちの一つを実装するよう求めていることに注意してください。 イベントの returnValue プロパティに文字列を代入する イベントハンドラーから文字列を返す 一部のブラウザーでは返された文字列を確認ダイアログで表示するために使用し、イベントハンドラーがユーザーに独自のメッセージを表示できるようにしていました。しかし、
location.href（リンク）-JavaScript入門
HOME JavaScript入門 location.href（リンク） ここから、リンク関係のJavaScriptについて解説していきます。 まず始めは、普通にリンクを貼る方法です。 <a href="">と動作は同じです。 FORMのボタンにリンク指定したりする場合に使います。 location.hrefの記述 別ページに移動するには、以下のように記述します。 location.href="URL" 指定したURLへジャンプする <script> function jump(){ if (confirm("トップページに戻りますか？")==true) //OKならTOPページにジャンプさせる location.href = "https://www.pazru.net/"; } </script> <input type="button" name="link" value="TOPへ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
アイロボット公式オンラインストア
DESIRE 中森明菜 - 歌詞タイム
Code Babies