株式会社オンズのブログ記事一覧
タグ "JavaScript" を含む投稿を表示中：68件
-
【JavaScript】jQuery不要で動く［wow.js］でスクロール連動型アニメーションを実装。 最近はjQuery不要でも動くスクリプトが流行りのように感じていますが、気のせいでしょうか？ 今日紹介する［wow.js］も、jQuery要らずで実装可能な優良スクリプト。 容量も8KBと軽量で、別途配布されている「Animate.css」... 【JavaScript】jQuery不要で動く［wow.js］でスクロール連動型アニメーションを実装。続きを読む →
-
【JavaScript】超高機能なグリッドレイアウトを実装する［Packery］はドラッグによる並べ替えにも対応！ グリッドレイアウト採用時に、ぜひ導入したいJavaScriptのライブラリ［Packery］を紹介します。 百聞は一見に如かず。まずは動作サンプルをご覧ください。 Packery：動作サンプル ご覧いただいたように、任意のボタンをクリックす... 【JavaScript】超高機能なグリッドレイアウトを実装する［Packery］はドラッグによる並べ替えにも対応！続きを読む →
-
【jQuery】これだけで完璧に導入できる［Lightbox］の実装方法。 一時期、多くのサイトで導入され大流行した jQuery プラグイン［Lightbox］の使い方を紹介します。 皆様もうご存知でしょうけれど、念のために動作のサンプルを以下のURLに置いておきます。 画像をクリックすると背景が暗くなり、指定さ... 【jQuery】これだけで完璧に導入できる［Lightbox］の実装方法。続きを読む →
-
-
【Google Feed API】外部サイトのRSS情報を取得して表示させる方法。 ※追記：2015年12月2日より Google Feed API がエラーを返すようになり、ここで紹介したコードが使えなくなりました。 代替案として PHP でプログラムを組む方法を紹介します。 PHP 使用版：コチラです。 以下、Goog... 【Google Feed API】外部サイトのRSS情報を取得して表示させる方法。続きを読む →
-
【JavaScript】ラジオボタンにリンクを設置する方法。 ラジオボタンにリンクを設置する方法 フォームのラジオボタンにリンクを設置して、クリックした際に指定した URL に移動させる方法を紹介します。 以下、簡単なコードで実装できます。 ラジオボタンに JavaScript の［onclick］要... 【JavaScript】ラジオボタンにリンクを設置する方法。続きを読む →
-
【JavaScript】クリックでもタップでも快適に動作する［LightBox］の進化版スクリプト［Intense Images］を紹介します。 画像を拡大表示させるお馴染みの jQuery スクリプト［LightBox］は、その便利さと使いやすさから一気に普及しましたが、今日紹介する［Intense Images］は更なる進化を遂げたスクリプトです。 デスクトップのクリック操作や、... 【JavaScript】クリックでもタップでも快適に動作する［LightBox］の進化版スクリプト［Intense Images］を紹介します。続きを読む →
-
【JavaScript・jQuery】ボックスの中の要素を自動でスクロールさせる方法 jQuery、または JavaScript を使って、ボックスの中の要素を自動でスクロールさせて、テキストが流れているように見せる方法を紹介します。 実装したサンプルは以下。 ボックス・スクロール：サンプル・デモ HTML の記述サンプルは... 【JavaScript・jQuery】ボックスの中の要素を自動でスクロールさせる方法続きを読む →
-
【JavaScript】フォームの進捗をシンプルなプログレスバーで表示するスクリプト［Fort.js］が便利です。 今日は、サイトのデザインを損なわずに、フォームの進捗をシンプルなプログレスバーで表示するスクリプト［Fort.js］を紹介します。 まずはサンプルをどうぞ。 ［Fort.js］：サンプル 注目すべきメリットの１つは、jQuery を使わずに... 【JavaScript】フォームの進捗をシンプルなプログレスバーで表示するスクリプト［Fort.js］が便利です。続きを読む →
-
【JavaScript】ウェブサイトに「印刷する」ボタンを設置する方法。 ブラウザでのウェブサイト観覧時も含め、通常、印刷する際は［⌘ + P］（Command + P）でプリントアウトすることができますが、これと同じ挙動を JavaScript で実装することができます。 記述するコードは非常に簡単で、基本的に... 【JavaScript】ウェブサイトに「印刷する」ボタンを設置する方法。続きを読む →
-
【JavaScript】最初の子要素、最後の子要素を取得する方法 JavaScriptで最初の子要素、最後の子要素を取得するには「firstElementChild」と「lastElementChild」のプロパティを使用します。 最初の子要素を取得：firstElementChild firstElem... 【JavaScript】最初の子要素、最後の子要素を取得する方法続きを読む →
-
【JavaScript】HTML5 の script要素［async］と［defer］を使ってパフォーマンスアップする方法。 HTML5 の script要素では、［async］または［defer］属性を指定することで、主にページの読み込み速度が改善し、パフォーマンスが劇的に改善するケースがあります。 async属性を指定 script要素にasync属性を指定す... 【JavaScript】HTML5 の script要素［async］と［defer］を使ってパフォーマンスアップする方法。続きを読む →
-
【JavaScript】ブラウザに警告ウィンドウを表示させる方法。 JavaScriptを使ってブラウザに警告ウィンドウをポップアップで表示させる方法です。 紹介するコードは２種類。 ページにアクセスした際に警告を表示させる方法。 リンクボタンをクリックした際に警告を表示させる方法。 どちらも、訪問者に確実... 【JavaScript】ブラウザに警告ウィンドウを表示させる方法。続きを読む →
-
WordPressの［404.php］などに設定しておくと便利な各種リダイレクトの方法。 WordPressのテンプレート「404.php」、または「header.php」に記述しておくと便利な、「htmlリダイレクト」の方法を紹介します。 基本的な方法は［header.php］の中、<head>〜</head... WordPressの［404.php］などに設定しておくと便利な各種リダイレクトの方法。続きを読む →
-
【JavaScript】JavaScript を使って、ブラウザのステータスバーにメッセージを表示する方法。 PC のブラウザ、Safari、Chrome、Opera 等のウィンドウの下部にあるステータスバーに、一文字ずつ順に表示するメッセージを流すことができます。 細かいので気がつきにくいですが、比較的簡単に実装できることもあり、オンズのホームペ... 【JavaScript】JavaScript を使って、ブラウザのステータスバーにメッセージを表示する方法。続きを読む →
-
【PHP / JavaScript】コピーライトの年号の表記を書き換えるのが面倒！…そんなとき。 ウェブサイトのフッター部分に、著作権表示で「Copyright © 2011 - 2014 ONZE. All Rights Reserved.」のようにコピーライトを表示させることが多々あると思います。 管理しているサイトが多か... 【PHP / JavaScript】コピーライトの年号の表記を書き換えるのが面倒！…そんなとき。続きを読む →
-
【JavaScript】テキストエリアに入力された文字数をカウントします。 JavaScriptを使って、テキストエリアに入力された文字数をカウントする方法を紹介します。 まずはデモをどうぞ。 実際に試してみてください。 入力されてテキストが何文字か判定します。： サンプル・デモ 使用したコードは以下。 <s... 【JavaScript】テキストエリアに入力された文字数をカウントします。続きを読む →
-
【JavaScript】デジタル時計を表示する方法。 JavaScriptを使ってウェブサイトにデジタル時計を表示する方法を紹介します。 まずはhtmlの<head>〜</head>内に以下のスクリプトを記述します。 <script> function cl... 【JavaScript】デジタル時計を表示する方法。続きを読む →
-
各種プログラム言語でのコメントタグ（コメントアウト）表記のまとめ。 HTML、CSS、PHP、JavaScript（jQuery）、.htaccess、各種プログラム言語でのコメントタグの一覧です。 コメントタグで囲われたテキストはサイトを観覧したときには表示されません。 ただし、ソースを見ればそのまま表示... 各種プログラム言語でのコメントタグ（コメントアウト）表記のまとめ。続きを読む →
-
【JavaScript】リンクの元のページに戻る、ブラウザの「戻る」ボタンと同じ動作。 JavaScript を使って、ウェブサイト上にブラウザの「戻る」ボタンと同じリンクを設置する方法です。 たとえば、動作確認ページやDEMOページなど、コンテンツ量の少ないページは、内容を確認した後、「またすぐに元のページに戻りたい」という... 【JavaScript】リンクの元のページに戻る、ブラウザの「戻る」ボタンと同じ動作。続きを読む →
