常連

### 前提

> 指定されたオブジェクトのプロトタイプ (つまり、内部プロパティ [[Prototype]] の値) を返します。
> [Object.getPrototypeOf() - JavaScript | MDN](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Object/GetPrototypeOf)

> アクセスされるオブジェクトの内部の [[Prototype]] (オブジェクトまたは null のどちらか) を暴露します。
> [`Object.prototype.__proto__` - JavaScript | MDN](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Object/proto)

とMDNにあるため、同じものを返すのだろうと思っていましたが、これらが違うものを返すケースがありました。

### 発生している問題・エラーメッセージ

`Object.setPrototypeOf`を使ったり`obj.__proto__.__proto__`に代入するなどして、`[[Prototype]]`の`[[Prototype]]`を`null`に変更する（削除する？）と、`Object.getPrototypeOf(obj)`と`obj.__proto__`が一致しません。
（おそらく、下記コードを見ていただいた方が早いです）

これについて、両者の違いを教えてください。

### 該当のソースコード

```js 
{
    class Grandma {

    }

    class Mama extends Grandma {

    }

    const child = new Mama();

    console.log(child.__proto__ === Object.getPrototypeOf(child)) // true
    console.log(child.__proto__.__proto__ === Object.getPrototypeOf(Object.getPrototypeOf(child))) // true

    Object.setPrototypeOf(Object.getPrototypeOf(child), null) // null の場合は、__proto__ と Object.getPrototypeOf() が一致しない。
    // child.__proto__.__proto__ = null // 同上

    console.log(child.__proto__) // undefined
    console.log(Object.getPrototypeOf(child) === Mama.prototype) // true
    console.log(child.__proto__ === Object.getPrototypeOf(child)) // false
}

{
    class Grandma {

    }

    class Mama extends Grandma {

    }

    const child = new Mama();

    console.log(child.__proto__ === Object.getPrototypeOf(child)) // true
    console.log(child.__proto__.__proto__ === Object.getPrototypeOf(Object.getPrototypeOf(child))) // true

    Object.setPrototypeOf(Object.getPrototypeOf(child), {}) // 空のオブジェクトなどの場合は、__proto__ と Object.getPrototypeOf() が一致する。
    // child.__proto__.__proto__ = {} // 同上

    console.log(child.__proto__) //  === Mama.prototype
    console.log(Object.getPrototypeOf(child) === Mama.prototype) // true
    console.log(child.__proto__ === Object.getPrototypeOf(child)) // true
}
```

### 補足情報（FW/ツールのバージョンなど）

`Object.prototype.__proto__`が非推奨であることは理解していますので、「そもそも`Object.prototype.__proto__`を使っているのが間違い」という回答は、当方が望んでいるものではありませんのでご理解ください。


---

### 解決後の追記

解決後に以下のようにして`Object.prototype.__proto__`のゲッターを直接参照して試したところ、動作しましたので、やはりプロトタイプチェーンが切れていることが原因だとわかりました。

```js
Object.getOwnPropertyDescriptor(Object.prototype,'__proto__').get.bind(child)()
```


Object.getPrototypeOf(obj) と obj.__proto__ の違いを教えてください

### 実現したいこと

* 内部に`<label>`があろうが、外側の`<div>`で1クリックあたり1回のイベントを拾えるようにする

### 前提

```html
<div>
  文章などで外側のスペースも確保
  <label>
    hoge
    <input type="text" />
  </label>
</div>
```

このようなHTMLに対して、`<div>`で`onclick`を拾うようにした上で、`<label>`内の文言をクリックすると、`<label>`と`<input>`の2回クリックイベントが`<div>`まで上がってきます。

やりたいこととしては、`<div>`側のイベントハンドリングの実装だけで、このような`<label>`のクリックに対しても1回だけの処理を行いたい、という状況です。

### やりたくないこと

* `<label>`や`<input>`の側に処理を仕掛ける（実際には個数が増減したりもあるので煩雑となります）
* `<label>`のクリックで`preventDefault`を行う、あるいは`<div>`のキャプチャフェーズでイベントを処理して、`<input>`の反応自体を抑える（入力要素がフォーカスしなくなるのは避けたい）

### 現状の考え

とりあえず、現状では「`<label>`のクリックから派生した`<input>`のクリックイベントでは処理を割愛する」という手法を考えていて、いったん「`event.timeStamp`を見比べて、ごく直近で発生したイベントなら除外する」というような条件による判定がありそうではあるのですが、安定して稼働する条件なのか、そしてもっと確実な判定法がないのか気になっているところです。

### その他

Reactで実装を行っているので、純粋なDOMだけではなくReactによる解決策も歓迎です。

labelのクリックで入力エレメントが起こすclickイベントを区別する方法があるか

https://nagoyaaqua.jp/calendar/

こちらのようなイベントカレンダーをwordpressで作りたいです。
日にちを押すと詳細がポップアップで表示されるような…。
どのプラグインを使って、どのようにしたら作れるでしょうか？

htmlでできるか? と思い、作成してみましたがポップアップが思うようにいかず 、
プラグインのEvent Organiserを試してみましたが、これまた思うようにできませんでした。
初心者が作るには難しいのかなーと思いつつ、なんとかして作ってみたいです。
ヒントでもいただけたらありがたいです。

こんな感じのイベントカレンダーを作りたいです

### 前提
SQLについて
特定の日前後でセッション数がどのように変わったか比較をしようとしています。
特定日より前のデータがbeforeテーブルに、後のデータがafterテーブルに分かれて入っています。
![![イメージ説明](https://ddjkaamml8q8x.cloudfront.net/questions/2023-01-16/d087f2af-4591-47d3-b405-35189fa9be8b.png)](https://ddjkaamml8q8x.cloudfront.net/questions/2023-01-16/31b3f7bf-26f8-46ee-aab7-aded4b42f27a.png)

### 実現したいこと
・この2つのテーブルを結合し、特定日前後n日でセッション数がどのように変わったかを出力したい
![イメージ説明](https://ddjkaamml8q8x.cloudfront.net/questions/2023-01-16/c4ee229a-eb14-4197-923c-9d2776f280e1.png)

### 発生している問題・エラーメッセージ
・双方にデータがあるものは問題ありません。
　（例：user_idが1、dif_dateが1から3）
・どちらかにしかデータがないものは抽出ができません。
　（例：user_idが1、dif_dateが4から7）

### 該当のソースコード


```ここに言語名を入力
SELECT
　before.b_user_id as user_id
  , before.b_dif_dates as dif_dates
  , after.a_session - before.b_session as dif_session
FROM
  before, after
WHERE
  before.b_user_id = after.a_user_id
  AND before.b_dif_dates = after.a_dif_dates
```

### 試したこと
外部結合の必要があると思い、
FROM before
FULL OUTER JOIN after
ON before.b_user_id = after.a_user_id
   AND before.b_dif_dates = after.a_dif_dates
としましたが、うまくいきません。

その他EXIST、CASEなども使いましたがどうやってもうまくいきません。
何卒宜しくお願いします！

### 補足情報（FW/ツールのバージョンなど）


SQLのテーブル結合、どちらかにデータがない

### 前提

とある管理画面を作成するのですが、ハタと「どうテーブル設計すればいいのか？」と悩んでおり、ご助言をいただきたいです。

### 実現したいこと

- 一人のユーザーに対し、属性や家計情報を登録します。
- 属性は、氏名や性別など一般的なものです。
- 家計情報がネックとなっています。
- 家計情報は月ごとの収入と支出です。
- 収入と支出は可変個登録です。
- 最終的に、ユーザーごとの支出の集計表を出力します。

### 検討内容
登録するものの個数が固定であれば、ユーザーテーブルに登録するもののカラムを用意して値を入れればいいのですが、可変個登録のため、テーブルは分ける必要があると思っています。

|ユーザー|
|:--|
|ID|
|氏名|
|性別|
|年齢|

|収入|
|:--|
|ユーザーID|
|収入名|
|金額|

|支出|
|:--|
|ユーザーID|
|支出名|
|金額|

のようにテーブルを作成したとすると、出来上がるデータは

|ID|氏名|性別|年齢|
|:--|:--:|--:|--:|
|1|ユーザーA|男|30|
|2|ユーザーB|女|27|

|ユーザーID|収入名|金額|
|:--|:--:|--:|
|1|月収|300000|
|1|臨時収入A|20000|
|2|月収|250000|
|2|臨時収入A|15000|
|2|臨時収入B|10000|

|ユーザーID|支出名|金額|
|:--|:--:|--:|
|1|家賃|60000|
|1|光熱費|15000|
|1|交際費|20000|
|1|ローン|30000|
|2|家賃|60000|
|2|光熱費|15000|
|2|交際費|20000|

のようなものになります。



### 発生している問題
支出の集計表はユーザーごとに分かれおり、
|||
|:--|:--:|
|月収||
|臨時収入A||
|収入計||
|家賃||
|光熱費||
|交際費||
|ローン||
|支出計||

という形です。

実際はもう少し複雑ですが、要点だけに絞るため簡略化しています。

どうSQLを組んだものかと悩んでおり、テーブル構成が妥当かどうかを含め、アドバイスを頂ければと思います。Laravelを使用します。

よろしくお願いします。


テーブル設計について

### 前提
Chromeでは発生しない
Safari, iPhoneで再現する

### 実現したいこと
https://codepen.io/Ireen/pen/yLEGxbG
こちらにHTML、CSSのコードを記載しました。
これをSafari, iPhoneで開くと以下のような状態になります。
![イメージ説明](https://ddjkaamml8q8x.cloudfront.net/questions/2022-12-06/a619b5ab-0cb1-4107-8871-028069e70e6d.png)


理想はChromeで開いた次のような感じになることです。
![イメージ説明](https://ddjkaamml8q8x.cloudfront.net/questions/2022-12-06/8129eb73-d415-4e09-a4ef-a46e58b36250.png)

同じようなtableが複数のページにいくつもあるため、固定で列の高さを指定する方法は除外で、
「りんご」の部分の文章の高さが可変のため、CSSで解決したく、いいアイデアはないものか困っております。

### コード
```HTML
<table>
    <tbody><tr>
        <th rowspan="2">
            りんご<br>
            りんご<br>
            りんご<br>
            りんご<br>
            りんご<br>
            りんご<br>
        </th>
        <td class="one">バナナ</td>
        <td class="two">みかん</td>
        </tr>
        <tr>
            <td class="three">パイン</td>
            <td class="two">オレンジ</td>
        </tr>
    </tbody>
</table>
```

```CSS
th, td{
  border: 1px solid #000;
}

.one{
    line-height: 80%;
    font-size: 1.2rem;
    padding: 20px 0;
    width: 25%;
    background: #f31e60;
    color: white;
    font-weight: bold;
    text-align: center;
}

.two{   
    width: 25%;
    font-weight: bold;
    color: #000;
    text-align: center;
    font-size: 1.5rem;
}

.three{
    line-height: 80%;
    font-size: 1.2rem;
    padding: 20px 0;
    width: 25%;
    background: #57abe7;
    color: white;
    font-weight: bold;
    text-align: center;
}
```

よろしくお願いいたします。

tableのrowspanが2以上の時safari, iPhoneで表示が崩れる

### 前提
WordPressでAjaxを使ったアクションを実装しています

### 知りたいこと
nonceの理解を深めたいです

特に「なぜ複数必要とされるのか？」が理解できないので教えて頂けませんでしょうか

以下に複数必要との記載があるソースを列挙してまいります

### 複数必要との記載があるソース１
まず関数リファレンスですが、

> 一般的に、アクションに対する名前を可能な限りユニークにするのがベストです。
> https://wpdocs.osdn.jp/関数リファレンス/wp_create_nonce

とあり、その理由は明記されていません

### 複数必要との記載があるソース２
そして類似質問がありましたが、

> アクション毎に nonce を別々にするのが望ましいです。
> https://ja.wordpress.org/support/topic/「nonce」の使い方について/

とあり、やはり理由が不明です

### 複数必要との記載があるソース３
またはStackoverflowにも質問がありましたが、

> Each form should have its own nonce
> https://stackoverflow.com/questions/31987963/should-i-use-different-nonces-for-multiple-forms-on-same-page

その理由がここでもわかりません

### 役割を調べました
複数必要であるというその理由を知るために、公式マニュアルで本来の役割を見てみました

この「Why use a nonce?」の項目を見ると、予想通りnonceがCSRF対策だとわかります
> https://codex.wordpress.org/WordPress_Nonces#Why_use_a_nonce.3F

CSRF対策ならば、nonceは「なぜ複数必要とされるのか？」が結局ナゾです。

普通に１つのトークンをフォームに持たせておけば対策は充分に可能だと思うのですが…？

### まとめ
疑問は次の点にまとめられると思います

・nonceにはCSRF対策以外の役割があって、そのときに複数必要なのでしょうか？
・それともCSRF対策のトークンが複数必要なケースというのがあるのでしょうか？

宜しくお願い致します




WordPressのnonceはなぜ複数必要とされるのか？（CSRF対策のトークンはいつ複数必要なのか？）

Can I Useではsafariでも`clamp()`がサポートされていますが、私が読んだ本やネットで調べた情報だと、safariでもちゃんと`clamp()`を使えるようにするには`min-width: 0vw`を書いた方がいいと書いてあったのですが、なぜそうするといいのかなどが書いていません。
今も念のためこの記述はしておいた方がいいのでしょうか？

「clamp()がsafariで効かないときにmin-height: 0vw;を指定するといい」と本で読んだのですが、今もそうした方がいいのでしょうか？

### 前提

paiza learningの問題にて1000行の入力値をすべて出力するという問題
[paiza問題](https://paiza.jp/works/mondai/stdin_primer/stdin_primer__read_line_boss/edit?language_uid=php&t=4418f686982225394584af403e80b1c7)
で以下のコードだとtrimで改行だけでなく頭の「0」も消されてしまいます。
以下の「試したこと」にあるコードに記載の通り配列にtrimを付けることで正解には行きついたのですが、なぜ配列か標準入力値の獲得時にtrimを使うと入力値の「０」が消える・消えないの違いが発生するのでしょうか？
また、while文で改行やtabのみを取り除いて出力した方が簡潔で分かりやすと思うのですがそのような事は可能でしょうか？

```php

<?php
    // 自分の得意な言語で
    // Let's チャレンジ！！

   //↓while文でtrimを使うと「0abc」のような値を「abc」として獲得してしまう
    while($input_line = trim(fgets(STDIN))){
        echo $input_line."\n";
    };

?>

```

### 実現したいこと

1000行の入力値をそのまま同じ形でしょつ力する。

### 発生している問題・エラーメッセージ

```
エラーメッセージ
```

### 該当のソースコード

```ここに言語名を入力
ソースコード
```

### 試したこと

以下のコードで正解には行きついたのですが、間違っていたコードと比較してなぜ入力値に「０」があっても消されずに出力されるのでしょうか。

```php
<?php
    // 自分の得意な言語で
    // Let's チャレンジ！！
　/*配列の格納時にtrimを付けても「0abc」は「abc」として
格納されないのは何故でしょうか？*/
    while($input_line = fgets(STDIN)){
        $array[] = trim($input_line);
    };
    
    foreach($array as $value){
        echo $value."\n";
    }

?>
```

?>

### 補足情報（FW/ツールのバージョンなど）

ここにより詳細な情報を記載してください。


trimで入力値の0も消してしまう

# ユーザーの入力した HTML 文字列を HTML としてサイトに表示したい

ユーザーが入力した HTML 文字列を、プレビュー欄的な箇所に HTML として解析して表示することを考えています。

その文字列をサーバーに保存などは行わず、クライアント側の JavaScript 内で処理は完了します。
プレビュー用の文字列を URL パラメータに保存するなども行わないです。（他のユーザーに任意の文字列を表示させることはできない）

この場合、いわゆる XSS の危険性として考えられるのは

- その入力した HTML に悪意ある script が含まれていて、そのドメイン上から送信されたリクエストとして処理されてしまう危険性がある
  - [Same Origin Policy](https://developer.mozilla.org/en-US/docs/Web/Security/Same-origin_policy) が通ってしまい、ユーザーが勝手に作ったリクエストを送信することが可能になる？

ことだけかなと思っているのですが、セキュリティ周りに疎くこの認識があっているか心配です。

また、対策としては HTML を sanitize する処理をクライアント側に挟んで、`script` タグや `onclick` などのイベントハンドラーを許可しない（取り除く）ようにすることで十分かと考えているのですが、合ってますでしょうか？

趣味の開発で特に公開するサイトではないですが、せっかくなので気をつけておきたく、よろしくお願いします。

クライアント側でユーザーの入力した値を HTML として表示する場合の XSS の可能性について

お世話になります。

### やりたいこと

外部向けに公開しているWEBサーバに対して、LAN内からでもドメインを使ってアクセスしたい。
例えばドメイン「hogehoge.com」で外部公開しているサーバに対して、LANのIPを指定してアクセスするなどせず、
「hogehoge.com」を使ってアクセスしたい。

今回、クライアントのhostファイルを使って対応したくないので、LAN内にDNSサーバを構築して対応したい。

### 困っていること、質問したいこと

https://oiio.jp/entries/1256 こちらのサイトを参考にした。
この記事の筆者が行っていることをそのまま作業したが、
LAN内でドメインで名前解決されず、アクセスできない。

具体的には、wordpressで公開しているページに対して、
LAN内からURLにドメインを使用してアクセスができない。
(https://hogehoge.comでアクセスできない)

外部公開しているので、外部からはドメインでアクセスできる。

### これが原因かな？と思い確認した内容
- UFWで53ポートを開放、一応ルータ側もフォワーディングするように設定
- NetworkManagerでresolv.confが再生成されないようになったことも確認
- ルータでDNSサーバのIP(後述するが192.168.100.XXX)をLAN内DNSサーバアドレスに指定
-  /etc/dnsmasq.conf の no-dhcp-interface=enp3s0をenp1s0に変更（ifconfigで確認）
- dnsmasqが起動していない？ → 起動しているのを lsof -i:53で確認
- アクセスできないのを確認後、念のためサーバ自体やNetworkmanagerやdnsmasqを再起動 → 変化なし

### 構成

＞webサーバ 兼 内部DNSサーバ
OS Ubuntu 20.04.4 LTS
ドメイン hogehoge.com
LAN IP 192.168.100.XXX
ゲートウェイ 192.168.100.1
ホスト名 www

＞クライアント
何でもいいが、内部と外部を頻繁に出入りするデバイス。
AndroidやノートPC等。特別クライアント側で設定が必要な構成にしたくない。

### 設定ファイル群
/etc/dnsmasq.conf 

```dnsmasq.conf 

port=53
bogus-priv
strict-order
no-dhcp-interface=enp1s0
```

/etc/hosts
```hosts
127.0.0.1       localhost
127.0.1.1       www

# The following lines are desirable for IPv6 capable hosts
::1     ip6-localhost ip6-loopback
fe00::0 ip6-localnet
ff00::0 ip6-mcastprefix
ff02::1 ip6-allnodes
ff02::2 ip6-allrouters

192.168.100.XXX hogehoge.com
```
/etc/resolv.conf 

```resolv.conf 
nameserver 127.0.0.1
nameserver 1.1.1.1
```

・これを試してみたら？
・情報が足りない
・これが原因じゃないか？

なんでもよいのでご意見をいただきたいです。よろしくお願いします。

### 修正依頼内容 その1

クライアントをwindowsとして、コマンドプロンプトでnslookupをしてみました

```CMD
User> nslookup hogehoge.com
サーバー：dns9.quad9.net
Address：9.9.9.9

名前のない回答：
名前： hogehoge.com
Address：ドメインのグローバルIPv4/IPv6アドレス
```
でした。

これを見るとクライアントのDNSが192.168.100.XXXになっていないなと思いました。
（ルータでLAN側DNSサーバアドレスを変更するだけではだめなのでしょうか。）

そこで、Windows側でネットワークの詳細設定からDNSを192.168.100.XXXにし、再度nslookupをしました。

```CMD
User> nslookup hogehoge.com
DNS request timed out.
time out was 2 seconds.

サーバー：Unknown
Address：192.168.100.XXX

以下timeoutのログが数回出力
```
でした。

### 修正依頼内容 その2

```web/dnsサーバでのdig
web/dns > dig hogehohe.com @localhost

; <<>> DiG 9.16.1-Ubuntu <<>> hogehohe.com @localhost
;; global options: +cmd
;; Got answer:
;; ->>HEADER<<- opcode: QUERY, status: NOERROR, id: 37071
;; flags: qr rd ra; QUERY: 1, ANSWER: 1, AUTHORITY: 0, ADDITIONAL: 1

;; OPT PSEUDOSECTION:
; EDNS: version: 0, flags:; udp: 1232
;; QUESTION SECTION:
;hogehohe.com            IN      A

;; ANSWER SECTION:
hogehohe.com.     300     IN      A       グローバルIPでした。

;; Query time: 32 msec
;; SERVER: 127.0.0.1#53(127.0.0.1)
;; WHEN: 月  8月 29 10:20:05 JST 2022
;; MSG SIZE  rcvd: 63
```

```ping
user > ping 192.168.100.XXX

192.168.100.XXX　に ping を送信しています 32バイトのデータ：
192.168.100.XXX　からの応答： バイト数 = 32 時間 = 5ms TTL = 64
192.168.100.XXX　からの応答： バイト数 = 32 時間 = 5ms TTL = 64
192.168.100.XXX　からの応答： バイト数 = 32 時間 = 5ms TTL = 64
192.168.100.XXX　からの応答： バイト数 = 32 時間 = 5ms TTL = 64

192.168.100.XXXのping統計：
パケット数 送信=4 受信=4 損失 =0
```

でした。

今回は自分での気づきがないため、一旦指示された内容についての結果のみ共有します。

### 修正依頼内容 その3

```web/dnsサーバでのdig
; <<>> DiG 9.16.1-Ubuntu <<>> localhost @localhost
;; global options: +cmd
;; Got answer:
;; ->>HEADER<<- opcode: QUERY, status: NOERROR, id: 56239
;; flags: qr aa rd ra; QUERY: 1, ANSWER: 1, AUTHORITY: 0, ADDITIONAL: 1

;; OPT PSEUDOSECTION:
; EDNS: version: 0, flags:; udp: 4096
;; QUESTION SECTION:
;localhost.                     IN      A

;; ANSWER SECTION:
localhost.              0       IN      A       127.0.0.1

;; Query time: 0 msec
;; SERVER: 127.0.0.1#53(127.0.0.1)
;; WHEN: 月  8月 29 11:11:16 JST 2022
;; MSG SIZE  rcvd: 54
```

このようになりました。

### 修正依頼内容 その4

>web/dnsサーバーでの下記コマンドの結果は変化していませんか?

$ dig hogehoge.com @localhost

```web/dnsのdig
dig hogehoge.com @localhost

; <<>> DiG 9.16.1-Ubuntu <<>> hogehoge.com @localhost
;; global options: +cmd
;; Got answer:
;; ->>HEADER<<- opcode: QUERY, status: NOERROR, id: 20619
;; flags: qr rd ra; QUERY: 1, ANSWER: 1, AUTHORITY: 0, ADDITIONAL: 1

;; OPT PSEUDOSECTION:
; EDNS: version: 0, flags:; udp: 1232
;; QUESTION SECTION:
;hogehoge.com.            IN      A

;; ANSWER SECTION:
hogehoge.com.     300     IN      A       同じグローバルIPアドレスです。

;; Query time: 20 msec
;; SERVER: 127.0.0.1#53(127.0.0.1)
;; WHEN: 月  8月 29 12:35:49 JST 2022
;; MSG SIZE  rcvd: 63
```

>また、Windowsなどクライアントから以下のコマンド

$ dig hogehoge.com @192.168.100.XXX    #（IPアドレスはweb/dnsサーバーのもの）

```windowsのdig
dig hogehoge.com192.168.100.XXX

; <<>> DiG 9.16.32 <<>> hogehoge.com 192.168.100.XXX
;; global options: +cmd
;; Got answer:
;; ->>HEADER<<- opcode: QUERY, status: NOERROR, id: 30127
;; flags: qr rd ra; QUERY: 1, ANSWER: 1, AUTHORITY: 0, ADDITIONAL: 1

;; OPT PSEUDOSECTION:
; EDNS: version: 0, flags:; udp: 4096
;; QUESTION SECTION:
;hogehoge.com.            IN      A

;; ANSWER SECTION:
hogehoge.com.     293     IN      A       同じグローバルIPアドレスです。

;; Query time: 3 msec
;; SERVER: 192.168.100.XXX#53(192.168.100.XXX)
;; WHEN: Mon Aug 29 12:30:02 ;; MSG SIZE  rcvd: 63

;; Got answer:
;; ->>HEADER<<- opcode: QUERY, status: NXDOMAIN, id: 64073
;; flags: qr rd ra; QUERY: 1, ANSWER: 0, AUTHORITY: 0, ADDITIONAL: 1

;; OPT PSEUDOSECTION:
; EDNS: version: 0, flags:; udp: 4096
;; QUESTION SECTION:
;192.168.100.XXX.                        IN      A

;; Query time: 5 msec
;; SERVER: 192.168.100.XXX#53(192.168.100.XXX)
;; WHEN: Mon Aug 29 12:30:02 ;; MSG SIZE  rcvd: 43
```

>さらに、以下のコマンドの結果はどうなりますか? 

$ dig hogehoge.com

```windowsのdig
; <<>> DiG 9.16.32 <<>> hogehoge.com
;; global options: +cmd
;; Got answer:
;; ->>HEADER<<- opcode: QUERY, status: NOERROR, id: 26977
;; flags: qr rd ra; QUERY: 1, ANSWER: 1, AUTHORITY: 0, ADDITIONAL: 1

;; OPT PSEUDOSECTION:
; EDNS: version: 0, flags:; udp: 4096
;; QUESTION SECTION:
;hogehoge.com.            IN      A

;; ANSWER SECTION:
hogehoge.com.     106     IN      A       同じグローバルIPです。

;; Query time: 0 msec
;; SERVER: 192.168.100.XXX#53(192.168.100.XXX)
;; WHEN: Mon Aug 29 12:39:06 ;; MSG SIZE  rcvd: 63
```








dnsmasqを使った内部DNSサーバを立てたが、名前解決できない

### 前提

　フレックスアイテムをスティッキー配置した時に、フレックスコンテナの振る舞いについて、ふたつ質問があります。

　下記コードでは、フレックスアイテムを4つ並べています。ひとつめの`main`だけコンテンツを多くし、ふたつ目以降の3つの`aside`はコンテンツを少なくしています。メインコンテンツとサイドバー*3が横に並んでいるレイアウトを想定しています。

### 細かい説明

　サイドバーひとつめは静的配置をしています。`align-self: end`としているので、当然、フレックスコンテナの下部にくっついています。

```css
		.static {
			position: static;
			bottom: 0;
			align-self: end;
			background-color: gold;
		}
```

---

　サイドバーふたつめはスティッキー配置をしています。`align-self: end`としていますが、フレックスコンテナの下部に配置されず上部にくっついています。また、`bottom: 0`としているため、スクロールしていくと、スクロール領域下部に粘着します。

```css
		.end {
			position: sticky;
			bottom: 0;
			align-self: end;
			background-color: pink;
		}
```

---

　サイドバーみっつめはスティッキー配置をしています。`align-self: center`としていますが、フレックスコンテナの中央に配置されずフレックスコンテナの上部にくっついています。また、`bottom: 0`としているのですが、スクロールしていくと、スクロール領域下部に粘着せず、最終的にフレックスコンテナの中央に残ります。

```css
		.end {
			position: sticky;
			bottom: 0;
			align-self: end;
			background-color: pink;
		}
```

---

### 質問

0. スティッキー配置をすることによって、`align-self`の指定とは異なりフレックスコンテナ上部に配置されるのはなぜなんでしょうか？
0. `align-self: center`とした場合、`bottom: 0`としてもスクロール領域下部に粘着しないのはなぜなんでしょうか？

### 該当のソースコード

https://jsfiddle.net/Lhankor_Mhy/doa74h3q/

```html
<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<style>
		section {
			display: flex;
		}

		:is(main, aside) {
			flex: 1;
		}

		main {
			background-color: gray;
		}

		.static {
			position: static;
			bottom: 0;
			align-self: end;
			background-color: gold;
		}

		.end {
			position: sticky;
			bottom: 0;
			align-self: end;
			background-color: pink;
		}

		.center {
			position: sticky;
			bottom: 0;
			align-self: center;
			background-color: aqua;
		}

		p {
			margin: 100px 0;
			border: 1px dotted;
		}
	</style>
</head>

<body>
	<section>
		<main>
			<p>01</p>
			<p>02</p>
			<p>03</p>
			<p>04</p>
			<p>05</p>
			<p>06</p>
			<p>07</p>
			<p>08</p>
			<p>09</p>
			<p>10</p>
			<p>11</p>
			<p>12</p>
		</main>
		<aside class="static">
			<p>01</p>
			<p>02</p>
			<p>03</p>
			<p>04</p>
			<p>05</p>
			<p>06</p>
			<p>07</p>
			<p>08</p>
			<p>09</p>
			<p>10</p>
		</aside>
		<aside class="end">
			<p>01</p>
			<p>02</p>
			<p>03</p>
			<p>04</p>
			<p>05</p>
			<p>06</p>
			<p>07</p>
			<p>08</p>
			<p>09</p>
			<p>10</p>
		</aside>
		<aside class="center">
			<p>01</p>
			<p>02</p>
			<p>03</p>
			<p>04</p>
			<p>05</p>
			<p>06</p>
			<p>07</p>
			<p>08</p>
			<p>09</p>
			<p>10</p>
		</aside>
	</section>
</body>

</html>
```

### 補足情報

　解消方法などをお聞きしているわけではありません。そのような振る舞いになる根拠が知りたいので、よろしくお願いいたします。

　仕様を引用してご教示いただくのが望ましいですが、個人的な見解でも結構です。


position: sticky と、フレックスボックスの align-items の関係について

クラス名の定義をするために、
class 名前 {};
class {} 名前;
の２種類の方法があると思っていました。

わたしはclass {} 名前;の方を使っていますが、以前ひとにコードを見せたとき、
「クラス名が定義されていないのはおかしいよ。」
と指摘を受けました。
これでクラス名が定義されていないのなら、わたしは今まで一体何をしていたのでしょうか・・・？


また、
class {} 名前; の関数を引用したいときは、
クラス名.関数名 ();　でうまく行っていましたが、
class 名前 {}; にするとうまく関数を使えなくなってしまいます。。

この名前の付け方で、クラス内の関数を使うときはどういうコードを書けばよいのでしょうか。

多重質問になってしまい申し訳ないです。

{ ←の前のクラス名と } ←の後のクラス名の違い

### 前提

フロントエンド初学者です
以下のようなコンポーネントを実装したいのですが
なるべくscriptに頼らずcssだけで実践したいと考えています。
自分で描いてみたもののうまく再現できないためお力添えを願えないでしょうか。

### 実現したいこと

- [ ] 複数行の時に1行目に合わせて上下中央揃えを行いたい

### 発生している問題・エラーメッセージ
お恥ずかしながら自分の学習度が浅く、どのプロパティを使えば再現できるのか検討もつきません。
行頭に揃えることはできたのですが一行目で中央揃えをすることはどうすれば良いのでしょうか。

#### 追記
![イメージ説明](https://ddjkaamml8q8x.cloudfront.net/questions/2022-08-04/56ba7333-d5d2-42ff-b631-9c1e239c0bab.png)
Aと隣の文章の1行目がこの線のような感じでそろうイメージです！ この線自体は不要です！




### 該当のソースコード

```html
<!DOCTYPE html>
<link rel="stylesheet" href="index.css" />
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Static Template</title>
  </head>
  <body>
    <div>
      <div class="singleLine_container">
        <div class="big_font">
          Q
        </div>
        <div class="small_font">
          1行目に合わせた中央揃えがしたいです
        </div>
      </div>
      <div class="multiLine_container">
        <div class="big_font">
          A
        </div>
        <div class="small_font">
          文字数がめちゃくちゃたくさんで複数行になっていて、一行目同士で上下中央に揃えたいにしたい場合はどうすれば良いですか。
          「文字数がめちゃくちゃたくさんで複数行になって」の部分とAが中央の位置という意味です。
        </div>
      </div>
    </div>
  </body>
</html>
```


```css
.singleLine_container {
  width: 250px;
  display: flex;
  flex-direction: row;
  align-items: center;
}

.multiLine_container {
  width: 250px;
  display: flex;
  flex-direction: row;
}

.big_font {
  font-size: 20px;
  margin-left: 4px;
}

.small_font {
  font-size: 10px;
  margin-left: 4px;
}
```

### 試したこと

https://codesandbox.io/embed/zen-mcnulty-dpqbz5?fontsize=14&hidenavigation=1&theme=dark
codeSandboxのリンクになります


CSS:複数行の時に1行目に合わせて上下中央揃えを行いたい

自作サイトをロリポップサーバーで公開したのですが、iPhoneやiPadで見ると表示が大幅に崩れることが判明しました。

【自作サイト】
[こちら](http://nfre.moo.jp/NefriePortfolio.html) になります
Examplesの項目の辺りから表示のズレが生じ、画像や文字が重なってしまっています。

【問題が発生した端末】
iPad mini4 → iOS 15.5
iPad Air3 → iOS 15.4.1
iPhone 11 → iOS 15.6
iPhone SE第2世代 → iOS 15.5
※iPhone SE以外は知人からの報告になります
※iPhone SEではSafariでもChromeでも同じように表示が崩れたため、ブラウザに原因があるわけではないようです

【問題が発生していない端末】
iPhone 5s → iOS 12.5.5
その他Android、Windows PCなど
※Chrome、Edgeの開発者ツールでディメンションをiPhone SEやiPad Miniに指定した際は問題なく表示されました

【その他の情報】
・画像の配置、空白の幅や高さの指定、フォントサイズの指定には基本vwを使用しています
・このサイトはHTML、CSS、JavaScriptで構成されています
・どのコードが原因かわかりかねたため、また全てのコードを載せると長くなってしまうため、お手数ですがコードはサイトをご参照いただけますと幸いです

自分なりに様々なキーワードで検索をかけたのですが、何が原因なのか、単位vwでここまで大幅に崩れることはあるのかなど、めぼしい情報は一切見つけられませんでした。

当方Webページ作成の勉強を始めたばかりですので、初歩的なことを伺っていましたら申し訳ございません。
解決法をご存知の方がいらっしゃいましたらご教授ください。よろしくお願いいたします。

【15:39追記】ご意見を受け、より短いコードで同じ問題が発生するものを作成できないか試してみます。
お忙しい方はそちらができ次第またご確認いただけますと幸いです。

【17:10追記】
最低限の要素のみ残したサイトを公開しました。
[こちら](http://nfre.moo.jp/test/NefriePortfolio.html) になります。
手持ちのiPhone SE第2世代で検証しましたが、やはり同じ問題が発生しているようです。

以下にCSSのメインコンテンツの部分のコードを抜粋して貼ります。長くなってしまい申し訳ございません。

```CSS
body {
    width: auto;
    background-image: url("img/background.png");
    background-size: 100%;
    display: flex;
    /*justify-content: center; も書いたけどなくても良さそう*/
}

/*以下メニュー*/

/*中略*/

/*以下メイン*/

#main {
    width: 62.5%;
}

#header {
    width: 100%;
}

#header-smp {
    display: none;
}

.blank0 {
    display: block;
    content: "";
    height: 6.3vw;
}

h1 {
    font-family: 'Fugaz One', cursive;
    font-weight: 400;
    color: #ff007fff;
    font-size: 4.5vw;
    position: relative;
    text-align: center;
    letter-spacing: 0.03em;
}

#about h1::after { /*css3ではbeforeやafter(疑似要素という)の前のコロンは2つ*/
    /*これは角丸下線を引くためのコード*/
    position: absolute;  /*疑似要素の親にはrelative子にはabsoluteを指定しないといけない。理屈はわからない*/
    bottom: 0vw;
    left: 22vw;
    content: "";
    /*float: left; はいらないかもしれない*/
    width: 17.5vw;
    height: 0.45vw;
    border-radius: 100vw;  /*角を丸める。一定以上は丸くならない*/
    background-color: #ff007fff;  /*「-color」はなくても良いらしい*/
}

.blank1 {
    display: block;
    content: "";
    height: 1vw;
}

#about p {
    font-family: 'Kiwi Maru', serif;
    font-weight: 500;
    color: #646464ff;
    font-size: 1.7vw;
    text-align: center;
    line-height: 150%;
    margin: 1em;
}

.br-smp {
    display: none;
}

.blank2 {
    display: block;
    content: "";
    height: 4.5vw;
}

#examples h1::after { /*css3ではbeforeやafter(疑似要素という)の前のコロンは2つ*/
    /*これは角丸下線を引くためのコード*/
    position: absolute;  /*疑似要素の親にはrelative子にはabsoluteを指定しないといけない。理屈はわからない*/
    bottom: 0vw;
    left: 18vw;
    content: "";
    /*float: left; はいらないかもしれない*/
    width: 25.4vw;
    height: 0.45vw;
    border-radius: 100vw;  /*角を丸める。一定以上は丸くならない*/
    background-color: #ff007fff;  /*「-color」はなくても良いらしい*/
}

.blank3 {
    display: block;
    content: "";
    height: 3.5vw;
}

.illust::before {
    /*これはダッシュを書くためのコード*/
    position: absolute;
    top: 50%;
    left: 24.7vw;
    content: "";
    /*float: left; はいらないかもしれない*/
    width: 2.5vw;
    height: 0.12vw;
    border-radius: 100vw;  /*角を丸める。一定以上は丸くならない*/
    background-color: #ff007fff;
}

.pink {
    font-family: 'Noto Sans JP', sans-serif;
    color: #ff007fff;
    font-weight: 300;
    font-size: 2.1vw;
    text-align: center;
    transform: scale(1, 0.85);
    position: relative;
}

.illust::after {
    /*これはダッシュを書くためのコード*/
    position: absolute;
    top: 50%;
    right: 24.7vw;
    content: "";
    /*float: left; はいらないかもしれない*/
    width: 2.5vw;
    height: 0.12vw;
    border-radius: 100vw;  /*角を丸める。一定以上は丸くならない*/
    background-color: #ff007fff;
}

.blank4 {
    display: block;
    content: "";
    height: 1.5vw;
}

.gray {
    font-family: 'Noto Sans JP', sans-serif;
    color: #646464ff;
    font-weight: 300;
    font-size: 2.1vw;
    text-align: left;
    transform: scale(1, 0.85);
    text-indent: 3em;
}

.two-img {
    width: 25vw;
}

#img001 {
    position: absolute;
    top: 72vw;
    left: 23.5vw;
}

#img002 {
    position: absolute;
    top: 72vw;
    right: 23.5vw;
}

.blank {
    display: block;
    content: "";
    height: 30vw;
}

#links h1::after { /*css3ではbeforeやafter(疑似要素という)の前のコロンは2つ*/
    /*これは角丸下線を引くためのコード*/
    position: absolute;  /*疑似要素の親にはrelative子にはabsoluteを指定しないといけない。理屈はわからない*/
    bottom: 0vw;
    left: 23vw;
    content: "";
    /*float: left; はいらないかもしれない*/
    width: 15.6vw;
    height: 0.45vw;
    border-radius: 100vw;  /*角を丸める。一定以上は丸くならない*/
    background-color: #ff007fff;  /*「-color」はなくても良いらしい*/
}

#linkimg { /*「display: flex」を使用することをflexboxと言う*/
    /*flexboxの親要素を「コンテナ」子要素を「アイテム」と言う*/
    /*つまりこの要素はコンテナ*/
    display: flex;
    /*flex-direction: row;
      flex-wrap: nowrap; はいらないかも*/
    justify-content: space-around;
    padding: 3.125vw;  /*アイテム間の空白の幅*/
    margin: auto;  /*コンテナの外側(左右)の幅*/
}

#linkimg img { /*この要素はアイテム*/
    width: 15.625vw;
}

#linkimg img:hover {
    filter: drop0-shadow(0.5vw 0.5vw 0.5vw #c4c4c4ff);
}

.blank11 {
    display: block;
    content: "";
    height: 14.4vw;
}

#copyright p {
    font-family: 'Noto Sans JP', sans-serif;
    font-weight: 400;
    color: #646464ff;
    font-size: 1.2vw;
    text-align: center;
}

.blank12 {
    display: block;
    content: "";
    height: 1vw;
}

/*以下トップへ戻るボタン*/

/*中略*/

/*以下スマホ版*/

@media screen and (max-width: 959px) {

body {
    width: auto;
    background-image: url("img/background_smp.png");
    background-size: 100%;
}

/*以下メニュー*/

/*中略*/

/*以下メイン*/

#main {
    width: 100%;
}

#header {
    display: none;
}

#header-smp {
    display: block;
    width: 100%;
}

.blank0 {
    display: block;
    content: "";
    height: 1vw;
}

h1 {
    font-family: 'Fugaz One', cursive;
    font-weight: 400;
    color: #ff007fff;
    font-size: 10vw;
    position: relative;
    text-align: center;
    letter-spacing: -0.01em;
}

#about h1::after { /*css3ではbeforeやafter(疑似要素という)の前のコロンは2つ*/
    /*これは角丸下線を引くためのコード*/
    position: absolute;  /*疑似要素の親にはrelative子にはabsoluteを指定しないといけない。理屈はわからない*/
    bottom: 0vw;
    left: 31vw;
    content: "";
    /*float: left; はいらないかもしれない*/
    width: 38vw;
    height: 0.95vw;
    border-radius: 100vw;  /*角を丸める。一定以上は丸くならない*/
    background-color: #ff007fff;  /*「-color」はなくても良いらしい*/
}

.blank1 {
    display: block;
    content: "";
    height: 1.5vw;
}

#about p {
    font-family: 'Kiwi Maru', serif;
    font-weight: 500;
    color: #646464ff;
    font-size: 4vw;
    text-align: center;
    line-height: 150%;
    margin: 0.5em;
}

.br-smp {
    display: block;
}

.br-pc {
    display: none;
}

.blank2 {
    display: block;
    content: "";
    height: 7.5vw;
}

#examples h1::after { /*css3ではbeforeやafter(疑似要素という)の前のコロンは2つ*/
    /*これは角丸下線を引くためのコード*/
    position: absolute;  /*疑似要素の親にはrelative子にはabsoluteを指定しないといけない。理屈はわからない*/
    bottom: 0vw;
    left: 23vw;
    content: "";
    /*float: left; はいらないかもしれない*/
    width: 53vw;
    height: 0.95vw;
    border-radius: 100vw;  /*角を丸める。一定以上は丸くならない*/
    background-color: #ff007fff;  /*「-color」はなくても良いらしい*/
}

.blank3 {
    display: block;
    content: "";
    height: 5.5vw;
}

.illust::before {
    /*これはダッシュを書くためのコード*/
    position: absolute;
    top: 50%;
    left: 39vw;
    content: "";
    /*float: left; はいらないかもしれない*/
    width: 4vw;
    height: 0.12vw;
    border-radius: 100vw;  /*角を丸める。一定以上は丸くならない*/
    background-color: #ff007fff;
}

.pink {
    font-family: 'Noto Sans JP', sans-serif;
    color: #ff007fff;
    font-weight: 300;
    font-size: 4vw;
    text-align: center;
    transform: scale(1, 0.85);
    position: relative;
}

.illust::after {
    /*これはダッシュを書くためのコード*/
    position: absolute;
    top: 50%;
    right: 39vw;
    content: "";
    /*float: left; はいらないかもしれない*/
    width: 4vw;
    height: 0.12vw;
    border-radius: 100vw;  /*角を丸める。一定以上は丸くならない*/
    background-color: #ff007fff;
}

.blank4 {
    display: block;
    content: "";
    height: 0.75vw;
}

.gray {
    font-family: 'Noto Sans JP', sans-serif;
    color: #646464ff;
    font-weight: 300;
    font-size: 4vw;
    text-align: left;
    transform: scale(1, 0.85);
    text-indent: 2em;
}

.two-img {
    width: 85vw;
}

#img001 {
    position: absolute;
    top: 149.5vw;
    left: 7.5vw;
}

#img002 {
    position: absolute;
    top: 237vw;
    left: 7.5vw;
}

.blank {
    display: block;
    content: "";
    height: 185vw;
}

#links h1::after { /*css3ではbeforeやafter(疑似要素という)の前のコロンは2つ*/
    /*これは角丸下線を引くためのコード*/
    position: absolute;  /*疑似要素の親にはrelative子にはabsoluteを指定しないといけない。理屈はわからない*/
    bottom: 0vw;
    left: 34vw;
    content: "";
    /*float: left; はいらないかもしれない*/
    width: 31vw;
    height: 0.95vw;
    border-radius: 100vw;  /*角を丸める。一定以上は丸くならない*/
    background-color: #ff007fff;  /*「-color」はなくても良いらしい*/
}

#linkimg { /*「display: flex」を使用することをflexboxと言う*/
    /*flexboxの親要素を「コンテナ」子要素を「アイテム」と言う*/
    /*つまりこの要素はコンテナ*/
    display: flex;
    /*flex-direction: row;
      flex-wrap: nowrap; はいらないかも*/
    justify-content: space-around;
    padding: auto;  /*アイテム間の空白の幅*/
    margin-left: 2.5vw;  /*コンテナの外側(左右)の幅*/
    margin-right: 2.5vw;
}

#linkimg img { /*この要素はアイテム*/
    width: 25vw;
}

#linkimg img:active {
    filter: drop-shadow(0.5vw 0.5vw 0.5vw #c4c4c4ff);
}

.blank11 {
    display: block;
    content: "";
    height: 6.5vw;
}

#copyright p {
    font-family: 'Noto Sans JP', sans-serif;
    font-weight: 400;
    color: #646464ff;
    font-size: 1vw;
    text-align: center;
}

.blank12 {
    display: block;
    content: "";
    height: 1.5vw;
}

/*以下トップへ戻るボタンとハンバーガーメニュー*/

/*以下略*/
```

以上になります。
既にご回答を1件いただいておりますので、そちらも試してしてみたいと思います。

ほとんどのiOSで自作サイトの表示が崩れる

`itemprop`という属性を始めて知りました。

[MDN](https://developer.mozilla.org/ja/docs/Web/HTML/Global_attributes/itemprop)には「付けたら機械に優しい」といった感じで書いてありますが、検索してみるとどの記事も2017年前後と古めなものばかりでした。

変化の早い昨今においては、（特に根拠はありませんがｗ）すでにこの属性がなくてもよしなにしてくれそうにも思いますが…

まだこの属性に有用性はあるのでしょうか？

みなさんはお使いですか？

みなさん HTML で itemprop は使っていますか？

地雷質問なのは理解した上で質問させていただきます。
言語仕様の話になると思うのですが、下記のコードの `func2` がエラーになるのはおかしくないですか？
B は A を継承しているのですから別オブジェクトの protected を触れても問題ないと思うのですが。
どういう意図でこのような設計になっているのでしょうか？

```C++
class A {
protected:
    void call() { }
};

class B : public A {
public:
    void func1() { call(); } // <- ok
    void func2(A a) { a.call(); } // <- ng
    void func3(B b) { b.call(); } // <- ok
private:
    void call() { }
};
```

[c# - Is there a way to reach a `protected` member of another object from a derived type? - Stack Overflow](https://stackoverflow.com/questions/344503/is-there-a-way-to-reach-a-protected-member-of-another-object-from-a-derived-ty)
C# ですが stack overflow で同様の質問がされており、出来ない旨と出来なくなっている理由（変更されたくない protected の内容を持ったクラスを継承してそこから呼び出すことで変更できてしまう）が書かれていますが、本当にそのためだけにアクセス不可にしているのでしょうか？
また、これを回避する方法があれば教えていただきたいです。お願いいたします。

protected の挙動が分からない

テキストエリアの行端の位置で半角スペースを2回入れると自動的に改行コードが挿入されるのですが、
これはhtml5のテキストエリアの仕様上このような挙動となるのでしょうか。
また、この場合、改行コードを挿入されるのを止める手段があるのでしょうか。
ご教授いただければと思います。

![イメージ説明](https://ddjkaamml8q8x.cloudfront.net/questions/2022-05-31/233ebe7f-b37f-4dbd-99d0-3698bafa5c99.png)

追記
テキストエリアの内容の確認について
　テキストエリアの内容をすべて選択してテキストエディタにコピーペーストをして確認をしました。

テキストエリアに自動的に改行が入る場合がある

ブラウザの戻るボタンを押したときの処理について質問です。
例えば、ページAにボタンのカウンターがあり、ページBにカウンターを+1するボタンがあるとします。
ページAからページBに行き、ボタンを押した後ブラウザの戻るボタンを押し、ページAに戻った時、処理が反映されておらず、再リロードすると処理が反映されるといったような場合に対処したいと思っています。
少し調べた結果、解決策として下記のようなコードを見つけたのですが、これがベストな対応なんですかね？
本来の開発の場ではどのように対応されているのか知っている方がいたら教えて下さい。

```JavaScript
window.addEventListener('pageshow',()=>{
  if(window.performance.navigation.type==2) location.reload();
});
```
参考サイト↓
https://teratail.com/questions/304935




ブラウザの戻るボタンを押したときの処理

こんにちわ。
ワードプレスで
このように右にもっと見るを表示させました。

![イメージ説明](https://ddjkaamml8q8x.cloudfront.net/questions/2022-05-10/57e6f117-7851-4823-8e25-5ce3d4b40a71.png)

＊カスタムHTML＊
<div style="text-align:right;"><a href="私のサイト" class="head-border">もっと見る</a></div>

＊カスタムCSS＊
.head-border{
  display: flex;
  align-items: center;
  justify-content: right;
font-size:13px;
}

.head-border::before,
.head-border::after {
  content: '';
  flex-grow: 0.05;
  height: 0.5px;
  background:#0c162a !important;
}
.head-border::before {
  margin-right: 3px;
}
.head-border::after {
  margin-left: 3px;
}

上記画像はGOOGLE CHROMEなんですが
サファリで見るとコンピューター、モバイルともになぜか右に表示されず、下記のように左に表示されてしまいます。

![イメージ説明](https://ddjkaamml8q8x.cloudfront.net/questions/2022-05-10/f75453f5-e94b-455f-8f51-e4d47d9e2c82.png)
なぜでしょうか？何か追加で記載するものなどあれば
教えていただきたいです。よろしくお願いします、、、。
