![](http://oshiete.xgoo.jp/images/v2/pc/qa/question_title.png?8acaa2e)
htmlは
<div class="ochawanpage">
<h1 class="ochawan-subtitle">
お茶碗
</h1>
</div>
<img src="./images/ochawan" alt>
</div>
cssは
.ochawanpage {
font-size: 50px;
font-family: "HannariMincho";
color: #212529;
margin-top: calc(5/1366 * 100vw);
margin-left: calc(233/1366 * 100vw);
}
というものを書いたのですが、「お茶碗」という言葉がなぜか縦書きになってしまいます。ある程度margin-leftの値が小さければ横向きなのですが、ある程度大きくなると勝手に縦書きになってしまいます。なぜでしょうか?
No.2ベストアンサー
- 回答日時:
おそらく、縦書きになってしまう原因は、margin-leftの値が大きくなると、ブラウザが自動的にテキストを折り返して縦書き表示に切り替えてしまっているためだと思われます。
縦書きにならないようにするには、white-spaceプロパティを使って、テキストを強制的に横書き表示にすることができます。以下のようにCSSを追加してみてください。css
Copy code
.ochawan-subtitle {
white-space: nowrap;
}
これにより、テキストが折り返されずに横書き表示されるようになります
No.1
- 回答日時:
こんばんは
全体像が不明なので、はっきりとはしませんけれど、
>勝手に縦書きになってしまいます。なぜでしょうか?
わからないなりに想像するところ、「縦書き」ではなく、表示スペースが確保できなくて1文字ずつ折り返し改行表示されているだけではないでしょうか?
(結果的に、縦書きのように見えているだけ)
そのままのソースでも、ウィンドウ幅の大きなデバイスで閲覧すれば、横書き表示されるのではないでしょうか?
幅の狭いウィンドウでも改行をしたくなければ、CSSに
white-space: nowrap;
を付け加えておくとか。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- HTML・CSS ヘッダーの画像にメインエリアがかぶってしまいます 1 2022/11/28 14:06
- HTML・CSS テキストを画面の真ん中に配置したいです。 2 2022/11/25 16:11
- HTML・CSS 書籍を見つつサイト造りの練習をしているのですが、見た目が一致しません 2 2022/11/28 15:00
- JavaScript htmlとcssに関する質問です 3 2022/12/06 05:36
- HTML・CSS cssの display: flex;で横並びにならずに困ってます 1 2022/12/04 13:18
- HTML・CSS CSSがなぜかfont-sizeだけ効かない...記述がまちがっているんでしょうか 5 2022/04/09 17:52
- HTML・CSS 【HTML】【CSS】【Swiper】 元の画像は横1200×縦600なのですが、実際のサイト上に反 5 2022/07/16 13:57
- HTML・CSS img と p を縦中央に配置したいのですがうまくいきません。 2 2023/01/12 14:38
- HTML・CSS CSSのホバーエフェクト 1 2023/06/19 06:53
- PHP アップロード画像数でCSSを分けることに成功したのですが、画像の横に文字を並べることが出来ません。 3 2023/07/28 17:16
このQ&Aを見た人はこんなQ&Aも見ています
-
性格の違いは生まれた順番で決まる?長男長女・中間子・末っ子・一人っ子の性格の傾向
同じ環境で生まれ育っても、生まれ順で性格は違うものなのだろうか。家庭教育研究家の田宮由美さんに教えてもらった。
-
<a href=#" …>の意味を教えてください。"
HTML・CSS
-
テーブルタグの中にdivを含めてはダメ?
HTML・CSS
-
CSSのtransform: translate(-50%,-50%);を行う意味
HTML・CSS
-
-
4
テーブルの横に画像を
HTML・CSS
-
5
ラジオボタンが両方とも選択できてしまう
HTML・CSS
-
6
HTML tableのセルにtextareaを使って外の枠に重ねて表示する方法
HTML・CSS
-
7
テーブルの任意の列を非表示にしたい
HTML・CSS
-
8
tableタグとformタグの組み合わせ
HTML・CSS
-
9
テーブル内の文字サイズを変更したい。
HTML・CSS
-
10
PHPで、エラーがない場合のみ画面遷移させたい
PHP
-
11
htmlでテーブル内にテキストボックスを作りたいのですが・・・
HTML・CSS
-
12
テーブルとテーブルの間隔について
HTML・CSS
-
13
smallにtext-allignが効かない
HTML・CSS
-
14
2個のFormを横並びにしたい
HTML・CSS
-
15
div要素が重なってします
HTML・CSS
-
16
HTMLで前の画面に戻る時、入力していた値が消えてしまいます。
PHP
-
17
日付型のフィールドに空白を入れる方法を教えてください
その他(データベース)
-
18
TABLEのセルの中の文字を行単位、セル単位で色を変えたい
HTML・CSS
-
19
<JavaScript>tableタグを入力不可にしたい。
JavaScript
-
20
[Ljava.lang.Stringってなんですか
Java
関連するカテゴリからQ&Aを探す
おすすめ情報
このQ&Aを見た人がよく見るQ&A
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
htmlの文字が縦書きになる
-
widthやheightの数値に単位(px...
-
CSS、width100%でもできる余白
-
スタイルシート a:activeで画像...
-
footer を横幅いっぱいに広げる...
-
CSSでボックスのheightが0になる
-
定義リストに下線をつけたいと...
-
div領域をウインドウサイズに合...
-
CSSで背景画像を一番下にもって...
-
HTMLのiframeの入れ子について
-
CSS3で角丸写真にシャドーを付...
-
css初心者 フレックスボックス...
-
【CSS】ヘッダーの高さが不明の...
-
imgの下に点線が入るのを消したい
-
【HTML】【CSS】【Swiper】 元...
-
li 黒丸含んで移動する方法
-
CSSでborderの指定を解除する記...
-
CSSがなぜかfont-sizeだけ効か...
-
IEとFireFoxでの指定位置のズレ...
-
CSSでborderの長さを指定、また...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
htmlの文字が縦書きになる
-
widthやheightの数値に単位(px...
-
画像イメージの上下左右、欲し...
-
css初心者 フレックスボックス...
-
CSSでボックスのheightが0になる
-
CSS、width100%でもできる余白
-
CSS:animation開始位置の設定
-
スクロールボックスを中央に配...
-
form input テキストを上下中央...
-
表示倍率を変えるとレイアウト...
-
W3Cのソースコードの検証サービ...
-
CSSで背景画像を一番下にもって...
-
<div>と<div>の間の10px程の...
-
CSSがなぜかfont-sizeだけ効か...
-
【CSS】ヘッダーの高さが不明の...
-
footer を横幅いっぱいに広げる...
-
table周辺の隙間をなくしたい。
-
CSS3で角丸写真にシャドーを付...
-
定義リストに下線をつけたいと...
-
Media Queries 4 で 非推奨とな...
おすすめ情報