画面サイズによって文字などがずれないようにしたい。

前提

自分のポートフォリオサイトを作成している。

実現したいこと

ブラウザの画面サイズを変更しても文字などがずれないようにしたい。
https://www.jleague.jp/aboutj/hometown/
のサイトのように縮小すると文字の位置は変わらずに隠れるようにしたいのですが、自分のコードだと画面サイズを縮小すると横並びに並んでいたものが縦に並んでしまったり、勝手に改行されたりしてしまいます。つまり無理やり画面内に収めようとするのではなく、レイアウトは変えずに見えなくなるようにしたいのです。

該当のソースコード

html
1<html lang="ja">
2<head>
3
4    <meta charset="UTF-8">
5    <title>Portfolio</title>
6    <link rel="stylesheet" type="text/css" href="{% static 'css/portfolio.css' %}">
7</head>
8
9
10<body>
11<div class="header">
12    <h1 class=title>Portfolio</h1>
13    <p class="sub sub3">University Student</p>
14    <p class="sub sub2">Web Engineer</p>
15</div>
16<div class=content>
17    <div class="profile">
18        <h1 class="title2">PROFILE</h1>
19        <div class="introduce">
20            <div class="pr-img">
21                <img class="img-my" src="">
22            </div>
23        </div>
24        <div class="introduce">
25            <p>初めまして。私は平成１４年生まれ１９歳の大学生です。現在学部二年生です。</p>
26            <p>将来的にWEBエンジニアになるという夢をかなえるために現在独学で勉強を進めております。</p>
27            <p>目指すきっかけとなったのは学部一年生における授業で学んだC言語でした。</p>
28            <p>そこでエラーが発生してはそれを直していくという地道な作業の中にある達成感に惹かれ、</p>
29            <p>そこから少しずつ勉強を始めました。</p>
30        </div>
31    </div>
32    <div class="skill">
33        <h1>SKILL</h1>
34        <div class="skill-title">
35            <h2>言語</h2>
36        </div>
37        <div class="skill-title">
38            <h3>経験</h3>
39        </div>
40    </div>
41</div>
42</body>
43</html>
44
45.css-------------------------------------------------------------------------------
46@import url('https://fonts.googleapis.com/css2?family=Caveat&display=swap');
47@import url('https://fonts.googleapis.com/css2?family=Amatic+SC&display=swap')
48@import url('https://fonts.googleapis.com/css?family=Noto+Sans+JP');
49body{
50  margin: 0;
51  padding: 0;
52}
53.header{
54  background-image:url(https://blog-imgs-134.fc2.com/a/m/i/aminyan123/7B6E681A-075C-43DB-B395-0582A453BE9B.jpeg);
55  height:475px;
56  background-size:cover;
57  margin: 0;
58  padding: 0;
59  font-size:0;
60}
61.title{
62  font-size:140px;
63  font-family:'Caveat';
64  text-align:center;
65  color:white;
66}
67
68.sub{
69  font-size:80px;
70  font-family:'Caveat';
71  margin-left:20px;
72  line-height:20px;
73  color:white;
74}
75.content{
76  height:2000px;
77  background-color:#e0ffff;
78  margin: 0;
79  padding: 0;
80}
81.title2{
82    text-align:center;
83    font-size:65px;
84    margin-top:0;
85    font-family: 'Amatic SC', cursive;
86}
87.img-my{
88    clip-path: circle(40%);
89}
90.introduce{
91    float:left;
92    font-family: 'Amatic SC', cursive;
93    font-weight:bold;
94    font-size:20px;
95    margin-left:5%;
96}
97.skill{
98  padding-top:30px;
99  font-size:70px;
100  font-family:'Caveat';
101  text-align:center;
102  clear:both;
103}
104.skill-title{
105  font-family: 'Amatic SC', cursive;
106  float:left;
107  font-size:50px;
108  margin: 30px 400px;
109}

試したこと

marginを％にしてみたりpositionをabsoluteにしてみたりしましたがうまくいきませんでした。

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

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

回答1件

ベストアンサー

全ての要素を固定値で指定できるなら可能かもしれませんが、HTMLとしては最悪ですね
（svgなどでガチガチに組めば拡大縮小でもまったく揺るがないデータにはなります）
それをポートフォリオにしてもマイナスなイメージしか与えないと思います。
メディアクエリーなど環境にあったみやすさを求めたほうが良いと思います

投稿2022/09/16 07:50

編集2022/09/16 07:51