ドリリウム

趣味をとことん突き詰めるブログ。ペット / フィンチ / 鳥 / 文鳥 / ジュウシマツ / 写真 / カメラ / 高知 / 釣り / DIY / バイク / 車 / 家具制作 / アクアリウム / コーヒー / 地方移住 / ルノー・ルーテシア / SUZUKI ST250 E type / EOS Kiss M

こんにちは。カタミチ(@katamichi2h)です。

お問い合わせsyufukc@gmail.com / Twitter

HTML/CSS/JavaScript

【JavaScript】テーブルの動的な操作(行の追加・削除/列の追加・削除/1行ずつループ/全セルループ)

JavaScript/jQueryを使用したテーブルの動的な操作方法を解説します。 BLOGTOOLS.製作時に使用した技術やコードの一部を解説しています。 この操作はテーブルタグの自動生成機能のプレビューおよびデータ入力用に使用しました。 1行ずつループ 始めに1行ず…

【JavaScript】テキストエリアをクリックすると全選択&コピーする方法

BLOGTOOLS.製作時に使用した技術やコードの一部を解説しています。 コードをコピーする際などにありがちな、テキストエリアをクリックすると中身が全選択されてコピーも完了するという機能を実装する方法を解説します。 コード自体は極めて簡単で、2行で済み…

【PHP】文字入り画像を描画する方法

PHPで1から画像を描画したり、画像内に文字を埋め込む方法を紹介します。 ブログに便利なツール集「BLOGTOOLS」内のA4用紙比イメージやはがき比イメージを自動生成するために使用しました。 blog-tools.jpn.org 例えばこんな風に、商品を紹介する時に寸法をA…

ブログに便利なツール集を公開しました。

Amazonベースではなくなったカエレバさんの代替案を作ったり、Amazon・楽天・Yahoo!ショッピングの検索結果リンクをまとめて作れるようにしたり、ブログ記事に乗せるテーブルタグを自動で作ったり、レビューなんかで便利なサイズ比較画像を作ったり。 これま…

【jQuery】fadeでdisplay:inline-blockにする

fadeIn、fadeOut、fadeToggleなどを使って表示・非表示を切り替えるのは便利な一方で少し不便なポイントもあります。それは、fadeを使うとdisplayの値が「none」で「block」切り替わるということです。 デザイン上の都合で表示する時は「block」ではなく「in…

【Google Search Console】”ビューポートが「端末の幅」に収まるよう設定されていません” の原因と対策

ある日Google Search Consoleを確認すると、Webサイトにエラーが出ているとの表示がありました。エラー内容は【ビューポートが「端末の幅」に収まるよう設定されていません】。 ギクリとしました。 心当たりがあったわけです。そのWebサイトはPHPで制作して…

REDIPS.drag テーブルのセルをあっちへこっちへドラッグ&ドロップ

「REDIPS.drag」を使うと、テーブル内のセルを好きな場所へドラッグ&ドロップで移動することができます。正確には、テーブルのセルにあるdiv要素を移動しています。異なるテーブルを跨いでドラッグ&ドロップしたり、削除したり、セルをマージしたり、色々…