凍結
0 ワタベサキ SO-01K
小説を書いているのですが、その歳、文章が画面の端までは書かれておらず、左右にある程度の空白があります。

ただ、それが広すぎて少し読み辛いのでもう少し空白を狭めたいと思ってます。
ただ色々調べてmarginとかwihde?とかを弄っても全然変わりません…
どこを変えたら良いのでしょうか?

分かる方いましたらよろしくお願い致します。

因みに上の方だけですが、この方はヘッドをこんな風に書いてます。↓

/* 全体に適用する */
* {
padding: 0;
margin: 0;
box-sizing: border-box;
font-weight: normal;
font-family: 'Noto Sans JP', sans-serif;
}

/* 基本設定 */
body {
text-align: center;
background-color: #fff;
line-height: 1.5;
letter-spacing: 0.1em;
font-size: 14px;
color: #000;
}

/* リンク */
a {
color: #d87484;
}

/* ヘッダー */
header {
margin: 3em auto;
padding: 0;
position: relative;
width: 200px;
}

/* ヘッダー画像サイズ */
header img {
width: 100px;
}

/* フォントの指定 */
h1,
h2 span,
.link span {
font-family: 'はれのそら明朝', serif;
font-size: 16px;
}

/* 見出しを配置する */
h1 {
position: absolute;
top: 60%;
right: 0;
color: #d87484;
}

/* ナビゲーション */
nav {
margin: 1em auto 2em;
width: 200px;
}

/* 文字色 */
nav p,
.atogaki {
color: #808080;
}

/* メインコンテンツ */
main {
margin: 5em auto 3em;
}

/* セクションとアーティクル */
section,
article {
margin: 3em auto;
width: 350px;
text-align: justify;
word-break: break-all;
}

/* 余白 */
p,
footer {
margin: 1em auto 1.5em;
}

/* 見出し */
h2 {
position: relative;
margin: 1.5em auto;
}
11/07 08:09
返信
コメント投稿 検索
2 Anonymous SO-01K
>>1
ご丁寧にありがとうございます!
リンクまで貼っていただいて…全て読んでから色々試して見たところ、変えることができました!
ありがとうございます。
今後他の箇所で困ったときもこちらを参考に弄ったり出来そうです。
大変ありがとうございました。
11/09 14:17
返信
1 しち SOV40
>>0 文章画面の左右余白を減らすにはどこを書き換えればよいか?
書き込まれたスタイルシートだけだと情報不足で、具体的にどこをどうすれば理想通りにできるかはちょっと分かりません……。

とりあえず、掲題の『画面の左右余白を調整する』のに影響するプロパティは基本的に以下のものとなります。
* margin(要素の外側の余白)※1
* padding(要素の内側の余白)※1
* width(要素の幅)
* max-width(要素の最大幅)※2
* min-width(要素の最小幅)※2

━━━━━━━━━━━━━━━━━━━━
*▼(※1)の違いについて分かりやすい解説があるサイト

paddingとmarginの違いをできる限り難しい言葉を使わず説明してみた | webliker

CSSを勉強し始めて必ずぶつかるプロパティ「margin」と「padding」はどちらも余白を調整するためのプロパティですが、その違いが明確にわからず「この場合はどっちを使えばいいの?」と頭を悩まされることが多いですよね。そんなCSS勉強中の人たちのためにできる限り難しいl言葉を使わずに「見てわかる」marginとpadddingの解説をしていきたいと思います。

webliker.info

(paddingとmarginの違いをできる限り難しい言葉を使わず説明してみた│webliker)

*▼(※2)の違いについて分かりやすい解説があるサイト

【CSS】max-widthとmin-widthの使い方まとめ

【図解】min-widthとmax-widthの使いどころ・使い方をまとめました。

saruwakakun.com

(【CSS】max-widthとmin-widthの使い方まとめ│サルワカ)
━━━━━━━━━━━━━━━━━━━━

前出の>>0スタイルシートに書いてある限りでは左右の余白は全部 auto になっているようですので、
原因は「『width』の指定幅が画面の幅より狭すぎるせい」かもしれません。

たとえば、
・スマホの画面幅が360px
・文章の入っているブロック幅が200px
だったら、文章と画面端までの間に160pxの余白ができてしまう……ということです。

で、『文章の左右の余白』がどこで指定されているかは……HTMLも見ないと、どのセレクタ(pとかmainとかsectionとかarticleとか…)で指定しているのか分からないです。

小説機能をお使いなら、当該のHTMLは
 ● 【文章画面編集】
 ● 【全体デザイン】
に書いてあるはずです。
(※【全体デザイン】の方は、編集欄に『#novel#』しか入ってなかったら無関係なので見なくてOK)

あっちこっちにwidth(幅)が指定されてる感じのデザイン?なので、どこが影響しているかは>>0だけだとまったく分かりませんね……。
(スタイルシートはあくまで一部分抜粋ですよね?ちょっとデザインが思い描けません……)

根本的な話になっちゃうんですが、『width: ...;』に「○○px」や「○○em」みたいな絶対値でのサイズ指定をすると、閲覧環境によって横スクロールが起きるなどの不都合が出たりします。

本当は「○○%」などで指定できればいいんですが、複雑そうなスタイルシートなんですよねえ……。
(今のところ、このサイズなら一般的なスマホの大概は横スクロールしないんじゃないかな?たぶん……という感じです。iPhone5・5s・SEだと幅320pxなのでおそらく横スクロールしますが)

▼幅の指定に関する過去スレ

小説の隙間 - ALICE+タグ・デザイン質問板

レンタルHP作成ALICE+のタグ・デザイン質問板です。

bbs.alicex.jp

(小説の隙間│旧タグ・デザイン質問板)
11/08 18:40
返信