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

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

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

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

CSS

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

解決済

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

makun1010
makun1010

総合スコア59

HTML

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

CSS

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

1回答

0リアクション

0クリップ

207閲覧

投稿2022/09/16 07:39

前提

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

実現したいこと

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

該当のソースコード

html

<html lang="ja"> <head> <meta charset="UTF-8"> <title>Portfolio</title> <link rel="stylesheet" type="text/css" href="{% static 'css/portfolio.css' %}"> </head> <body> <div class="header"> <h1 class=title>Portfolio</h1> <p class="sub sub3">University Student</p> <p class="sub sub2">Web Engineer</p> </div> <div class=content> <div class="profile"> <h1 class="title2">PROFILE</h1> <div class="introduce"> <div class="pr-img"> <img class="img-my" src=""> </div> </div> <div class="introduce"> <p>初めまして。私は平成14年生まれ19歳の大学生です。現在学部二年生です。</p> <p>将来的にWEBエンジニアになるという夢をかなえるために現在独学で勉強を進めております。</p> <p>目指すきっかけとなったのは学部一年生における授業で学んだC言語でした。</p> <p>そこでエラーが発生してはそれを直していくという地道な作業の中にある達成感に惹かれ、</p> <p>そこから少しずつ勉強を始めました。</p> </div> </div> <div class="skill"> <h1>SKILL</h1> <div class="skill-title"> <h2>言語</h2> </div> <div class="skill-title"> <h3>経験</h3> </div> </div> </div> </body> </html> .css------------------------------------------------------------------------------- @import url('https://fonts.googleapis.com/css2?family=Caveat&display=swap'); @import url('https://fonts.googleapis.com/css2?family=Amatic+SC&display=swap') @import url('https://fonts.googleapis.com/css?family=Noto+Sans+JP'); body{ margin: 0; padding: 0; } .header{ background-image:url(https://blog-imgs-134.fc2.com/a/m/i/aminyan123/7B6E681A-075C-43DB-B395-0582A453BE9B.jpeg); height:475px; background-size:cover; margin: 0; padding: 0; font-size:0; } .title{ font-size:140px; font-family:'Caveat'; text-align:center; color:white; } .sub{ font-size:80px; font-family:'Caveat'; margin-left:20px; line-height:20px; color:white; } .content{ height:2000px; background-color:#e0ffff; margin: 0; padding: 0; } .title2{ text-align:center; font-size:65px; margin-top:0; font-family: 'Amatic SC', cursive; } .img-my{ clip-path: circle(40%); } .introduce{ float:left; font-family: 'Amatic SC', cursive; font-weight:bold; font-size:20px; margin-left:5%; } .skill{ padding-top:30px; font-size:70px; font-family:'Caveat'; text-align:center; clear:both; } .skill-title{ font-family: 'Amatic SC', cursive; float:left; font-size:50px; margin: 30px 400px; }

試したこと

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

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

以下のような質問にはリアクションをつけましょう

  • 質問内容が明確
  • 自分も答えを知りたい
  • 質問者以外のユーザにも役立つ

リアクションが多い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

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

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

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

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

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

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

まだ回答がついていません

会員登録して回答してみよう

アカウントをお持ちの方は

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

ただいまの回答率
86.12%

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

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

質問する

関連した質問

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

HTML

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

CSS

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