現在ホームページを作成していますが、難しく困っています。
というのが、大きな画像を背景にして、文字の部分はテキストで書こうと思い試行錯誤しているのですが問題がありすぎてうまくいきません。
例えばなのですが、これはたまたまWEB上で見つけたイメージなのですが、添付の画像を見てください。
もし、これらの噴出しの文章をすべてテキストで配置しようと思う場合どのようにしたらよいでしょうか?
現在、大きな画像を作成し噴出し部分の文章は消したうえで背景としてまず配置します。
そのDIV要素の中で、色々と考えながらCSSにてコメントを配置しているのですが、気が遠くなります。ID数半端ない状態です。汗)))
さらに、ちょっといけるかも?と思っても、ブラウザによってはマージン、パッディング、フォントサイズや行間隔。同じサイズを設定しても全く異なる場合がありぐちゃぐちゃ状態になってしまいました。涙でそうです。
実は、テキストで配置するのはテキストで書きたいからではないのです。
画像だと、どうしても小さな文字を読みにくく、また、スマホなどで拡大すると汚く表示されてしまいます。
要は、きれいに読むことができればそれで解決です。
どなたか詳しい方いらっしゃいましたら、画像のままで拡大拡大しても綺麗に読める方法があれば教えていただけないでしょうか?
また、やはり画像だと汚くなるので、面倒でもテキストで書くほうがよいという場合、このような感じで細かな設定を、どのブラウザ(ある程度)綺麗に設定する方法をご存知であれば合わせてご教授願います。
どうぞ、よろしくお願いします。
No.1
- 回答日時:
マージンやパディングはスタイルシートを指定すれば良いですが、
文字の大きさを固定しない(ブラウザ設定による変動を考慮する)のであれば、
吹き出しを擬似フレームにしてスクロールさせるか、
そうでなければ全部画像にする(SVG、CANVASも画像の一種です)しかないと思います。
No.2ベストアンサー
- 回答日時:
No.1です。
一応補足です。画像にする目的は、ブラウザの設定に係わらず文字の大きさを制作者が指定した物にするためです。
文字の大きさが同じであれば確実に吹き出しの中に収まりますから、ブラウザの設定を考慮する必要がありません。
いずれにしてもHTMLでは無理だと思いますから、
見た目を優先するのであれば、文字をパス(アウトラインフォント)の状態で扱い、描画できるSVGやPDFをお勧めします。
全体をSVGやPDFにすれば全体のズームしかできなくなると思いますので、文字が吹き出しの大きさを超えるという事がなくなると思います。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- ホームページ作成・プログラミング グリッドレイアウトHTMLとCSS 1 2023/02/22 02:36
- HTML・CSS svgクリップパスの応用コーディング方法 2 2022/04/09 09:07
- その他(ブラウザ) テキストを入れるときの縦線の点滅がそれ以外のブラウザ上にも表れます。 1 2022/07/29 21:55
- その他(プログラミング・Web制作) このWEB用語、WEB文章、意味が分かりますか? 理解できない人が多いようなんですが・・・ 7 2022/10/22 09:13
- Illustrator(イラストレーター) Illustratorでオブジェクトの色が勝手に変わって困っています。 4 2022/09/04 18:47
- Evernote Evernote(エバーノート)の文字化け 1 2022/04/05 19:30
- 工学 電気関係のテキストにて以下の問題が分からず、回答をお願いします 【問題文:ブレーカーがトリップしてい 3 2023/05/22 10:43
- Illustrator(イラストレーター) イラストレーター(イラレ)で書き出した画像が荒れます… 3 2022/05/19 17:30
- HTML・CSS WEBサイトの構築。表示データとWEBデザインを分離する考え方を専門用語・業界用語では何と言うか? 8 2022/09/27 09:16
- フリーソフト libreoffice drawのツールバーのチェックが外れてしまう 1 2022/10/04 22:02
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
IMGタグで画像の繰り返し使用は…
-
同じ画像 複数回使用
-
lightbox2で画像を天地左右中央...
-
WEB上でディレクトリ内の画像を...
-
背景画像をリピートさせない方...
-
gif画像でたまに背景がグレーに...
-
CSS マウスオーバーでテキスト...
-
CSSでの動画のマスク処理
-
フッターの背景に色を指定した...
-
LightBoxの矢印の出し方
-
ひとつの画像をWEBで異なる小さ...
-
before疑似要素で画像を指定し...
-
背景画像の上に透過GIF背景...
-
<hr>の縦バージョンはありますか?
-
htmlタグで画像を背景に敷き詰...
-
【至急お助け!】チェックボッ...
-
サファリで背景画像が1ピクセ...
-
下記サイトのトップ画像はどの...
-
【Webサイト】画像が小さく表示...
-
画像で背景透明のテキストがに...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
画像の上にテキスト配置で、拡...
-
画像とその下にあるテキストの...
-
<hr>の縦バージョンはありますか?
-
【至急お助け!】チェックボッ...
-
【Webサイト】画像が小さく表示...
-
background-repeat CSS で切れ...
-
htmlかcssで背景の白い枠をなく...
-
background-sizeの背景で最小値...
-
lightbox2で画像を天地左右中央...
-
ページごとに背景画像を変更し...
-
LightBoxの矢印の出し方
-
WEB上でディレクトリ内の画像を...
-
IMGタグで画像の繰り返し使用は…
-
iframe内をクリックさせない方...
-
同じ画像 複数回使用
-
画像上に文字を表示するとiPhon...
-
background-sizeでcontainする...
-
ページの上下に白い横線が入る
-
コーディング中、右側に謎の余...
-
画像を複数横に並べ、かつそれ...
おすすめ情報