新米UIUXデザイナーがHTMLとCSSを学んで副業でサイトを作ったりできるようになったので、勉強するプロセスをまとめました。 勉強する順番 [1]エディタのインストール [2]基本的なCSSの記述を学ぶ [3]HTMLでよく使うタグを学ぶ [4]レイアウトを学ぶ [5]とりあえず簡単なページを作ってみる [6]ちょっと本格的なページを作ってみる [1]エディタのインストール エディタとはざっくり言うとコードを書く用に便利になっているソフトウェアのことです。 とりあえずなんでもいいので以下のどちらかのメジャーなエディタをインストールしてください。 https://visualstudio.microsoft.com/ja/downloads/ https://atom.io/ インストールできたら[2]に進みましょう。 [2]基本的なCSSの記述を学ぶ CSSは基本的に全て以下のような形で書きます。 HTML index.html <p>赤色になるよ</p> <p class="text">青色になるよ</p> CSS style.css p { color: red; } .text { color: blue; } １つ目はHTMLのpというタグに対してCSSで文字色が赤色になるように指定しています。 ２つ目はHTMLのclass="text"に対してCSSで文字色が青色になるように指定しています。 class="クラス名"で指定するときはそのクラス名の前に.をつけ、.クラス名という風に指定します。 形は以下のように常に同じです。 style.css HTMLの指定したい部分の名前 { hoge: 値; } /* 正確に言うと セレクタ { プロパティ: 値; } */ では１つ目と２つ目の指定の仕方の違いはなんでしょう。 以下のような場合を考えてみてください。 ①２つの文字を同じ文字色にしたいとき index.html <!-- ２つの文字を同じ赤色にしたい --> <p>赤色にしたい</p> <p>赤色にしたい</p> <p class="text1">赤色にしたい</p> <p class="text2">赤色にしたい</p> style.css /* ひとつのpで指定できる */ p { color: red; } /* わざわざ2つのクラスで指定しなければならない */ .text1 { color: red; } .text2 { color: red; } ②２つの文字を違う文字色にしたいとき index.html <!-- ２つの文字をそれぞれ赤色と青色にしたい --> <p>赤色にしたい</p> <p>青色にしたい</p> <p class="text3">赤色にしたい</p> <p class="text4">青色にしたい</p> style.css /* pで指定すると後に書いたcolor:blue;が2つのpに反映され、どちらも青色になる */ p { color: red; } p { color: blue; } /* それぞれのクラスで指定できるので色を分けられる */ .text1 { color: red; } .text2 { color: blue; } pタグで指定すると広い範囲を指定できる、クラスで指定すると狭い範囲を指定できるということです。 （①のような場合は単にクラスtextで赤色にしたい２つを指定することもできますが、指定の仕方の違いを説明する例として示しています） また、タグ・クラスとは別に、#idで指定することもできるのですが、とりあえずその２つの指定方法を覚えておけば大丈夫です。 練習問題（所要時間15分） では以下のようなHTMLがあったとき、CSSはどのようになるか、問題を解いてみましょう。 index.htmlとstyle.cssというファイルを作成し、[1]でインストールしたエディタで開き、style.cssにコードを書いていきましょう。 index.htmlには以下をコピペしてください。 index.html <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <link rel="stylesheet" href="style.css"> <title>基本的なCSSの記述を学ぶ</title> </head> <body> <p class="text">この文字を赤色 (red) にしてみよう</p> <div class="block"> <p class="block_text"> blockを横幅500px、縦幅300pxにしてみよう<br> blockの背景色を青色 (blue) にしてみよう<br> blockに5px solid yellow のborderをつけてみよう<br> textの色を白く (white) してみよう </p> </div> <div class="section"> <h2></h2> <div class="section_first"> <p>こちらの文字は #3498db に</p> </div> <div class="section_second"> <p>こちらの文字は #e67e22 にしてみよう</p> </div> </div> </body> </html> CSSのプロパティが分からなければ以下のサイトを参照してください。 http://www.htmq.com/style/ 答えは次の記事に記載します。
自分のための忘備録です。 reCAPTCHAとは google reCAPTCHAとはフォーム送信の際に画像認証などを用い、botを防ぐ仕組み。 V2とV3がある。 v2とv3の違い V2・・・画像認証が出てチェックさせる。フォーム送信に手間がかかる。 V3・・・フォームでの挙動から自動でbotか判断する。フォーム送信に手間がかからないが、効いてるのかいまいち分からない。 設置方法 ①まずgoogleアカウントを作り、ダッシュボードでプロジェクトを作っておく 上の「Google Cloud Platform」の横にあるところから「新しいプロジェクト」 ②reCAPTCHAを設置したいドメインを登録して、v2かv3を選んでキーをもらう サイトキーとシークレットキーがある。 v2の設置コード htmlだけで済ませたいならこちら htmlとphpで処理を分けるならこちら v3の設置コード v3設置してて問題点が出てきた どうやらreCAPTCHAはトークンを取得して５分経つとタイムアウトエラー出るみたいです。 タイムアウトエラー対策 タイムアウトエラーだけ無視できるようにちょっと変更します。 ついでに条件を「スコアが0.9以上なら成功」に変更 フォームのphp if (!empty($_POST['recaptchaResponse'])) { $secret = 'シークレットキーを入れる'; $verifyResponse = file_get_contents('https://www.google.com/recaptcha/api/siteverify?secret='.$secret.'&response='.$_POST['recaptchaResponse']); $reCAPTCHA = json_decode($verifyResponse); $reCAPTCHA_error = []; if($reCAPTCHA->{'error-codes'}) { $reCAPTCHA_error = $reCAPTCHA->{'error-codes'}; }; if ($reCAPTCHA->score >= 0.9 || (count($reCAPTCHA_error) === 1 && $reCAPTCHA_error[0] === 'timeout-or-duplicate')) { // たぶん人間なので送信とかの処理 } else { // ボットかも } } ただこれだとタイムアウトエラーが出ていたらscore関係なくtrueになってしまいます。 recaptureはタイムアウトエラーになるとscoreが消えてしまうので仕方ないみたいです。 効いてるか確認 参考させていただきました https://norando.net/recaptcha-v3_timeout-or-duplicate/ https://blog.4breaker.com/2020/02/29/post-358/
はじめに 私の研究室では多くの高価な装置を多人数で共有して使っています。これらの装置に関して予約追加、他人の予約の確認が可能なソフトをGoogle Apps Script（以下GASと呼ぶ）で勉強がてら作ってみました。 初投稿なので改善するべき点などのフィードバック歓迎します。 TL;DR このソフト作成で学んだこと GASのinstallable scriptとcontainer-bound scriptの違い container-bound scriptはboundしているサービス以外のAPIを用いることができないので、一つのサービスのみを用いるソフトに向いている。 GASには単位時間あたりの利用回数制限(quota)がある。 GASにおいて一つのスクリプトで設定できるtriggerは20個までである。 複数のスクリプトで分散する（2個のスクリプトなら40個のtriggerが利用可能）前提で実装するか、20以内に収める努力をすることが必要である。 GASのCalendarAppにおいてはSync tokenという判別子を用いることで、前回の実行後に変更された予定だけに処理を行うことができ、時間の節約が可能となる。 他人の操作に合わせた予定の追加、変更、削除の3つの機能を最も単純に実装する方法は、予定にゲストとして追加する方法である これにより、All day event、詳細、開催場所などの情報をスクリプトで処理する必要がなくなった。 この記事においては詳細の多くを省いているので、詳しく知りたい人は以下のGitHubリポジトリを参照してください。 GitHub repo [equipment-reservation] 使用方法 装置の使用状況（予定の形で保存）をスマートフォンやPCのGoogleカレンダーアプリで確認 アプリで空いている時間帯に予定を追加する形で装置の予約を行う 予約には名前が書いてあり、予定の交渉はSlackや対面で行うことを想定 連絡の機能はこのソフト内にはない ソフトウェアの仕様 仕様に関してはかなり細かく突き詰めた後にプログラムの作成を行った。 概要 Google Apps Scriptというサービスを用いる。これはGoogleのサービスをスクリプトで操作できるサービスで、今回はSheets（表計算）とCalendar（カレンダー）を用いる。 Sheetsはデータベースとして動作し、ユーザーの情報と設定内容を保存している。CalendarはUIとして動作し、予約の追加、変更、確認を行う。 カレンダーにはユーザー側で操作するカレンダー（予約追加および変更用）とサーバー側で操作するカレンダー（予約確認用）が存在する。 前者のカレンダーが操作されたとき、GASが後者のカレンダーに変更を反映する。 以降、前者をWriteカレンダーと呼び、後者をReadカレンダーと呼ぶ。 Writeカレンダー（予約追加および変更用、ユーザー側で操作する） 予定を作成することで、使用する装置、装置の状態、使用時間を指定する。 ユーザー毎にカレンダーが用意されている。 カレンダー名はWrite [User Name]とする。ユーザー名がTana.Y1の場合はカレンダー名はWrite Tana.Y1である。 予定の表記は[device(小文字)] [state]とする。PVDという装置を冷却する場合はpvd coolとする。 Readカレンダー（予約確認用、サーバー側で操作する） 他のユーザーの装置の使用状況を予定としてGoogleカレンダー上に表示する。 ユーザー側の操作方法 情報に疎い人でも問題なく使用できる簡単な操作方法を目標としている。 ユーザーの追加(初期設定) カレンダーを閲覧するGoogleアカウントでGoogle Groupsに加入。 これによりカレンダーの編集権限を得ることができる。 Sheets上で使用する装置にチェックを入れる（一枚目の画像の➂に対応）。 ユーザーのカレンダーを各自のカレンダーアプリに登録する。 Read(読み取り専用)とWrite(書き込み専用)の二つのカレンダーのリンクが用意されている(一枚目の画像の➁では追加できない)。 URL of Calendarというシートを選択し、二枚目の画像のようにリンクをクリックするとGoogle Calendarが立ち上がり、カレンダーを追加できる。 マウスカーソルをリンク上に移動してカレンダー上に追加する。 予定の追加 Calendar上で予定を追加する。 予定のタイトルには[装置名] [状態]を記入する（画像の➀に対応）。 装置名はSheetsの一行目で設定されており、状態は任意の値の入力が可能である。 追加するカレンダーはWrite [User Name]を選択する（画像の➁に対応）。 プログラムの動作 概要 ユーザーがカレンダー上で予約を追加 GASがカレンダーの予定の変化を検知 Calendarの予定編集時のトリガーを用いる。 変化した内容をみて、その装置を使用するユーザーの読み取り専用カレンダーに予定を表示する。 予定が追加された場合は読み取り専用カレンダーに予定を追加する。 予定が変更された場合は変更前の予定は消え、変更後の予定が読み取り専用カレンダーに表示されるようにする。 予定が削除された場合は読み取り専用カレンダーから予定を削除する。 動作の実現方法と大事な点 Standalone scriptを用いている。トリガーはinstallable triggerを用い、Sheets上での変更を検知する。 Container-bound scriptを用いなかったのは、Sheetsにboundした場合はCalendarのAPIを呼び出す権限がなくカレンダー名を変更できないため、今回の目的を達成できないためである。 カレンダーは事前に作成する必要がある。スクリプト一つにつき設定できるトリガーは20個であるため、ユーザー19人分の読み取り専用、書き込み専用カレンダーを作成し、書き込み専用カレンダーにトリガーを設定した。残りの1個のトリガーはsheetsに設定した。人が入れ替わる場合はカレンダーを再利用することを想定している。 全員の予定を確認することのできるカレンダーはALL.U1というユーザー名で作成した。 このスクリプトは次に示すようないくつかの役割を担っている。 ユーザーの追加、変更 ユーザーの追加、変更によるカレンダー名の変更 ユーザーの追加、変更による予定内のユーザー名の変更 ユーザーによる予定の追加、変更、削除 ユーザーが読み取り専用カレンダーで閲覧する装置の変更 1. ユーザーの追加、変更 Sheets上に名前を追加、変更する。名前の表記はローマ字表記で行い名、姓の順で表記し間にスペースをはさむ。 Sheets上での変更をトリガーが検知する。 名前を名と姓に分解して、[姓の最初の四文字].[名の最初の文字]をUser Name 1として求める。 すべてのユーザーのUser Name 1を見て上の行から順に重複防止用の番号をつけていき、User Name 2とする。これを以降ユーザー名(User Name)として採用する。User Name 2の表記は[姓の最初の四文字].[名の最初の文字][1,2,3,...]のようになる。 2. ユーザーの追加、変更によるカレンダー名の変更 ユーザーの追加、変更が行われた後にカレンダー名の変更が行われる。 Sheetsの行ごとにカレンダーが二つ用意されている。これは読み取り専用と書き込み専用カレンダーに対応している。それぞれのカレンダーの名前をそれぞれRead [User Name]とWrite [User Name]に変更する。 3. ユーザーの追加、変更による予定内のユーザー名の変更 ユーザーの追加、変更が行われた後にカレンダー名の変更が行われ、そのあとに予定内のユーザー名の変更が行われる。 4. ユーザーによる予定の追加、変更、削除 Sync tokenという判別子を用いることで、変更された予定だけに処理を行う。これにより時間の節約が可能となる。 追加、変更、削除の3つの機能を最も単純に実装する予定の追加方法として読み取り専用カレンダーをゲストとして予定に追加する方法を用いた。これにより、ゲストに追加された読み取り専用カレンダーから予定を見ることができる。 予定追加の場合は読み取り専用のカレンダーを予定のゲストとして追加する形で予定を追加する。 予定変更の場合は、読み取り専用のカレンダーはすでに予定のゲストとして追加されてているため、もう一度ゲストとして追加しても変化はない。また、変更は自動的に読み取り専用カレンダーに適用される。 予定削除の場合は、読み取り専用のカレンダーがゲストとして参加している元の予定が削除されるとその予定は読み取り専用のカレンダーから削除される。 5. ユーザーが読み取り専用カレンダーで閲覧する装置の変更 閲覧する装置を変更した場合は、過去10日間にさかのぼり、閲覧するとして設定した装置の予定を追加する。前に閲覧していたが、今回閲覧しないと設定した装置に関しては予定を削除する。予定の追加、削除に関しては前と同様にゲストとして読み取り専用カレンダーに参加させることで追加する。 installable triggerのquotaの確認 Google Apps Scriptには以下のquota(利用回数制限)が設定されている。19人のユーザーがいたとしても十分な実行回数が確保できると考える。 カレンダーの予約の作成：一日当たり5,000回実行可能 triggerの実行時間：一日当たり90分間実行可能 1回の実行時間を15秒とすると一日当たり360回実行可能 Quotaには書いていないが、連続での予定の作成の間隔が短すぎると、予定の作成を拒否される。したがって、予定の作成の間隔を1sと設定した。 付録 ユーザー名の表記 ユーザー名は重複がないように以下のような形式になっている。数字は、姓名に重複のない場合は1であり、重複があった場合は後に作ったユーザーの数字を一つずつ増加させる。 [姓の最初の4字(最初の文字は大文字)].[名の最初の一文字(大文字)][1,2,3,...] ソフトウェアで用いる省略名称 スマートフォンのカレンダーアプリで表示することのできる文字数は制限されているため、装置名、状態、ユーザー名を省略表記で表示する。なお、装置の状態名は基本的に入力の簡単化のため、小文字になっている。装置名、ユーザー名はユーザーが入力することは基本的にはないため、大文字を用いている。 - Devices (Sheets上で装置名の設定が可能) Device Description cmp Chemical mechanical planarization rie Reactive ion etching cvd Chemical vapor deposition pvd Physical vapor deposition euv Extreme ultraviolet lithography diff Diffusion cleg Cleaning dicg Dicing Pack Packaging States of equiment（これに限らず任意の値を用いることができる） State 説明 evac evacuation use/[NO ENTRY] Main operation cool cooling Users (Sheets上でユーザーの追加可能) User Name 名前 Tana.Y1 Tanaka Yuusuke Tana.Y2 Tanabe Yuta Tana.S1 Tanahashi Shion Chen.F1 Chen Fan Zhu.Y1 Zhu Yu
ページの表示速度改善のために画像や動画などのリソースをスクロールが達したタイミングで読み込み表示する遅延読み込み（Lazyload）を簡単に実装できるlozadの使い方について。 目次 Lozadとは？ Lozadの使い方 lozadの読み込み タグに適用する imageタグへの適用例 pictureタグへの適用例 iframeタグへの適用例 videoタグへの適用例 背景画像への適用例 レスポンシブ対応方法 デフォルトのクラス名(lazad)を変更する方法 Lozadとは？ リソースの遅延読み込みを簡単に実装できる。 javascriptで書かれた軽量ライブラリ。 様々なタグに対応している（img, picture, iframe, videos, audios） レスポンシブ画像や背景画像などにも対応。 画像の代替表示ができる（ダミーの軽量な画像を表示しておく）。 Lozadの使い方 1. lozadの読み込み lozadの読み込み方法は２つある。 CDNを使う パッケージをインストールする 1-1. CDNで読み込む headタグ内に記述。 <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/lozad/dist/lozad.min.js"></script> 1-2. パッケージをインストールする パッケージをインストールし、読み込む。 インストール $ npm install lozad インストールはyarnでもできる。yarn add lozad 1-1-2. 読み込み 読み込み（ES6の場合） import lozad from 'lozad' const observer = lozad(); //デフォルトのクラス名はlazad。引数で好きなクラス名を指定できる。 observer.observe(); または 読み込み（CommonJSの場合） var lozad = require('lozad') const observer = lozad(); //デフォルトのクラス名はlazad。引数で好きなクラス名を指定できる。 observer.observe(); ES6とCommonJS（CJS）の歴史はこちらの記事がわかりやすいです。 1-1-3. HTMLにインポート lozadを使用したいページの中で上記内容を読み込む。htmlの下部</body>の上に記述する。 <script src="ファイルパス"></script> または直書き（おすすめしません、、） <script> import lozad from 'lozad' const observer = lozad(); observer.observe(); </script> 以上でlozadを使う準備が完了。 2. タグに適用する lozadの基本構文で使用する属性は2つ。 class="lozad" data-src="リソースのパス" class="lozad" ※デフォルトのクラス名の場合 data-src="遅延読み込みするリソースのパス" src="ダミー画像のパス"（なくてもいい） 遅延読み込みしたいリソースにクラス名lozadをつけ、読み込む画像をdata-srcに記述する。 もし、ページの初期ロードのタイミングでダミー画像（軽量な画像など）を表示しておきたい場合はsrcに記述する。 2-1. imageタグへの適用例 image.pngを読み込む場合 通常 <img src="image.png"> ↓ 遅延読み込みの適用 lozad適用（これの記述でOK） <img class="lozad" data-src="image.png"> ↓ 初期にダミー画像 dummy.png を表示させておく場合 lozad適用（ダミー画像あり） <img class="lozad" data-src="image.png" src="dummy.png"> 2-2. pictureタグへの適用例 ダミー画像の有無で記述方法が異なる。 ダミー画像を設置しない場合 ダミー画像を設置する場合 (参考) pictureタグの基本的な使い方 2-2-1. ダミー画像を設置しない場合 sourceタグのどの条件にも当てはまらない場合に表示するimageタグを記述しない。 代わりに、pictureタグの中で画像を指定する。その際、最少の高さも指定しておく。 <picture class="lozad" style="display: block; min-height: 1rem" data-iesrc="image.jpg" data-alt=""> <source srcset="image-large.jpg" media="(min-width: 1280px)"> <source srcset="image-middle.jpg" media="(min-width: 980px)"> <source srcset="image-small.jpg" media="(min-width: 320px)"> </picture> alt属性はdata-altに記述する。 実際に使う場合は、pictureタグに以下を追記して、imageタグにnoscriptタグ記述すれば、lozadの付け外しが簡単にできる。 class="lozad" style="display: block; min-height: 1rem" data-iesrc="条件に当てはまらない時の画像パス" data-alt="" <picture class="lozad" style="display: block; min-height: 1rem" data-iesrc="条件に当てはまらない時の画像パス" data-alt=""> <source srcset="image-large.jpg" media="(min-width: 1280px)"> <noscript><img src="条件に当てはまらない時の画像パス" alt=""></noscript> --> </picture> 2-2-2. ダミー画像を設置する場合 スクロールが達するまでダミーで表示しておく画像を設定する場合はimageタグに記述する。 <picture class="lozad" style="display: block; min-height: 1rem" data-iesrc="条件に当てはまらない時の画像パス" data-alt=""> <source srcset="image-large.jpg" media="(min-width: 1280px)"> <img src="ダミー画像のパス"> </picture> pictureタグの中のimageタグの用法が通常と異なることに注意が必要。 2-3. iframeタグへの適用例 imageタグへの適用と同じ。 <iframe data-src="リソースのパス" class="lozad"></iframe> 2-4. videoタグへの適用例 imageタグへの適用と同じ。 <video class="lozad" data-src="video/mov.mp4"> 再生オプションを指定する場合は以下属性を追加する。 属性 内容 autoplay 自動再生 muted デフォルトでミュート loop 繰り返し autoplay playsinline スマホで勝手に全画面表示にしない controls コントロールパネルの表示 poster="画像パス" 動画を再生するまでに表示する画像 preload=”none” 事前読み込みしない 記述例 <video class="lozad" data-src="video/mov.mp4" autoplay muted loop playsinline controls data-poster="thumnail.jpg"> source属性を使う場合 source属性を使って環境に合わせて再生する動画を選ぶ場合は以下のようになる。（基本mp4再生できるので不要） <video class="lozad" data-poster="images/backgrounds/video-poster.jpeg"> <source data-src="video/mov_bbb.mp4" type="video/mp4"> <source data-src="video/mov_bbb.ogg" type="video/ogg"> </video> posterは動画を再生するまでに表示する画像。lozadを適用する場合はdata-posterとする。 2-5. 背景画像への適用例 <div class="lozad" data-background-image="image.png"> </div> 3. レスポンシブ対応方法 タグの中で画像幅に合わせて表示するリソースを指定することができる。data-srcsetを使う。 data-srcset="画像パス1 条件, 画像パス2 条件" srcset属性はHTML5.1から追加された属性で、imageタグやpictureタグ内のsourceタグで使うことができる。 幅の指定はw（画面のピクセル幅）かx（デバイスピクセル比）かvw（画面幅に対する割合）で指定する。 実例 <img class="lozad" data-src="image-3x.png" data-srcset="image.png 1000w, image-2x.png 2000w"> 画面の幅が1000pxまではimage.pngを表示。 1001px~2000pxまではimage-2x.pngを表示。 どの条件にも当てはまらない（2001px以上）はimage-3x.pngを表示。 pictureタグを使って条件を指定して出し分けるのもあり。 4. デフォルトのクラス名(lazad)を変更する方法 デフォルトのクラス名lozadは変更することができる。 lozadを読み込んだjsファイルで、lozadの引数で好きなクラス名を指定する。 .js import lozad from 'lozad' const observer = lozad('.適用したいクラス名'); observer.observe(); 実例 jsファイルの設定 lazyload.js import lozad from 'lozad' const observer = lozad('.is-lazyload'); observer.observe(); ↓ htmlに適用 .html <img class="is-lazyload" data-src="image.png"> <script src="public/js/lazyload.js"> </body> 以上。
今日の活動 道場コース HTML & CSS 中級編 レッスン一覧部分を作ろう メッセージ部分を作ろう フッターを作ろう ジーズアカデミー説明会参加
サイトによくあるトップページの動画自動再生・・・ なかなか動かなくて調べました。 JSXとの兼ね合いで良い記事が見つからず、あれこれ試したが、 <vide src="/images/~~~~~~~.mp4"></video>では動かなかった。 <video autoPlay loop muted playsInline controls style={{ width:"100%" }}> <source src="/images/~~~~~~~.mp4" /> </video> <source>タグを作って内側に書くという方法。 レスポンシブにするかはstyle={{ width:"100%" }}の部分をつけるか外すか。 ※ここのHTMLなどをJSX記法に変換してくれるオンラインツール便利すぎた！！！ HTML to JSX Compiler
階層リストのチェックボックス いまとあるアプリのチェック付きリストを実装しようとしています。 パタパタと押し開くようなボタンです。 やりたいこと 孫から親をさかのぼって、チェックボックスをすべて入れたい (BEFORE) □朝ごはん □味噌汁 □わかめ □昼ごはん □ラーメン ■わかめ □夜ごはん □スープ □わかめ (AFTER) □朝ごはん □味噌汁 □わかめ ■昼ごはん ■ラーメン ■わかめ □夜ごはん □スープ □わかめ source 親から子供に行くソースは多々ある。 しかし、逆に下から上っていくものが見つからない あとラーメンを押したとき、わかめには入らないこと なかなかうまくいかへんなあ・・・ Script とりあえず、自分でやりかけてみる・・・ （またしても、誰かにお助けしてもらえないかなと期待する） 追記 わかめの親が、いつまでたっても味噌汁のまま teratailに投稿 https://teratail.com/questions/332516?modal=q-comp $(this).parent().parent().find('label').html() "わかめ" $(this).parent().parent().parent().find('label').html() "味噌汁" $(this).parent().parent().parent().parent().parent().parent().parent().find('label').html() "味噌汁"
はじめに 寝られないのでコーディング・・・するほど元気もないのでとりあえずスラ〇ム動かしてみた。 動かす画像 権利関係いろいろありそうなので頭のトンガリを少なくして画像作成っと 制作時間1分。やはりスラ〇ムは書きやすい。 動かす ここのサイトからアニメーション用のCSSをコピペ （コピペでOKみたいなサイトは本当にありがたい） 継続して動くように少し修正 animation: infinite ↓動いているところ（表示まで数秒・・・） 表示されなかったら「Result」をクリック See the Pen GRryZMY by Shinkai (@Shinkai-) on CodePen. やだ、可愛い。 子供が書いた絵とか動かしてあげたら喜びそう。身近に子供いないけど。 CSS .anim-box.poyoyon2.is-animated { animation: poyoyon2 2s infinite forwards; } @keyframes poyoyon2 { 0% { transform: scale(1.0, 1.0) translate(0, 0); } 15% { transform: scale(0.98, 0.9) translate(0, 5px); } 30% { transform: scale(1.02, 1.0) translate(0, 8px); } 50% {transform: scale(0.98, 1.05) translate(0, -8px); } 70% { transform: scale(1.0, 0.9) translate(0, 5px); } 100% { transform: scale(1.0, 1.0) translate(0, 0); } 0%, 100% { opacity: 1; } } 以上。 ダメだ。まだ眠くない・・・。
よく「あ！これHTML/CSSで作ってみたいなー」と思うことがあって、いまだにタグが曖昧なので、「文字コードの指定ってどのタグだっけ？」ってよくなるので、HTMLファイルおよびCSSファイルのテンプレートを投稿しておきます。 HTML index.html <!-- HTMLテンプレート --> <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <!-- CSS読み込み --> <link href="https://fonts.googleapis.com/css2?family=Lato:wght@400;700&family=Noto+Sans+JP:wght@400;700&display=swap" rel="stylesheet"> <link rel="stylesheet" href="style.css"> <!-- JQuery読み込み --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script> </head> <body> FINALFANTASY </body> </html> CSS style.css /* CSSテンプレート */ body{ font-size:0.6in; font-family: 'Lato', 'Noto Sans JP', 'ヒラギノ角ゴ ProN', 'Hiragino Kaku Gothic ProN', 'メイリオ', Meiryo, 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif; } 改善点があれば教えてください！ 随時改善していきます！
