常連

### 実現したいこと

・各ヘッダーメニューの先頭に Font Awesome のアイコンを表示させたい
・アイコン、文字列のいずれかにマウスオーバーすると互いが連動して `hover` が作動するようにしたい（互いの色が変わる）
・メニューの文字列は自分好みのフォントで表示させたい

### 前提

ヘッダーメニューを少し独特なフォントで表示しています。
![イメージ説明](https://ddjkaamml8q8x.cloudfront.net/questions/2023-05-03/521a191e-02f2-4e43-b1ff-db004cd1ff6f.png)

これらのメニューに合ったアイコンを、それぞれのメニューの文字列の先頭に表示させました。アイコン、文字列のいずれかにマウスオーバーすると互いが連動して hover で色が変わるようにしております。するとこのように文字列（Home）のフォントが Font Awesome の仕様(?)につられてスタイリッシュになってしまいます。
![イメージ説明](https://ddjkaamml8q8x.cloudfront.net/questions/2023-05-03/8f0ca33a-94a9-4a5b-bd20-b2da8ef4edc2.png)

自分好みのフォントを強制的に表示させようとすると、文字列は希望通りになりますがアイコンは文字化けで表示出来なくなります。
![イメージ説明](https://ddjkaamml8q8x.cloudfront.net/questions/2023-05-03/d9a2750c-e22e-469c-b896-5ec6a10ddfed.png)

また以下のようにアイコンと文字列を別々に記述すれば両方とも希望通りに表示されますが、要素にマウスオーバーした時に連動して hover が作動してくれません。また各要素が離れてしまうのも希望通りではありません。
![イメージ説明](https://ddjkaamml8q8x.cloudfront.net/questions/2023-05-03/e2db9509-f182-4c0b-b218-6412b348bc96.png)

アイコン、文字列が連動しており、かつ自分好みの文字列で表示出来るようにしたいです。
どなたかご教授いただければ有難いです。

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

**application.html.erb**
```Ruby on Rails
<head>
  <title>Learn Japanese with Punchan</title>
  <%= csrf_meta_tags %>
  <%= csp_meta_tag %>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <%= stylesheet_link_tag    'application', media: 'all', 'data-turbolinks-track': 'reload' %>

  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Darumadrop+One&display=swap" rel="stylesheet">   
</head>

<header>
  <div class="header">
    # 文字列のみの表示。
    <%= link_to("Home", "/", class: "link") %>

    # 文字列のフォントが Font Awesome 側に引っ張られてしまう。
　  <a class="fa fa-house" href="/"> Home</a>

    # 文字列とフォントを独立させて表示。連動しない。
    <a class="fa fa-house" href="/"></a><%= link_to("Home", "/", class: "link") %>
</header>
```

**homes.scss**
```scss
# 文字列のフォントを強制的に自分好みにする。アイコンが文字化けしてしまう。
body a {
  font-family: 'Darumadrop One', cursive !important;
}

# マウスオーバーした時にリンク部分の文字色を変える。
.header a:hover {
  color: #FF6600;
  text-decoration: underline;
  transition: 0.2s;
}
```

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

ruby 2.6.8p205 (2021-07-07 revision 67951) [x64-mingw32]
RubyGems 3.0.3.1
Rails 5.2.6

Font Awesome のアイコンと共にリンク化した文字列を、好みのフォントに変えたい

webサイトを直接入力で作っておりまして、PCでの表示、動作ならびにスマホでの表示、動作も確認しました。
メディアクエリを利用してスマホ版を作った（メニューがハンバーガーメニューになり並べ替えが発生し表示が変わる）のですが、スマホのブラウザの表示倍率を変更すると大きく表示が崩れます。
iphoneのsafariの”あ”のボタンを押して拡大縮小表示を確認しましたが、125％以上になると全部が大きくなって要素同士が被ってしまいます。
様々試したのですが解決できず、どういったところを改善すればよいものか迷いましてご相談させて頂きました。
初めての質問でわたしも戸惑っておりますが何卒宜しくお願い申し上げます。

### 実現したいこと

現在、拡大ボタンを押したらすべてが拡大するので
・スマホで拡大表示をしてもレイアウトが崩れない
・画像など、文字以外は拡大させない
その他、ほかに何か解決の糸口になるようなヒントを頂ければ幸いです

### 試したこと

・METAタグのViewportでwidthを固定したり、 user-scalableをnoにしてみたりしました。



スマホサイトのブラウザで拡大した時の表示崩れ

### 実現したいこと
ローディングの画面を作っていて、上下左右中央に文字が表示されるように作ろうとしています。
PCブラウザの検証モードでSPサイズにして確認した時はちゃんと上下左右中央に文字が表示されるのですが、スマホ実機で確認すると若干右にずれて表示された後、ローディング が終わる直前に中央に移動するという現象が起きています。
修正しようとしたのですが理由がわからず困っています。

![イメージ説明](https://ddjkaamml8q8x.cloudfront.net/questions/2023-03-15/61f6ae64-485b-4c41-bd20-b4a73981c519.png)

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

```HTML
<div class="loading__container">
 <div class="loading__logo">
  <p class="loading__text">
   「おいしい」をあなたのもとへ届けます。
  </p>
 </div>
</div>
```
```CSS
.loading {
  &__container {
    position: fixed;
    width: 100%;
    height: 100%;
    text-align: center;
    background: $white;
    z-index: 99999;
  }

  &__logo {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }

  &__text {
    display: flex;
    overflow: hidden;
    writing-mode: vertical-rl;
    @include fz_vw(36);
    letter-spacing: 3.5px;
    animation: 1.5s slide linear forwards;

    @include responsive(tab) {
      @include fz_vw(24);
    }
  }

  @keyframes slide {
    0% {
      opacity: 0;
    }

    100% {
      opacity: 1;
    }
  }
}
```
```JS
$(window).on('load',function(){
  $(".loading__logo").delay(2400).fadeOut('slow');
  $(".loading__container").delay(2700).fadeOut('slow',function(){
   $('body').addClass('appear');
  });
});
```


ローディング画面で検証モードと実機で表示の違いが出ている

### 前提・実現したいこと

　ユーザーフォーム1内のコマンドボタン3を押すことでフォーム4を呼び出し、
フォーム4内のテキストボックス1に"CLOSE"と入力することでフォーム1,4を両方閉じるようにしたいです。
(フォーム2,3やコマンドボタン1,2は今回関係ないので割愛させていただきます。)

　詳細は下記「該当のソースコード」を参照していただきたいのですが、"CLOSE"以外の"END  "と"SP   "の場合は問題なく動作します。
"CLOSE"の場合だけオートメーションエラーが出てしまいます。

3/15 追記(補足)
ユーザーフォーム2内にコマンドボタンがあり、
Unload UserForm1
Unload UserForm4
の2行のみ記述している。
このコマンドボタンだと強制終了することもなく正しく動作する。

### 発生している問題・エラーメッセージ
「オートメーションエラーです。起動されたオブジェクトはクライアントから切断されました。」というエラーが出ます。
デバッグ画面では、フォーム1の｢UserForm4.Show｣の部分が黄色にハイライトされています。

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

```vba
Private Sub CommandButton3_Click() 'フォーム1のボタン3

    '作業者が選択されていればフォーム4開く
    If UserForm1.TextBox1 = "" Then

    r = MsgBox("作業者を選択してください。")
        If r = 1 Then
        
        Application.OnTime Now(), "フォーカスu1t1"
        
        End If


    Else

    UserForm1.Hide
    UserForm4.Show '←エラー時ハイライトされる箇所

    End If

End Sub


Private Sub textbox1_afterupdate() 'フォーム4のテクストボックス1

    If UserForm4.TextBox1.Value <> "" Then
    
    '変数
    '------------------------------
    u4t1 = UserForm4.TextBox1.Value
    '------------------------------
    
        Select Case u4t1
        
        Case "CLOSE" 'フォーム閉じる
        Unload UserForm1
        Unload UserForm4
        Exit Sub
        
        Case "END  " 'フォームクリア
        
        UserForm4.TextBox1.Value = ""
        Application.OnTime Now(), "フォーカスu4t1"
        
        Case "SP   " 'チェック
        Application.OnTime Now(), "フォーカスu4t3"
        
        End Select

    End If

End Sub

```

### 試したこと

・再起動…再現。
・別のブックに同じコードを記述…再現せず。
(なぜ新しく作ったブックでは再現しないのかが理解できていません。
「そういうもの」と思った方がいいのでしょうか?

3/14 追記(補足)
・デバッグ画面でハイライトされる
UserForm4.Show
を
UserForm4.Show vbmodeless
に変更。
→フォームは両方閉じることに成功しましたが、
フォームを閉じた状態でEXCELが固まり、
強制終了するようになりました。

3/15 追記(補足)
・hide、show、unload以外のステーメント、プロシージャを削除
→再現(両フォームが閉じた後にEXCEL強制終了)

### 補足情報（FW/ツールのバージョンなど）
再現が確認できたPC 
Windows PRO /EXCEL 2016
Windows home /EXCEL LTSC
