自分用web part?

Momonosuke_55

checkbox2

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .main_body ,.title{
            display: flex;
            flex-direction: row;
        }
        .title{
            justify-content:center;
            align-items: stretch;
        }
        label{
            display:table-cell;
            vertical-align:middle;
            margin-left:10px;
            padding:20px 10px;
        }
    </style>

</head>

<body class="main_body">
    <!-- サイドメニュー -->
    <div class="side-menu">
        <h3>サイドメニュー</h3>
        <ul>
            <li><a href="#" onclick="showContent('emailMethod')">方法1</a></li>
            <li><a href="#" onclick="showContent('phoneMethod')">方法2</a></li>
        </ul>
    </div>
    <div class="main">
        <!-- 方法の選択 -->
        <div class="title">
            <h3>方法の選択</h3>
            <label><input type="checkbox" id="emailCheck" checked onchange="updateDisplay()"> メール</label>
            <label><input type="checkbox" id="phoneCheck" onchange="updateDisplay()"> 電話</label>
        </div>
        <!--  方法1(デフォルトで表示) -->
        <div id="emailMethod" style="opacity: 1; max-height: 500px;">
            <h4>方法1</h4>
            <p>aaaaaaaaaaaaaaaaaaaaa<br>
                bbbbbbbbbbbbbbbbbbbbbbbbb<br>
                ccccccccccccccccccccccc<br>
        </div>

        <!-- 方法2 (デフォルトで非表示) -->
        <div id="phoneMethod" style="opacity: 0; max-height: 0;">
            <h4>方法2</h4>
            <!-- 情報を記述 -->
        </div>
    </div>
    <script src="check002.js"></script>
</body>

</html>

js

function updateDisplay() {
    const emailChecked = document.getElementById('emailCheck').checked;
    const phoneChecked = document.getElementById('phoneCheck').checked;

    animateVisibility(document.getElementById('emailMethod'), emailChecked);
    animateVisibility(document.getElementById('phoneMethod'), phoneChecked);
}

function showContent(id) {
    if (id === 'emailMethod') {
        document.getElementById('emailCheck').checked = true;
    } else if (id === 'phoneMethod') {
        document.getElementById('phoneCheck').checked = true;
    }
    updateDisplay();
}

function animateVisibility(element, shouldBeVisible) {
    if (shouldBeVisible) {
        element.animate([
            { opacity: 0, maxHeight: '0px' },
            { opacity: 1, maxHeight: '500px' }
        ], {
            duration: 1000,
            fill: 'forwards'
        });
    } else {
        element.animate([
            { opacity: 1, maxHeight: '500px' },
            { opacity: 0, maxHeight: '0px' }
        ], {
            duration: 1000,
            fill: 'forwards'
        });
    }
}

grid

<div class="grid-container">
    <div class="grid-header">Header 1</div>
    <div class="grid-header">Header 2</div>
    <div class="grid-cell">Cell 1-1</div>
    <div class="grid-cell">Cell 1-2</div>
    <div class="grid-cell">Cell 2-1</div>
    <div class="grid-cell">Cell 2-2</div>
</div>

const container = document.querySelector('.grid-container');

// 第1列のヘッダーを取得して内容を変更
const header1 = getGridHeader(container, 0);
if (header1) {
    header1.textContent = "New Header 1";
}

// 第1行、第2列のセルを取得して内容を変更
const cell1_2 = getGridCell(container, 0, 1);
if (cell1_2) {
    cell1_2.textContent = "New Cell 1-2";
}

replace

let str = "東京(世田谷区)";
let result = str.replace(/\(.*?\)/, '');
console.log(result); // "東京"

fukidashi

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ホバー吹き出し + 点滅する下線</title>
    <style>
        /* ホバー可能な箇所の基本スタイル */
       /* ホバー可能な箇所の基本スタイル */
.tooltip {
    display: inline-block;
    cursor: pointer;
    position: relative;
    line-height: 1.5; /* 追加 */
    padding-bottom: 1px; /* 追加 */
    margin:300px;
}

/* 下線のスタイル */
.tooltip span.underline {
    display: block;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    border-bottom: 1px solid black;
    animation: blinking 1s infinite alternate;
}



        /* ホバー時の下線の状態 */
        .tooltip:hover span.underline {
            animation-play-state: paused;
        }

        /* 吹き出しテキストのスタイル */
        .tooltip .tooltip-text {
            visibility: hidden;
            width: 120px;
            background-color: #555 ;
            color: #fff ;
            text-align: center;
            border-radius: 6px;
            padding: 5px 0;
            position: absolute;
            z-index: 1;
            bottom: 125%;
            left: 50%;
            margin-left: -60px;
            opacity: 0;
            transition: opacity 0.3s, visibility 0.3s;
        }

        /* 吹き出しのアロー部分 */
        .tooltip .tooltip-text::after {
            content: '';
            position: absolute;
            top: 100%;
            left: 50%;
            margin-left: -5px;
            border-width: 5px;
            border-style: solid;
            border-color: #555  transparent transparent transparent;
        }

        /* ホバー時の吹き出し表示 */
        .tooltip:hover .tooltip-text {
            visibility: visible;
            opacity: 1;
        }

        /* 下線の点滅アニメーション */
        @keyframes blinking {
            from { opacity: 1; }
            to { opacity: 0; }
        }
    </style>
</head>
<body>
    <div class="tooltip">ホバーしてください
        <span class="underline"></span>
        <div class="tooltip-text">こんにちは！</div>
    </div>
</body>
</html>

checkbox3

<!DOCTYPE html>
<html lang="ja">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>宇宙旅行の準備リスト</title>
    <style>
        /* アニメーション設定 */
        ul {
            overflow: hidden;
            transition: max-height 0.5s ease-out;
            max-height: 1000px;
            /* 初期表示はリストを表示 */
        }

        ul.closed {
            max-height: 0;
            /* 閉じた状態はmax-heightを0に */
        }
    </style>
</head>

<body>

    <h2 onclick="toggleList()">宇宙旅行の準備リスト</h2>
    <ul id="travel-list">
        <li>
            <input type="checkbox" id="passport">
            <label for="passport">宇宙パスポート: 有効期限</label>
            <input type="date" id="passport-date">
            ステータス
            <select id="passport-status">
                <option value="未着手">未着手</option>
                <option value="準備中">準備中</option>
                <option value="完了">完了</option>
            </select>
        </li>
        <li>
            <input type="checkbox" id="suit">
            <label for="suit">宇宙服: サイズ</label>
            <input type="text" id="suit-size" placeholder="M">
            ステータス
            <select id="suit-status">
                <option value="未着手">未着手</option>
                <option value="準備中">準備中</option>
                <option value="完了">完了</option>
            </select>
        </li>
    </ul>

    <script>
        function toggleList() {
            const list = document.getElementById('travel-list');

            if (list.classList.contains('closed')) {
                list.classList.remove('closed');
            } else {
                list.classList.add('closed');
            }
        }
    </script>

</body>

</html>

order

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Grid Order Change Animation Sample</title>
    <style>
        .grid-container {
            display: grid;
            grid-template-columns: 1fr;
            gap: 5px;
            position: relative;
        }
        .grid-item {
            padding: 10px;
            border: 1px solid black;
            transition: transform 0.5s ease;
            position: relative;
            z-index: 1;
        }
    </style>
</head>
<body>
    <div class="grid-container">
        <div class="grid-item" id="item1">1. この文は最初にあります</div>
        <div class="grid-item" id="item2">2. この文は2番目にあります</div>
        <div class="grid-item" id="item3">3. この文は3番目にあります</div>
    </div>
    <button onclick="changeOrder()">順序を変更</button>

    <script>
        function changeOrder() {
            const item1 = document.getElementById('item1');
            const item2 = document.getElementById('item2');
            const item3 = document.getElementById('item3');
            
            // Calculate the positions
            const item1Height = item1.offsetHeight;
            
            item1.style.transform = `translateY(${item1Height}px)`;
            item2.style.transform = `translateY(${item1Height}px)`;
            item3.style.transform = `translateY(-${2*item1Height}px)`;


            item1.style.transform = `translateY(-${item1Height}px)`;
            item2.style.transform = `translateY(-${item1Height}px)`;
            item3.style.transform = `translateY(${2*item1Height}px)`;



        }
    </script>
</body>
</html>

left調整


function openPopup() {
    // 画面の幅と高さを取得
    const screenWidth = screen.width;
    const screenHeight = screen.height;

    // ポップアップの幅と高さを設定
    const popupWidth = 500;
    const popupHeight = 500;

    // ポップアップのX, Y位置を計算
    const left = (screenWidth - popupWidth) / 2;
    const top = (screenHeight - popupHeight) / 2;

    // ポップアップを中央に配置
    window.open('yourURL.html', 'popup', `width=${popupWidth},height=${popupHeight},left=${left},top=${top}`);
}

変更前変更後

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>テキスト切り替え</title>
    <style>
        /* 初期状態では変更後の文章は非表示にしておく */
        #afterText  {
            display: none;
        }
    </style>
</head>
<body>

<!-- 切り替えるテキストの場所 -->
<p id="beforeText">これは変更前の文章です。</p>
<p id="afterText">これは変更後の文章です。</p>

<!-- ボタン -->
<button id="switchButton">テキストを切り替え</button>

<script>
    // ボタンとテキストエリアの要素を取得
    const switchButton = document.getElementById("switchButton");
    const beforeText = document.getElementById("beforeText");
    const afterText = document.getElementById("afterText");

    // 切り替えの状態を管理するフラグ
    let isSwitched = false;

    // ボタンクリック時の処理
    switchButton.addEventListener("click", function() {
        // テキストを切り替える
        if (isSwitched) {
            beforeText.style.display = "block";
            afterText.style.display = "none";
            isSwitched = false;
        } else {
            beforeText.style.display = "none";
            afterText.style.display = "block";
            isSwitched = true;
        }
    });
</script>

</body>
</html>

img_button

<!DOCTYPE html>
<html>
<head>
  <title>イメージ表示</title>
  <style>
    #imageContainer  {
      display: none; /* 最初は非表示に設定 */
    }
    #imageContainer  img {
      cursor: pointer; /* カーソルをポインターに変更してクリック可能にする */
    }
  </style>
</head>
<body>
  <button id="showImageButton">イメージを表示</button>
  <div id="imageContainer">
    <img id="imageToDisplay" src="img3.jpg" alt="イメージの説明" width="500" height="500">
  </div>

  <script>
    // ボタン要素を取得
    var showImageButton = document.getElementById("showImageButton");
    // イメージコンテナ要素を取得
    var imageContainer = document.getElementById("imageContainer");
    // イメージ要素を取得
    var imageToDisplay = document.getElementById("imageToDisplay");

    // ボタンがクリックされたときの処理を定義
    showImageButton.addEventListener("click", function() {
      // イメージコンテナを表示
      imageContainer.style.display = "block";
    });

    // イメージがクリックされたときの処理を定義
    imageToDisplay.addEventListener("click", function() {
      // イメージコンテナを非表示にする
      imageContainer.style.display = "none";
    });
  </script>
</body>
</html>

この記事が気に入ったらサポートをしてみませんか？