do | 創作・同人サイト制作支援サイト › フォーラム › テンプレート編集について › 1カラムのtext専用ページの文章表示幅を変えたい
- このトピックは空です。
-
投稿者投稿
-
胃酸
ゲスト空にうたえば、古びた地図に付随しているtext専用htmlについてです。
スマホ画面等で表示する分には現状で何も問題ありません。
しかしPCなど幅の広い画面で見た場合デザインは素敵ですが、どうしても表示される文の横幅が気になってしまい、box内の本文だけ、もう少し細身に出来ないかと試行錯誤しております。
textのhtml内にマージンを取ってしまうとスマホ表示がえらいことになってしまいますし、cssのstyleで、PC環境のみ、かつtextのhtmlの本文部分だけ左右にマージンを多く設けたいわけなのですが、指示の書き方が解らず苦悩しております。
html内で書いた指示としては、デザインを崩さないようタイトル部分から左右に180px程のマージンを取った状態でした。○%みたいな表記がいいのでしょうが、そもそも失敗していますしorz
@media PC環境のところへ書くことなども思いついたのですがmediaのところってそんなの書けるのかどうかすら……
大変申し訳ありませんが、どなたか返答していただけると助かります。
えむおか
ゲストこんにちは。
style.css
#text main p {
~元からあるCSS~
/* 以下追加 */
max-width: 40em;
margin: auto;
}
としてみるのはいかがでしょう?max-width: 40em;で最大幅を約40文字にしています。
「最大幅」なのでスマホ等表示幅が狭い場合は表示の幅に沿って狭くなります。margin: auto;外側の余白を自動で調整してくれます。
#text main pが中央に寄ると思います。デベロッパツール上で試しているだけなのでもしかしたら実際にやってみるとほかのCSSが干渉してうまくいかない場合もあるかもしれませんが一度お試しください!
胃酸
ゲスト連投してしまっていたようで申し訳ないことに! 前のの削除方法がわからぬorz
そしてえむおか様ありがとうございます。
突如仕事が入ったためまだ試せていないのですが、終わり次第やってみます。
文字の最大数での制御、発想がそもそもありませんでした。
indexの方は2カラムを使用していることもあり、40字なんてなさそう、これならデザインに響かないのではないかと期待大です。地味に仕事合間5日以上ああでもないこうでもないを繰り返していたので本当にありがたいです。
試してからまた来ます!胃酸
ゲスト時間が取れたので試して参りました。
タイトルが目立つようになったり、後書き部がずれたりしてすったもんだあったのですが一部弄ることによってなんかこれでよくないか、という結果に落ち着きました。
indexの方も予想通り崩れもなく、スマホの方でもusbぶっさして確認してみたらしっかりとした表示のままでしたので、これをテンプレとして使っていきたいと思います。
拙いhtmlでフレームを使い2012頃に作ったものを2014辺りからupもせず脳(PC)内でだけ更新して楽しんでいたのですが、今年になってから火狐さんでも一部非対応となり脳内ですら見れなくなりまして。
レスポンシブルデザインって何だよ知らんわ! という状態からリニュするために試行錯誤する日々でしたので、本当に、心からえむおか様に感謝申し上げます。
textサイトなのにtext表示が好みじゃない、読みづらいとか大問題だったので解決できてよかったです。ありがとうございました!
-
投稿者投稿