buttonタグをクリックすると表示されるボヤっとした枠線を消す | ホームページ制作部ブログ「横着は敵」 | 中央区日本橋 しろくまシステムズホームページ制作部ブログ「横着は敵」 | 中央区日本橋 しろくまシステムズ 東京都中央区日本橋しろくまシステムズのホームページ制作ブログです。日々の制作作業の中で遭遇したトラブル、難しいこと、上手くいかないこと、その解決方法を徒然なるままにメモしていきます。同じところで何度もつまづくことがないように。
【jQuery】スライダープラグイン「slick」の使い方を詳しく解説
前回、「超簡単！CDNのjQueryを読み込む方法」というのを書きましたが、Web制作をする上では、様々なjQueryのプラグインも使用する機会が多いと思います。jQuery本体と同様に、プラグインも毎回ダウンロードしてサーバーへアップして、、、というのは面倒です。そこで便利なのが「jsDelivr」というサイトです。プラグイン全て、というわけにはいきませんが、かなりの数のプラグインをホストしていますし、よく使うCDNをコレクションして一括でソースコードをコピーして貼り付けられたり超便利です。ぜひ使ってみましょう。jsDelivr&... 設置するファイル ajax-loader.gif fonts（フォルダ） slick-theme.css slick.css slick.min.js HTML <link href="js/slick-theme.css" rel="styleshee
【実例12パターン】画像スライダーはSwiper使っておけば間違いない！実用的な使い方を紹介 | HPcode（えいちぴーこーど）
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="dist/css/swiper.css"> <title>Title</title> </head> <body> <div class="swiper-container"> <div class="swiper-wrapper"> <div class="swiper-slide"><img src="https://haniwaman.com/cms/wp-content/uploads/2018/05/swiper01.png" alt="Swiper01"><
iOS（iPhone Safari）でclickイベントが発生しない場合の対処方法
ハンバーガーメニューの反応が悪い iPhoneユーザーから「ハンバーガーメニューの反応が悪い」と言われ、ちょっと調査した内容をメモ。最初にjQueryで以下のように設定していました。 $("#button").on("click", function(){ // clickイベントの処理 }); #buttonはimg要素で、クリックイベントを実装しています。パソコンのブラウザでは特に問題なかったのですが、発売されたばかりのiPhoneXのSafariで動作確認したらやたら反応が悪い。しかもクリックできないわけでもなく、タップしまくったら反応したりと1か0でない感じがプログラマー泣かせだなと思います。Androidは大丈夫。 修正方法 とりあえず試してみたのは以下の方法。 その1：cursorプロパティのpointer値設定 まず試したのが、CSSでその要素のcursor設定にpointe
JavaScript onClickイベントがスマホで発動しない！ - Qiita
前提 JavaScript onClickイベントがブラウザの検証画面では動くのに、実機でみると動かない。 ハンバーガーメニューをタップしてもメニューが開かない。 解決方法 ２つ試したことがあり、個人的には、①で解決した。 ①クリック対象にcursor:pointer;を設定。
console-1130
jQueryでどのように動作したかなどのデバッグをする際、アラートを使うことが多いかと思います。 ただ、毎回アラートがピコンピコン出るのは煩わしいですね。 そこで、ブラウザのコンソールを使ったデバッグをご紹介します。 ブラウザ上の表示は何も変わりませんが、コンソールと呼ばれる箇所に結果が出力されるため、デバッグに最適ですね。 コンソールとは？ ブラウザには、コンソールと呼ばれる、入出力ウィンドウが実装されています。 コンソールに文字列を出力して、動作確認やデバッグに活用することができます。 出典：JavaScript プログラミング講座 何故かプログラムが上手く作動しない際に、変数の中身をコンソールに出力したり、要素がきちんと取得できてるかなど、使う頻度はかなり高いかと思います。 google chrome、firefox、IEでの確認方法を次でご紹介します。 コンソールの確認方法 win
HTMLの要素を取得する! JavaScriptのdocumentプロパティの使い方 | 侍エンジニアブログ
こんにちは、ライターのマサトです！JavaScriptといえば、WEBサイトに動きをつけたりできるプログラミング言語ですよね。そんな動きをつけるためには、まずはHTML要素を取得する必要があります。 という方もいるかもしれません。今回はそんな方必見！JavaScriptでHTML要素を取得するdocumentオブジェクトについて解説していきます。 基本的な書き方からもっと具体的な活用例まで、幅広く紹介していきます。きっとあなたの疑問を解決できるでしょう。 documentオブジェクトを使いこなせるようになれば、HTML要素を自在にコントロールできるようになります。自然とWebアプリの開発もできるようになり、プログラミングがさらに楽しくなるはずです！ documentとは？ それでは、まず最初に「document」オブジェクトに関する基本的な知識から勉強していきましょう！JavaScript
console.log()でオブジェクトを出力するときにラベルをつける方法 - Qiita
別のエントリで紹介し忘れてた書き方を紹介します。 [Chrome] console.log()の色々な書き方 JavaScriptオブジェクトをconsoleに出力する var obj = { hoge : "hoge", huga : "huga" }; console.log(obj);
Swiftでif文 / switch文を使って条件分岐処理を行う方法【初心者向け】
Swiftでif文 / switch文を使って条件分岐処理を行う方法【初心者向け】 プログラミング初心者向けにSwiftでif文/switch文を使って条件分岐を行う方法について解説しています。if文の書き方、switch文の書き方を分かりやすくサンプルを元に説明しているので、スムーズに理解できるでしょう。 テックアカデミーマガジンは受講者数No.1のプログラミングスクール「テックアカデミー」が運営。初心者向けにプロが解説した記事を公開中。現役エンジニアの方はこちらをご覧ください。 ※ アンケートモニター提供元：GMOリサーチ株式会社 調査期間：2021年8月12日～8月16日 調査対象：2020年8月以降にプログラミングスクールを受講した18～80歳の男女1,000名 調査手法：インターネット調査 Swiftで書くif文/switch文の使い方を詳しく解説しています。 プログラムを書
第五回-02 if 文および if～else 文
上記のような記述により、以下のような動作が実現される。 「条件」が満たされる時、「命令」が実行される これを模式的に表すと、以下の様になる。 すなわち、条件が満たされているか (true)、満たされていないか (false) で、 「命令」を実行するかどうかが変わる、ということである。 これは、プログラムの処理が条件によって分岐する、と言い替えることができる。 使用例としては例えば以下のプログラムが挙げられる。 ユーザーが入力した整数が 5 より大きいときにのみ「あなたの入力した数字は5より大きいですね」と表示するプログラムである。 入力した整数が 5 以下の場合は何も表示されない。 int i; std::cin >> i; // コンソールから数字を入力して、変数 i に代入 if( i>5 ){ std::cout << "あなたの入力した数字は5より大きいですね\n"; }
jQueryでフォームの値を取得する方法をまとめておくので、コピペでご利用ください。 | Ginpen.com
必要ならどうぞ。 デモ jQueryでフォームの値を取得する方法をまとめ – jsdo.it – Share JavaScript, HTML5 and CSS jQueryでフォームの値を取得する方法をまとめ – jsdo.it – share JavaScript, HTML5 and CSS 共通：要素の探し方 input要素なんかにid振っちゃうのが一番なんだけど、属性セレクターを使うと楽な場合があります。つまり[name=xxx]で検索するやり方。 <form id="my-form"> <input type="text" name="my-text" value="This is text." /> </form>
式と演算子 - JavaScript | MDN
JavaScript での基本的なキーワードと一般的な式です。これらの式は最も高い優先順位を持ちます（演算子よりも高い）。 this this キーワードは関数の実行コンテキストを示す特別なプロパティです。 リテラル 基本的な null、論理値、数値、文字列のリテラルです。 [] 配列初期化子またはリテラル構文です。 {} オブジェクト初期化子またはリテラル構文です。 function function キーワードは関数式を定義します。 class class キーワードはクラス式を定義します。 function* function* キーワードはジェネレーター関数式を定義します。 async function async function は非同期関数式を定義します。 async function* async function* キーワードは非同期ジェネレーター関数式を定義します。 /
スムーススクロールを実装する方法(ページ内をゆっくり移動)
JavaScriptだけでページ内をゆっくりと移動する、スムーススクロールを実装する方法を説明します。jQuery不要です。
AOS - Animate on scroll library
<div data-aos="fade-up" data-aos-duration="3000"> </div> <div data-aos="fade-down" data-aos-easing="linear" data-aos-duration="1500"> </div>
プログラミング初心者にオススメ！シンプルで学習障壁が低いJavaScriptのフレームワーク「Vue.js」の特徴と学習方法
突然ですが、皆さんはJavaScriptのフレームワークを学習したことがありますか？ 数あるJavaScriptのフレームワークの中でも、シンプルで学習障壁が低いと言われているのが「Vue.js」です。ご存知でしょうか。 まだ比較的若い気鋭のフレームワークではありますが、データのやりとりを中心に様々なことを実装することができます。JavaScriptを触ったことがあるけれども、まだフレームワークまでは触ったことがないという方にはぴったりのフレームワークです。 そこで今回は、簡単なJavaScriptの知識しかない方でもスムーズに基本を理解できるように、わかりやすくVue.jsの概要について解説していきます。 Vue.jsとは？ JavaScriptのフレームワークとして有名なものに、「Node.js」や「AngularJS」、「jQuery」などがありますが、*「Vue.js」*とはどのよ
JavaScriptをゼロから学ぼう！全くの初心者でも問題なし
ホームページを制作する上で、HTML・CSSとともに欠かすことができないのがJavaScriptの存在です。 しかし、HTMLやCSSのようなマークアップ言語と違ってプログラミングって少し難しそう……と思っている人も多いのではないでしょうか。実は、JavaScriptは非常にシンプルで、基礎的な部分は他のプログラミング言語と同じところも多いのです。 そこで今回は、JavaScriptの基礎を初心者向けに解説します。 JavaScriptとは？ JavaScriptは何百種類もあるプログラミング言語の一種で、ホームページに様々な動きや機能を付加することができます。 JavaScriptはフロントエンド言語(クライアントサイド言語)の一種で、サーバーをとおすことなく、ブラウザだけでプログラミングを実行することが可能です。 JavaScriptはいたるところで使われています。 例えば、ユーザー登
phiary
JavaScript における比較演算子 == と === の使い分けって, C や Java といった他の言語にはない仕組みなので意外と戸惑う人もいるみたいですね. 今回はその違いについてまとめました. Runstant Lite で作ったサンプルもあります. 良かったら fork して遊んでくださいな♪ 等価演算子と厳密等価演算子 JavaScript には, 型変換して比較するあいまいな比較と厳密に比較する方法の２通りがあります. あいまいな比較 == は等価演算子, 厳密な比較 === は厳密等価演算子と呼びます. JavaScript の比較における特徴はこちら 2つの文字列は、文字の順序が同一で、長さが等しく、かつ対応する位置の文字が等しいとき、厳密に等しくなります。 2つの数値は、数字的に等しいとき（数字の値が等しいとき）、厳密に等しくなります。NaNは、どんなものとも（Na
JavaScript 忘れがちな === と == の違い - Qiita
いつも何も考えずに==を使ってしまいがちですが、僕がずっと使っているIDE NetBeansでは、===を使えと警告してくれます。 この違いって何でしょうか？ ==と===の違い まず、文字と数値の比較実験 var a = "1"; var b = 1; console.log(a==b); 結果：true console.log(a===b); 結果:false それぞれの演算子についてここで調べてみると、それぞれ機能が違うことがわかります。 == 等価演算子 数値と文字列を比較するとき、文字列は数値に変換されます。JavaScript は文字列の数値リテラルを Number 型の数値に変換しようと試みます。最初に、その文字列の数値リテラルから数学的な値を引き出します。次に、最も近い Number 型の値にこの値を丸めます。 つまり==は、文字列と数値の比較の場合、文字列を数値に変換して
【離脱率を軽減】お申込みフォーム改善の極意まとめ
お申込みフォームや、商品購入フォーム、会員登録フォームのCV改善を行うために色々施策を行ってまいりましたが、より効果の出た結果をまとめて説明したいと思います。 今回は文章で説明するだけではなくサンプルコード、サンプルフォーム、サンプルデータも用意しましたので、是非参考にフォーム改修を行ってみてください。 ダッシュで用意したんでソースくっそ汚いのはご容赦ください^^; もしお試しいただいて不具合あればご指摘いただけると幸いです。 ページ離脱時にポップアップ(アラート)で離脱を食い止める これはご存知の方もけっこういらっしゃるかもしれません。 ページを閉じるボタン、もしくは他ページに遷移する際にアラートポップアップ(アラート)で警告をする方法です。 ユーザーからすると「ウザっ！」と思われてしまう仕様ですが、離脱される前の最後の抑止力となる事は間違いありません。
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
JavaScriptでidから要素を取得する方法：getElementById()