html 一列のみの文章を作る

Question

htmlでh1などと、見出しをつけた時、入力した文字数が多く、一列に収まりきらない。

<h1>htmlを使ったホームページ製作</h1>

表示結果

このように、h1の時、一行に収まりきらない・

中文・長文を書く時に文字のサイズを一列で収まりきるように、どの端末からアクセスしても自動で文字のサイズを変更することができる方法を教えてもらいたいです。

是非、ご回答お願いします。

Comments

[yoshinavi]

CSSはどうなっていますか？

Answer 1

この辺りを読んでいろいろとやってみてはと。

• 【CSS基礎】emと％とpxとremフォントサイズ指定方法の違いと使い方
• CSSのfont-sizeが%とかemとかremとかvwで指定されてると、ビビっちゃう君と僕を救う2分
• font-sizeの指定にはrem、それ以外にはem。これからは？
• CSSのフォントサイズ指定『px、em、%、rem』それぞれの違いと変換

ただ「どんなに長い文字でも一行に」はかなり難しい話なので、　視認可能な最小サイズを自身で決めておきその最小サイズでもおさまりきらないなら後半...で表示などの対応は必要です。

Comments

[yambejp]

視認？（ちょっと不吉なので突っ込んでみました）

[m.ts10806]

いつものバグっぽいですね。投稿前にも確認しましたし、編集画面ではちゃんとなってました。
（なので編集履歴はスペースを入れただけという変な内容に）

Answer 2

何も見出しだからって　<h1>タグを使わなきゃいけないわけではないです。
（まぁ後々読みやすくなるので使うにこしたことはないですが。）

文字なら<p>タグとかでもかけますし、
CSSで文字の太さ、大きさ、色なんかも指定できます。

あとは画面の幅でしょうか。
widthを指定しているところはありますか？
特に指定なければ width:100%なはずですが、もしかしたらどこかで横幅の指定が入っているかも？

どんな文字数でも改行されないとなると、横スクロールしなきゃいけないめんどくさいサイトになりませんか？

1行で表示したいなら、1行に収まるサイズを自分で探すのが一番カンタンです。

Comments

[m.ts10806]

「ホームページ」→「HP」「Webサイト」とか表現や文言を調整するだけでもいいことがあるように思います。

[azuapricot]

確かに文言短縮も良いですね～（一番カンタンですし）

[m.ts10806]

大体文言ってお客さんからもらいますけど、画面とかレイアウトを加味してない好きな文言を突っ込んでくるので、レイアウト変えるよりも文言調整のほうが優先度高くなったりしますよね。
もちろん勝手には変更しないですけど、「こういうレイアウトなのでこういう文言でも十分伝わりますよ」みたいな（裏では「こんな長たらしい文言入るかい！」って会議が行われてますが）

[azuapricot]

あ～～～～～～～あるあるですね、笑
ちょっと想像すればわかるでしょーにー！っていうのがよくあります。
案件だと極力時間はかけたくないので楽な方で収まるなら楽な方でやりたいですよね

[m.ts10806]

そうですね。レイアウト調整だと全体にかかってくるし、
そもそも元のデザインも希望はお客さんからのものなので、おいそれとそう簡単に変えるわけにもいかないですしね。紙媒体と違って融通はききやすいとはいえ限度はあります。