2022年– date –
-
好きな確率で当たりが出るコイン
「当たり」が出る確率を自由に操作できるコインを作ってみました。任意の確率で当たり判定をしたい場合にご利用ください！ ％の確率で当たりが出ます。 使い方 インプッ... -
【HTML&JS】要素同士を関連付ける「カスタムデータ属性」の使い方
HTMLの要素と要素を紐付けて管理できる「カスタムデータ属性」の使い方を、具体的な実装例を見ながら紹介します。自分の学習・メモ用がメインですが、プログラミング学... -
【JS&CSS】画面スクロールで特定の領域をフワッと表示させる
Intersection Observer APIを使って、画面をスクロールしたときに、特定の要素を下からフワッと表示させる方法を公開します。自分の学習・メモ用がメインですが、プログ... -
【JS&CSS】クリックで画像を切り替える（カルーセル）
画像をクリック または 画像に表示された矢印マークをクリックすると、次々と別の画像に切り替わっていく方法を公開します。自分の学習・メモ用がメインですが、プログ... -
【自動計算】内税・外税の計算ツールと計算方法
税率を入力し、内税または外税を選択します。表に単価と数量を入力すると、総額と税額を自動で算出します。 税率 % 内税 外税 ＋入力欄 クリア 単価 数量 金額 ✖... -
【自動計算】期待値計算ツールと計算方法
数字を入力するだけで期待値が求まるツールです。後半では期待値の計算方法について解説しています。 確率（%）から期待値を求める 確率（分数）から期待値を求める 頻... -
【超便利】iPhoneの画像をワンタッチで合体(結合)する方法（ショートカットアプリ）
iPhoneに保存した複数の写真（画像）を結合し、以下のように1つの画像として保存できます！ iPhoneに保存した写真3枚を結合した例 iOS 13から標準装備となっている『シ... -
【JS&CSS】ポップアップメッセージの作り方
ボタンをクリックすると、画面右下からフワッと現れるメッセージウィンドウ（ポップアップメッセージ）の作り方を公開します。自分の学習・メモ用がメインですが、プロ... -
【HTML&CSS】エクセルやパワポのような表・説明リストの作り方
HTMLの<table>要素や<dl>要素とCSSを組み合わせ、色々な表（テーブル）や説明リストの作り方を公開します。自分の学習・メモ用がメインですが、プログラミング学... -
【XServer】Windows PCからSSH接続する方法（Tera Termを利用）
しばらく操作していないとすぐ忘れてしまうので、備忘録用に。XServerの サーバー上で公開鍵認証用鍵ペアの生成を行い、「Tera Term」というフリーソフトを使って、Wind... -
【CSS】押し込まれるような立体的なボタンを作る
CSSのbox-shadowプロパティやactive擬似クラスを使って、クリックしたときに実際にボタンが押されているような、立体感のあるボタンの作り方を公開します。自分の学習・... -
【JS&CSS】テキストや画像を点滅させる方法
CSSのanimationと@keyframesや、JavaScript のsetInterval()関数を使って、テキストや画像を点滅させる方法を紹介します。自分の学習・メモ用がメインですが、プログラ... -
【JS&CSS】一定時間毎に表示がフワッと変わる
JavaScript のsetInterval()関数とCSSの@keyframesを組み合わせ、一定時間毎に表示がフワッと変わる実装方法を紹介します。 なお、フワッとではなく瞬時に切り替えるだ... -
【超便利】iPhoneのHEIF画像をワンタッチでJPG画像に変える方法（ショートカットアプリ）
iPhoneで撮った写真の画像形式（初期設定ではHEIF）を変換するには？ iPhoneの無料アプリ「ショートカット」で、JPGに一発変換できます！ iOS 13から標準装備となってお... -
【CSS】画面に追従するボタンやバナーを作る方法
画面をスクロールしても表示が固定される、フッターボタンやサイドバナーを作るには？ 本ページ下側：問い合わせのボタンが、画面をスクロールしても常に表示されていま... -
【CSS】ウィンドウ幅に応じて表示を変える方法（メディアクエリ）
@media (min-width: ){}を用いたレスポンシブデザインのコードを紹介します。スマホ・タブレット・PCの3つを想定し、それぞれで表示される内容やレイアウトを変えられま... -
OneDriveに保存したデータをMacで確認する方法
この記事では、OneDriveとMacを連携できる「OneDrive」アプリについて紹介しています。 Google DriveやDropboxなどいくつかクラウドサービスはありますが、officeソフト... -
【JS】ボタンを押すと入力フォームが増える
createElement()とappendChild()を用い、ボタンをクリックすると入力欄が増えていく実装方法を紹介します。ユーザーの状況に応じてフォーム数を変更したい場合に便利で... -
【CSS】各種ブロックやボタン、チェックボックスなどのレイアウトを操作する（フレックスボックス）
HTML要素の配置に便利なdisplay: flex;の基本的な使い方をまとめました。 レイアウトを考えるうえで必ず利用したい機能ですが、プロパティの種類が多く混乱しがち。本記... -
【EC-CUBE 4】Twig まとめ(3) ～ trans / nl2br / escape / raw / price ～
{{ 値 | trans }}や{{ 値 | nl2br }}ってどういう意味？ どうやって使う？ 本記事では、Twigテンプレートでよく使われる「フィルター」と呼ばれる機能について纏めてい...
