HTML, CSS

HTML5の markタグ

aaaaa強調するbbbbb aaaaa<mark>強調する</mark>bbbbb

JavaScript で i 番目のボタンが押された時に処理をする方法

ここを読んでいて、(本文とはあまり関係がないけれど)では i 番目のボタンが押されたときに i を使って処理をするには、どうしたらよいかと考えた。ただし、HTML の中に onclick を書いて処理したくない(全部ちがう関数名にしないといけないので)。これ…

Ruby でウェブ魚拓してみる

下はまともなプログラムではないので、無視して下さい。(2018/4/15) 有名な「ウェブ魚拓」というウェブ・サービスがあって、ウェブページを保存するのに便利だが、ページの内容によってはすぐに削除されてしまうので、自分でつくってみた。使い方は、ruby …

HTML5 の Canvas でしょうもないものを作った(その2)

こちら。今度は円が動きます。続編はこちらです。

HTML5 の Canvas でしょうもないものを作った

こちら。前回のエントリと同じものを、HTML5 の Canvas で作ってみました。マウスでクリックしたところに円を描きます。ランダムな色がちょっとキレイかな。

JavaScript で(サムネイル)画像を画面の好きな位置に表示する

変数 url は画像の URL です。位置は (100, 50)、サムネイル画像の横幅は 200px です。 画像をクリックすると画像を原寸大で別ウィンドウに表示します。HTML <div id="pic"></div> JavaScript var nd = document.getElementById("pic"); var url = "http://hoge.jpg" //画像URL d…

サイドバーのスライドショーを作ってみる

サイドバーに小さなスライドショーのスペースを作ってみました。クリックすると大画面のスライドショーのページに飛びます。 そこでハマったことですが、JavaScript で画像の大きさを設定したい場合、僕の持っている『JavaScriptリファレンス 第6版』では、 …

はてなブログでキーワードのアンダーラインを表示させない

はてなブログでキーワードのアンダーラインを表示させたくない人は、「デザイン」→「カスタマイズ」→「デザイン CSS」のところに、a.keyword {border-bottom-color: transparent;} を追加すると消えます。

HTML5のcanvasを使ってみる

download /* canvas要素のノードオブジェクト */ var canvas = document.getElementById('myCanvas'); draw(); document.getElementById("dwl").href = canvas.toDataURL(); function draw() { /* canvas要素の存在チェックとCanvas未対応ブラウザの対処 */ …

jsdo.itというサイト

jsdo.it(参照)という、とても面白いサイトがある。JavaScriptとHTMLとCSSで作ったプログラムを、投稿できるサイトである。へえ、JavaScriptでこんなことができるのだ、という驚きがある。コードも公開されているので、JavaScriptの勉強にもすごくなる。ひ…

HTML5でファイルをダウンロードする

HTML5のdownload属性で、ファイルをダウンロードすることが出来るようです(参考)。下のリンクをクリックすると、あなたのPCにmp3ファイルがダウンロードされます。(Chrome推奨。IEとsafariではサポートされていないようです。) download <a href="URL" download="ファイル名">download</a> URLは…

HTML5のaudio, videoタグ

HTML5はおもしろい。audioタグで音楽の再生ができるのか。下はグールドの演奏です。こんな感じ。再生できません <audio src="URL" controls>再生できません</audio> ブラウザが対応していない場合は、「再生できません」が表示される筈です。 videoタグで動画も再生できる。これはまあ、You Tub…