背景画像から文字を浮き上がらせて見易くするためのテキスト縁取り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属性や、リンクやボタンのラベルが適切に読み上げられるかチェック

ウェブアクセシビリティをチェックできるサイト：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/

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>

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

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

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

Google Chromeの手順

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

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

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

更に画像一覧を見易くした

サーバのディレクトリ内の画像一覧を表示するのに画策してて、つい昨日「完璧だ」とか言ってたけど、画像同士がくっついてるのは見づらいので、CSSファイルで隙間開けた

span {
    margin: 5px
}

今度こそ完璧だ

メディアクエリでモバイル表示対応

 「本の旅」サイトはモバイル用の表示が酷い

右に寄っちゃってるし、横スクロールしないと読めぬ
幅が768px以下のブラウザでは、100％表示になるようにしよう

HTMLの構成がこんなで・・・

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

<head>
    <link rel="stylesheet" href="hon-dana.css?<?php echo filemtime('hon-dana.css'); ?>" type="text/css">
</head>

<body>

<article>

    <header>

        <h1>本の旅</h1>

        <nav>
        目次
        </nav>

    </header>

    <section>

    </section>

    <footer>

    </footer>

</article>

    <script src="hon-dana.js"></script>

</body>

</html>

CSSでメディアクエリだな、article（本文部分）がブラウザの幅768px以下の表示に100％を指定

article {
    width: 768px;
    margin: 0px auto;
    padding: 0px;
    background: #fff;
    text-align: center;
}

@media (max-width: 768px) {
    article {
        width: 100%;
    }
}

で、100％表示されるようになった

それと背景色も真っ白（#fff）だったのを#e0f7ffに変更した

デザインが決まるまでCSSファイルの更新日時を反映させておくPHP

全部を１つのドメイン下に置こうと思うが、まず1番大変なのはhachikumaの引っ越しだな

https://hachikuma.tan-deki.com/

index.htmlを開いて、とりあえずCSSを以下のように書き換える

<link rel="stylesheet" type="text/css" href="hk.css?<?php echo filemtime('hk.css'); ?>" media="screen">

こうしておけば、CSSを書き換えてアップする度にその更新日時（filetime）を拾ってくるので、確実に再読み込みをしてくれるのだが、そうでないと頑固にキャッシュを表示するのでね

そしてデザイン（という程のモノではないが）に丸1日かかって、先月分までの写真もアップしたのは今朝・・・