質問: htmlとcssを勉強中です。 現在line-heightを勉強しているのですが、htmlの改行について 不明点があります。 ### 発生している問題・エラーメッセージ 教材では、1つのpタグで囲った文言を ブラウザで表示すると、2行で表示されているのですが 自分でコードを書いて、ブラウザで開くと1行でしか表示されません。 ``` ### 該当のソース ソースコードソースコードソースコードソースコードソースコードソースコード ソースコードソースコードソースコードソースコードソースコードソースコード ``` ### 試したこと ・使用しているatomエディタのソフトラップを設定 ・タグの使用や、pコードを2つにすることで改行はされたのですが 教材と異なるコードのせいか、line-heightの高さがお手本と違うため 気になってしまう ### 補足情報(FW/ツールのバージョンなど) エディタとブラウザは教材と同じですが osのみ異なります。(先方はmac os) 使用しているエディタ:Atom ブラウザ:chrome os:windows10
回答: 文字の高さ(大きさ)が,閲覧者の環境設定によって変わってくることはmaisumakunさんが説明してくださった通りです. もちろん,ある程度は使用するフォントの種類やサイズを指定できますし,閲覧者のコンピュータ上に任意のフォントがなければ,随時インストールさせる,ということもできますが,常にそれで上手くできるとは限りません. そのため,文章が主な内包要素となる場合,サイズ指定を`em`や`rem`などの単位を使って行うことがあります. * font | MDN * fontプロパティの意味と使い方 * font-familyの書き方まとめ:CSSでフォント種類を指定しよう * CSSの基本単位としてremを使うと超絶便利 また,改行の仕方もCSSで色々指定できます.以下に例を示しておきます !イメージ説明 ``` Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Loremipsumdolorsitamet,consecteturadipiscingelit,seddoeiusmodtemporincididuntutlaboreetdoloremagnaaliqua. Loremipsumdolorsitamet,consecteturadipiscingelit,seddoeiusmodtemporincididuntutlaboreetdoloremagnaaliqua. ``` ``` div{ padding: 1em; border: 1px solid; margin: 2em; background: skyblue; } .a{ white-space: nowrap; background: #66cdaa; } .b{ word-break:break-all; background: #66cdaa; } ``` 他にも改行関連の話題がありますので,参考リンクを貼っておきます * word-breakとword-wrapはややこしい * HTML、CSSでの改行について * br要素みたいに要素する方法 * word-wrap:break-word;がflexboxで効かない件 フォント関連の問題は,単純と言えば単純ですが,センスが光る部分でもあるので,色々調べてみると面白いと思います