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

11/16/2024

Amazon のミュージックで聴きたい曲だけを聴く

Amazon のミュージックのライブラリを開くと、□で囲んだあなたのためのセレクトが何よりも優先してかかる仕様になってる？

購入したMP3の曲ならダウンロードして聴けるので、頑張ってブラウザ上から聴こうとせず、素直にダウンロードすればいいのだが、その購入済みの曲の一覧が[購入済み]ボタンを開くとある

そしてミュージックディレクトリに聴きたい曲をダウンロードしたら、自分のPCではMP3はPowerDVDで再生される

参考までに既定のアプリ一覧画面

10/25/2024

背景画像から文字を浮き上がらせて見易くするためのテキスト縁取りCSS

サイトのタイトルなのにマスカット粒の影と重なって文字が読み難い

白い縁を付けてみたら見易くはなったけど、なんか・・・浮き過ぎじゃん？

#site-title h1 {
    color: #663366;
    font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", serif;
    font-size: 2.5rem;
    line-height: 1.4;
    text-shadow: 2px  2px 3px RGB(255, 255, 255),
            -2px  2px 3px RGB(255, 255, 255),
             2px -2px 3px RGB(255, 255, 255),
            -2px -2px 3px RGB(255, 255, 255);
}

マスカットの色の淡いのにしてみよう

#site-title h1 {
    color: #663366;
    font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", serif;
    font-size: 2.5rem;
    line-height: 1.4;
    text-shadow: 2px  2px 3px RGB(222, 250, 222),
            -2px  2px 3px RGB(222, 250, 222),
             2px -2px 3px RGB(222, 250, 222),
            -2px -2px 3px RGB(222, 250, 222);
}

いんじゃん♪

サイト・ディスクリプションにはなんかチカチカするのでうっすら影を付けてみた

#site-description {
    font-family: "メイリオ", "Meiryo", sans-serif;
    text-shadow: 3px 3px 6px #888;
    padding: 30px;
}

10/24/2024

HTMLでどうしても改行するならここにして！

スマホ画面だと短いタイトルでも折り返してる時がある

しかもこの折り返し方は嫌だ・・・「i」と「～」の間で折れて欲しいので、間に<wbr>タグを入れたのだが<wbr>タグが効かない？！

じゃ、折り返して欲しくない部分をくるむ方法で以下

<div id="site-title">
    <h1>Tan-Deki<span class="no-break">～耽溺～</span></h1>
</div><!-- /site-title -->

CSS

#site-title h1 {
    color: #663366;
    font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", serif;
    font-size: 2.5rem;
    line-height: 1.4;
    text-shadow: 2px  2px 3px RGB(222, 250, 222),
            -2px  2px 3px RGB(222, 250, 222),
             2px -2px 3px RGB(222, 250, 222),
            -2px -2px 3px RGB(222, 250, 222);
}

.no-break {
  white-space: nowrap;
}

上手く行った

10/23/2024

HTMLで絶対に改行させたくない！

https://tan-deki.com

HTMLで絶対に改行させたくない場合、一般的に<nobr>タグが使用されてたのが、<nobr>タグはHTML5で非推奨となり、代わりにCSSのwhite-spaceプロパティを使用することが推奨された

CSSの`white-space`プロパティで改行を禁止する

CSS
.no-break {
  white-space: nowrap;
}
上記のように、white-spaceプロパティにnowrapを指定することで、要素内のテキストが改行されなくなる

`<nobr>`タグについて

<nobr>タグは、Netscape Navigatorが独自に拡張したタグで、HTML5では非推奨となっているため、white-space: nowrap;を代替使用

具体的な使用例

HTML
<p class="no-break">これは改行されません。</p>

その他の注意点

ブラウザの互換性: white-space: nowrap;は、ほとんどのモダンブラウザでサポートされているも、古いブラウザでは動作しない可能性あり
レイアウトの崩れ: nowrapを指定した場合、要素の幅を超えてテキストが表示される可能性あり、この場合、overflowプロパティなどを併用して、はみ出した部分の処理を行う必要がある
アクセシビリティ: 視覚障がいを持つユーザーにとっては、改行がないことで内容が理解しにくくなる可能性あり、<span>タグなどで区切りを入れるなど、適切な対策を検討すべし

10/22/2024

スクリーンリーダーのダウンロードと使用（ウェブアクセシビリティを体験する）

自分でもスクリーンリーダーを試してみれば、ウェブアクセシビリティを実感できる？

スクリーンリーダーのダウンロードと使用

NVDA (NonVisual Desktop Access):
- ダウンロード:
- 無料でオープンソースのスクリーンリーダーで、Windowsで使用可
JAWS (Job Access With Speech):
- ダウンロード:
- 高機能な商用スクリーンリーダーで、Windowsで使用可、試用版あり
VoiceOver (Mac, iPhone, iPad):
- 使用方法: Apple製品に標準搭載されてるので、Macでは「システム環境設定」→「アクセシビリティ」→「VoiceOver」、iPhoneやiPadでは「設定」→「アクセシビリティ」→「VoiceOver」から有効

簡単なチェック項目

ページを開き、スクリーンリーダーを有効に
キーボードだけでページをナビゲートできるか確認する（タブキーで移動し、エンターキーで選択）
画像のalt属性や、リンクやボタンのラベルが適切に読み上げられるかチェック

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/20/2024

ウェブアクセシビリティをチェックできるサイト：WAVE

WAVE (Web Accessibility Evaluation Tool)

ブラウザでツールのページを開いたらURLを入力するだけ

※英語サイトなのでChromeで開いてDeepL（拡張機能）で翻訳してる

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の例です。

10/18/2024

画像ボタンでページトップへ戻る固定リンクのJavaScriptとCSS

トップへ戻るボタンの画像を用意してサーバにアップして、ボタンを表示するページのHTMLに以下を挿入

<div id="back-to-top"></div>

JavaScriptの以下のコードを読み込む

  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');
        }
    });
});

back-to-topの部分はCSS

/* 画面トップへのボタン */
#back-to-top {
    position: fixed;
    right: 20px;
    bottom: 20px;
    width: 60px;
    height: 160px;
    background-image: url('https://tan-deki.com/img/up.png');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    border: none;
    cursor: pointer;
    z-index: 100;
    opacity: 0; /* 初期状態は非表示 */
    pointer-events: none;
    transition: opacity 0.3s ease;
}

#back-to-top.show {
    opacity: 1;
    pointer-events: auto;
}

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

10/17/2024

ブラウザのページ内を検索

[Ctrl]+[F]で検索窓が立ち上がるので検索したい語を入力

登録: 投稿 (Atom)