小説の隙間

308 views
  1. コメントする
  2. 記事検索
  3. 更新

0
なお iPhone 2019/01/20 20:48
写真にある白い四角のHeadなのですが、この四角の感覚を横に広げたいです。
どこを変えればいいでしょうか

{
background-color: #fffeff;
color: #323333;
line-height: 1.8;
font-size: 13px;
text-align:left;
padding: 10px 10px;
width: 75%;
margin: auto;
}
750×1334PNG
101KB


残り998件書き込み可

2
なお iPhone 2019/01/21 08:18
>>1

ありがとうございました!!
無事に変更することができました
丁寧でとても分かりやすく助かりました!!
1
しち Firefox 2019/01/21 00:57
>>0
>横幅の変更
#  width: 75%;
↑これが横幅指定部分です。

75%のところを 80% とか 90% とかにすると横に広がります。
ちなみにこれは「親要素の幅に対して75%の幅にする」という指定方法です。
親要素に何も指定していないなら、ブラウザの幅に対して何%、と解釈して大体OKです。

単位は % 以外でもよいのですが、このCSSの書き方の場合はよくある「px」などは使わない方が良いです。

例えば白い四角の横幅を「width:500px;」にしたら、スマホやガラケーが確実に横スクロール起こします。ブラウザの横幅がまず500px未満のため、ブラウザからはみ出した部分のせいで横スクロールします。
色んなブラウザ横幅に対応するなら「width:○○px」という書き方は勧められません。そのまま「○%」でいいと思います。


*−−蛇足−−*
width: 90%;
max-width: 600px;

……と2行書くと、「横幅は常に親要素の90%/最大でも600pxまでしか広がらない」という指定になります。
PCブラウザ等、幅1000pxとかの幅広ブラウザで表示する場合は「幅90%」だと横幅が広くなりすぎることがあります。そういうときはmax-widthで『最大値』も指定すると、広がりすぎるのを防げます。
とはいえ、サイトの訪問者さんをスマホ・ガラケーユーザーのみに絞っているなら最大値の指定は無くても問題ないかと思います。あくまで参考までに……。

*−−蛇足2−−*
>  padding: 10px 10px;
の部分は、

padding: 10px;

だけでOKです。※デザインは一切変わりません。
上下px/左右pxで別々の値を設定したいのでなければ、値は1つだけでいいので。(白い四角内の余白を、上下左右10pxにする…という指定です)
1ページ中1ページ目

関連スレッド

関連スレッド



Back to Top