2025-07-15

武田構築WebTools QRコードURL生成ツール

QRコードURL生成ツールの宣伝を改めて。

名刺などを作る時にURLをQRコードにしたくなる時、スマホ用で作ってるWebアプリを動作確認する時にURLをQRコードに変換したくなる時、など、それを手軽に行う為のツールです。

QRの生成はjQueryQRCodeというJSプラグインを使用しています。

その関係でjQueryも使ってます。（もう最近は普段は使ってないんですけど）
多分ローカル環境のみで動いてると思います。（jQuery関連で何もしていなければ）
あと、なんかQRコードでフィッシングするサイトとかあるみたいですが、そんな悪用はしないでください。

2025-07-15

武田構築WebToolsの宣伝

ウェブツール作業用データ

Google Serch Consoleへこのブログ及び武田構築WebToolsも登録しているのですが、全然アクセス伸びないので改めて記事に。

武田構築 WebTools : TOP INFORMATION

たまに必要になるツールをすぐ使える所に置いておく目的で作成した物です。
技術検証も兼ねて作成していたりもします。

今の所、

QRコード生成ツール
HTML記号エンティティ化ツール
画像データBase64 エンコーディングツール

があります。

一応、別のツールも考えてて、ぼちぼち追加して行きたいと思っているんですが、なかなか余裕ないんですよね。

ちなみに武田構築の部分は屋号をこれに変更しようかと考えている所で、新たなロゴ作ってる所なんですが、構築の「構」の字の画数が多くてアレンジに困って、一回デザインしたのが手元にあったりはするんですがイマイチでまた作り直そうかと考えている所で…

2025-07-08

画像データBase64エンコーディングツール

HTML ウェブツール作業用データ

画像データBase64 エンコーディングツールをアップしました。

武田構築 WebTools : 画像データBase64エンコーディングツール

HTMLに画像データを埋め込みたい時などに、Base64変換して貼り付けたりするんですが、これまではGoogle Chromeの機能を使っていたんですがすぐ手軽に変換出来るように用意してみました。

クライアント上のみで動作してるはずですが、あまり大きい容量のファイルを変換すると処理が戻ってこなくなる感じなので気を付けてください。

とりあえずWebToolの方はここで一旦区切り付けて別の作業をします。

2025-07-03

HTML画像ファイルドラッグ＆ドロップ読込処理サンプル

HTML JavaScript 備忘録

ちょっと案件でファイルをHTML上で読み込む必要があり、ファイルのドラッグ＆ドロップについて調べていたんですが、なんか微妙に分かりづらい説明が目についたので備忘録的にまとめます。

試しに画像ファイルをドラッグ＆ドロップで読み込んで表示するサンプルを作ったのでこれを元に説明を。

サンプルページ（武田制作のサイト上に保存してます）

サンプルは上部のドラッグ＆ドロップエリアに画像ファイルをドロップすると読み込んで下にプレビュー表示します。

ちょっとコード全体を貼った上で順番に解説します。

＜サンプルコード全体＞

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8" />
    <title>画像ファイルドラッグ＆ドロップ読込テスト</title>
    <style>
        body {
            margin: 16px; padding: 0;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
        }

        h3 {
            margin: 0 0 0.5em 0; padding: 0;
        }

        h4 {
            margin: 1em 0 0.5em 0; padding: 0;
        }

        #fileDropArea {
            width: 480px; height: 240px;
            border: 2px solid #888888;
            border-radius: 8px;
            background-color: #eeeeee;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        #viewLoadedImage {
            display: block;
            width: 480px; height: auto;
            min-height: 240px;
            border: 1px solid #cccccc;
        }
    </style>
</head>
<body>
    <h3>ファイルドロップ読込テスト</h3>

    <!-- ドロップエリア -->
    <div id="fileDropArea">
        <p>ここに画像ファイルをドロップ</p>
    </div>

    <!-- 読込画像表示 -->
    <h4>＜読込画像＞</h4>
    <img src="" id="viewLoadedImage">

    <!-- Script -->
    <script>
        // 読み込み画像プレビュー用imgを控えておく
        var _viewLoadedImg = document.getElementById("viewLoadedImage");

        // FileReaderオブジェクトを用意しておく
        var _fileReader = new FileReader();

        // FileReader読み込み完了時のイベントをセットしておく
        _fileReader.addEventListener("load", () => { _viewLoadedImg.src = _fileReader.result; }, false);

        function IsDragOver(event) {
            // --- DragOver中の処理 ---
            // ドラッグ中のブラウザ既定処理を抑制
            event.preventDefault();
        }

        function FileDrop(event) {
            // --- ファイルドロップ時の処理 ---

            // ドロップ時のブラウザ既定処理を抑制
            event.preventDefault();
            
            // ファイル確認 ※一応両方にデータ乗ってるっぽい。両方ともFileオブジェクト
            let _file = null;
            if (event.dataTransfer.items) {
                // 配列先頭のファイルオブジェクトを取得
                _file = event.dataTransfer.items[0].getAsFile();
            
            } else {
                // 配列先頭のファイルオブジェクトを控える
                _file = event.dataTransfer.files[0];
            }

            // ファイルをDataURL(Base64)で読込
            _fileReader.readAsDataURL(_file);
        }

        // DOMが全部読み込まれた時のイベントを設定
        document.addEventListener("DOMContentLoaded", function() {
            // fileDropArea に各イベントハンドラを設定
            document.getElementById("fileDropArea").addEventListener("dragover", IsDragOver);
            document.getElementById("fileDropArea").addEventListener("drop", FileDrop);
        });
    </script>
</body>
</html>

＜HTML基本部分＞

画面を構成する要素ですが、主にドロップエリア用のDIVと画像プレビュー用のIMG（ブロック化）で構成しています。fileDropAreaがドロップエリアで、viewLoadedImageが画像プレビューエリアになります。

fileDropAreaはFlexBoxで文字が中央寄せになるようにしている程度なのですが、viewLoadedImageの方は、縦幅をautoにする事で画像の横幅のみ固定して縦は画像の比率に合わせて伸縮するように設定しています。

CSS

    <style>
        body {
            margin: 16px; padding: 0;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
        }

        h3 {
            margin: 0 0 0.5em 0; padding: 0;
        }

        h4 {
            margin: 1em 0 0.5em 0; padding: 0;
        }

        #fileDropArea {
            width: 480px; height: 240px;
            border: 2px solid #888888;
            border-radius: 8px;
            background-color: #eeeeee;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        #viewLoadedImage {
            display: block;
            width: 480px; height: auto;
            min-height: 240px;
            border: 1px solid #cccccc;
        }
    </style>

HTML

    <h3>ファイルドロップ読込テスト</h3>

    <!-- ドロップエリア -->
    <div id="fileDropArea">
        <p>ここに画像ファイルをドロップ</p>
    </div>

    <!-- 読込画像表示 -->
    <h4>＜読込画像＞</h4>
    <img src="" id="viewLoadedImage">

＜ドロップした画像を読み込んで表示するまでの処理について＞

ここからがキモなんですけど、主にスクリプトで処理を行っています。順番に解説すると…

    // 読み込み画像プレビュー用imgを控えておく
    var _viewLoadedImg = document.getElementById("viewLoadedImage");

初めに読み込んだ画像をプレビューする為のimg要素の参照を予めとっておいて、

    // FileReaderオブジェクトを用意しておく
    var _fileReader = new FileReader();

    // FileReader読み込み完了時のイベントをセットしておく
    _fileReader.addEventListener("load", () => { _viewLoadedImg.src = _fileReader.result; }, false);

ファイル取得後の読込に使うFileReaderオブジェクトを作っておきます。
そしてファイル読込完了時にFileReaderのloadイベントが走った時に、Imgのsrcにロードされた画像（Base64）が自動的に代入されるようにイベントを設定しておきます。

    function IsDragOver(event) {
        // --- DragOver中の処理 ---
        // ドラッグ中のブラウザ既定処理を抑制
        event.preventDefault();
    }

これはドラッグ中にブラウザが反応するのを抑制するだけの関数です。あとでdragoverイベントにハンドルしておきます。

function FileDrop(event) {
        // --- ファイルドロップ時の処理 ---

        // ドロップ時のブラウザ既定処理を抑制
        event.preventDefault();
            
        // ファイル確認 ※一応両方にデータ乗ってるっぽい。両方ともFileオブジェクト
        let _file = null;
        if (event.dataTransfer.items) {
            // 配列先頭のファイルオブジェクトを取得
            _file = event.dataTransfer.items[0].getAsFile();
            
        } else {
            // 配列先頭のファイルオブジェクトを控える
            _file = event.dataTransfer.files[0];
        }

        // ファイルをDataURL(Base64)で読込
        _fileReader.readAsDataURL(_file);
    }

ドロップ確定時に走らせる処理です。
event.preventDefault();はブラウザ既定処理（勝手に読み込んで別タブで開くやつ）の抑制用です。

解説サイトの内容だと、ブラウザか処理内容次第でevent.dataTransfer.itemsかevent.dataTransfer.filesのどちらかでFileオブジェクトを取る事になるようで、一応両方動くようにしていますが、log出して確認した所だと両方ともFileオブジェクトが入ってるようでした。（最終的に取れるものも同じ）
どちらも配列で取れるようなので[0]で一番最初の要素だけ拾ってます。

そしてFileオブジェクトが取れたらFileReaderのreadAsDataURL(_file)でDataURL(Base64)形式で読み込んでます。
読み込み完了（loadイベント）したら先に仕込んでいたイベントハンドラでimg要素のsrcに代入されます。

    // DOMが全部読み込まれた時のイベントを設定
    document.addEventListener("DOMContentLoaded", function() {
        // fileDropArea に各イベントハンドラを設定
        document.getElementById("fileDropArea").addEventListener("dragover", IsDragOver);
        document.getElementById("fileDropArea").addEventListener("drop", FileDrop);
    });

ここはDOM要素の読込が完了したタイミングでドロップエリアにdragoverとdropイベントを設定する処理です。

処理の流れは、doragoverとdropでブラウザの処理が走らないようにした上で、dropイベントで読込処理を実行、Fileオブジェクトが取れたらFileReaderオブジェクトで中身を読み込む。画像データがDataURL(Base64)の状態ならsrcに入れるだけで表示されるのでそれで表示、という感じです。

実際に使う時は、ファイル内容の判定、複数同時ドロップされた時の処理など、細々した処理が必要になると思いますが、とりあえずとっかかりまで…

＜参考URL＞

ファイルのドラッグ & ドロップ - Web API | MDN

FileReader.readAsDataURL() - Web API | MDN

2025-07-01

HTML確認ダイアログを構築

HTML JavaScript 備忘録

HTML組んでてちょっと自前のダイアログ表示が必要になり、作ってみたので備忘録的に内容をまとめます。

ネイティブJavaScriptとCSS3で、簡単なアニメーション込みの物になります。一応多分昨今のダイアログ表示も似たような作り方してるんじゃないかと思います。

＜01 テスト用のHTMLを用意＞

とりあえずダイアログテスト構築の為の必要最低限のHTMLを用意します。
ボタンをクリックすると表示する想定です。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8" />
    <title>ダイアログ構築テスト</title>
    <style>
        body {
            margin: 0; padding: 0px;
        }
        
        h3 {
            margin: 8px; padding: 0px;
        }
        
        button {
            margin: 8px; padding: 2px 8px 2px 8px;
        }
    </style>
</head>
<body>
    <h3 id="id01">ダイアログ表示</h3>
    <button type="button" id="dialogOpen">表示</button>
</body>
</html>

＜02 ダイアログ表示用に全体を覆うDIVを用意＞

画面の他の入力も抑制する事も兼ねて、画面全体を覆うDIVを設定します。
これがダイアログを入れるコンテナにもなります。
position: fixed;で浮かせます。top: 0; left: 0;で左上に固定。width: 100vw; height: 100vh;で画面全体を覆うサイズに、背景色はrgba()で半透明を指定、そしてFlexboxで内部要素が中央揃えになるようにしておきます。

CSS

    #testDialog {
        box-sizing: border-box;
        position: fixed; top: 0; left: 0;
        width: 100vw; height: 100vh;
        background-color: rgba(0, 0, 0, 0.2);
        display: flex;
        justify-content: center;
        align-items: center;
    }

HTML

<body>
    <h3 id="id01">ダイアログ表示</h3>
    <button type="button" id="dialogOpen">表示</button>
    <!-- 確認ダイアログ -->
    <div id="testDialog">
    </div>
</body>

＜03 ダイアログ本体を設定＞

ダイアログの本体を、先ほどの全体を覆うDIVの中に配置します。そしてサイズやレイアウトをCSSで調整します。（表示切替などは後ほど実装します）

CSS

    #testDialog .dialogFrame {
        padding: 8px;
        width: 400px; height: 300px;
        border: 2px solid #555555;
        border-radius: 12px;
        background-color: #ffffff;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        align-items: stretch;
    }
    
    #testDialog .commentArea {
        padding-top: 20px;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-grow: 1;
    }
    
    #testDialog .buttonArea {
        height: 80px;
        display: flex;
        justify-content: space-around;
        align-items: center;
        flex-grow: 0;
    }
    
    #testDialog .dialogButton {
        width: 136px; height: 32px;
    }

HTML

<body>
    <h3 id="id01">ダイアログ表示</h3>
    <button type="button" id="dialogOpen">表示</button>
    <!-- 確認ダイアログ -->
    <div id="testDialog">
        <div id="testDialogFrame" class="dialogFrame">
            <div class="commentArea">
                <p>Dialog</p>
            </div>
            <div class="buttonArea">
                <button type="button" id="buttonCancel" class="dialogButton">Cancel</button>
                <button type="button" id="buttonOk" class="dialogButton">OK</button>
            </div>
        </div>
    </div>
</body>

＜04 スクリプトで表示、非表示の切り替えを設定＞

各ボタンで表示と非表示を切り替えれるよう、スクリプトを追加します。（アニメーションは最後の方で設定します）

CSS ※#testDialogを修正

    #testDialog {
        box-sizing: border-box;
        position: fixed; top: 0; left: 0;
        width: 100vw; height: 100vh;
        background-color: rgba(0, 0, 0, 0.2);
        /* display: flex; */
        display: none; /* 初期値をnoneにして非表示に */
        justify-content: center;
        align-items: center;
    }

HTML

<body>
    <h3 id="id01">ダイアログ表示</h3>
    <button type="button" id="dialogOpen">表示</button>
    <!-- 確認ダイアログ -->
    <div id="testDialog">
        <div id="testDialogFrame" class="dialogFrame">
            <div class="commentArea">
                <p>Dialog</p>
            </div>
            <div class="buttonArea">
                <button type="button" id="buttonCancel" class="dialogButton">Cancel</button>
                <button type="button" id="buttonOk" class="dialogButton">OK</button>
            </div>
        </div>
    </div>
    <!-- Script -->
    <script>
        // testDialog と testDialogFrame を控える
        var _dialog = document.getElementById("testDialog");
        var _dialogFrame = document.getElementById("testDialogFrame");

        // 関数定義
        function DialogOpen() {
            // noneからflexに変更
            _dialog.style.display = "flex";
        }

        function DialogClose() {
            // flexからnoneに変更
            _dialog.style.display = "none";
        }

        function DialogOK() {
            // とりあえずアラートでOKを表示
            alert("OK!");
        }

        // DOMが全部読み込まれた時のイベントを設定
        document.addEventListener("DOMContentLoaded", function() {
            // ボタンにクリックイベントを設定
            document.getElementById("dialogOpen").addEventListener("click", DialogOpen);
            document.getElementById("buttonCancel").addEventListener("click", DialogClose);
            document.getElementById("buttonOk").addEventListener("click", DialogOK);
        });
    </script>
</body>

ボタンで表示、非表示が切り替わるようになります。

＜05 イン、アウトアニメーションを設定＞

CSSで全体のフェードイン、フェードアウトと、ダイアログ部分のズームイン、ズームアウトのアニメーションを設定します。
スクリプトでクラスを切り替える事で実現します。
ブラウザのバージョン次第でフェードアウト時にdispley: none;がキーフレーム上で動かない可能性がありそうなので、別途setTimeout()で対応します。

CSS

    /* --- effect css --- */
    .dialog_fade_in {
        animation: dialogFadeIn 0.5s;
        animation-fill-mode: forwards;
    }
    
    .frame_zoom_in {
        animation: frameZoomIn 0.5s;
        animation-fill-mode: forwards;
    }

    .dialog_fade_out {
        animation: dialogFadeOut 0.5s;
        animation-fill-mode: forwards;
    }

    .frame_zoom_out {
        animation: frameZoomOut 0.5s;
        animation-fill-mode: forwards;
    }

    @keyframes dialogFadeIn {
        from { opacity: 0; }
        to { opacity: 1; }
    }

    @keyframes frameZoomIn {
        from { transform: scale(0.5); }
        to { transform: scale(1.0); }
    }

    @keyframes dialogFadeOut {
        from { opacity: 1; }
        to { opacity: 0; }
    }

    @keyframes frameZoomOut {
        from { transform: scale(1.0); }
        to { transform: scale(0.5); }
    }

HTML

    <!-- Script -->
    <script>
        // testDialog と testDialogFrame を控える
        var _dialog = document.getElementById("testDialog");
        var _dialogFrame = document.getElementById("testDialogFrame");

        // 関数定義
        function DialogOpen() {
            // noneからflexに変更
            _dialog.style.display = "flex";
            // クラスを dialog_fade_in に変更
            _dialog.className = "dialog_fade_in";
            _dialogFrame.className = "dialogFrame frame_zoom_in";
        }

        function DialogClose() {
            // クラスを dialog_fade_out に変更
            _dialog.className = "dialog_fade_out";
            _dialogFrame.className = "dialogFrame frame_zoom_out";
            // displayプロパティが最近のブラウザじゃないとkeyframesで設定出来ないようなのでスクリプトで時間差設定
            setTimeout(()=>{ _dialog.style.display = "none"; }, 500);
        }

        function DialogOK() {
            // とりあえずアラートでOKを表示
            alert("OK!");
        }

        // DOMが全部読み込まれた時のイベントを設定
        document.addEventListener("DOMContentLoaded", function() {
            // ボタンにクリックイベントを設定
            document.getElementById("dialogOpen").addEventListener("click", DialogOpen);
            document.getElementById("buttonCancel").addEventListener("click", DialogClose);
            document.getElementById("buttonOk").addEventListener("click", DialogOK);
        });
    </script>

＜06 完成＞

あとはここから移植したりカスタマイズしていけば良いのではないかと思います。

サンプルページ（武田制作のサイト上に保存してます）

最終的なHTML

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8" />
    <title>ダイアログ構築テスト</title>
    <style>
        body {
            margin: 0; padding: 0px;
        }

        h3 {
            margin: 8px; padding: 0px;
        }

        button {
            margin: 8px; padding: 2px 8px 2px 8px;
        }

        #testDialog {
            box-sizing: border-box;
            position: fixed; top: 0; left: 0;
            width: 100vw; height: 100vh;
            background-color: rgba(0, 0, 0, 0.2);
            /* display: flex; */
            display: none; /* 初期値をnoneにして非表示に */
            justify-content: center;
            align-items: center;
        }

        #testDialog .dialogFrame {
            padding: 8px;
            width: 400px; height: 300px;
            border: 2px solid #555555;
            border-radius: 12px;
            background-color: #ffffff;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            align-items: stretch;
        }

        #testDialog .commentArea {
            padding-top: 20px;
            display: flex;
            justify-content: center;
            align-items: center;
            flex-grow: 1;
        }

        #testDialog .buttonArea {
            height: 80px;
            display: flex;
            justify-content: space-around;
            align-items: center;
            flex-grow: 0;
        }

        #testDialog .dialogButton {
            width: 136px; height: 32px;
        }

        /* --- effect css --- */
        .dialog_fade_in {
            /* display: flex; ※何故かここで動かないのでスクリプトで直接指定する */
            animation: dialogFadeIn 0.5s;
            animation-fill-mode: forwards;
        }

        .frame_zoom_in {
            animation: frameZoomIn 0.5s;
            animation-fill-mode: forwards;
        }

        .dialog_fade_out {
            animation: dialogFadeOut 0.5s;
            animation-fill-mode: forwards;
        }

        .frame_zoom_out {
            animation: frameZoomOut 0.5s;
            animation-fill-mode: forwards;
        }

        @keyframes dialogFadeIn {
            from { opacity: 0; }
            to { opacity: 1; }
        }

        @keyframes frameZoomIn {
            from { transform: scale(0.5); }
            to { transform: scale(1.0); }
        }

        @keyframes dialogFadeOut {
            from { opacity: 1; }
            to { opacity: 0; }
        }

        @keyframes frameZoomOut {
            from { transform: scale(1.0); }
            to { transform: scale(0.5); }
        }
    </style>
</head>
<body>
    <h3 id="id01">ダイアログ表示</h3>
    <button type="button" id="dialogOpen">表示</button>
    <!-- 確認ダイアログ -->
    <div id="testDialog">
        <div id="testDialogFrame" class="dialogFrame">
            <div class="commentArea">
                <p>Dialog</p>
            </div>
            <div class="buttonArea">
                <button type="button" id="buttonCancel" class="dialogButton">Cancel</button>
                <button type="button" id="buttonOk" class="dialogButton">OK</button>
            </div>
        </div>
    </div>
    <!-- Script -->
    <script>
        // testDialog と testDialogFrame を控える
        var _dialog = document.getElementById("testDialog");
        var _dialogFrame = document.getElementById("testDialogFrame");

        // 関数定義
        function DialogOpen() {
            // noneからflexに変更
            _dialog.style.display = "flex";
            // クラスを dialog_fade_in に変更
            _dialog.className = "dialog_fade_in";
            _dialogFrame.className = "dialogFrame frame_zoom_in";
        }

        function DialogClose() {
            // クラスを dialog_fade_out に変更
            _dialog.className = "dialog_fade_out";
            _dialogFrame.className = "dialogFrame frame_zoom_out";
            // displayプロパティが最近のブラウザじゃないとkeyframesで設定出来ないようなのでスクリプトで時間差設定
            setTimeout(()=>{ _dialog.style.display = "none"; }, 500);
        }

        function DialogOK() {
            // とりあえずアラートでOKを表示
            alert("OK!");
        }

        // DOMが全部読み込まれた時のイベントを設定
        document.addEventListener("DOMContentLoaded", function() {
            // ボタンにクリックイベントを設定
            document.getElementById("dialogOpen").addEventListener("click", DialogOpen);
            document.getElementById("buttonCancel").addEventListener("click", DialogClose);
            document.getElementById("buttonOk").addEventListener("click", DialogOK);
        });
    </script>
</body>
</html>

2025-06-29

Photoshop作業用アタリ線だけデータ

作業用データ Photoshop

フォトショでエフェクト用画像などを作る時にベースになるアタ
リ線を作った上で作業するのですが、いつも適当なアタリ線の入った既存のファイル探したうえで結局適当なのが見つからず作ったりするので、先日のイラレ用と同じくそれ用に作ってGoogle Driveにアップしました。
ブログでもすぐ手届く所にあると何気に便利で。
なおこちらのファイルもそのまま再配布しなければ適当に使ってしまっていいです。

＜1024x1024px＞

＜512x512px＞

＜256x256px＞

＜128x128px＞

＜64x64px＞

2025-06-22

HTML記号エンティティ化ツール

HTML ウェブツール

はてなブログにコードを乗せる時、表示に Google code prettify を使っているのですが、それだとはてな上でコードのエンティティ変換が必要で、これまではWebで公開されている適当な変換ツールを使っていたのですが自前のを作ってみました。

武田構築 WebTools : HTML記号エンティティ化ツール

何を変換するか選べるようにしていて、一応最低限<>だけ変換するだけでもコード置く分には使えそうな気はします。
なお処理的には順番に置き換えてるだけです。
動作確認はあまりしていないですが、多分普通に動くと思います。

次に作る物も今一応考えてはいるのでまたツール追加すると思います。

2025-06-17

HTMLの<a>タグの設定方法の備忘録

HTML 備忘録

HTMLのaタグの使い方がちょっと分からなくなったので備忘録的にまとめます。

＜基本的な使い方＞

<a href="URL">リンク</a>

＜<li>で使う場合＞

<ul>
    <li><a href="URL01">リンク01</a></li>
    <li><a href="URL02">リンク02</a></li>
    <li><a href="URL03">リンク03</a></li>
</ul>

ulの下はliという事になっているらしいので、liの中に書きます。
なお、li内めいっぱいのクリックエリアが欲しい場合は、cssでaタグをブロック要素にして広げるらしいです。

li a {
    display: block;
}

＜下線が勝手につくのだけれど＞

消したい時はCSSでデコレーション無しを指定します。

a {
    text-decoration: none;
}

＜aタグは未クリック、クリック時、ジャンプ済み、で色が勝手に変わるのだけれど＞

CSSで色を変更出来ます。

/* リンク */
a:link {
    color: #0000EE;
}

/* ジャンプ（訪問）済み */
a:visited {
    color: #551A8B;
}

/* アクティブ（リンク処理を開始した時） */
a:active {
    color: #FF0000;
}

あと a:hover{***} でホバー時の色も変更出来ます。
a:focus{***}（キーボード等でフォーカスした時）もあるようです。

＜リンク先を別窓開いて表示したいのだけれど＞

target="_blank" を指定しておくとリンク先が別窓で開きます。

<a href="URL" target="_blank">リンク</a>

targetの内容で、親コンテキスト（多分表示元）やiFrameも指定できるようです。

＜aタグからスクリプトを起動したいのだけれど＞

aタグかその親にonclick=""を入れておくか、イベントリスナーをスクリプト上から設定しておきます。

onclickで起動

<a href="#" onclick="jsFunction01()">リンク01</a>

<script>
    function jsFunction01() {
        alert("リンク01をクリックしたよね！");
    }
</script>

イベントリスナーを設定

<a href="#" id="link02">リンク02</a>

<script>
    function jsFunction02(event) {
        alert("リンク02をクリックしたよね！");
	console.log(event);
    }

    // イベントリスナー設定
    document.getElementById('link02').addEventListener('click', jsFunction02);
</script>り

リスナーの起動関数は無名のアロー関数を設定してその中で別関数を起動するとかも出来そうです。

＜あの今のページや開いたリンク先で勝手にスクロールさせるやつ＞

アンカーは hrefに#付けてID名を指定する事で使えます。
IDが指定されている要素まで瞬時にスクロールします。

<a href="#targetID">アンカーリンク</a>

<a href="URL#targetID">リンク＆アンカーリンク</a>

CSSで html{scroll-behavior: smooth;} という感じでhtml要素に指定しておくとなめらかスクロールさせる事も出来るようです。

＜ファイルをダウンロードさせたいのだれけど＞

download属性を付けておくとブラウザで開かずにダウンロード遷移にできます。

<a href="FileURL" download>ファイル</a>

何か追記事項あったら更新するかもしれません。

武田構築ラボ：開発作業日記と備忘録

ウェブ関連の開発や周辺技術の備忘録です。

武田構築WebTools QRコードURL生成ツール

武田構築WebToolsの宣伝

画像データBase64エンコーディングツール

HTML画像ファイルドラッグ＆ドロップ読込処理サンプル

＜サンプルコード全体＞

＜HTML基本部分＞

＜ドロップした画像を読み込んで表示するまでの処理について＞

＜参考URL＞

HTML確認ダイアログを構築

＜01 テスト用のHTMLを用意＞

＜02 ダイアログ表示用に全体を覆うDIVを用意＞

＜03 ダイアログ本体を設定＞

＜04 スクリプトで表示、非表示の切り替えを設定＞

＜05 イン、アウトアニメーションを設定＞

＜06 完成＞

Photoshop作業用アタリ線だけデータ

＜1024x1024px＞

＜512x512px＞

＜256x256px＞

＜128x128px＞

＜64x64px＞

HTML記号エンティティ化ツール

HTMLの<a>タグの設定方法の備忘録

＜基本的な使い方＞

＜<li>で使う場合＞

＜下線が勝手につくのだけれど＞

＜aタグは未クリック、クリック時、ジャンプ済み、で色が勝手に変わるのだけれど＞

＜リンク先を別窓開いて表示したいのだけれど＞

＜aタグからスクリプトを起動したいのだけれど＞

＜あの今のページや開いたリンク先で勝手にスクロールさせるやつ＞

＜ファイルをダウンロードさせたいのだれけど＞