How to pronounce it? "haitho" is maybe good.
どうも7noteです。supやsubだと下線がずれるので、対策方法を考える 上付き文字を指定できる<sup>や、 下付き文字を指定する<sub>などがありますが、 これらに下線を指定すると表示がちょっとおかしくなってしまいます。 【崩れてしまう例の画像↓】 index.html <p>水の化学式はH<sub>2</sub>O<sup>※</sup>である</p> style.css p { text-decoration: underline; } このようにsupやsubでは表示位置が上下にずれてしまうため下線がまっすぐ続きません。 これをまっすぐ線を引くための方法を考えていきます。 解決方法①： テキストをすべて画像にする 画像にすれば万事解決ですね。何の問題もありません。 しかしテキストの修正やSEOの事を考えるとあまり最適な方法とはいえなさそうです。 解決方法②： 下線をborderや疑似要素で再現する 下線がずれるのは、text-decoration: underline;を使っているからなので、この指定を使わずに下線を引けば問題ないはずです。 style.css p { line-height: 1.2; /* borderの位置はline-heightを使って微調整が必要 */ display: inline-block; border-bottom: solid 1px #000; } 解決方法③： vertical-alignを使って表示位置を微調整する（※subのみ） subにしか使えない方法ですが、vertical-alignの指定を変えることで下揃えにすることが可能です。 style.css sub { vertical-align: baseline; } 妥協案①: 対象部分の下線を消す inline-block要素にすることで、下線をつけないようにすることができます。 style.css sup,sub { display: inline-block; } 下線がずれたままよりはまだ見栄えがいいですね。指定が簡単なので妥協案の1つとしてはOKかなと思えます。 まとめ 解決方法3つ+妥協案1つを考えました。もしかしたら他にももっと良い方法があるかもしれませんので、もし「こうすればもっと簡単に下線がきれいになるよ！」という案があればぜひコメントください。 まとめとしては、 <sup>、<sub>では下線がずれる borderを下線の変わりに使用できる inline-block要素には下線が出ない このようなところでしょうか？ ぜひ他にもアイデアあればコメントください。 おそまつ！ ~ Qiitaで毎日投稿中!! ~ 【初心者向け】WEB制作のちょいテク詰め合わせ
今回は、備忘録としてJQueryを使った、ボタンの活性化・非活性化について書きます。 また、最後にある一定時間だけ非活性にする方法なども載せます。 基本の形 JQueryでの記載は以下になります。 ボタンを非活性にする $(要素).prop('disabled',true); ボタンを活性化する $(要素).prop('disables',false); 例 ボタンをクリックしたら非活性化する 例として、ボタンをクリックした後、非活性化することをやってみます。 html <button id="hoge">ボタン</button> JQuery $(function()){ $('#hoge').on('click',function(){ $(this).prop('disables',true); }); }); このような流れになります。 おまけ ボタンをクリック→一定時間(１分間）非活性化→活性化の流れをやってみます。 html <button id="hoge">ボタン</button> JQuery $(function()){ $('#hoge').on('click',function(){ $(this).prop('disables',true); setTimeout(function () { $('#hoge').prop('disabled', false); }, 60000); }); }); 一定時間非活性化から活性化をするには、setTimeoutを使い、一定時間経過したら ボタンを活性化する処理にしてみました。 参考 https://qiita.com/ponsuke0531/items/ed8dc7991311a9a2a5a7 https://qiita.com/pugiemonn/items/5db6fb8fd8a303406b17 https://mugenweb-note.com/web/jquery/timer-reload
これは何 要素のレイアウトでdisplay: flexが大活躍している2021年において、floatプロパティをどう使うかを書いた記事です また、記事投稿イベント「3000文字Tips - 知ると便利なTipsをみんなへ届けよう」への投稿記事でもあります リポジトリとGitHub Pages この記事を書くために書いたコードは全て公開しています。 実際の見た目はGitHub Pagesからどうぞ。 画像にテキストを回り込ませたいときが1番使うと思われる このようなレイアウトを組むときにfloatが使えます。 以下に簡略化したコードを載せておきます。 <body> <h1 class="title">floatをあえて使うなら</h1> <div class="container -left"> <img src="https://picsum.photos/160?random=1" alt="" width="160" height="160" class="image -float-left" /> <h2>float: left</h2> <p class="paragraph">Lorem ipsum ~~~</p> </div> <div class="container -right"> <img src="https://picsum.photos/160?random=2" alt="" width="160" height="160" class="image -float-right" /> <h2>float: right</h2> <p class="paragraph">Lorem ipsum ~~~</p> </div> </body> body { background-color: #f2f2f2; display: grid; gap: 16px; grid-template-columns: 1fr 400px 400px 1fr; padding: 32px; } .title { grid-column: 2 / 4; } .container { background-color: #fff; border-radius: 8px; padding: 24px; } .container.-left { grid-column: 2 / 3; } .container.-right { grid-column: 3 / 4; } .container.-two-column { grid-column: 2 / 4; } .image { background-color: #dcdcdc; border-radius: 4px; } .image.-float-left { float: left; margin-right: 16px; } .image.-float-right { float: right; margin-left: 16px; } .paragraph { margin-top: 2px; } 昔ながらの、要素を横並びにする使い方は駄目？ 駄目というほどではありません。 思った通りのレイアウトができて、コードを書く人同士が上手く連携できるなら何も問題は無いはずです。 しかし複数の要素をfloatで横並びにする際、最後の要素のfloatは解除してあげる必要があります。 画像に一律でfloat: left 最後の画像にはfloatをかけていない 実現したいのが左のレイアウトなら良いのですが、どちらかといえば右のレイアウトを意図する方が多いのではないでしょうか？ ちなみに右のコードは以下のように書きました。 <div class="container -two-column"> <img src="https://picsum.photos/160?random=3" alt="" width="160" height="160" class="image -traditional-float" /> <img src="https://picsum.photos/160?random=4" alt="" width="160" height="160" class="image -traditional-float" /> <img src="https://picsum.photos/160?random=5" alt="" width="160" height="160" class="image -traditional-float" /> <h2 class="traditionl-float-headline">横並びとしてのfloat</h2> <p class="paragraph">Lorem ipsum ~~~</p> </div> .image.-traditional-float:not(:last-of-type) { float: left; margin-right: 16px; }
ブラウザ上で手軽に機械学習もでるを扱えるml5.jsを使って、ローカルからアップした画像を認識させるための手順。 ソース <html> <head> <meta charset="UTF-8"> <title>画像をアップロードすると画像認識してくれるページ</title> <script src="https://unpkg.com/ml5@latest/dist/ml5.min.js"></script> <style></style> </head> <body> <h1>画像をアップロードすると画像認識してくれるページ</h1> <p id="label">label:</p> <p id="confidence">confidence:</p> <div class="upload"><input type="file" name="file" id="file"></div> <canvas id="canvas"></canvas> <script> let file = document.getElementById('file'); let canvas = document.getElementById('canvas'); let canvasWidth = 400; let canvasHeight = 300; let uploadImgSrc; let label = document.querySelector("#label"); let confidence = document.querySelector("#confidence"); // 作成したモデルのURL const imageModelURL = 'Teachable Machineで作成したモデルのURL'; // Canvasの準備 canvas.width = canvasWidth; canvas.height = canvasHeight; let ctx = canvas.getContext('2d'); let classifier = ml5.imageClassifier(imageModelURL + 'model.json', () => { // ロード完了 console.log('Model Loaded!'); }); //画像を読み込む関数 function loadLocalImage(e) { // ファイル情報を取得 let fileData = e.target.files[0]; // 画像ファイル以外は処理を止める if (!fileData.type.match('image.*')) { alert('画像を選択してください'); return; } // FileReaderオブジェクトを使ってファイル読み込み let reader = new FileReader(); // ファイル読み込みに成功したときの処理 reader.onload = function () { // Canvas上に表示する uploadImgSrc = reader.result; canvasDraw(); } // ファイル読み込みを実行 reader.readAsDataURL(fileData); } // ファイルが指定された時にloadLocalImage()を実行 file.addEventListener('change', loadLocalImage, false); // Canvas上に画像を表示する関数 function canvasDraw() { // canvas内の要素をクリアする ctx.clearRect(0, 0, canvasWidth, canvasHeight); // Canvas上に画像を表示 let img = new Image(); img.src = uploadImgSrc; img.onload = function () { if (this.width / this.height > canvasWidth / canvasHeight) { // 幅に合わせて画像サイズ設定 var imgWidth = canvasWidth; var imgHeight = Math.floor(this.height * (canvasWidth / this.width)); } else { // 高さに合わせて画像サイズ設定 imgHeight = canvasHeight; imgWidth = Math.floor(this.width * (canvasHeight / this.height)); } ctx.drawImage(img, 0, 0, imgWidth, imgHeight); } classifyCanvas(); } function classifyCanvas() { classifier.classify(canvas, gotResult); } // 画像認識結果を表示する関数 function gotResult(error, results) { if (error) { console.error(error); } console.log(results); // 結果のラベルと信頼度を表示 label.textContent = `Label: ${results[0].label}`; confidence.textContent = `Confidence: ${results[0].confidence.toFixed(4)}`; } </script> </body> </html> モデルの準備 モデルのURLを指定してコールバック関数を呼び出すだけです。 // 作成したモデルのURL const imageModelURL = 'Teachable Machineで作成したモデルのURL'; let classifier = ml5.imageClassifier(imageModelURL + 'model.json', () => { // ロード完了 console.log('Model Loaded!'); }); イメージのアップロード HTML要素としてinputをtype="file"で利用 <input type="file" name="file" id="file"> アップロード処理は以下の部分 function loadLocalImage(e) { // ファイル情報を取得 let fileData = e.target.files[0]; // 画像ファイル以外は処理を止める if (!fileData.type.match('image.*')) { alert('画像を選択してください'); return; } // FileReaderオブジェクトを使ってファイル読み込み let reader = new FileReader(); // ファイル読み込みに成功したときの処理 reader.onload = function () { // Canvas上に表示する uploadImgSrc = reader.result; canvasDraw(); } // ファイル読み込みを実行 reader.readAsDataURL(fileData); } // ファイルが指定された時にloadLocalImage()を実行 file.addEventListener('change', loadLocalImage, false); Canvasへの描画 画像ファイルを読み込むと以下の関数が実行される function canvasDraw() { // canvas内の要素をクリアする ctx.clearRect(0, 0, canvasWidth, canvasHeight); // Canvas上に画像を表示 let img = new Image(); img.src = uploadImgSrc; img.onload = function () { if (this.width / this.height > canvasWidth / canvasHeight) { // 幅に合わせて画像サイズ設定 var imgWidth = canvasWidth; var imgHeight = Math.floor(this.height * (canvasWidth / this.width)); } else { // 高さに合わせて画像サイズ設定 imgHeight = canvasHeight; imgWidth = Math.floor(this.width * (canvasHeight / this.height)); } ctx.drawImage(img, 0, 0, imgWidth, imgHeight); } classifyCanvas(); } 最初に宣言したcanvasのサイズ（今回は横400,縦300）に画像側をリサイズして描画している。 画像認識処理の実行 先ほどの描画関数の最後でclassifyCanvas()を呼んでいる。 認識処理完了したらコールバック関数で結果を画面表示。 function classifyCanvas() { classifier.classify(canvas, gotResult); } // 画像認識結果を表示する関数 function gotResult(error, results) { if (error) { console.error(error); } console.log(results); // 結果のラベルと信頼度を表示 label.textContent = `Label: ${results[0].label}`; confidence.textContent = `Confidence: ${results[0].confidence.toFixed(4)}`; }
