パララックスサイトの基本的な作り方 1/2！
こんにちは。 今回はパララックスサイトの基本的な作り方を紹介したいと思います。 去年くらいから流行始めたパララックスサイト。今年になってもその勢いは止まりません。 そんなパララックスサイトの基本的な作り方です。 パララックス（視差効果）とはパララックス（視差効果）とは画像やテキスト等の個々の要素を別々に動かして視差効果で立体的にみせるテクニックです。 ※当サイトはアフィリエイト広告を利用していますが、当サイトが独自に作成した記事であり、第三者から依頼を受けたものではありません。 準備をしよう！htmlを用意します。 jQueryはjQueryのサイトから直接読み込みます。 [html] [/html] スクロールした値を取得してみよう！スクロールした値によって個々のボックスを移動させますので、スクロールした値を取得します。 html[html] スクロールの値を取得スクロールの値 | 0
かつてはJavaScriptを利用していたものの、今ではCSSのみで実装できる10の小技
2015年3月18日 CSS 2011年に「少しのコードで実装可能な20のjQuery小技集」という記事で数々の便利な制作技を紹介したのですが、時は流れ、今ではCSSのみで表現できるものが多くなってきました。という事で今回はその記事内で紹介した技を中心に、かつてはJavaScriptを利用していたものの、今ではCSSのみで実装できる小技を紹介します。 ↑私が10年以上利用している会計ソフト！ 目次 Div全体をクリックできるようにする テーブルの偶数・奇数の行の色を変える フォームにテキストを入れておき、フォーカスで消す（文字色も変更） ラジオボタンとチェックボックスを装飾する スライドパネル アコーディオン ツールチップ 言語によってスタイルを変更 横並びのdivの高さ揃える ボックスを上下左右中央に配置する それでは実際にどんな事ができるのか見てみましょう！サンプルも作ったのでコードと
Firebug と Firefox で「console.log」の仕様が違って不便な件 知らなきゃ絶対損するPCマル秘ワザ
こんにちは、さち です。 私は、趣味でウェブサイト制作をするのですが その時に便利なのがウェブブラウサの「開発ツール」です。 Firefox で開発ツールを使うには アドオン「Firebug」を使う方法と Firefox の標準機能を使う方法があります。 ただ、この2つは「console.log」の表示の仕様が異なり 困ってしまいました…。 Firefox で使える2つの「コンソール」 Firefox には「Firebug」というアドオンがあります。 Web制作に非常に役立つアドオンで 過去にはこのためだけに Firefox を使っていた人もいるほど。 アドオンを導入している場合は「F12」キーで呼び出せます。 しかし、最近の Firefox には標準で「開発ツール」が搭載されています。 機能的にも Firebug と遜色なくこちらをメインに使う人も増えているようです。 「Ctrl + S
たまに慣性スクロールがオンだとスクロール量が増幅してしまうサイトがある - F.Ko-Jiの「一秒後は未来」
NHK HACKATHONのサイトがそうだったので例として取り上げますが、このサイトでスクロールすると、人によってはちょっとスクロールしただけでページ最下部まで一気にスクロールされてしまい、びっくりすることになります。 これは Mac に搭載されている「慣性スクロール」と、サイト側で実装されている JavaScript のせいです。 慣性スクロールをオフにしてみると、このサイトではスクロールが滑らかに止まるように独自実装がなされていることが分かります。おそらくパララックスの効果を意識してのことではないかと思います。 それゆえ、Mac の慣性スクロールがオンだとスクロールの慣性力が増幅してしまっているのです。もはや慣性力ではない。なので慣性スクロールをオフにしている人や、Windows を使っている人は特に気づかないはず。 独自にスムーズなスクロールを実装してもいいのですが、最近の Mac
JavaScript/フォーム/自動計算フォームAタイプ（消費税あり） - TAG index
<html> <head> <title>TAG index Webサイト</title> <script type="text/javascript"> <!-- function keisan(){ // 設定開始 var tax = 10; // 消費税率 // 商品1 var price1 = document.form1.goods1.selectedIndex * 500; // 単価を設定 document.form1.field1.value = price1; // 小計を表示 // 商品2 var price2 = document.form1.goods2.selectedIndex * 1000; // 単価を設定 document.form1.field2.value = price2; // 小計を表示 // 商品3 var price3 = document.
JavaScript/フォーム/数字の入力をチェックする - TAG index
<html> <head> <title>TAG index Webサイト</title> <script type="text/javascript"> <!-- function check(){ var flag = 0; // 設定開始（チェックする項目を設定してください） if(document.form1.post1.value.match(/[^0-9]+/)){ flag = 1; } else if(document.form1.post2.value.match(/[^0-9]+/)){ flag = 1; } // 設定終了 if(flag){ window.alert('数字以外が入力されています'); // 数字以外が入力された場合は警告ダイアログを表示 return false; // 送信を中止 } else{ return true; // 送信を実行 }
HTMLタグ/フォームタグ/データの送信形式と送信先を指定する - TAG index
form要素にはaction属性が必須となります。 データの送信先ついて 一般的には、CGI等のプログラムへ送信することになります。 POSTとGETについて method="" には、post または get を指定します。これは、データの送信形式を指定するもので、用途に合わせてどちらかを指定することになります。（この指定を省略した場合は get が適用されます） POST形式 … フォームのデータを本文として送信します（一度に大量のデータを送信することができます） GET形式 … フォームのデータをURLの末尾に追加して送信します（送信できるデータ量には制限があります） メールフォームなどの一般的なフォームでは、POST形式がよく使用されています。また、検索エンジンのフォームではGET形式が使用されているようです。 使用例 POST形式で formmail.cgi というCGIに送信す
JavaScript/フォーム/テキストフィールドの入力をチェックする - TAG index
<html> <head> <title>TAG index Webサイト</title> <script type="text/javascript"> <!-- function check(){ var flag = 0; // 設定開始（必須にする項目を設定してください） if(document.form1.field1.value == ""){ // 「お名前」の入力をチェック flag = 1; } else if(document.form1.field2.value == ""){ // 「パスワード」の入力をチェック flag = 1; } else if(document.form1.field3.value == ""){ // 「コメント」の入力をチェック flag = 1; } // 設定終了 if(flag){ window.alert('必須項目に未入力があ
JavaScript/フォーム/自動的にフォーカスを合わせる - TAG index
<html> <head> <title>TAG index Webサイト</title> </head> <body onLoad="document.form1.field1.focus()"> <form action="#" name="form1"> <p>お名前：<input type="text" name="field1" size="25"></p> </form> </body> </html> フォーカスを合わせたい入力欄を、以下の方法で設定してください。 document.フォーム名.フィールド名.focus() フォーム名 … formタグの name="" で指定した名前（上記の例では form1） フィールド名 … フィールドの name="" で指定した名前（上記の例では field1） ページを表示したときに自動的にフォーカスを合わせるので、bodyタグに
あれこれポップアップ
ウェブページ (HTML) にて、マウスポインタの下にある任意の箇所（要素）の情報（属性値）あれこれをポップアップに出す、 JavaScript と CSS のセット。 Web サイトの製作運営者向けの一種の「素材」。 HTML に「あれこれポップアップ」の外部 JavaScript と 外部 CSSを適用するだけで、すぐ機能します。そのはず。 多くの典型的なブラウザでは、 title 属性に何か書いてある要素部分にマウスポインタをかざすと、その title 属性値がツールチップとしてポップアップしますよね。あれのゴージャス版と思ってもらえればよいです。典型ブラウザ本来のポップアップとの違いは、ポップアップするのが title 属性だけではない点。それと自分で言うのも何だけど、見てくれがカコイイ事（笑） 適用サイト利用者向け FAQ だうんろーど他 お持ち帰り用アーカイブをダウンロード 2
JavaScript講座 [smart]
JavaScriptの概要から始まって、フレームワークやオブジェクトなど仕様の隅々まで解説しています。 沢山のサンプルコードとテクニック集もご用意、遠慮なくご利用ください。
![JavaScript講座 [smart]](https://cdn-ak-scissors.b.st-hatena.com/image/square/efeb6493234f33406d242c048873a805fca99c63/height=288;version=1;width=512/https%3A%2F%2Frfs.jp%2Fwp-content%2Fthemes%2Fsmart%2Fogpimage.png)
KeyNavi.Net
ホームページをキー入力で便利＆快適に見られるKeyNavi(左図参考)をはじめ 新しいWebの形を提案しています。
独学 JavaScript
「どのブラウザに向けてページを作る？」のページを追加(1998/11/01)。 世界時計のサマータイム対応版を追加(1998/10/28)。 独学JavaScriptをダウンロードしてオフラインで読めるように、zip形式で圧縮したものを用意しました。 [ 98年11月15日版(TAR+GZ形式) djs981115.tar.gz (75k) ] [ 98年11月15日版(ZIP形式/PC向け) djs981115.zip (75k) ] JavaScriptとは何だろう htmlへJavaScriptを埋め込む 変数とif文 変数 ちょっと詳しく コメント 関数 for文 JavaScriptに対応していないブラウザに迷惑をかけないために 文字列の扱い FORMとの連動(buttonクリック) FORMとの連動(inputフィールド) FORMとの連動(inputフィールド)[改良版 IE
0からはじめるJavaScript入門～JavaScriptを学べる吉田喜彦ブランドの無料PDFはここから～
0からはじめるJavaScript入門 JavaScriptは難しくありません！ HTMLの基礎を学習したらサーバーの必要のないJavaScriptを学習するとHTMLを記述する際にもとても楽になります。本教材はHTMLを学習した学生が無理なくJavaScriptを学習できるようにつくられた教材です。 また、本教材は基礎を学習しましたら、リファレンスや演習問題など学習進度のニーズに合わせた教材となっています。ご堪能ください。 使用についてはこちらをご覧下さい。 あと、ダウンロードして下さった方は↑上のバナー↑をクリックしてもらえると嬉しいです。 注１）本教材を解答・展開するためにはＬＨＡ解凍ソフトが必要になります。 Vector等でお探し下さい。 注２）一太郎教材は解凍後ＪＵＳＴシステム社の一太郎ver8以上が必要になります。 注３）エクセル版教材はマイクロソフト社 のエクセル９７以上が必
Javascript Patchworker - JavaScriptのページ
JavaScriptについて ここでは管理人の作成したJavaScriptのサンプルが置いてあります。 設置方法などの詳細はインフォメーションや各コンテンツのTOPページを見てください。 ドキュメント関連 文字がスライドイン 文字が伸び縮み 枠線を徐々に表示 オブジェクトを自在に移動 キーボードからの入力を認識 タイピングゲーム 連続して文字をスライド 擬似ツールバー リンク関連 戻る・進むボタン１ 指定秒後に別のページへジャンプ プルダウンのリンクリスト 戻る・進むボタン２ ブラウザによってページ振り分け マウスオーバー関連 文字色を変化 文字色が徐々に変化 画像が変化 リンク色を徐々に変化（設置簡易版） ウィンドウ関連 ステータスバーに文字を流す（スクロール） ステータスバーに文字を流す（タイプライタ） ステータスバーに文字を流す（フラッシュ）
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
