動くWebデザインアイデア帳
サイト閲覧方法 1ウェブサイトへアクセス https://ugokuweb.coco-factory.jp/ugokuweb/ 新サイトはこちらから 2【ユーザー名】と【パスワード】が求められますので、以下の情報を入力してください。 【ユーザー名】：ugokuweb 【パスワード】：指定のページ数を【半角数字3桁】で入力 （例）30ページの場合は 030 と入力 ※黄色本をご購入の方：7-2「検索」の表紙ページ数 ※ピンク本（実践編）をご購入の方：9-4「SVGアニメーション」の表紙ページ数を【半角数字3桁】で入力してください。 3閲覧制限が解除され、サイトを閲覧できるようになります。 ブックマークをしてご利用ください。 ※掲載されているコードは、2021年に出版された時のものをそのまま掲載しています。 （jQueryのバージョン、プラグインのソースコードの書き方を含む） ソースコードの書
Google Places APIで口コミを取得して評価で絞り込む - Qiita
Places APIで口コミをいじくる日本語情報があまり見つからなかったため、忘れないように記録しておきます。 公式はこちら（英語） Overview | Places API | Google Developers 口コミはこのへん（英語） Place Details | Places API | Google Developers 実装にはAPIキーが必要です。 APIキーの取得方法などはこのへんをチェケラ Google Maps PlatformでAPIキーを取得する方法 Google Maps の APIキー を取得する – ねんでぶろぐ Place IDを取得する 口コミを取得したい場所・建物・会社などを指定するために、Place IDというものが必要になります。 Place IDを調べてみる Place IDはこちらで調べます👇 Place IDs | Places API
カウントダウン・タイマーを設定表示する方法！HTMLとjavascriptで簡単表示【コピペで超簡単】
ソースコード HTMLとCSSとJavascriptをご紹介しています。 このソースをコピーして貼り付けるとデモのようになります。 色やタイマーの配置などを変更したい場合はcssを書き換えてください。 <section class="timer"> タイムセール終了まで残り <div id="CDT"></div> </section> #CDT { width: 100%; text-align: center; font-size: 49px; font-weight: bold; color: #ffffff; font-family: 'Noto Sans JP', sans-serif;} #CDT01 { width: 100%; text-align: center; font-size: 49px; font-weight: bold; color: #ffffff; fo
【JavaScript】簡単に出来る！カウントダウンタイマーの作り方 | Web(ウェブ)の便利屋ララパルーザ
こんにちは、プログラマーの山本です。 今回はWebサイトに表示するカウントダウンタイマーをJavaScriptでサクッと作成しました。 「締め切りまで ◯日◯時間◯分◯秒」という表示にします。 簡単に作れるので、カウントダウンタイマーを設置したいとお考えの方は参考にしてください。 htmlでカウントダウンタイマーの設置箇所を追加する。 <div class="count-down-timer" id="count_down_timer"></div> JavaScriptでカウントダウンタイマーを実装する。 タイマーに必要な定数を定義する。 //カウントダウンの終了日時を指定 const EndTime = new Date("2025/12/31 23:59:59"); //タイマーを表示する要素 const output = document.getElementById("count
CSSとJavaScriptで新年カウントダウンタイマーを実装する方法 | WebDev Tech
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>新年カウントダウンタイマー</title> <link rel="stylesheet" href="style.css"> </head> <body> <div class="container"> <div class="countdown"> <h1 class="countdown-title">Countdown to <span id="year" class="new-year"></span> </h1> <div class="time-container"> <p class="time">
Online JavaScript beautifier
End script and style with newline? Support e4x/jsx syntax Use comma-first list style? Detect packers and obfuscators? (unsafe) Preserve inline braces/code blocks? Keep array indentation? Break lines on chained methods? Space before conditional: "if(x)" / "if (x)" Unescape printable chars encoded as \xNN or \uNNNN? Use JSLint-happy formatting tweaks? Indent <head> and <body> sections? Keep indentat
IE8で「オブジェクトでサポートされていないプロパティまたはメソッドです」と表示される
ひねりも何もない代入だけの行でエラーが発生している。 調べてみるとタグのIDと変数名がぶつかっていると発生するエラーということが判明。 なので変数名を変更して解決。 必要ないところでグローバル領域を使用しているのもどうかと思うがIEがID名で変数を作ってしまうのはとても厄介。 はまらないように気を付けよう。 ※ネットで突込みを見つけたので追記 2012/06/06 http://b.hatena.ne.jp/entry/www.crossl.net/blogwww.crossl.net/blog/ie8_err_nothing_prop_method/ referer見てたら見馴れないリンク元があったので見てみたら記事に対する突込みがあった。 ※引用 違うと思う。var で変数宣言しろってのが本筋だと思う。まあID属性値がそのままグローバルオブジェクトのプロパティになるのもどうかと思うけど
jQueryで現在のページの所属しているサブメニューを開いた状態にする。
jQueryで現在のページの所属しているサブメニューを開いた状態にする。 タイトルすごくわかりにくいですね。 よく現在のページのaタグにクラスを適用させて、背景画像を変えたりすることがあると思いますが、似たような感じでサブメニューバージョンで開いた状態にしてしまおうというコーナーです。 かなり効率悪いことしている気がしますが、、、 投稿日2010年11月27日 更新日2011年04月03日 html+cssの準備 たとえばこんなファイル構成だったとします。 リストでマークアップするとこんな感じになるんじゃないかな。 html <ul id="side-nav"> <li><a href="01.html">メニュー1</a></li> <li><a href="02.html">メニュー2</a></li> <li> <a href="03.html">メニュー3</a> <ul id="
404 Blog Not Found:javascript - 勝手に添削 - textareaの高さを自動調節
2008年05月20日14:15 カテゴリLightweight Languages javascript - 勝手に添削 - textareaの高さを自動調節 これはなかなかいいですね。 textareaのサイズを入力にあわせて調整するＪａｖａＳｃｒｉｐｔ (イラストdeブログ開発記) イラストdeブログの掲示板の使い勝手を高めるため、textareaサイズをJavaScriptで改行入力毎に大きくするコードを書いてみました Firefox 2, Safari 3, Opera 9で動作確認してあります。 イチ に 三 function resize_textarea(ev){ //if (ev.keyCode != 13) return; var textarea = ev.target || ev.srcElement; var value = textarea.value; var
JavaScript｜A Day In The Boy's Life -2ページ目
itboyさんのブログテーマ、「JavaScript」の記事一覧ページです。
知ってて当然？初級者のためのJavaScriptで使う即時関数(function(){...})()の全て
(function(){...})()は、 (function($){ $.hoge = function() { }; })(jQuery) みたいに使われていたりするコード。GreasemonkeyとかjQueryのプラグインとか、あれこれ見かけることがあると思います。 この話題はいくつかWebでも取り上げられていますが何がどうなってんのかちょっと難しいですね。しかし、誰でも理解できるレベルではあります。というのも、こういう種の難しさは体系的な知識が備わっているか否かということなのです。 でも、この知識を体系化する作業って結構しんどくて、難しくて、まーハゲるほど悩むこともあるかもしれない。それはきっと、とても毛根に悪いかもしれない。スカルプDも真っ青の状況になるかもしれない。それは、悲しいことなのだと思う・・・っ！ 毛根にはこれからもがんばってほしい！いつだって頭を温かいまなざしで見守
JavaScript
JavaScript で数字を 3 桁ずつカンマで区切る (commify) 2012-07-12-1: [JavaScript] var commify = function(s) { return s.toString() .split('').reverse().join('') .replace(/(\d\d\d)(?=\d)(?!\d*\.)/g, '$1,') .split('').reverse().join(''); }; - refs.: Perl クックブック (レシピ 2.16)
XMLHttpRequest でファイルのアップロードができないか? - naoyaのはてなダイアリー
ブックマーク経由でみかけたCodeWeb: 画像をアップロードする前にサムネイルを表示させる。 では、JavaScript を使ってファイルをアップロードする前にプレビューする方法が紹介されてました。input type="file" な input 要素の onchange ハンドラでごにょるというもの。 一方で、プレビューではなく、ファイルを追加した直後に特にボタンなどを押さず且つ画面遷移なしでファイルをアップロードできないものかと、ちょっと試行錯誤してみています。例によって XMLHttpRequest で Ajax るわけですが、残念ながらいまのところうまくいってません。 これまでに書いたコードは以下です。prototype.js を使ってます。 <input type="file" name="image" onchange=" if (this.value) { new Aja
Html5 File Upload with Progress On Matlus
Html5 finally solves an age old problem of being able to upload files while also showing the upload progress. Today most websites use Flash Player to achieve this functionality. Some websites continue to use the Html <form> with enctype=multipart/form-data, but with modification on the server side to enable showing users the upload progress. Essentially, what you need to do is hook into the server
多次元配列の利用
JavaScript の要素にはどのような値でも格納することができますが、要素の値として別の配列リテラルを格納することもできます。このような配列のことを多次元配列と呼びます。ここでは JavaScript で多次元配列を扱う方法について解説します。
neue cc - JavaScriptで要素追加するやり方
ド素人がjQueryとprototype.jsではどう書くのかな、と思っただけです。メジャーな両者ですが実はまともに使ったことがないのです。困ったことに。しょうがないので見よう見まねで書く。 <!-- このselectにoptionを一個追加する --> <select id="selectID"> <option value="1">hugahuga</option> </select> <script type="text/javascript"> // 素のJavaScriptその1(古臭いというか微妙な……) var option = new Option("要素", "属性"); var select = document.getElementById("selectID"); select.options[select.options.length] = option; //
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
