
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で質問しましょう!
このQ&Aを見た人はこんなQ&Aも見ています
-
テーブルタグの中にdivを含めてはダメ?
HTML・CSS
-
ホームページの文字が縦に表示されます
ホームページ作成・プログラミング
-
テーブル内の文字サイズを変更したい。
HTML・CSS
-
-
4
htmlでテーブル内にテキストボックスを作りたいのですが・・・
HTML・CSS
-
5
TRタグの余白をcssで設定するには
HTML・CSS
-
6
Javascriptの値をJava(JSP)へ渡す方法
Java
-
7
テーブルタグの中のthやtdに文字を入力した時に縦に一文字ずつ表示されて欲しいです。全角であいうえお
HTML・CSS
-
8
background-sizeでcontainすると縮小で余白サイズが変わってしまいます…。
HTML・CSS
-
9
tableタグとformタグの組み合わせ
HTML・CSS
-
10
<a href=#" …>の意味を教えてください。"
HTML・CSS
-
11
テーブル内でドロップダウンメニューを使った際の行間
HTML・CSS
-
12
<td>中の文字列に<p>は必要?
HTML・CSS
-
13
CSSで特定のテーブルだけに適用する記述をおしえてください。
HTML・CSS
-
14
System.out.printlnの出力先
Java
-
15
cssファイルの名称付け
HTML・CSS
-
16
Eclipseで、プロジェクト名のところに赤いバッテンのエラーマークが
Java
-
17
exeファイルの中身を見ることは可能ですか?
フリーソフト
-
18
目上の方に、メールの語尾「以上、よろしくお願い致します」は使用しても問
日本語
-
19
SELECTのプルダウンの長さの調整
HTML・CSS
-
20
テーブルのヘッダとボディの幅がズレルのを防ぐ
HTML・CSS
関連するカテゴリからQ&Aを探す
おすすめ情報
このQ&Aを見た人がよく見るQ&A
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
htmlの文字が縦書きになる
-
widthやheightの数値に単位(px...
-
ページを拡大縮小でborderが消...
-
中点「・」の改行について
-
css初心者 フレックスボックス...
-
form input テキストを上下中央...
-
z-indexで上になっている要素だ...
-
入力フォームとセレクトボック...
-
FC2ショッピングカート 写真の...
-
HTMLで文字が重なって表示されます
-
スクロールボックスを中央に配...
-
divで囲まれたpaddingの指定を...
-
CSSでborderの指定を解除する記...
-
footer を横幅いっぱいに広げる...
-
画像と一緒にスライドするリン...
-
背景が下まで表示されないんです。
-
IEとFireFoxでの指定位置のズレ...
-
投稿フォームの整列
-
ライトボックスでスクロールバー
-
【CSS】ヘッダーの高さが不明の...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
htmlの文字が縦書きになる
-
widthやheightの数値に単位(px...
-
【CSS】ヘッダーの高さが不明の...
-
css初心者 フレックスボックス...
-
form input テキストを上下中央...
-
画像イメージの上下左右、欲し...
-
余分な縦スクロールバーが出て...
-
CSSがなぜかfont-sizeだけ効か...
-
<div>と<div>の間の10px程の...
-
htmlでheightが自動で延長
-
画像リンクの下に文字を付けた...
-
ネガティブマージン
-
table周辺の隙間をなくしたい。
-
入力フォームとセレクトボック...
-
定義リストに下線をつけたいと...
-
ライトボックスでスクロールバー
-
footer を横幅いっぱいに広げる...
-
CSSについて。このサイトの背景...
-
テーブルのセル間に余白が空い...
-
XHTML+CSS で、ブラウザごとに...
おすすめ情報