カテゴリー「HTML・CSS・JS関連」の14件の記事

2016年8月 1日 (月)

[Canvas]Windowサイズに合わせてCanvasをリサイズ

最近、HTML5でJavaScriptから図を描くことができるCanvasについて、興味を持ち始めました。
手始めに、Windowサイズに合わせてCanvasサイズをリサイズしたいぞと思ったら、CSSによる指定も含め純粋な縦横100%指定ができないことが判明(´・ω・`) あぁ、JavaScriptでガシガシ書けとおっしゃいますか。そうですか。
というわけで、さっそく作成してみました。



動作としては、ウィンドウをリサイズすると、ウィンドウサイズに合わせてCanvas領域をリサイズするだけです。
それにしてもHTML5は、各タグの記述がかなり省略できるようになったのが良いですね!(  ̄▽ ̄)b
今回のサンプルは、IE8以前は未サポートです。(けれど、uupaa-excanvas.js か ExplorerCanvas(excanvas.js)で対応可能になるかと思います。

続きを読む "[Canvas]Windowサイズに合わせてCanvasをリサイズ"

| | コメント (0) | トラックバック (0)

2016年5月 4日 (水)

[Web作成] 通知メッセージ

Web作成で何かしら実行したときに画面中央に通知メッセージを表示する場面が必要となったため、作成してみました。

動作方法として、通知用のボタンをクリックしたら、画面中央に通知メッセージをフェードイン表示し、一定時間表示したら、表示をフェードアウト。

連続して通知メッセージを表示した場面は、最後の通知メッセージが正しくフェードイン・アウトを行うように対応しました。

仮の動作として、通知ボタンを押したら、通知ボタンの内容で通知メッセージを表示するようにしています。

動作は次の通り。

  • 通知1
  • 通知2
  • 通知3


IE6などサポート切れとなった古いブラウザは動作未確認です( ̄▽ ̄;)
一応IE11とChromeにて動作確認済みです。

続きを読む "[Web作成] 通知メッセージ"

| | コメント (0) | トラックバック (0)

2013年8月26日 (月)

[JS] ストップウォッチ

JavascriptでPCブラウザとスマートフォン(iPhone,Android)用ブラウザにも対応したストップウォッチを作ってみたいと思い、試しに作ってみました。(  ̄▽ ̄)ノ

経過時間 :
 

スタートボタンで1ミリ秒単位でカウント開始、ストップボタンで一時停止。クリアボタンでカウントを0クリア。

続きを読む "[JS] ストップウォッチ"

| | コメント (0) | トラックバック (0)

2012年7月 4日 (水)

[Web作成] アコーディオンメニュー

2012年5月22日の「メニューの展開と折りたたみ : すべて展開とすべて折りたたみ」記事のコメント欄で、「展開した部分が他の部分を展開した際に自動で閉じるというようなことはできますでしょうか?」というリクエストに応えてみました。

実際の動作は次の通り。

メニュー1
メニュー2
メニュー3

※2010年3月11日の「メニューの展開と折りたたみ」のjavascript部に一部機能追加することで、アコーディオンメニューを実現。

続きを読む "[Web作成] アコーディオンメニュー"

| | コメント (5) | トラックバック (0)

2012年5月22日 (火)

[Web作成] メニューの展開と折りたたみ : すべて展開とすべて折りたたみ

2010年3月11日の「メニューの展開と折りたたみ」記事のコメント欄で、「すべて展開」と「すべて折りたたみ」を実現する方法の質問がありましたので、前回のソースコードに追加する形で作ってみました。
.oO( ・・・といっても、クリック時にクラス名を一括置換してるだけですが。 )
・すべて展開
・すべて折りたたむ
メニュー1
メニュー2
メニュー3

続きを読む "[Web作成] メニューの展開と折りたたみ : すべて展開とすべて折りたたみ"

| | コメント (6) | トラックバック (0)

2011年6月27日 (月)

[CSS] divのみで縦横可変幅の縦の三段組

以前の記事「divのみの可変幅で高さが揃った縦の三段組」をさらに発展させて「divのみで縦横可変幅の縦の三段組」を作ってみました。(  ̄▽ ̄)ノ
もちろん三段組の高さは揃えた状態で、画面一杯まで上下左右共に伸縮するもので。
対応ブラウザは、IE(6以降)、Chrome、Firefox、Safari、Operaの現時点の日付バージョンで確認済み。

Html_

続きを読む "[CSS] divのみで縦横可変幅の縦の三段組"

| | コメント (0) | トラックバック (0)

2011年6月25日 (土)

[CSS] ブロック要素を画面中央に表示

今回は、CSSとDIVのみで、単一のブロック要素を画面中央に表示するものを作ってみました。
特にCSSのみでIE6に対応させるために、かなりトリッキーなことをしていますが詳しい説明は省略します。(笑)
対応ブラウザは、IE(6以降)、Chrome、Firefox、Safari、Operaの現時点の日付バージョンで確認済み。
Photo

続きを読む "[CSS] ブロック要素を画面中央に表示"

| | コメント (0) | トラックバック (0)

2011年6月22日 (水)

[CSS] divのみで可変幅の高さが揃った縦の三段組

昨日に引き続き、さらに表示方法を発展させた「divのみの可変幅で高さが揃った縦の三段組」を作ってみました( ̄▽ ̄ )ゞ すなわちページ幅一杯まで伸縮する縦の三段組です。
対応ブラウザは、IE(6以降)、Chrome、Firefox、Safari、Operaの現時点の日付バージョンで確認済み。

header
1
2
3
1
2
3
4
5
6
1
2
3
4
5
6
7
8
9
10




続きを読む "[CSS] divのみで可変幅の高さが揃った縦の三段組"

| | コメント (0) | トラックバック (0)

2011年6月21日 (火)

[CSS] divのみで縦の三段組(高さ揃え)

つい最近、たまたま知恵袋を見たら「divのみでそれぞれ内容量の異なる縦の三段組の高さを揃えたい」という解決済みの質問を見かけたのですが、ベストアンサーの回答を見るとjavascriptを使わなくても、CSSのみで実現できる気がしたので試しに作ってみました。(  ̄▽ ̄)ノ もちろん内容量に応じて自動で高さが揃うしくみで!
対応ブラウザは、IE(6以降)、Chrome、Firefox、Safari、Operaの現時点の日付バージョンで確認済み。

header
1
2
3
1
2
3
4
5
6
7
8
9
10
1
2
3
4
5
6




続きを読む "[CSS] divのみで縦の三段組(高さ揃え)"

| | コメント (0) | トラックバック (0)

2010年9月 6日 (月)

[Javascript] Lightboxの作成

数年前からWebページ上の縮小画像等をクリックすると、同一画面上に拡大画像が表示され、拡大画像を閉じると元の画面に戻る機能が色んなサイトで一般的に使われるようになりました。
この機能をLightbox(ライトボックス)と呼ぶそうですが、プログラミング好きとして興味本位で独自に作ってみました(  ̄▽ ̄)ノ
しかも画像だけでなく外部サイトの表示もできるようなものとして、以下のリンク文字列をクリックすると、同一画面上にリンク先の中身を表示し、黒半透明背景をクリックすると元の画面に戻ります。
対応ブラウザは、IE(6以降)、Chrome、Firefox、Safari等でたぶん動くと思います。(何かと抜けはあるだろうけど)

画像1
画像2
画像3
Yahoo!
YouTube

続きを読む "[Javascript] Lightboxの作成"

| | コメント (0) | トラックバック (0)