サクサク読めて、アプリ限定の機能も多数！
トップへ戻る
アメリカ大統領選
www.shurey.com
JANコードチェッカー 13桁のJANコードからチェックデジット（C/D）を計算して入力ミスを指摘します。12桁の場合は、C/Dを計算して表示します。 8桁の短縮タイプにも対応し、7桁の場合はC/Dを計算して表示します。 JAN CODE: JANコードについては財団法人流通システム開発センター の解説ページを参照してください。 こちらにも計算方法が載っています。 <script language="JavaScript" type="text/JavaScript"> function cd_check() { //コード取得 s = document.form1.tf01.value; //短縮タイプの場合 if (s.length == 8) s = "00000" + s; else if (s.length == 7) s = "00000" + s; //処理分岐 if (s.
マイマップを使う マイマップを使うと必要なスポットを集めた自分専用の地図を作ることができます。 土台となる地図はGoogle Mapsそのもので、その上にマーカーを置きます。マーカーの１つ１つが目的地（スポット）であり、それらを集合させて表示するのがマイマップなのです。 例えば、好きな飲食店を集めてグルメマップを作ったり、名簿の住所にマーカーを置いて住所マップにしたり、寺社や史跡などで観光マップを作ることができます。 使用手順 １．Google Mapsにログイン https://maps.google.com/ にアクセスする。 Googleのアカウントでログインする。 ２．新規の地図を作成 マイプレイス＞マイマップ＞地図を作成 「マイプレイス」をクリック 「マイマップ」をクリック 「地図を作成」をクリック 新しい地図にタイトルと説明を記述する。 公開範囲には一般公開と限定公開があり、誰
赤字：JavaScriptの命令や重要なタグ／青字：用途に応じて変更する部分／緑字：変更可能な変数名やユーザー関数名 前のページ 読み込み時に動作 <script>タグ内にJavaScriptの命令を書き込むことで、ページの読み込みと同時に実行されます。 <script type="text/javascript"> <!-- （ここにスクリプトを記述） //--> </script> 使用例 <script type="text/javascript"> <!-- document.getElementById("text").innerHTML = "ようこそ私のページへ"; //--> </script> リンクをクリック（直接記述） <a>タグ内にスクリプトを直接記述します。 hrefには通常URLを記述しますが、「javascript:」から記述を始めることでJavaScript
赤字：JavaScriptの命令や重要なタグ／青字：用途に応じて変更する部分／緑字：変更可能な変数名やユーザー関数名 戻る 実例 例文 <span id="view_time"></span> <script type="text/javascript"> document.getElementById("view_time").innerHTML = getNow(); function getNow() { var now = new Date(); var year = now.getFullYear(); var mon = now.getMonth()+1; //１を足すこと var day = now.getDate(); var hour = now.getHours(); var min = now.getMinutes(); var sec = now.getSecond
このサイトでは共通のCSSを各ページに適用し、必要によってはページ内でCSSを上書きして使っています。 CSSをタグに設定すると、全てのタグに設定が行き渡ってしまいますが、HTMLのサンプルを作る場合、その見本部分ではCSSを解除する必要があります。 このように、CSSを設定したけれど、部分的に解除したい場合にプロパティを初期値に戻す方法があります。 スタイル設定 簡単なCSSを使って、共通のサンプルテキストを用意しましす。 サンプルテキスト .sample_text { color: #f00; font-size: 20pt; text-shadow: 2pt 2pt 2pt #09f; } <span class="sample_text">サンプルテキスト</span> <style>タグ内に、sample_textクラスを使ってテキストの色、文字サイズ、文字の影を設定しました。
[Labyrinthe Noir]>[Top]> JSすぐに使えるサンプル集 JavaScript を使った実用的なサンプルを提供します。 ソースと解説付きですので、JavaScriptの理解も進めながら、自分で応用できるようになります。
使い方 設定された目標日時までタイマーでカウントダウンします。 上記フォームで日時を設定するか、ワンタッチタイマーを押すとすぐにカウントダウンが始まります。 設定項目 表題
問題を表示し、三択から答えを選び、得点を競います。 問題数を増やしたり、三択の選択肢を変更しやすいように作ります。 改良すると、アンケート調査やテキスト型ロールプレイングゲームにもなります。 HTMLファイルの準備 メモ帳を使って基本的なHTMLファイルを作成します。 <!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>三択クイズ</title> </head> <body> <h1>三択クイズ</h1> <hr> </body> </html> ファイル名を「quiz.html」として保存します。 表示位置の作成 問題、解答の選択肢、解答結果を表示する３つのエリアを用意しましょう。 <!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>三択クイズ</tit
iPhone用の絵文字アプリ Emoji Free! を使って出力した絵文字の一覧表です。 WindowsやAndroidでこの表を見ることで比較が行えます。 一部の絵文字が、iOSのブラウザで見た時に元の絵文字と違うものが表示されています。 顔・感情
赤字：JavaScriptの命令や重要なタグ／青字：用途に応じて変更する部分／緑字：変更可能な変数名やユーザー関数名 戻る 同じ確率で表示 実例 例文 <form><input type="button" value="おみくじ" onClick="omikuji()"></form> <script type="text/javascript"> function omikuji() { rand = Math.floor(Math.random()*5); if (rand == 0) msg = "大吉"; if (rand == 1) msg = "中吉"; if (rand == 2) msg = "吉"; if (rand == 3) msg = "凶"; if (rand == 4) msg = "大凶"; alert(msg); } </script> 解説 ボタンを押すと
今月のカレンダー 万年カレンダーを作る前の今月のカレンダーを表示するシンプルなカレンダーを作っていきましょう。 それを土台として万年カレンダーを作ります。 構想を練る カレンダーと言っても色々な形式があります。 単純に今日の日付を表示するだけの場合もありますし、今月のカレンダーだけを表示したり、一年分のカレンダーを表示することもあります。 また、週と曜日で格子状に組み上げるばかりでなく、一覧にして行毎に並べたり、表示の余白を持たせてメモやイベントを表示することもあります。 今回は最終的に万年カレンダーとして使えるものを作っていきたいと思います。 まずは、今日の日付を表示するものを作り、今月分のカレンダーを作り、フォームと組み合わせて万年カレンダーへと発展させたいと思います。 HTMLファイルの準備 HTMLファイルの基本的なタグを用意します。 「calendar.html」と名付けて保存し
<input name="textfield" type="text" class="textField" id="tField0"> <select name="select" class="bsize" id="selBox0" onChange="getSelect(0,this.value)"> <option value="test1">test1</option> <option value="test2">test2</option> <option value="test3">test3</option> </select> <input type="button" class="bsize" value="ボタン" onclick="getText(0)">
赤字：JavaScriptの命令や重要なタグ／青字：用途に応じて変更する部分／緑字：変更可能な変数名やユーザー関数名 戻る 実例 画面サイズ： ウィンドウサイズ： 例文 <p>画面サイズ：<span id="ScrSize"></span></p> <p>ウィンドウサイズ：<span id="WinSize"></span></p> <script type="text/javascript"> //画面サイズの取得 getScreenSize(); //ウィンドウサイズの取得 getWindowSize(); //画面サイズを取得する function getScreenSize() { var s = "横幅 = " + window.parent.screen.width + " / 高さ = " + window.parent.screen.height; document.get
JavaScriptでHTMLのフォームをコントロールする基本仕様をタグの種類毎に解説します。 また、タグやフォームをコントロールするプロパティやメソッド、イベントについてまとめておきます。 タグ : FORM / INPUT / text / password / radio / checkbox / button / submit / reset / hidden / SELECT / TEXTAREA / LABEL プロパティ : form / text / radio / checkbox/ button /select / textarea | メソッド | イベントハンドラ ご注意 JavaScriptでHTMLのフォームの制御をするために必要な情報をまとめました。 HTMLやJavaScriptの基本的な学習はできていることを前提としていますので、省略して表記している部分も
機種依存の理由 日本語の文字コードにはJISコード表やシフトJISコード表などがあります。 さらに、これらコード表にメーカーが独自に拡張をした部分があるためユーザーが使用するコンピュータによって表示される文字が異なる部分が存在します。 よく Windows と Macintosh 間での文字の違いが見受けられます。これはメーカー独自の拡張部分が主な原因になっています。 MacOS では「細明朝体」を使用すると Windows の機種依存文字の一部が正常に表示されます。標準の「Osaka」フォントと比較をすると文字列が変化することがよく分かります。 JIS：ジス。Japanese Industrial Standard。通産省が定めた文字配列の規格（日本工業規格）。 EUC：Extended Unix Code。日本語を表示するために作成された UNIX 用の文字配列表。 表の見方と機種依存
ブラウザで動くツール集です。iPhoneやiPad、スマホでも動きます。 コピーしてカスタマイズして使えるツールも用意しています。
HTMLやXMLで使用されるエンティティ参照（Entity References）の表記方法です。 ブラウザの種類（バージョン）によって表示されないコードもあります。 これ以外のコードは次の10進数コードによる表を参照してください。
WEB上にあるフォントをCSSを使って共有することができます。 GoogleもWebフォントのライブラリを提供するサービスを実施しています。 Webフォントの設定 まずは表示例を見てみましょう。 タイトル文字にWebフォントのデザインが適用されています。 Labyrinthe Noir Google Web Fontsでは、<link>タグを使う方法、@importを使う方法、JavaScript（Ajax）を使う方法が提供されています。 <link>タグを使う これに必要なのは<link>タグと<style>タグです。もちろん、テキスト本文にもクラスを割り当てます。 まず、<head>の中では次のように記述しています。 <link href='http://fonts.googleapis.com/css?family=Henny+Penny' rel='stylesheet' type
使い方 機能の概要 HTMLファイルからタグを参照し、リンクまたは画像のファイル名を抜き出します。ファイル名を羅列したテキストにも対応。 掲示板に投稿された画像のURLから画像をまとめて取得できます。 （URL検索：全部） サムネイルからリンク先に画像がある場合、リンク先をまとめて抜き出して画像を表示します。（タグ取得：<a>） 右クリックで取得できない背景などに設定された画像をソースから取得します。（属性取得：background） 画像として扱う拡張子： リンク取得の手順 １．画像のURLやリンクを含むテキストをコピーします。（掲示板の書き込みや、HPのソースをコピー） ２．上記フォームのソース（テキスト）欄にペーストします。 ３．HTMLソースをコピーした場合、URLが省略されていることがあるので、元ページのURLをコピーしてフォームのURL欄にペーストします。 ４．ファイル名取得は
Unicode(UTF-8)の文字コード表を出力します。区分名に「*」が付いているものは合成用文字です。 表示： 【使い方】 左肩の区分メニューをクリックすると、その区分にある文字を一覧表で表示します。 一覧表の文字やコード番号をクリックすることで、上記フォームに文字が入力表示されます。 様々な機器で見比べることでフォントの違いを比較することが出来ます。 ブラウザの設定や、OSに組み込まれたフォントの仕様によって表示される文字が異なります。 文字コードを調べたいときは、フォームに文字を入力し、検査ボタンを押してください。 コード表の右上にあるURLをクリックするとURLの後ろに#で始まるハッシュがつきます。そのURLをブックマークすることで、表示の区分を直接開くことが出来ます。 【ご注意】 全コードの出力はかなり大きな表となるため、ブラウザの動作が遅くなったり、動かなくなる場合があります。
[Labyrinthe Noir]>[Top]>[自作JavaScript集]> WEB年表（グラフ年表） ガントチャートを利用したWEB上で表示する年表です。スクリプトを使用して項目による並び替えにも対応します。 歴史上や架空の人物を一覧表にして、生年と没年からグラフ化します。年齢を表示するので比較対象の資料とすることができます。 オリジナルの年表や統計グラフの作成が可能で、本スクリプトとデータベースのテキストを組み合わせるだけで実現します。 二次使用の許可については、ページの最後をご覧ください。 用途と特徴 テキストで作ったデータ一覧（データベース）を読み込んで、人名や生年、没年をグラフ化して年表として表示します。 人物の年齢を表示し、存命期間をグラフ化しますので、視覚的に年齢の比較ができます。 また、人物に限らず、組織や団体、建物などの存続期間を年表にしたり、漫画やアニメのキャラクタ
JavaScriptでデータベースを作ってみるサンプルです。製作過程を段階的に紹介しています。 JavaScriptのデータベースの利点と弱点 ★データを読み込んでしまうので動作が機敏。（データが大きくなると読み込みに時間がかかる） ★１つのHTML内で検索処理が完結するので技術面の安全性が高い。（CSVファイルは公開されてしまうので、個人情報は扱えない） ★CGIを設置する必要がなく、データだけを更新することもできる。（ブラウザからデータを更新できない） 製作の目的 ★JavaScriptでファイルの読込を行い、CGIを使わずにデータベースを運用できることを実証する ★プログラムとデータを分轄し、データはテキストファイル単独でメンテナンスを可能にする ★複数の検索機能や並び替えの機能を持ったデータベースの基本構造を製作する ★製作の過程を表示することにより、シンプルなデータベースや他の目
使い方 変換フォーム内の変換前フィールドにHTMLファイルの全部または一部をコピーします。設定パネルから変換したい項目を選んで変換ボタンを押します。 変換後フィールドに整形されたテキストが表示されるので、これをコピーして元のHTMLに上書きすると入れ替えが完了します。 例外：<!DOCTYPE>、<!-- -->は変換の対象外です。選択削除は可能です。
機能の概要 画面左にテーブルを配し、これを固定することでスクロールをしても動かないメニューとします。 コンテンツは重ならないように左に余白を取って表示させます。 これによってメニュー部分は常に画面の中に表示されるため、コンテンツをスクロールしてもすぐに使うことができます。 また、メニュー部分は、画像を使わずに幅を調節して、マウスオーバーにも対応した表現を与えています。 左のサンプルではリンクを無効にしています。 製作工程 <table>を使ったメニューの作成 CSSによるコンテンツの幅の調節 CSSでメニュー内のリンクをボタン化 HTML <!DOCTYPE HTML> <html> <head> （省略） </head> <body> <h1>CSSフローティングメニュー</h1> <hr> <table border="2" cellpadding="0" cellspacing="5
Google Mapsを制御する方法はいくつか用意されています。 JavaScript（Ajax）のAPIを使って動的に制御をしてサービスを作り上げることもできますが、スクリプトを使わずにURLを指定して地図を貼り付けることでも利用できます。 Google MapsのURLには、地図を制御するためのパラメータ（検索クエリ？）が含まれており、それらを直接変更することで地図をカスタマイズすることができます。 HTMLファイルからは、URLをリンクとして開くか、iframeタグを使ってページ内に取り込むことができます。 また、FileMakerでもURLを指定してデータベースにブラウザ表示を組み込むことができます。 Google Mapsの表示 まずはこちらで地図の検索をしてみましょう。 検索結果には次のような表示の特徴があります。まずは、これらの表示を制御したいと考えました。 １．情報パネル。
[Labyrinthe Noir]>[Top]> JSこども工作教室 こどもと一緒にゲームを作りたくて、JavaScript（ジャバスクリプト）でプログラミングの楽しさを体験してもらうための教材を作ることにしました。 最初は意味が判らなくても大丈夫です。まずは、動かしてみて何が起きるのか見てみましょう。 １つ１つ過程を追いかけながら作って行きますので、その都度、何のための作業なのか確認しながら進めましょう。 用意する物は、テキストエディタとブラウザです。できれば、親子でチャレンジしてください。 遊んでみる 作ってみる 内容 作成日
リンクをクリックするとメールソフトが起動し、メールの新規作成画面が開きます。そして、メールの宛先欄「to:」に「user@dammy.com」が入ります。 「mailto:mail@dammy.com」で「mail@dammy.com」にメールを送信する準備を提供できる訳です。 書式の詳細 「mailto:」の機能にはいくつかの便利な機能を付けることができます。ここではオプションと呼びましょう。 オプションによって、「表題」なども指定することができるようになっています。 日本語文字を使用した場合、IEでは正常に表示されますが、FireFoxでは文字化けします。 表題
404 Not Found >> 未検出 << ファイルが見つからないか、 アクセス権がない。 www.shurey.com
次のページ
このページを最初にブックマークしてみませんか？
『Labyrinthe Noir』の新着エントリーを見る
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
