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

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

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

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

Q&A

解決済

3回答

257閲覧

文字をレシポンシブ調整する方法について

infox

総合スコア11

CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

0グッド

0クリップ

投稿2017/08/27 02:59

以下のコードを実行するのですが、画像はレシポンシブに対応するのですが、
画像の上の文字がそのままで画像からはみ出てしまいます。
どうすれば、ブラウザのサイズにあわせて文字も変化するでしょうか?

https://saruwakakun.com/html-css/reference/image-text
を参考にしました。

<style> .example { position: relative; } .example p { position: absolute; top: 10%; left: 20%; -ms-transform: translate(-20%,-20%); -webkit-transform: translate(-20%,-20%); transform: translate(-20%,-20%); margin:0; padding:0; color: red;/*文字は白に*/ font-weight: bold; /*太字に*/ font-size: 2em;/*サイズ2倍*/ font-family :Quicksand, sans-serif;/*Google Font*/ } .example img { width: 60%; } </style> <div class="example"> <img src="main1.jpg" /> <p>あいうえおかきくけこ <br/> あいうえおかきくけこあいうえおかきくけこあいうえおかきくけこあいうえおかきくけこあいうえおかきくけこあいうえお<br />ABCDEFGHIJ</p> </div>

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

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

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

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答3

0

ベストアンサー

emvwの合わせ技がおすすめです。

CSS

1p { 2 font-size:calc(0.875em + 0.25vw); 3}

emでおおよそのサイズより小さくなるように指定して。
画面幅で追加するサイズをvwで指定するような感じ。
これだと、スマホなどの画面幅で、ある程度のサイズを確保しつつ、
小さくなり過ぎないという指定が可能です。

em%にするとIE系でおかしくなるので、必ずemにしましょう。
(私が質問して判明)

投稿2017/08/27 07:34

LibertyBell3

総合スコア1084

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

0

vwを使うのはどうですか?

.example { position: relative; } .example p { position: absolute; top: 10%; left: 20%; -ms-transform: translate(-20%, -20%); -webkit-transform: translate(-20%, -20%); transform: translate(-20%, -20%); margin: 0; padding: 0; color: red; /*文字は白に*/ font-weight: bold; /*太字に*/ font-size: 2vw; /*サイズ2倍*/ font-family: Quicksand, sans-serif; /*Google Font*/ } .example img { width: 60%; } <div class="example"> <img src="https://placehold.jp/3d4070/ffffff/150x150.png?text=main1.jpg"> <p>あいうえおかきくけこ <br/> あいうえおかきくけこあいうえおかきくけこあいうえおかきくけこあいうえおかきくけこあいうえおかきくけこあいうえお<br/>ABCDEFGHIJ</p> </div>

投稿2017/08/27 03:08

nmi-ci-hchaai-c

総合スコア79

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

infox

2017/08/27 03:13

h3,h4タグが混在する場合、それぞれどう指定すればいいでしょうか?
nmi-ci-hchaai-c

2017/08/27 03:15

文字の大きさについてバランスを考えて値をセットしていけばいいと思います。
guest

0

HTMLにビューポートを設置してCSSにメディアクエリーを設定したら実現できます!

まずはHTMLのheadタグに以下を記述してください。
<meta name="viewport" content="width=device-width,initial-scale=1">

そしてスタイルシートを以下のタグで囲ってください。
@media screen and (min-width:480px) {
/* 画面サイズが480pxからはここを読み込む /
p { font-size:12px;}
}
@media screen and (min-width:768px) and ( max-width:1024px) {
/
画面サイズが768pxから1024pxまではここを読み込む /
p { font-size:16px;}
}
@media screen and (min-width:1024px) {
/
画面サイズが1024pxからはここを読み込む */
p{ font-size:20px;}
}

この記述の仕方はコメントに書いた通り画面サイズが指定のサイズにきたとき
設定したcssが優先的に表示されます。
widthのpxの値は任意で大丈夫です。

投稿2017/08/27 03:44

Higemura

総合スコア274

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.51%

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

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

質問する

関連した質問