横文字で固定したいのに画面が縮小すると文字が動く

３枚目のお手本のように文字の横に線があってセンターに配置、画面サイズを拡大縮小しても変わらないようにしたいのですができませんでした。
横棒と文字がセンターに配置かつ画面拡大縮小に合わせて拡大縮小するのにはどうしたらいいでしょうか？

●追記
tableのmax-widthを100%ではなく1000pxにしたら横棒は画面の拡大縮小に合わせてちゃんと動くようになりましたが両端にスペースが無くなりました。

●追記
hrにクラスタグをつけてmargin指定したら両端に余白つけることができましたが、合っていますか？
ただ文字だけは横文字で固定することができず,,,

お手本のようにしたいと思ったのですがこれは画像でしょうか？それともhtmlやcss使っているのでしょうか？

<html>
<head>
<meta charset="UTF-8">
    <link rel="stylesheet" href="サンプル１.css">

<title>無題ドキュメント</title>
</head>

<body>

<header>

  <div class="logocontainer">
<img src="社名ロゴ.png" alt="" width="723" height="197" class="logo"/>
    <img src="電話番号.png" width="723" height="197" alt=""/></div>

    </header>



<div class="sample-box">
    <img src="4889996_m.jpg" alt="" width="960" height="540" class="resizeimsge"/>
	
<div class="icon">
  <p class="fadeup">
    <img src="3icon文字.png" alt="" class="iconlogo"/> </p>
    </div>
	</div>


<table>
	<tr>
	 <td width="350">
		<hr size="2" color="#000000" class="line1"></td>
		<td class="font">まずはお気軽にご相談ください！</td>
	 <td width="350">
		<hr size="2" color="#000000" class="line2"></td>
	 </tr></table>
	
	 
	
</body>
</html>

/* CSS Document */

header{
    width: 100%;
    maxwidth:1000px;
    margin:0 auto;
    display: flex;
    justify-content: center;
}

header img{
    max-width: 30%;
    height: auto;
}

.logocontainer {
  text-align: center;
    }

.resizeimsge {
    width: 100%;
    max-width: 100%;
    height:auto;
    text-align: center;
    display: flex;
}

.sample-box {
    position: relative;
}


.icon{
      max-width: 100%;
    width: 50%;
    height: 50px;
    display: flex;
    justify-content: center;
	
    position: absolute;
    top: 55%;
    left: 27%;
}

.icon img{
	width: 100%;
}

.fadeup{
	animation: fadeIn 1s ease 1s 1 normal backwards;
}
@keyframes fadeIn {/*animation-nameで設定した値を書く*/
    from{
		opacity: 0;/*アニメーション開始時は不透明度0%*/
	transform: translateY(20px);
}
	to{
		opacity: 1;/*アニメーション終了時は不透明度100%*/
	transform: translateY(0);
	} 
}
	

.table {
	max-width: 1000px;
	width: 100%;
	position: relative;
	display: flex;
}

.line1 {
	margin: 10px 10px 10px 50px;
}

.line2{
	margin: 10px 50px 10px 10px;
}

.font {
	max-height: 1000px;
	width: 50%;
	position: relative;
	font-size: 150%;
	font-family: "ヒラギノ角ゴシック W5";
}

行動規範の内容に同意します

回答1件

ベストアンサー

フォントサイズの単位をvw指定する手法は如何でしょう？
横幅でフォントサイズ変わります。

css
1.font {
2    max-height: 1000px;
3    width: 50%;
4    position: relative;
5    font-size: 3vw;
6    font-family: "ヒラギノ角ゴシック W5";
7}

参考元：https://teratail.com/questions/49808

投稿2021/08/12 16:59

TetsujiMiwa

総合スコア1124

_rei_J

2021/08/13 03:05

ありがとうございます！ vwで画面サイズに合わせて動くようになりました！

行動規範の内容に同意します

あなたの回答

tips

プレビュー

行動規範の内容に同意します

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

15分調べてもわからないことは
teratailで質問しよう！

ただいまの回答率
85.35%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう！

横文字で固定したいのに画面が縮小すると文字が動く

関連した質問