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

ラベル AI の投稿を表示しています。すべての投稿を表示

10/21/2024

AIによるaria-labelとaria-labelledbyの違いの解説（ウェブアクセシビリティ）

aria-labelとaria-labelledbyはどちらもWebアクセシビリティのための属性ですが、用途や使い方に若干の違いがあります。

`aria-label`

用途: 要素に対して直接ラベルを指定するために使われます。
使用例: 要素自体にラベルを与える場合に適しています。特に、視覚的にはラベルが存在しないが支援技術にはラベルを伝えたい場合に便利です。

<button aria-label="閉じる">
  <i class="fas fa-times"></i>
</button>

この例では、アイコンボタンに「閉じる」というラベルを付けています。

`aria-labelledby`

用途: 他の要素を参照してラベルを指定するために使われます。
使用例: 別の要素（例えば、<label>や他のテキスト要素）をラベルとして使用する場合に適しています。これにより、ラベルの再利用やより複雑なラベル構成が可能です。

<label id="usernameLabel">ユーザー名:</label>
<input type="text" id="username" aria-labelledby="usernameLabel">

この例では、<input>要素が<label>要素によってラベル付けされています。

まとめ

aria-label: 要素に直接ラベルを指定。例えば、アイコンボタンにラベルを付ける場合に使用。
aria-labelledby: 他の要素を参照してラベルを指定。例えば、フォームフィールドにラベルを付ける場合に使用。

この記事に合った画像もAIに生成してもらったが、よく見ると色々微妙・・・

10/19/2024

AIによるJavaScriptコードの説明：ページトップに戻るボタン（前記事参照）

実際の動作⇒https://tan-deki.com/

  const backToTopButton = document.addEventListener('DOMContentLoaded', function () {
    const backToTopButton = document.getElementById('back-to-top');
    
    backToTopButton.addEventListener('click', () => {
        window.scrollTo({ top: 0, behavior: 'smooth' });
    });

    window.addEventListener('scroll', () => {
        if (window.pageYOffset > 300) {
            backToTopButton.classList.add('show');
        } else {
            backToTopButton.classList.remove('show');
        }
    });
});

【コードの目的】

このJavaScriptコードは、Webページに「ページトップに戻る」ボタンを作成し、特定の条件下で表示・非表示を切り替えるためのものです。ユーザーがページをある程度スクロールするとボタンが表示され、クリックするとページの一番上へスムーズに移動することができます。

DOMContentLoaded イベントリスナー:
- document.addEventListener('DOMContentLoaded', function () { ... }): WebページのDOM（Document Object Model）が完全に読み込まれた後に、中の関数が実行されます。これは、JavaScriptコードがHTMLの要素にアクセスする前に、すべての要素が準備できていることを保証するためです。
「戻る」ボタンの取得:
- const backToTopButton = document.getElementById('back-to-top');: HTMLの中でIDが'back-to-top'となっている要素（通常はボタン）を取得します。このボタンがクリックされたときの動作を定義します。
ボタンクリック時の処理:
- backToTopButton.addEventListener('click', () => { ... }): ボタンがクリックされたときに実行される関数を設定します。
  - window.scrollTo({ top: 0, behavior: 'smooth' });: ブラウザウィンドウをページの一番上（top: 0）へスムーズにスクロールします。behavior: 'smooth'によって、カクカクせずに滑らかなスクロールを実現します。
スクロールイベントリスナー:
- window.addEventListener('scroll', () => { ... }): ユーザーがページをスクロールしたときに実行される関数を設定します。
  - if (window.pageYOffset > 300) { ... } else { ... }: 現在スクロールされている位置（window.pageYOffset）が300ピクセルを超えているかチェックします。
    - 300ピクセル以上スクロールした場合:
      - backToTopButton.classList.add('show');: ボタンに'show'というクラスを追加します。CSSでこのクラスに表示に関するスタイルが定義されており、ボタンを表示させる効果があります。
    - 300ピクセル未満スクロールした場合:
      - backToTopButton.classList.remove('show');: ボタンから'show'クラスを削除します。これにより、ボタンが非表示になります。

まとめ

このコードは、以下の動作を実現します。

ページが読み込まれると、IDが'back-to-top'のボタンを探します。
ユーザーが300ピクセル以上スクロールすると、ボタンが表示されます。
ボタンをクリックすると、ページの一番上へスムーズに移動します。

補足:

CSS: ボタンの表示・非表示を切り替えるためには、CSSで'.show'クラスに表示に関するスタイルを定義する必要があります。
カスタマイズ: スクロールのしきい値（300ピクセル）や、ボタンの表示位置、デザインなどは、CSSやJavaScriptを調整することで変更できます。

このコードは、Webページのユーザビリティ向上に役立つ基本的なJavaScriptの例です。

9/17/2024

ChatGPTに「メモリがいっぱいです」と拒否られたら・・・

今までのやりとりが不要ならば、全部削除してしまえばOK

設定→パーソナライズ

1番下の[ChatGPTのメモリをクリアする]ボタンで・・・

8/31/2024

HTMLもPHPもJavaScriptもAIに吐き出させたら楽ちんよ♪

もう１つのサーバはいくらなんだろうか？

こっちはワリと最近契約してて、最初から月額千円と考えてたので予想通りの金額ではあるが、それにしても少しづつ値上がりしてるんだな・・・

加えて、ドメインが1つ5千円以上になったから5つもあったら年間で3万円近くも支払ってるコトになるが、ドメインこそ無駄だ

自分のは3つから1つに絞って、全然使ってなかったドメインを活かそう

一応、そのためのディレクトリはあって、.htaccessが置いてある

AddHandler php7.4-script .html

hetemlサーバの場合、これでhtmlファイル内でPHPが使えるのだ

ChatGPTにトップページのHTMLを吐き出してもらおう
「新しくサイトを作成するのでトップページのHTMLをお願いします」

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>サイトのタイトル</title>
    <link rel="stylesheet" href="styles.css">
</head>

<body>
    <header>
        <nav>
            <ul>
                <li><a href="#">ホーム</a></li>
                <li><a href="#">サービス</a></li>
                <li><a href="#">お問い合わせ</a></li>
                <li><a href="#">会社概要</a></li>
            </ul>
        </nav>
    </header>

    <main>
        <section id="hero">
            <h1>ようこそ、私たちのウェブサイトへ！</h1>
            <p>ここにサイトのメインメッセージやキャッチコピーが入ります。</p>
            <a href="#" class="btn">詳しくはこちら</a>
        </section>

        <section id="services">
            <h2>サービス内容</h2>
            <div class="service-item">
                <h3>サービス 1</h3>
                <p>サービス1の説明文がここに入ります。</p>
            </div>
            <div class="service-item">
                <h3>サービス 2</h3>
                <p>サービス2の説明文がここに入ります。</p>
            </div>
            <div class="service-item">
                <h3>サービス 3</h3>
                <p>サービス3の説明文がここに入ります。</p>
            </div>
        </section>
    </main>

    <footer>
        <p>&copy; 2024 サイトの名前. All rights reserved.</p>
    </footer>
</body>

</html>

このままアップしてみた

これを自分用に書き換えて、PHPが使えるのか実験

年齢は誕生日を迎える度に勝手に書き換えてくれるように以下PHP

<?php echo floor((date('Ymd') - 19680820)/10000);?>

ちなみにその下の生まれてから何日目かってのはJavaScriptだが
こういうのは今はChatGPTが吐き出してくれるから楽だわ♪