【JavaScript】submitボタンをonClick()でdisabledするとonSubmit()が実行されない件【二重送信防止】
問題どうも。みるみっとです。フロントエンドエンジニアをやっています。業務中にお問い合わせフォームを作っていたところ、「できれば二重防止送信機能を作って欲しい」との要望が。単純に「送信ボタンをクリックした後にdisabledするかぁー」と思っていたのですが、どうやらsubmitボタンのclickイベントでdisabledにするとonSubmitが実行されないということが分かりました。※ちなみにonSu...
View ArticleClik here to view.
Clik here to view.
CSS~border~
前回はpaddingとmarginについて学びました。次はborderについて学んで行きます。borderとはこれは枠のことです。前回のpaddingとmarginの記述がわかれば結構簡単です！😊記述方法は以下のとおりです。style.cssh1{color:black;font-size:40px;background-color:red;border:4pxsolidblack;width:15...
View ArticleClik here to view.
divをクリックしてタイムピッカーを起動させたい
type="time"<inputtype="time">input要素のtype属性にtimeを指定することで、入力される値は時間の形式になる。このインプットをクリックするとタイムピッカーが起動する。Androidだとこんな感じ。いろんなとこでタイムピッカーを使いたいWindowsはさておき、Androidの方は直感的に操作できてけっこう便利。という訳で<div>とか、なに...
View ArticleClik here to view.
HTML~classと親子要素~
ここではclassの使い方を学んで行きます。classとは個人的なイメージとしてクラスはCSSのためにつけているのかな。と解釈しています。というのも、h1タグでHTMLがマークアップしても、CSSで装飾しようとしたときに全部装飾されてしまうんですね。こんな感じになってしまうんですよ🥲ではclassを付けていきましょう！！index.html<!DOCTYPE...
View ArticleClik here to view.
HTML & CSS
前回の続きから始めます。前回なにやってるんだよって方はこちらからどうぞ！▶<https://qiita.com/akari_0618/items/3526fd7b751d9387667d>装飾まずHTMLの確認をします。index.html<!DOCTYPE...
View ArticleClik here to view.
HTML/CSSで縦線を入れる方法
HTMLHTML<divclass="line-left"><p>HELLO</p> </div>縦線をつけたい要素を親要素で囲む必要があります。今回はdivで囲んでみました。CSSCSS.line-left{border-left: 3pxsolidred;}border-left： 太さ 種類...
View Article【Bootstrap】sassを用いてBootstrapをカスタマイズする方法
今回はsassを用いてBootstrapをカスタマイズする方法を整理しました。前提エディター：VSCode npm...
View ArticleClik here to view.
フロントエンジニアが本気でCSSだけで「リアルなビー玉」を作る
どうも7noteです。再現シリーズ今回はビー玉に挑戦してみました。ビー玉、水晶玉、ガラス玉、、、今回のはなかなかの力作です。鏡餅を作った時とは比にならないくらいリアルに作れました・・・いったいなんの役に立つかわからないですがただただ楽しいですね。ソースindex.html<divclass="b-dama"></div>style.css.b-dama{width:100px...
View ArticleClik here to view.
超初心者向けざっくり学ぶWebフロントエンド入門 ~前編~
はじめに~これを書いた目的~大学の後輩でwebプログラミングについて興味のある方が多かったので身内で簡単なwebの勉強会を開いたが、そのまとめ・補足用の資料を作りたかったため。対象読者プログラミング・Webデザイン初心者。Web制作の大枠を知りたい方向け。それぞれの内容について深堀りするような記事ではないので、詳しく知りたい方は参考にならないかも。後、HTML,CSSがほとんどなのでwebデザインの...
View ArticleClik here to view.
カード型リンクでカード内に複数のリンクがあるときにリンクハイライトを綺麗に設定する
リンクをカード型デザインしているとカード内にリンクが複数あることが多々ある。パソコンでは:hoverで適当に実装できるが、スマホだとリンクのハイライトが綺麗に実装されない。ので、リンクハイライトが綺麗に実装できる方法を記載します🥳カード型のレイアウトをつくる<ahref="記事に飛ぶ"class="card"><ahref="記事に飛ぶ"><imgsrc="thumbn...
View ArticleClik here to view.
JavaScriptでストップウォッチを作ってみた。
HMTL CSS JavaScriptで簡単なストップウォッチを作ってみた。主な仕様0.1秒単位でカウントアップ一時停止機能ありリセットボタンでカウントを初期化本当に簡単なものになっています。HTML & CSSまずはHTMLとCSSでストップウォッチの形を作ります。HTML<!DOCTYPE...
View ArticleClik here to view.
JavaScriptで電卓を作ってみた。
JavaScriptで簡単な電卓を作ってみました。主な仕様四則演算の電卓。連続して計算できるようにしたい。本当にシンプルな電卓です。HTML & CSSHtml<!DOCTYPE...
View ArticleClik here to view.
スクロールバーを上下に挿入
業務でスクロールバーを上下に挿入したので、記録に残していきたいと思います。イメージとしてはこんな感じです。スクロールバー上下が連動して移動できるようになってます。実装index2.html<!DOCTYPE...
View ArticleClik here to view.
ULボックスのその他
この記事ではUlボックスの中身の紹介をします。前の記事でも紹介しましたが、ここではその他について紹介しますね😊①箇条書きリストについてこれは、リスト項目についてのタグでしたね。index.html<sectionclass="case1"><ul><li>あいうえお</li><li>かきくけこ</li><li>さしす...
View ArticleClik here to view.
フレックスボックスについて①
今回は前回の記事で作ったものからCSSのFlexboxを使っていきたいと思います。今回取り上げるのはほんの一部なので、気になる場合は自分で調べてみてください👍フレックスボックスとは横の主軸と縦の交差軸を使ってやるみたいなんですね。全然わからないんで、詳しくは自分で調べてみてください😂私はなんとなくわかったので、とりあえず、進みます😂実装結局なんだろうって方もとりあえず先に進んで見ましょう。まず、in...
View ArticleJavaScript 要素を表示/非表示にする
visibility:hidden;と visibility:visible;で表示、非表示を作成する尚、外部ファイルは取り込まずhtmlファイル内に<script></script>タグを使用して記述show.html.erb# クリックして開くところ <div id="p1" class="dialog"> # クリックすることろ <svg...
View ArticleClik here to view.
フレックスボックスについて②
次にフレックスボックスの親要素について勉強していきましょう。前回のフレックスボックスについてはこちら▶https://qiita.com/akari_0618/items/080dad83a550ea439fd2親要素に当てるフレックスボックス少し複雑になるので整理しながらやっていきましょう。まず出てくるのは①flex-direction主軸の方向や向きを決めるプロバティです！style.css.c...
View Article以上、以下、未満、超過のネーミング
メディアクエリの変数を作るときなど、以上、以下、未満、超過のネーミングについていつも悩むので今後はこれで。ネーミング意味超過gtgreater than以上gtegreater than or equal to以下lteless than or equal to未満ltless thanmongoDB の検索を参考にしました。
View Article
