自動化無しに生活無し

WEBとかAIとかLinux関係をひたすら書く備忘録系ブログ

ウェブデザイン

  • jQueryのslick.jsでカルーセルを表示する【.slick-dotsのCSS付きでボタンを押しやすく】
    jQueryとslick.jsを使うことでカルーセルを簡単に表現することができる。 CDNを読み込み 前もって、以下のCSSと <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css"/> <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick-theme.css"/> JSを読み込んでおく。(jQueryもセットで。) <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script> 使い方 このような形のHTMLに対して <div class="slick_area"> <div class="slick_content">コンテンツ1</div> <div class="slick_content& ...
    続きを読む

  • 【jQuery】.animate()の使い方【アニメーション】
    .animate() の構文 $(要素).animate({ 発動する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> <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> <style> .button-more{ display:inline-block; background:orange; padding:1rem; cursor:pointer; } </style> </head> <body> <span class="button-more">continue ...</span> <script> $('.button-more').on('mouseover', function() { console.log("over"); // このthisはこのイベントが発生した要素自身を意味している。 $(this).animate({ opacity: 0.5, marginLeft: 20, }, 100); }); $('.button-more').on('mouseout', function() { console.log("out"); $(this).animate({ opacity: 1.0, marginLeft: 0, }, 100); }); </script> </body> </html> 結論 jQueryを使用することで、簡単にアニメーションを再現することができる。 イベントと組み合わせることで、モーダルダイアログの表示や、入力欄の ...
    続きを読む

  • position:relativeとabsoluteとtransform:translateを使ったセンタリング【どんな画面幅でも中央に配置する】
    例えば、サイトのタイトルなど、どんな状況でも必ず中央に配置したい場合があるだろう。 そういう時は、positionとtransform:translateを使用することで解決できる。 ソースコード まずは下記のソースコードを動かしてもらいたい。 `<!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> <style> body{ /* ブラウザのデフォルトでmarginが付いているので消しておく。*/ margin:0; } .content_area { position:relative; /* content_areaの高さをブラウザの縦幅全開ま ...
    続きを読む

  • 【chart.js】グラフを4分割して、任意のグラフを作り直して再表示させる【myChart.destroy()】
    ソースコード 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.6.0.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/chart.js@3.6.2/dist/chart.min.js"></script> <script src="script.js"></script> <style> body{ margin:0; } </style> </head> <body> <section style="width:90%;margin:auto;"> <div style="display:flex;"> <div style="position:relative;width:50%;"> <canvas id="graph1"></canvas> </div> <div style="position:relative;width:50%;"> <canvas id="graph2"></canvas> </div> </div> <div style="display:flex;"> <div style="position:relative;width:50%;"> <canvas id="graph3"></canvas> </div> <div style="position:relative;width:50%;"> <canvas id="graph4"></canvas> </div> </div> </section> </body> </html> JavaScript window.addEventListener("load" , function (){ let id_list = [ "graph1","graph2","graph3","graph4" ]; for (let id of id_list){ const ctx = document.getElementById(id).getContext('2d'); const myChart = new Chart(ctx, { type: 'bar', data: { labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'], datasets: [{ label: '# of Votes', data: [12, 19, 3, 5, 2, 3], }] }, options: { scales: { y: { beginAtZero: true } } } }); if (id === "graph3"){ //予め作ったグラフをデストロイする。 myChart.destroy(); //その上で既に作られたグラフに後からデータを入れてみる。(mychartはconstなので、代 ...
    続きを読む

  • 【Django】DurationFieldのフォームの最適解を考えてみる【JSを使うか、Django側で制御するか】
    勉強した時間やトレーニングした時間を入力することができる、DjangoのDurationField。 これは、日付や日時の入力とは異なるため、flatpickrは通用しない。 そのため別途フォームの作成を考慮する必要がある。 普通のinputタグtype=“text"のフォーム これでは:を入力しないといけないので、入力がめんどくさい。 selectタグを使ったフォームに書き換える。 そ ...
    続きを読む

  • 【CSS3】checkboxとlabelを使ってサイドバーを作る【コンパクト】
    以前作成したHTMLとCSSのサイドバーは、見た目は非常にわかりやすいが、場所を取る上に見た目がイマイチ。 そこで、HTMLとCSSだけでサイドバーを作るギミックは踏襲し、デザインだけ変更することにした。 ソースコード 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> <input id="sidebar_chk" class="sidebar_chk" type="checkbox"> <div class="sidebar_area"> <div class="sidebar_content"> <div>サイドバー</div> <div>サイドバー</div> <div> ...
    続きを読む

  • DjangoでPythonライブラリのマークダウンを試してみる【pip install Markdown】
    どうやらPythonライブラリにマークダウンを実現させるライブラリがあるそうだ。これがDjangoで扱えるらしい。 かなり前から、どうにかしてDjangoでマークダウンを実現できないかと考えていたが、ようやく見つかって良かった。 さっそく試してみる。 インストール pip install Markdown バージョンはこうなった。 importlib-metadata==5.0.0 Markdown==3.4.1 zipp==3.9.0 動かすとこうなる このマークダウンを読み込み、HTMLに変換してもらう。 ## Pythonの構文 ``` for i in range(6): print(i) print("hello") print("hello") ...
    続きを読む

  • JavaScriptで文字数をカウントする【サロゲートペアと改行コードに注意】
    JavaScriptで文字数をカウントするシーンはよくある。 例えば、テキストエリアに入力した時、入力された文字数を表示させたりする。 これで、最大文字数まであとどれだけ入力できるのかわかる。 ソースコード 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.6.0.min.js"></script> <script src="script.js"></script> </head> <body> <textarea id="textarea"></textarea> <div><span id="counter"></span>文字入力</div> </body> </html> JavaScript window.addEventListener("load" , function (){ $("#textarea").on("input", function(){ //改行は1文字に含まない ...
    続きを読む

  • EasyTimer.jsを使ってストップウォッチとタイマーを作る
    以前、下記記事でストップウォッチとタイマーを作ったが、 JavaScript(jQuery)でストップウォッチとタイマーを作る【勉強や運動の記録などに】 使いにくい。 だから、タイマーとストップウォッチのライブラリを実装する。 かなり軽量で、イベントのセットもできるEasyTimer.jsを使う。 ストップウォッチの実装 HTML <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1"> <title>ストップウォッチ</title&g ...
    続きを読む

  • JavaScriptで並び替えをするならSortable.js【jQuery不要のライブラリ】
    CDN <script src="https://cdn.jsdelivr.net/npm/sortablejs@latest/Sortable.min.js"></script> 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.6.0.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/sortablejs@latest/Sortable.min.js"></script> </head> <body> <div class="sort_area"> <div class="sort_item" style="background:orange;padding:0.5rem;margin:0.5rem;">1</div> <div class="sort_item" style="background:orange;padding:0.5rem;margin:0.5rem;">2</div> <div class="sort_item" style="background:orange;padding:0.5rem;margin:0.5rem;">3</div> <div class="sort_item" style="background:orange;padding:0.5rem;margin:0.5rem;">4</div> <div class="sort_item" style="background:orange;padding:0.5rem;margin:0.5rem;">5</div> <div class="sort_item" style="background:orange;padding:0.5rem;margin:0.5rem;">6</div> </div> <script> let sort_areas = $(".sort_area"); for (let area of sort_areas ){ new Sortable(area, { animation: 150, ghostClass: 'dragging', onEnd: function(){ console.log("ソート完了") }, }); } </script> </body> </html> 動かすとこうなる 結論 ソート終了時、onEndで何か処理を実行する事ができる。例えば、Ajaxとか。 ドラッグ中にクラスを割り当てる事ができるので、色を変えるとか色々できると思う。 詳細は公式にて。 https://sortablejs.github.io/Sortable/ ...