ALICE+サポート ユーザー助け合い掲示板 TOPページ ユーザー助け合い掲示板 文字の間隔 編集 キャンセル 削除 アク禁 アク禁解除 キャンセル 凍結 0 なまえ iPhone 小説の文章が、たまに文字同士の幅が変わっているのですが、これはなにがわるいのでしょうか? 添付画像でいうと2行目の文字間隔が広がっています。 文章の入力の欄はいじっていないのですがheadでしょうか? 【head】 <style> @charset "UTF-8"; /* Template & Designed by Towako. */ /* https://ninawas.me */ /* ウェブフォントの読み込み */ @import url('https://fonts.googleapis.com/css?family=Noto+Serif+JP&display=swap'); @font-face { font-family: 'XANO明朝'; font-display: swap; src: url('https://cdn.leafscape.be/XANO-mincho/XANO-mincho_web.woff2') format("woff2"); } /* 全体に適用する */ * { margin: 0; padding: 0; box-sizing: border-box; font-weight: normal; font-family: 'Noto Serif JP', serif; } /* 基本設定 */ body { text-align: center; background-color: #fff; line-height: 1.7; letter-spacing: 0.1em; font-size: 13px; color: #000; } /* リンク */ a { text-decoration: none; background: linear-gradient(transparent 60%, #efefef 40%); color: #000; } /* ヘッダー */ header { margin: 0 auto; padding: 5em 0; background-color: #333; color: #fff; } /* フォントの指定 */ header h1 span, section h2, article h1 { font-family: 'XANO明朝', serif; } /* 見出し */ header h1 { position: relative; margin: 0 auto; padding: 1.5em; width: 220px; height: 220px; text-align: justify; word-break: break-all; border: thin solid #fff; font-size: 1.2em; } header h1::before { position: absolute; display: block; content: ''; top: 5%; left: 5%; width: 100%; height: 100%; background-color: rgba(255, 255, 255, 0.1); } /* フェードイン */ header span { animation: FadeIn 5s; } /* 段落 */ header p { margin: 3em auto; color: #c0c0c0; } /* セクション */ section { margin: 3em auto; padding: 3em; text-align: justify; word-break: break-all; } /* 見出し */ section h2 { margin-bottom: 0.5em; border-bottom: thin solid #000; font-size: 1.3em; } /* リスト系 */ section ul { list-style-type: none; } section ol { list-style-position: inside; list-style-type: decimal-leading-zero; } section li { margin: 0.5em auto; } /* 段落 */ section p { margin: 0 auto 1em; width: 95%; font-size: 12px; color: #333; } /* フッター */ footer { margin: 1em auto 1.5em; } /* アーティクル */ article { margin: 3em auto; width: 80%; max-width: 500px; } /* 段落 */ article p { margin: 1em auto 1.5em; text-align: justify; word-break: break-all; } /* メニュー */ .menu { margin: 1em auto 1.5em; } .menu li { display: inline-block; margin: 0 0.5em; } /* 線 */ #line { width: 100%; height: 80px; background-color: #333; } /* アニメーション */ @keyframes FadeIn { 0% { opacity: 0; } 100% { opacity: 1; } } /* フォーム系 */ textarea, input[type] { -webkit-appearance: none; padding: 0.2em 0.5em; background-color: #c0c0c0; border: none; border-radius: 0; } textarea { width: 200px; height: 70px; } input[type=text] { width: 80px; } input[type=submit] { width: auto; } /* 横幅768px以上で読み込む */ @media screen and (min-width:768px) { /* フォントサイズ */ body { font-size: 14px; } /* ヘッダー */ header { display: flex; flex-wrap: wrap; justify-content: space-between; } /* 見出し */ header h1 { margin: 0; margin-left: auto; } /* 補足情報 */ header aside { flex-basis: 400px; margin-left: 80px; margin-right: auto; text-align: justify; word-break: break-all; } /* メインコンテンツ */ main { margin: 3em auto; max-width: 700px; } /* セクション内自動2カラム */ section { columns: auto 2; } /* 見出しを横切って表示させる */ section h2 { column-span: all; } section li { padding-right: 1em; } } /* 横幅1024px以上で読み込む */ @media screen and (min-width:1024px) { /* メイン */ main { max-width: 1000px; } } </style> 03/30 23:59 返信 コメント投稿 検索 4 なまえ iPhone >>3 詳しくありがとうございました!!! やってみます!(^-^) 04/18 07:16 返信 3 Anonymous iPhone /* 段落 */ article p { margin: 1em auto 1.5em; text-align: justify; word-break: break-all; } text-align: justify; を削除し、 line-break: anywhere; とすれば、 恐らく主さんの望む挙動になるかと思います。 1 04/18 07:05 返信 2 な iPhone >>1 わかりやすく説明ありがとうございました!!! 気になるところは文の文字数を変えてみようと思います♪ 04/13 11:58 返信 1 藤 iPad これは文章がおかしなところで改行されないように、わざと調整されているので問題ない挙動ですよ。 すべて等間隔に表示するフォントもあるようですが(そこはあまり詳しくないので詳細は説明できません、すみません)等幅表示にすると、たとえば以下のようなことが起こってしまいますのでお勧めしません。 「文章が、おかしなところで改行されないように 、わざと調整されているため問題ない挙動ですよ 」 これだと明らかに読みにくいので、変なところで行替えされないように表示が自動で調整されています。 1 04/06 18:53 返信 1ページ中1ページ目 160 view 残り書き込み 9996 件 人気スレ プレビュー画面と表示が違う 2020年03月05日 14時21分 13 拍手のお礼について 2021年10月31日 11時05分 11 小説の表示の仕方について 2020年03月06日 01時00分 2 携帯用CSS 2020年03月18日 10時19分 8 関連スレ 掲示板TOPへ サイトTOPへ ALICE+サポート