jQuery
khiroWebエンジニア(@khiro14726723)です。ユーザーにフォームの入力をしてもらう時に、自動で3桁区切りの表示をする機能があったほうが良いですよね。その機能を、javascript（jQuery)で実装しました。とてもシンプルなコードです。サンプルサイト ki-hi-r…
khiroWebエンジニア(@khiro14726723)です。Sassとbootstrap、jQueryがすぐに使える状態のHTMLテンプレートを作りました。すでにデザインが入ってるテンプレートをお求めの方は、こちらで紹介されているものがいいと思います。 今回は、無料ダウンロードでき…
HTML / CSS / jQuery を使って入力した値をグラフに表示したいと思ったことはありませんか？この記事では、chart.jsを使用してそのような仕様を実現する方法について解説しています。サンプルサイトも作りました。
jQueryでドロップダウンメニューを作る方法について、はてなブログに書きました。
「レスポンシブデザインの時にjQueryのブレイクポイントってどうやって設定すればいいの？」という方へ。
【jQuery】ふわっと要素を出現させる方法
はじめに スライドの例 完成品 ファイルとその中身 ブラウザ 作り方 素材をブラウザに表示させる タイトル スライドとボタンの番号 スタイルを適応していく 画像を横並びにさせる ボタンの位置を決める ボタンの見た目をいい感じにする デフォルトの表示を設…
今回作るもの 必要なファイルとその中身(完成ソースコード) html css jQuery 実装手順 画像を表示させる モーダルを作成する 画像にカーソルを合わせた時の処理 おわりに 今回作るもの たまにWebサイトで見かける、マウスを当てたら画像のタイトルが出てくる…
はじめに 筆者の環境 ヘッダーアイコンを作成する モーダルを作成する クリックイベントを作成する はじめに スマホの画面幅は、iphone6/7/8 Plusの場合414pxです。 WebサイトをPC(自分のMacBookの画面幅は、1440px)で閲覧する時には、このようなヘッダーが…
素材 画面 HTML CSS HTMLを用いた方法 リンク元 画面 HTML リンク先 画面 HTML jQueryを用いた方法 画面 HTML jQuery 最後に ページ内でリンクを作る方法について2パターンを紹介します。 素材 ヘッダー、メイン、フッターに分かれています。 メインの中に、…
アコーディオンとは？ 筆者の環境 準備 ディレクトリ・ファイルの作成(ターミナルを使用) HTML 画面(1/10) CSS 画面(2/10) jQuery jQueryの読み込み確認 1つのアコーディオン 答えを非表示にする 画面(3/10) 答えを隠す 画面(4/10) 答えを表示させる 画面(5/…
モーダルとは 実装手順 フォルダなどを準備する ブラウザに最低限の表示をさせる モーダルの中身を作り込んでいく モーダルをカバーしている部分を作り込んでいく モーダルを表示させる モーダルを非表示にする モーダルとは 例えば、Twitterの投稿ボタンを…
jQueryは、Webサイトに動きをつけることのできる言語です。 この記事では、Webサイトでよく見る このような、クリックすると画面TOPに行くボタンをどうやって作ればいいのかについて説明しました。 jQueryを読み込む jQueryのファイルを作成する htmlファイ…
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"> </script> まずは、この1行をapplication.htmlのheadタグ内に記述します。 <script src="script.js"></script> 次に、この1行をbodyの閉じタグの直前に記述します。 そして、app > assets > javascripts に、script.jsファイルを作成します。 $(function() { alert("読み込みに成功しました。") }); そ…
