自動化無しに生活無し

WEB開発関係を中心に備忘録をまとめています

ウェブデザイン

  • 【jQuery】数値入力フォームを押しっぱなしで入力する仕様に仕立てる
    以前、『【jQuery】数値入力フォームをボタンで入力する仕様に仕立てる』で解説したフォームを、ボタン押しっぱなしでも入力できるように仕立てる。 HTML <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1"> <title>Hello World test!!</title> <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script> <script src="script.js"></script> <link rel="stylesheet" href="style.css"> </head> <body> <form action=""> <div class="spinner_area"> <input class="spinner" type="number" value="0" max="10" min="0"> <button class="spinner_button" type="button" name="minus" value="-1">ー</button> <button class="spinner_button" type="button" name="plus" value="1" >＋</button> </div> </form> </body> </html> CSS .spinner_button{ user-select: none; cursor:pointer; padding:0.5rem; width: auto; vertical-align: middle; } .spinner_area input{ padding: 0.5rem; border: 0.1rem solid gray; border-radius: 0.25rem; font-size: ...
    続きを読む

  • 【jQuery】数値入力フォームをボタンで入力する仕様に仕立てる
    数値入力フォーム。キーボードを使わず、ボタン入力で行いたい場合、JavaScriptを使う必要がある。 今回は更に短くかけるよう、jQueryで表現した。なお、再利用を想定して、装飾は全く行っていない。 ソースコード HTML <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1"> <title>Hello World test!!</title> <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script> <script src="script.js"></script> </head> <body> <form action=""> <input type="number" name="amount" value="0" readonly> <input type="button" name="minus" value="減らす"> <input type="button" name="plus" value="増やす"> </form> </body> </html> JavaScript window.addEventListener("load" , function (){ $("[name='plus']").on("click", function(){ amount_add(this,true); ...
    続きを読む

  • HTML5とCSS3だけでAmazon風の星レビューのフォームを再現する【ホバーした時、ラジオボタンのチェックされた時に星を表示】【flex-direction:row-reverseで逆順対応可】
    以前、サーバーサイドで1から5のいずれかの数値を受付、DBに保存する方法を実践したが、フロント系ではそれをもう少しおしゃれに実装させたい。 そういう時は、なるべくJavaScriptを使用せず、HTMLとCSSだけで表現するのがベターなやり方だと個人的には思う。 だからこそ、今回も同様にHTMLとCSSだけでレビューの星を入力するフォームを再現した。 マウスをホバーした時、星が塗りつぶされ、外れると星が ...
    続きを読む

  • Django-allauthにてフォームを中央寄せにさせる【ログインページのテンプレートのカスタマイズ】
    以前の方法であれば、単純なCSSの割り当てだけだったので、ログインフォームを中央寄せに仕立てることはできなかった。 今回は、HTMLも大幅に変更を行い、ログイン画面のフォームを中央寄せに仕立てる。 account/base.html 全てのログインフォームのテンプレートから継承されるbase.htmlを下記のように編集する。 {% load static %} <!DOCTYPE html> <html> <head> <title>{% block head_title %}{% endblock %}</title> <!--中央寄せ、フォーム系のタグは全てBootstrapから拝借--> ...
    続きを読む

  • 【JavaScript】Chart.jsでグラフを描画する【棒グラフ、円グラフ、折れ線グラフ】
    インストールとチュートリアル 最新版のCDNなら以下サイトから入手できる https://www.jsdelivr.com/package/npm/chart.js?path=dist とりあえず試したい場合は下記CDNをインストールする。(※一部仕様が現行バージョンと異なるため注意) <script src="https://cdn.jsdelivr.net/npm/chart.js@3.6.2/dist/chart.min.js"></script> 続いて、グラフを表示させたい場所に下記、canvasタグを配置。 <canvas id="graph"></canvas> これで準備完了。後は、次項以降のJavaScriptを発動させ、任意のグラフを描画させる。 棒グラフ 公式から拝借。 実行させるJavaScriptが下記。 const ctx = ...
    続きを読む

  • 【Django】簡易掲示板に折りたたみ式サイドバーを実装させる【extends】
    テンプレートの継承を使うことで、複数のページに共通するHTMLをひとまとめにすることができる。 コードは40分Djangoで作った簡易掲示板を元に、折りたたみ式のサイドバーを使ってテンプレートを継承し、実現させる。 折りたたみサイドバーのHTMLとCSS 折りたたみ式のサイドバーは左側に設置させるようにした。templates/common/l_sidebar.htmlを作る。内容は下記 {% load static %} <!DOCTYPE html> <html lang="ja"> ...
    続きを読む

  • 【Django】Ajaxを使ってOSMとLeaflet.jsでマーカーを配置させる
    Ajaxを使うことで、ページ全体を再レンダリングしなくてもデータの投稿ができるようになる。これをOSMとLeaflet.jsを使ったマッピングに使うことで、データの投稿がとてもスムーズになる。 Ajaxに関してはDjangoでAjax(jQuery)を実装、送信と同時に投稿内容を確認する【Django Rest Framework不使用版】を、OSMとLeaflet.jsはDjangoでOpenStreetM ...
    続きを読む

  • DjangoでOpenStreetMap(OSM)とleaflet.jsを使ってマッピングアプリを作る
    ※この方法はDjangoでなくても実現できる。 Djangoでマッピングを実現する方法としてGeoDjangoがある。だが、GeoDjangoは実装が容易ではなく、以前紹介した方法では実現できない事がわかった。 そこで、GeoDjangoよりも容易にマッピングを実現するため、オープンストリートマップ(以下、OSM)とleaflet.jsを使って対処する。 ソースコードは40分Djangoをベースとしてい ...
    続きを読む

  • CSS3とHTML5だけでモーダルダイアログを作る【JS不要】
    モーダルダイアログもとどのつまり、単なる表示非表示なので、HTMLとCSSだけで再現できる。 checkboxとlabelタグを使えば良いだけの話である。 ソースコード まずHTML <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1"> <title>Hello World test!!</title> <link rel="stylesheet" href="style.css"> </head> <body> <label class="modal_label" for="modal_chk">新規作成</label> <input id="modal_chk" class="modal_chk" type="checkbox"> <div class="modal_body"> <label class="modal_bg" for="modal_chk"></label> <div class="modal_content"></div> </div> </body> </html> 2つのlabelタグのfor属性はいずれもcheckboxのI ...
    続きを読む

  • 【jQuery】ボタン式の横スライダーを自作する【通販サイト・コンテンツ共有サイトなどに】
    通販サイトなどでよくある。横スクロール型のスライダーを作る。slick.jsなどを使えば簡単に実現できるが、かえって複雑なので、自作した。 ソースコード HTML。jQueryを読み込み、別途JavaScriptとCSSを読み込む。 <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1"> <title>Hello World test!!</title> <!--jquery読み込み--> <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script> <script src="script.js"></script> <link rel="stylesheet" href="style.css"> </head> <body> <div class="preview_control_area"> <div class="data_preview_area"> <div class="data_preview_frame"><div class="data_preview_content&qu ...
    続きを読む