たわごとの記～耽溺者の備忘録～

9/28/2024

tableのセル内に同じ幅の画像を縦に並べて揃える（水平揃え）

<table>
    <tr>
        <td style="display: flex; flex-direction: column; align-items: center;">
            <img src="img1.jpg"><img src="waon.jpg"><img src="img2.jpg">
        </td>
    </tr>
</table>

tableのセル内に並べずとも水平揃えは可能

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>画像の縦並び</title>
    <style>
        .container {
            display: flex;
            flex-direction: column;
            align-items: center;
        }
    </style>
</head>
<body>
    <div class="container">
        <img src="img1.jpg" alt="前向きウサギ">
        <img src="waon.jpg" alt="イッヌ">
        <img src="img2.jpg" alt="振り向きウサギ">
    </div>
</body>
</html>

9/27/2024

tableのセル内に並んだ画像が下に寄ってるのを中心に揃える（垂直揃え）

tableのセル内に画像を並べると何もしなければ下揃えになる

<table>
    <tr>
        <td>
            <img src="img1.jpg"><img src="waon.jpg"><img src="img2.jpg">
        </td>
    </tr>
</table>

中心に揃える（垂直揃え）にはセルにスタイルを追加

<table>
    <tr>
        <td style="display: flex; justify-content: center; align-items: center;">
            <img src="img1.jpg"><img src="waon.jpg"><img src="img2.jpg">
        </td>
    </tr>
</table>

画像にスタイルを追加してもOK

<table>
    <tr>
        <td>
          <img src="img1.jpg" style="vertical-align: middle;">
          <img src="waon.jpg" style="vertical-align: middle;">
          <img src="img2.jpg" style="vertical-align: middle;">
        </td>
    </tr>
</table>

9/26/2024

「colspan」と「rowspan」

覚え方

Colspan =列: 「colspan」は列を水平に結合

コルスパン → 水平ストレッチ（→→→）

例: 1 つのセルを 4 列にまたがって拡張する場合　colspan="4"

<table border="1">
    <tr>
        <th colspan="4">colspan</th>
    </tr>
    <tr>
        <td>colspan</td>
        <td>colspan</td>
        <td>colspan</td>
        <td>colspan</td>
    </tr>
    <tr>
        <td>colspan</td>
        <td>colspan</td>
        <td>colspan</td>
        <td>colspan</td>
    </tr>
</table>

Rowspan =行: 「rowspan」は行を垂直に結合

行間 → 垂直ストレッチ（↓↓↓）

例: 1 つのセルを３行にカバーする場合　rowspan="3"

<table border="1">
    <tr>
        <th rowspan="3">rowspan</th>
        <td>rowspan</td>
        <td>rowspan</td>
        <td>rowspan</td>
    </tr>
    <tr>
        <td>rowspan</td>
        <td>rowspan</td>
        <td>rowspan</td>
    </tr>
    <tr>
        <td>rowspan</td>
        <td>rowspan</td>
        <td>rowspan</td>
    </tr>
</table>

9/25/2024

Viviエディタのホームディレクトリ設定

デフォルトだとViviディレクトリになってるが

さっとメモするのに使いたいのでデスクトップにしたい

[設定]から[設定ダイアログ]を開いて・・・

ホームディレクトリからデスクトップを選択

[変更箇所を全てのタイプに適用]⇒[OK]

9/24/2024

生まれてから2万日目はいつなのかをJavaScriptで計算するフォーム

  <h1>あなたの生年月日から生まれて2万日目をお教えします、生年月日を選択してください</h1>
  <form>
    <label>年：</label>
    <select id="year">
      <option value="">--年--</option>
      <?php
      $currentYear = date("Y");
      for ($i = 1950; $i <= $currentYear; $i++) {
        echo "<option value='$i'>$i</option>";
      }
      ?>
    </select>
    <label>月：</label>
    <select id="month">
      <option value="">--月--</option>
      <?php
      for ($i = 1; $i <= 12; $i++) {
        $month = str_pad($i, 2, "0", STR_PAD_LEFT);
        echo "<option value='$month'>$month</option>";
      }
      ?>
    </select>
    <label>日：</label>
    <select id="day">
      <option value="">--日--</option>
      <?php
      for ($i = 1; $i <= 31; $i++) {
        $day = str_pad($i, 2, "0", STR_PAD_LEFT);
        echo "<option value='$day'>$day</option>";
      }
      ?>
    </select>
    <button type="button" onclick="calculate()">送信</button>
  </form>
  <div id="result"></div>
  <script>
    function calculate() {
      var year = document.getElementById("year").value;
      var month = document.getElementById("month").value;
      var day = document.getElementById("day").value;
      if (year == "" || month == "" || day == "") {
        alert("年月日を選択してください。");
        return;
      }
      var birthday = new Date(year, month - 1, day);
      var targetDate = new Date(birthday.getTime() + (20000 * 86400000)); // 20000日後の日付を計算する
      var result = document.getElementById("result");
      result.innerHTML = "あなたが生まれてから2万日目は「" + targetDate.getFullYear() + "年" + (targetDate.getMonth() + 1) + "月" + targetDate.getDate() + "日」です！！";
    }
  </script>

↓実際のページ↓

https://pinkwolf.site/20000days.html

9/23/2024

今日は生まれてから何日目か、誕生日から（カレンダーで選択して）JavaScriptで換算するフォーム

  <h1>今日は生まれてから何日目か？</h1>
  <form>
    <label for="birthday">生年月日：</label>
    <input type="date" id="birthday" name="birthday">
    <button type="button" onclick="calculateDays()">計算する</button>
  </form>
  <div id="result"></div>
  <script>
    function calculateDays() {
      const birthday = new Date(document.getElementById("birthday").value);
      const today = new Date();
      const differenceInTime = today.getTime() - birthday.getTime();
      const differenceInDays = Math.floor(differenceInTime / (1000 * 3600 * 24));
      document.getElementById("result").innerHTML = `今日は生まれてから ${differenceInDays} 日目です！`;
    }
  </script>

↓実際のページ↓

https://pinkwolf.site/howmanydays.html

9/22/2024

今日は生まれてから何日目か、誕生日からJavaScriptで換算するフォーム

今日という日が、自分が生まれてから何日目かを誕生日から換算

<form name="myF">
    <p>西暦<input type="text" size="4" name="myFy">年<input type="text" size="2" name="myFM">月<input type="text" size="2" name="myFd">日生まれ　<input type="button" value="☆ボタン☆" onclick="mySet()"></p>
    <p><input type="text" size="45" name="myFmes"></p>
</form>

    function mySet(){
       myNow = new Date();
       myBirth = new Date( document.myF.myFy.value, document.myF.myFM.value-1, document.myF.myFd.value );
       myMsec = myNow.getTime() - myBirth.getTime();
       myDay = Math.floor( myMsec / (1000*60*60*24) );
       document.myF.myFmes.value = "今日は生まれてから " + (myDay+1) + "日目ですよ！";
    }

↓実際のページ↓

https://pinkwolf.site/

9/21/2024

PHPでお宅のペットや子供の年齢（今、何歳何ヵ月か）を換算するフォーム

    <form method="post">
        <label for="birth_date">誕生日をカレンダーから選んでね</label><br>
        <input type="date" id="birth_date" name="birth_date" required>
        <button type="submit">今、何歳何ヵ月か？</button>
    </form>

    <?php if (isset($_POST['birth_date'])): ?>
        <?php
            // 入力された誕生日を取得
            $birth_date = new DateTime($_POST['birth_date']);
            $now = new DateTime();  // 現在日時
            $age = $birth_date->diff($now);  // 年齢を計算
        ?>

        <h2>計算結果:</h2>
        <p>誕生日: <?= htmlspecialchars($_POST['birth_date'], ENT_QUOTES, 'UTF-8') ?></p>
        <p>今、<?= $age->y ?>歳<?= $age->m ?>ヶ月です</p>
    <?php endif; ?>

↓実際のページ↓

https://pinkwolf.site/howmanyym.html

9/20/2024

PHPでペットや子供の年齢（今、何歳何ヵ月か）を表示

うちのはちくまが何歳何ヵ月か、個人サイトのトップページを見ればすぐわかるのだ♪

最終行の表示、毎月書き換えるのは大変なので、誕生日から換算して表示

$birth_date = new DateTime('2017-05-10');
    $now = new DateTime();
    $age = $birth_date->diff($now);
    echo "今、".$age->y."歳".$age->m."ヶ月";

↓実際のページ↓

https://pinkwolf.site/

9/19/2024

PowerPointのフォントのデフォルト設定を変更

まず、既存のプレゼンテーション（作成中含む）に対してフォントを変更する場合

[デザイン]タブをクリック

[バリエーション]グループのプルダウンから[フォント]をクリック

[見出しのフォント]と[本文のフォント]の両方で変えたいフォントを選択

次に、新しいプレゼンテーションのデフォルトフォントを変更する場合

上記のようにして変えたいフォントを選択後、[ファイル]タブをクリックし、[名前を付けて保存]を選択

これにわかりやすいファイル名を付けて、使い易い場所に保存しておき、次回からはこのファイルを開けばOK

登録: 投稿 (Atom)