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

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

新規登録して質問してみよう
ただいま回答率
85.69%
HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

解決済

1回答

366閲覧

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

makun1010

総合スコア59

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

0クリップ

投稿2022/09/16 07:39

前提

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

実現したいこと

ブラウザの画面サイズを変更しても文字などがずれないようにしたい。
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>初めまして。私は平成14年生まれ19歳の大学生です。現在学部二年生です。</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/ツールのバージョンなど)

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

下記のような質問は推奨されていません。

  • 質問になっていない投稿
  • スパムや攻撃的な表現を用いた投稿

適切な質問に修正を依頼しましょう。

また依頼した内容が修正された場合は、修正依頼を取り消すようにしましょう。

guest

回答1

1

ベストアンサー

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

投稿2022/09/16 07:50

編集2022/09/16 07:51
yambejp

総合スコア112687

maisumakun👍を押しています

下記のような回答は推奨されていません。

  • 質問の回答になっていない投稿
  • スパムや攻撃的な表現を用いた投稿

このような回答には修正を依頼しましょう。

また依頼した内容が修正された場合は、修正依頼を取り消すようにしましょう。

回答へのコメント

makun1010

2022/09/20 09:41

ありがとうございました。アドバイスをもとに作りたいと思います。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.69%

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

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

質問する

同じタグがついた質問を見る

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。