背景画像から文字を浮き上がらせて見易くするためのテキスト縁取り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;
}

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

上手く行った

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>タグなどで区切りを入れるなど、適切な対策を検討すべし

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

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

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

1. NVDA (NonVisual Desktop Access):

   • ダウンロード:

   • 無料でオープンソースのスクリーンリーダーで、Windowsで使用可

2. JAWS (Job Access With Speech):

   • ダウンロード:

   • 高機能な商用スクリーンリーダーで、Windowsで使用可、試用版あり

3. VoiceOver (Mac, iPhone, iPad):

   • 使用方法: Apple製品に標準搭載されてるので、Macでは「システム環境設定」→「アクセシビリティ」→「VoiceOver」、iPhoneやiPadでは「設定」→「アクセシビリティ」→「VoiceOver」から有効

簡単なチェック項目

• ページを開き、スクリーンリーダーを有効に

• キーボードだけでページをナビゲートできるか確認する（タブキーで移動し、エンターキーで選択）

• 画像のalt属性や、リンクやボタンのラベルが適切に読み上げられるかチェック

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に生成してもらったが、よく見ると色々微妙・・・

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

 WAVE (Web Accessibility Evaluation Tool)

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

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

画像ボタンでページトップへ戻る固定リンクの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/

ウェブサイトのフッターにコピーライトは絶対に必要か？

コピーライト（著作権表示）は法律的に「必須」ではなくってよ、でもウェブサイトのフッターにコピーライトを表示することで、コンテンツの著作権がそのウェブサイトの所有者に帰属することを明確にし、無断使用や不正なコンテンツの流用を防ぐ効果があるので「推奨」

典型的な表示は以下

 ©2024 Company Name. All rights reserved.

でも頭の©は環境依存文字なので、このままコピペしても c になってしまったりするから、実体参照にするべき

©2024 Company Name. All rights reserved.

という風にね

自分の場合はこんなで・・・

<div class="copyright">&copy; <?=date("Y")?> <a href="<?=$url?>" target="_blank">MomoiroOokamiRose</a>. All rights reserved.</div>

PHPを使って西暦年を取得したり、ファイルの行頭に定義してあるURLを取得してる

https://hachikuma.tan-deki.com/2017/06/index.html

地図のプリントアウト用HTML

行先の住所や担当者名などのメモを地図と一緒にプリントアウトするためのHTMLなんて、方向音痴でないスマホ使いには誰得って記事だろうが、方向音痴・・・いや、方向感覚皆無のガラケー使いの自分には必須なのだ

１，GoogleMapなどを使って地図をスクショしてmap.jpgという名で保存

２，メモ帳に以下をコピペして、メモ〇行目にメモを書いたら、拡張子を.htmlにしてmap.jpgと同じフォルダに保存

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>地図とメモ</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 20px;
        }
        .container {
            text-align: center;
        }
        img {
            max-width: 100%;
            height: auto;
        }
        .print-info {
            margin-top: 20px;
            font-size: 18px;
        }
        @media print {
            .container {
                page-break-after: always;
            }
        }
    </style>
</head>
<body>

<div class="container">
    <img src="map.jpg" alt="Map">
    <div class="print-info">
        <p>メモ1行目</p>
        <p>メモ2行目</p>
        <p>メモ3行目</p>
    </div>
</div>

<script>
    window.onload = function() {
        window.print();
    };
</script>

</body>
</html>

保存したhtmlファイルをブラウザで開くとこんな感じで[印刷]ボタンでプリントアウト

※文字コードはUTF-8にするコト

.htaccessのPHP設定（CPI、ロリポップ、heteml）

HTMLファイルでPHPを使いたい場合、Xサーバでは以下のように.htaccessに記述

AddHandler fcgid-script .html

これはFastCGIを使ってHTMLファイルを処理する設定

でもレンタルサーバによって異なる方式でPHPを処理するので、他では設定が違う

ちなみにCPIだと以下

AddHandler x-httpd-php80 .php .html

ロリポップだと以下

AddHandler php8.2-script .html

hetemlだと以下

AddHandler php7.4-script .html

てか、hetemlはVer.上げなきゃだわ・・・

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>

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>

「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>

生まれてから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

今日は生まれてから何日目か、誕生日から（カレンダーで選択して）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

今日は生まれてから何日目か、誕生日から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/

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

ドイツ語表記の際に必要な10進文字コード

Ä (ウムラウト大文字) : &#196;

Ö (ウムラウト大文字) : &#214;

Ü (ウムラウト大文字) : &#220;

ß (エスツェット) : &#223;

ä  (ウムラウト) : &#228;

ö (ウムラウト) : &#246;

ü (ウムラウト) : &#252;

a

フランス語表記の際に必要な10進文字コード

à (accent grave) : &#224;

â (accent circonflexe) : &#226;

ç (cédille) : &#231;

è (accent grave) : &#232;

é (accent aigu) : &#233;

ê (accent circonflexe) : &#234;

ë (tréma) : &#235;

î (accent circonflexe) : &#238;

ï (tréma) : &#239;

ô (accent circonflexe) : &#244;

ù (accent grave) : &#249;

û (accent circonflexe) : &#251;

スマホエミュレータよりブラウザの開発者ツール

 ウェブサイトをスマホ画面で表示して、機種によってどんなだかを確認したいだけなら、エミュレータよりもブラウザの開発者ツールが便利

Google ChromeやFirefoxなどのブラウザには、スマホ画面をシミュレートする機能が内蔵されているので、これを使わない手は無い

Google Chromeの手順

1. サイトを開く。
2. 右クリックして「検証」を選択（もしくはF12キーを押して開く）。
3. 開発者ツールが開いたら、画面の左上にあるデバイスアイコン（タブレットとスマホのマーク）をクリック。
   
   
   
4. これで画面がスマホビューに切り替わる。

上部のドロップダウンから、さまざまなデバイスを選んで確認できる（上の画像はSurface Duoを選択、下の画像はSamsung Galaxyを選択）

ちなみにアランの『幸福論』の各章タイトルの邦訳比較表