1. ホーム /
  2. HTML

HTML

  • 2023.02.08

【HTML】ファビコンの設置方法

ファビコンの設置はファビコンファイル以外にも
スマホ用のアイコンと一部Androidで表示出来ない場合があるためAndroid用のアイコンの
ファイルとしては3つを最低限準備します。

解像度としては、16×16、32×32、180×180、192×192の4つになります。

favicon用・・・favicon.ico
スマホ用（iOS）・・・apple-touch-icon-180×180.png
Android用・・・android-touch-icon-192×192.png

<link rel="icon" href="/favicon.ico" id="favicon">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon-180x180.png">
<link rel="icon" type="image/png" sizes="192x192" href="/android-touch-icon-192x192.png">

もっと厳密に設置したい方はコリスの紹介方法を参考に設置するのが良いかと思います。
https://coliss.com/articles/build-websites/operation/work/how-to-favicon.html

HTMLテンプレートにもデフォルトで入れておくと便利です。
https://www.uki213.com/memo/html-template/

参考：https://blog.senseshare.jp/favicon.html
https://keywordfinder.jp/blog/seo/favicon/

  • 2023.02.08

【HTML】SNSシェアボタンの設置（Twitter、Facebook、LINE、note）

SNSシェアボタンの設置方法です。
Twitter、Facebook、LINE、noteのシェア方法の紹介になります。

SNSシェアボタンは、URLのコピーボタンも一緒に並べると利便性が高くなるのでこちらのページも併せて確認しておくと良いでしょう。

Twitterシェアボタン

Twitterシェアボタンを設置する方法は
以下のコードを設置してください。

<a href="https://twitter.com/share?url=【シェアするURL】" target="_blank">Twitterでシェアする</a>

【シェアするURL】をシェアしたいサイトのURLにしてください。

TwitterにはURL以外にも、以下のようなパラメータもあります。

パラメータ 説明
text デフォルトで入れておくテキストの設定です。
ページのタイトルを入れるのが良いでしょう。
via 「@◯◯さんから」という表示を追加できる項目です。
公式アカウントがあれば、そのidを設定しましょう。
related ツイート後に、フォローを促したいアカウントがある場合に設定する項目です。
公式アカウントがあれば、そのidを設定しましょう。
hashtags ハッシュタグを付けられる項目です。カンマ区切りで複数設定できます。

パラメータを追加すると以下のようになります。
全部のパラメータを追加しても良いですし、一部の追加でも良いです。

<a href="https://twitter.com/share?url=【シェアするURL】&text=【ツイートしたいテキスト】&via=【ツイート内に含むユーザ名】&related=【ツイート後に表示されるユーザー】&hashtags=【ハッシュタグ】" target="_blank">Twitterでシェアする</a>

Facebookシェアボタン

Facebookシェアボタンを設置する方法は
以下のコードを設置してください。

<a href="https://www.facebook.com/share.php?u=【シェアするURL】" target="_blank">Facebookでシェアする</a>

【シェアするURL】をシェアしたいサイトのURLにしてください。

LINEシェアボタン

LINEシェアボタンを設置する方法は
以下のコードを設置してください。

<a href="https://social-plugins.line.me/lineit/share?url=【シェアするURL】" target="_blank">LINEでシェアする</a>

【シェアするURL】をシェアしたいサイトのURLにしてください。

「noteで書く」ボタン

「noteで書く」ボタンを設置する方法は
以下のコードを設置してください。

<a href="https://note.com/intent/post?url=【シェアするURL】" target="_blank">noteで書く</a>

【シェアするURL】をシェアしたいサイトのURLにしてください。

参考：https://www.help-note.com/hc/ja/articles/360000272622–noteで書く-ボタン
https://www.gaji.jp/blog/2022/06/10/10057/
https://webdesign-trends.net/entry/3632

  • 2023.02.02

【HTML】Googleフォーム連携した静的なHTMLにreCAPTCHAを設置する方法

Googleフォーム連携した静的なHTMLに
reCAPTCHAを設置する方法です。
※この設定では、よくあるオリジナルの完了画面へのリダイレクトが出来ないかも…

reCAPTCHAのバージョンはV2での実装方法になります。
reCAPTCHA公式サイトよりV2でそれぞれサイトキーとシークレットキーを発行します。

HTML

必要な項目のinputタグを設定し、entry.0000000など該当する値に変えます。
formタグのactionは認証が完了したらPHP内に記述されたURLへ送信するのでhtmlへの直接的な記述は不要です。

<form name="gr_form">
    名前：<input type="text" name="entry.0000000" value="" placeholder="山田太郎"><br>
    メールアドレス：<input type="text" name="entry.0000000" value="" placeholder="メールアドレス"><br>
    <div id="gr_checkbox"></div>
    <input type="button" value="送信" disabled="disabled" id="gr_submit" onclick="trySubmit();" />
</form>

CSS

#gr_checkboxがreCAPTCHA自体の表示に関するCSS、#gr_submit:disabledはreCAPTCHA認証前の送信ボタン（非活性）のCSSです。

#gr_checkbox {
    display: table;
    margin: 10px auto;
}

#gr_submit:disabled {
    pointer-events: none;
    opacity: 0.5;
}

JS

最初に発行したサイトキーをxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxに記述します。
22行目の./gr_check.phpは設置場所に合わせてパスを修正してください。（同じ階層の場合はこのままで可）

<script src="https://www.google.com/recaptcha/api.js?onload=grOnloadCallback&render=explicit" async defer></script>
<script type="text/javascript">
    var grOnloadCallback = function() {
        grecaptcha.render('gr_checkbox', {
            'sitekey' : 'xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx',
            'callback' : grCallback,
            'expired-callback' : grExpiredCallback
        });
    };

    var grCallback = function(response) {
        document.getElementById('gr_submit').removeAttribute('disabled');
    };

    var grExpiredCallback = function(response) {
        document.getElementById('gr_submit').setAttribute('disabled', 'disabled');
    };
    
    var trySubmit = function() {
        if( document.gr_form.reportValidity() ) {
            var xhr = new XMLHttpRequest();
            xhr.open('POST', './gr_check.php', true);
            xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
            xhr.onreadystatechange = function() {
                if(xhr.readyState === 4 && xhr.status === 200) {
                    if('' != xhr.responseText) {
                        document.gr_form.action = xhr.responseText;
                        document.gr_form.method = 'POST';
                        document.gr_form.submit();
                    }
                }
            }
            var gr_response = document.getElementById('g-recaptcha-response').value;
            xhr.send('response=' + gr_response);
        }
    }
</script>

PHP

最初に発行したシークレットキーをxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxに記述し、
https://docs.google.com/forms/u/0/d/e/zzzzzzzzzz/formResponseを該当する値に変え、
ファイル名をgr_check.phpにして下記のコードを記述し保存します。

<?php
    $token = $_POST['response'];
    if($token) {
        $url = 'https://www.google.com/recaptcha/api/siteverify';
        $secret_key = 'xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx';
        $response = file_get_contents("{$url}?secret={$secret_key}&response={$token}");
        $json = json_decode($response, true);
        if($json['success'] == 'true') {
            echo 'https://docs.google.com/forms/u/0/d/e/zzzzzzzzzz/formResponse';
        }
    }
?>

参考：https://migi.me/javascript/google-recaptcha-ajax/

  • 2023.01.26

【HTML】AMPのcanonicalタグ

AMPページのcanonicalタグは
本体ページと対になるように以下のように記述します。

canonicalタグのURLは必ず絶対パスで記述します。

本体ページ

// 本体のページ
<head>
  <link rel="canonical" href="https://uki213.com/sample/">
  <link rel="amphtml" href="https://uki213.com/sample/amp/">
</head>

AMPページ

// AMPページ
<head>
  <link rel="canonical" href="https://uki213.com/sample/">
</head>
参考：https://www.e-webseisaku.com/column/marketing/1883/
  • 2023.01.06

【HTML】カレンダー形式のフォーム入力（type=”datetime-local”）

inputフォームにtype="datetime-local"を設定すると
カレンダー形式で日時を入力出来るようになります。

<input type="datetime-local">

最小値min="YYYY-MM-DDThh:mm:ss"や
最大値max="YYYY-MM-DDThh:mm:ss"など指定できる属性もあるので

最小値の指定は過去を選択できないように出来たり、
最大値は来月以降や来年以降など誤って遠い将来の指定してしまう入力ミス防止の為などの指定も出来ます。

2023.01現在だとiOSでも問題なく使える（Mac環境のChrome可・Safari不可）ので、状況を選べば複雑なJSのフレームワークなど使用しなくてもカレンダー形式の入力を実現でき、入力方法を便利にすることが出来ます。

年月日時分まで全て含むtype="datetime-local"以外にも

  • 年月日だけのtype="date"
  • 年月だけのtype="month"
  • 時分だけのtype="time"
  • 年週だけのtype="week"

などもあります。

参考：https://developer.mozilla.org/ja/docs/Web/HTML/Element/input/datetime-local
https://www.tagindex.com/html/form/input_datetime_local.html
https://codeforfun.jp/reference-html-tag-input-type-datetime-local/

  • 2023.01.05

【HTML】PageSpeed Insightsでのアラート修正02（リンクに識別可能な名前が指定されていません）

PageSpeed Insightsでチェックをすると
「リンクに識別可能な名前が指定されていません」
というアラートが出ることがあります。

これはaタグ内に画像を使用している場合に出るアラートになりますが、
以下の要素を追加することで解消できます。

1.altを追加
通常、imgタグにaltを設定するのが一番望ましいです。

2.aria-labelを使う
altが何らかの理由で使えない場合は、aタグにaria-labelを使います。

<a href="readmore.html">Read More</a>
　↓
<a href="readmore.html" aria-label="Read More">Read More</a>

参考：https://dequeuniversity.com/rules/axe/4.4/link-name
https://www.rectus.co.jp/archives/11570

  • 2023.01.05

【HTML】PageSpeed Insightsでのアラート修正01（ボタンにユーザー補助機能名が指定されていません）

PageSpeed Insightsでチェックをすると
「ボタンにユーザー補助機能名が指定されていません」
というアラートが出ることがあります。

これはbuttonタグに以下の要素を追加することで解消できます。

<button id="al"></button>
　↓
<button id="al" aria-label="Name"></button>

ユーザーに知らせる必要のない要素やフォーカスが当たるべきでない要素に、適宜aria-label="Name"の代わりにaria-hidden="true"などを設定しても良いでしょう。

参考：https://dequeuniversity.com/rules/axe/4.4/button-name
https://cam-inc.co.jp/p/techblog/466554823458685993

  • 2022.12.27

【HTML】ベースになるHTMLテンプレート

HTMLをゼロベースから書くのは効率が悪いので
テンプレート用のHTMLを用意しておいたり、エディターのショートコードなどですぐに呼び出せる状態にしておくことが仕事でコーディングする場合、必要不可欠です。

私の場合は以下のようなHTMLを標準に使っています。

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

<head>

  <meta name="viewport" content="width=device-width, user-scalable=yes, maximum-scale=3">
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  <title>タイトル</title>
  <meta name="keywords" content="キーワード">
  <meta name="description" content="ディスクリプション">
  <link rel="icon" href="/favicon.ico" id="favicon">
  <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon-180x180.png">
  <link rel="icon" type="image/png" sizes="192x192" href="/android-touch-icon-192x192.png">

    <!--GA-->

    <!--OGP-->
    <head prefix="og: http://ogp.me/ns# fb: http://ogp.me/ns/ fb# article: http://ogp.me/ns/ article#">
    <meta property="og:url" content="https://●●●.jp/">
    <meta property="og:type" content="article">
    <meta property="og:title" content="タイトル">
    <meta property="og:description" content="ディスクリプション">
    <meta property="og:site_name" content="名前">
    <meta property="og:image" content="https://●●●.jp/ogp.png">
    <meta name="twitter:card" content="summary_large_image">
    <!--OGP-->

    <!--CSS-->
    <link rel="stylesheet" href="./css/common.css" type="text/css" media="screen,print">
    <link rel="stylesheet" href="./css/sp.css" type="text/css" media="screen and (max-width: 767px)">
    <link rel="stylesheet" href="./css/pc.css" type="text/css" media="screen and (min-width: 768px)">

    <!--JS-->
    <script src="./js/jquery.min.js"></script>
    <script type="text/javascript">

    </script>
  </head>
  <body id="top">
    <div id="container">
      <div class="main">

      </div>
      <div class="ftr">
        <div class="copyright">Copyright &copy; 名前 All rights reserved.</div>
      </div>
    </div>
  </body>
</html>

レスポンシブ対応として
<meta name="viewport" content="width=device-width, user-scalable=yes, maximum-scale=3">
特に最後のmaximum-scale=3はスマホで3倍までの拡大が出来ることで
ユーザビリティ・アクセシビリティを高めています。

CSSの読み込みも
<link rel="stylesheet" href="./css/sp.css" type="text/css" media="screen and (max-width: 767px)">
<link rel="stylesheet" href="./css/pc.css" type="text/css" media="screen and (min-width: 768px)">
上書きではなく、パソコンとスマホとを完全に分けて効率的にコーディング出来るようにしています。
（CSSを最小限にするために、SPファーストでコーディングし、PCで上書きが本来最もベストです。）

SNSでシェアされて拡散してサイトに訪問してもらうのが最近はメインになるのでOGPの設定も不可欠です。

PCの性能が向上したとは言え、表示スピードを意識したコーディングのほうが良いので、ヘッダーの読み込みはCSSを先、JSは後、としたほうが良いでしょう。

※リセットCSSはこちら
※ファビコンに関する詳細はこちら