ウェブ学のすすめ

Study of Web Design & Programing

JavaScript

簡単なjQueryでtableにアコーディオンを実装する方法

jQueryを使ってテーブル内でアコーディオンするための方法をご紹介します。 開くボタンを押すと隠れていたコンテンツが開閉するようになっています。 テーブルをすっきり見せたいけど詳細なども表示させないといけないときのUIとして参考になるかもしれませ…

DOMを使用したアニメーション

DOMを使用してアニメーションを作ってみました。CSS3を使っていないのでIEでもアニメーションが動きます。

Google Maps JavaScript APIを使ったルート検索

プレビュー ↓別ウィンドウを開いて見る ルート検索マップ(詳細)

JavaScriptでCSSを切り替える「styleswitch.js」

サイトに訪れたユーザーがページ上で簡単にスタイルシートを切り替えることができる方法を調べてみました。 いくつか方法がありましたが「styleswitch.js」で切り替える方法をご紹介します。 ↓別ウィンドウを開いてみる JavaScriptでCSSを切り替える「styles…

Google Maps APIの使い方(Google Maps JavaScript API V3)

Google Maps API(Google Maps JavaScript API V3)を使ってページにGoogleマップを表示させてみました。↓別ウィンドウを開いて見る Google Maps APIを使ってGoogleマップを表示 - js do itステップ1:HTML ソースコード <html lang="ja"> <head> <meta charset="UTF-8"> </meta></head></html>

Jimdoのデフォルトレイアウトにsmoothscrollを導入する方法

ステップ1:ヘッダー部分を編集 管理画面の「設定」>「ヘッダー部分を編集」 ステップ2:smoothScroll.js smoothScroll.jsをコピーしてscriptタグで囲んで記述欄にペーストし、「保存」をクリック <script> コピーしたソースコード </script> ステップ3:ウィジェット/htm…

画像スライドメニュー

プレビュー ↓スマートフォンの方はこちらからプレビューできます。 画像スライドメニュー コード HTML <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=yes, initial-scale=1, maximum-scale=1"> <meta name="apple-mobile-web-app-capable" content="yes"> <title>画像スライドメニュー</meta></meta></meta></head></html>

【Yetii】〜Yet (E)Another JavaScript Tab Interface Implementation〜

Yetii - Yet (E)Another JavaScript Tab Interface Implementation | kminek.pl プレビュー ↓スマートフォンの方はこちらからプレビューできます。 Yetii コード HTML <html lang="ja"> <head> <meta charset="UTF-8"> <title>Yetii</title> <link rel="stylesheet" href="css/style.css"> <script src="js/yetii-min.js"></script> </link></meta></head></html>

JavaScriptとCSSだけで1ページに複数のクロスフェードを動作させる

Javascript / CSS Crossfader : CSS . XHTML . Javascript . DOM : Brand Spanking New ポイント 必要なのは「bsn.Crossfader.js」のみ id 属性を任意で付けておく var 変数名 = new Crossfader( new Array('id名','id名','id名'), クロスフェード時間, 静止…

DOMで作る折りたたみ式記事

プレビュー ↓スマートフォンの方はこちらからプレビューできます。 DOMで作る折りたたみ式記事 - js do it コード HTML <html lang="ja"> <head> <meta charset="UTF-8"> <title>まずはやってみる:方丈記編</title> <link rel="stylesheet" href="sample01.css"> <script src="1_01.js"></script> </link></meta></head></html>

DOMでイベントとタイミングを記述〜アラート表示〜

プレビュー ↓スマートフォンの方はこちらからプレビューできます。 DOMでイベントとタイミングを記述 - js do it コード HTML <html lang="ja"> <head> <meta charset="UTF-8"> <title>DOMでイベントとタイミングを記述</title> <script src="dom_click.js"></script> <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> </meta></head></html>

DOMで文字色を変える

プレビュー ↓スマートフォンの方はこちらからプレビューできます。 DOMで文字色を指定 コード <html lang="ja"> <head> <meta charset="UTF-8"> <title>DOMで文字色を指定</title> </meta></head></html>

配列で作る商品の単価と在庫の関係の表組み|実践課題F

プレビュー PC版 配列で作る商品の単価と在庫の関係の表組み - jsdo.it - share JavaScript, HTML5 and CSS スマートフォン版 配列で作る商品の単価と在庫の関係の表組み - js do it コード <html> <head> <meta charset="utf-8"> <title>配列</title> <style> body { font-family: "ヒラギノ角ゴ Pro W3", "Hiragino</meta></head></html>…

配列で作る商品の単価と個数の関係の表組み|実践課題E

プレビュー PC版 配列で作る商品の単価と個数の関係の表組み - jsdo.it - share JavaScript, HTML5 and CSS スマートフォン版 配列で作る商品の単価と個数の関係の表組み - js do it コード <html> <head> <meta charset="utf-8"> <title>配列</title> <style> body { font-family: "ヒラギノ角ゴ Pro W3", "Hiragino</meta></head></html>…

配列の演算|実践課題D

プレビュー PC版 配列の演算 - jsdo.it - share JavaScript, HTML5 and CSS スマートフォン版 配列の演算 - js do it コード <html> <head> <meta charset="utf-8"> <title>配列</title> <style> body { font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "MS Pゴシッ</meta></head></html>…

配列でリンクを表示|実践課題C

プレビュー PC版 配列でリンクを表示 - jsdo.it - share JavaScript, HTML5 and CSS スマートフォン版 配列でリンクを表示 - js do it コード <html> <head> <meta charset="utf-8"> <title>配列</title> <style> body { font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka</meta></head></html>…

配列で表組みを表示|実践課題B

プレビュー PC版 配列で表組みを表示 - jsdo.it - share JavaScript, HTML5 and CSS スマートフォン版 配列で表組みを表示 - js do it コード <html> <head> <meta charset="utf-8"> <title>配列</title> <style> body { font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka</meta></head></html>…

おみくじをランダム表示|実践課題A

プレビュー PC版 おみくじをランダム表示 - jsdo.it - share JavaScript, HTML5 and CSS スマートフォン版 おみくじをランダム表示 - js do it コード <html> <head> <meta charset="utf-8"> <title>配列</title> <style> body { font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiry</meta></head></html>…

JavaScriptにおける配列の書き方(1つの要素に複数の情報を格納したい場合)

プレビュー PC版 JavaScriptにおける配列の書き方(1つの要素に複数の情報を格納したい場合) - jsdo.it - share JavaScript, HTML5 and CSS スマートフォン版 JavaScriptにおける配列の書き方(1つの要素に複数の情報を格納したい場合) - js do it コード <html lang="ja"> <head> <meta charset="utf-8"></meta></head></html>…

JavaScriptにおける配列の書き方

プレビュー PC版 JavaScriptにおける配列の書き方(1) - jsdo.it - share JavaScript, HTML5 and CSS スマートフォン版 JavaScriptにおける配列の書き方(1) - js do it コード <html lang="ja"> <head> <meta charset="utf-8"> <title>配列</title> </head> <body> <script> var member = ['佐藤','伊藤','山田']; alert(member[2]+'さん');</body></html>…

JavaScriptで作る複利計算プログラム

複利とは 複利(ふくり)とは、複利法によって計算された利子のこと。複利法とは、元金によって生じた利子を次期の元金に組み入れる方式であり、元金だけでなく利子にも次期の利子がつく。新元金=元金+元金×利率 =元金×(1+利率)引用:複利 - Wikipedia …

JavaScriptで作る九九表

プレビュー↓PC版JavaScriptで作る九九表 - jsdo.it - share JavaScript, HTML5 and CSS ↓スマートフォン版JavaScriptで作る九九表 - js do it コード <html lang="ja"> <head> <meta charset="utf-8"> <title>九九の対数表</title> <style> table { border-collapse: collapse; } td,th { width: 50px; border: 1px solid #000;</meta></head></html>…

標準体重計算プログラム ver 2.0|男女別

プレビュー PC版 標準体重計算プログラム ver 2.0|男女別 - jsdo.it - share JavaScript, HTML5 and CSS スマホ版 標準体重計算プログラム ver 2.0|男女別 - js do it コード <html> <head> <meta charset="utf-8"> <title>標準体重</title> </head> <body> <script type="text/javascript"> var height; var weight; var man; man = confirm("あなたは男</body></html>…

ドルから円に換算を表示するJavaScript|【J14】

課題 【J14】 ドルから円に換算を表示するJavaScriptを記述しなさい。入力された数値を換算して、以下のように表示します。引用:練習課題(2) - Webデザインの勉強|忘筌 解答 PC版 ドルから円に換算を表示するJavaScript|【J14】 - jsdo.it - share Java…

成人かどうか判定する|【J13】

課題 以下のように表示するJavaScriptを記述しなさい。年齢が20歳以上であったら、以下のように表示されます。引用:練習課題(2) - Webデザインの勉強|忘筌 解答 PC版 成人かどうか判定する|【J13】 - jsdo.it - share JavaScript, HTML5 and CSS スマホ…

prompt(文字列)|【J12】

課題 【J12】以下のように表示するJavaScriptを記述しなさい。引用:練習課題(2) - Webデザインの勉強|忘筌 解答 PC版 prompt(文字列) - jsdo.it - share JavaScript, HTML5 and CSS スマホ版prompt(文字列) - js do it コード <html lang="ja"> <head> <meta charset="utf-8"> <title>【J12】</title> </head> <body> <script type="text/javascript"> var me</body></html>…

「長いメッセージの場合は、 エスケープシーケンスで改行します。」 と表示するJavaScript|【J11】

課題 【J11】「長いメッセージの場合は、 エスケープシーケンスで改行します。」 と表示するJavaScriptを記述しなさい。練習課題(2) - Webデザインの勉強|忘筌 解答 PC版 「長いメッセージの場合は、 エスケープシーケンスで改行します。」 と表示するJav…

1年が何秒かを表示するJavaScript|【J10】

課題 【J10】1年が何秒かを表示するJavaScriptを記述しなさい。練習課題(2) - Webデザインの勉強|忘筌 解答 PC版 1年が何秒かを表示するJavaScript|【J10】 - jsdo.it - share JavaScript, HTML5 and CSS スマホ版1年が何秒かを表示するJavaScript|【J1…

標準体重計算プログラム

プレビュー PC版 標準体重計算プログラム - jsdo.it - share JavaScript, HTML5 and CSS スマホ版標準体重計算プログラム - js do it コード <html lang="ja"> <head> <meta charset="utf-8"> <title>標準体重</title> </head> <body> <script type="text/javascript"> var height; var weight; height = prompt('身長を入力してください',170); height = pars…</body></html>

平成を西暦に変換する

document.writeバージョン 平成を西暦に変換する|document.writeバージョン - jsdo.it - share JavaScript, HTML5 and CSS <html lang="ja"> <head> <meta charset="utf-8"> <title>平成を西暦に変換する</title> </head> <body> <script type="text/javascript"> var heisei; var fullYear; var message; heisei = 24; fullYear = heisei…</body></html>