質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

解決済

2回答

1716閲覧

HTMLCSSの表の改行に関すること

revoiot

総合スコア188

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

0クリップ

投稿2017/02/05 05:48

今、HTMLとCSSを用いて、<オプション>の炭酸シャンプーと[300円(税込) 頭皮を直接刺激してあげることで、根本から従来のハリとツヤを取り戻せます。 ]の行の部分の作成をしているのですが、下の写真のように、改行できず、はみ出してしまいます。

Websiteで調べ、word-wrap: break-word; white-space: normal; を用いたり、

.table1 op-td{ のように表の一部分のみに効果をもたらすように書いたのですが、思うように機能してくれません。

大変恐縮ですが、どなたか分かる方ご教授していただけないでしょうか?

HTML

<p class="op-tit"> <strong>&lt; オプション &gt;</strong> </p> <table class = table1 border="1"> <tr> <th valign="top" class="op-th">炭酸シャンプー:</th> <td valign="top" class="op-td">300円(税込) 頭皮を直接刺激してあげることで、根本から従来のハリとツヤを取り戻せます。 </td> </tr> </table>

CSS
.op-tit{
font-size:26px;
color:#a40000;
padding-bottom:14px;
padding-top: 14px;
font-family: "A-OTF フォーク Pro", "Arial", "MS Pゴシック", Osaka, "ヒラギノ角ゴ Pro W3";
text-align:left;

}

.op-th{
font-size:19px;
color:#0e0e0e;
font-family: "A-OTF フォーク Pro", "Arial", "MS Pゴシック", Osaka, "ヒラギノ角ゴ Pro W3";
white-space:nowrap;
width:7em;
text-align:right;

}

.table1 op-td{
width:3px;
word-wrap: break-word;
white-space: normal;
}

.op-td{
font-size:18px;
color:#313131;
line-height:26px;
white-space:nowrap;
text-align:left;
}

イメージ説明

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

s8_chu

2017/02/05 06:02

こちらでは画像のような状況を再現できませんでした。より詳細な情報の追記をしていただけませんか?
guest

回答2

0

以下のようにするとどうでしょうか?

HTML

1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4 <meta charset="utf-8"> 5 <link rel="stylesheet" href="http://co-712.it.3919.com/style.css"> 6 <title>京都一の美容院 美容所joze & ARCH OF JOZE 烏丸御池</title> 7 <style type="text/css"> 8 * { 9 margin: 0; 10 padding: 0; 11 } 12 13 .op-tit { 14 font-size: 26px; 15 color: #a40000; 16 padding-bottom: 14px; 17 padding-top: 14px; 18 font-family: "A-OTF フォーク Pro", "Arial", "MS Pゴシック", Osaka, "ヒラギノ角ゴ Pro W3", sans-serif; 19 text-align: left; 20 21 } 22 23 .op-th { 24 font-size: 19px; 25 color: #0e0e0e; 26 font-family: "A-OTF フォーク Pro", "Arial", "MS Pゴシック", Osaka, "ヒラギノ角ゴ Pro W3", sans-serif; 27 white-space: nowrap; 28 width: 7em; 29 text-align: right; 30 } 31 32 .table1 .op-td { 33 width: auto; 34 word-wrap: break-word; 35 overflow-wrap: break-word; 36 white-space: normal; 37 } 38 39 .op-td { 40 font-size: 18px; 41 color: #313131; 42 line-height: 26px; 43 text-align: left; 44 word-wrap: break-word; 45 overflow-wrap: break-word; 46 } 47 48 table.table1, .table1 td, .table1 th { 49 border: 1px solid #000; 50 } 51 </style> 52</head> 53<body> 54<div id="container"> 55 <div id="wrapper"> 56 <div id="contens-area" class="clearfix"> 57 <div id="main" class="clearfix"> 58 <div class="content_box"> 59 <p class="color_2" style="font-size:22px; padding-top:12px;"> 60 <strong>※全てのコースにおいて延長10分につき600円(税込)</strong> 61 </p> 62 </div><!--/content_box--> 63 <div class="content_box"> 64 <p class="op-tit"> 65 <strong>&lt; オプション &gt;</strong> 66 </p> 67 <table class="table1"> 68 <tr> 69 <th valign="top" class="op-th">炭酸シャンプー:</th> 70 <td valign="top" class="op-td">300円(税込) 頭皮を直接刺激してあげることで、根本から従来のハリとツヤを取り戻せます。 71 </td> 72 </tr> 73 </table> 74 <p class="op-tit"> 75 <strong>&lt; その他 &gt;</strong> 76 </p> 77 <table class="table5"> 78 <tr> 79 <th valign="top" class="op-th">個人指名料:</th> 80 <td valign="top" class="op-td">300円(税込) お客様に合ったスタッフを指名できます。 81 </td> 82 </tr> 83 <tr> 84 <th valign="top" class="op-th">男女指名料:</th> 85 <td valign="top" class="op-td"> 86 100円(税込) 男女別にスタッフを指定できます。 87 </td> 88 </tr> 89 </table> 90 </div><!--/content_box--> 91 </div> <!--main-end--> 92 </div> <!--contens-area-end--> 93 </div><!--wrapper-end--> 94</div> <!--container-end--> 95</body> 96</html>

(追記)

HTML

1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4 <meta charset="utf-8"> 5 <link rel="stylesheet" href="http://co-712.it.3919.com/style.css"> 6 <title>京都一の美容院 美容所joze & ARCH OF JOZE 烏丸御池</title> 7 <style type="text/css"> 8 * { 9 margin: 0; 10 padding: 0; 11 } 12 13 .op-tit { 14 font-size: 26px; 15 color: #a40000; 16 padding-bottom: 14px; 17 padding-top: 14px; 18 font-family: "A-OTF フォーク Pro", "Arial", "MS Pゴシック", Osaka, "ヒラギノ角ゴ Pro W3", sans-serif; 19 text-align: left; 20 21 } 22 23 .op-th { 24 font-size: 19px; 25 color: #0e0e0e; 26 font-family: "A-OTF フォーク Pro", "Arial", "MS Pゴシック", Osaka, "ヒラギノ角ゴ Pro W3", sans-serif; 27 white-space: nowrap; 28 width: 7em; 29 text-align: right; 30 } 31 32 .op-td { 33 font-size: 18px; 34 color: #313131; 35 line-height: 26px; 36 text-align: left; 37 word-wrap: normal; 38 overflow-wrap: normal; 39 white-space: nowrap; 40 } 41 42 .table1 .op-td { 43 width: auto; 44 word-wrap: break-word; 45 overflow-wrap: break-word; 46 white-space: normal; 47 } 48 49 table.table1, .table1 td, .table1 th { 50 border: 1px solid #000; 51 } 52 </style> 53</head> 54<body> 55<div id="container"> 56 <div id="wrapper"> 57 <div id="contens-area" class="clearfix"> 58 <div id="main" class="clearfix"> 59 <div class="content_box"> 60 <p class="color_2" style="font-size:22px; padding-top:12px;"> 61 <strong>※全てのコースにおいて延長10分につき600円(税込)</strong> 62 </p> 63 </div><!--/content_box--> 64 <div class="content_box"> 65 <p class="op-tit"> 66 <strong>&lt; オプション &gt;</strong> 67 </p> 68 <table class="table1"> 69 <tr> 70 <th valign="top" class="op-th">炭酸シャンプー:</th> 71 <td valign="top" class="op-td">300円(税込) 72 頭皮を直接刺激してあげることで、根本から従来のハリとツヤを取り戻せます根本から従来のハリとツヤを取り戻せます。 73 </td> 74 </tr> 75 </table> 76 <p class="op-tit"> 77 <strong>&lt; その他 &gt;</strong> 78 </p> 79 <table class="table5"> 80 <tr> 81 <th valign="top" class="op-th">個人指名料:</th> 82 <td valign="top" class="op-td">300円(税込) 83 お客様に合ったスタッフを指名できます。お客様に合ったスタッフを指名できます。お客様に合ったスタッフを指名できます。 84 </td> 85 </tr> 86 <tr> 87 <th valign="top" class="op-th">男女指名料:</th> 88 <td valign="top" class="op-td"> 89 100円(税込) 男女別にスタッフを指定できます。 90 </td> 91 </tr> 92 </table> 93 </div><!--/content_box--> 94 </div> <!--main-end--> 95 </div> <!--contens-area-end--> 96 </div><!--wrapper-end--> 97</div> <!--container-end--> 98</body> 99</html>

投稿2017/02/05 08:48

編集2017/02/05 09:52
s8_chu

総合スコア14731

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

revoiot

2017/02/05 09:39

返信していただき、ありがとうございます。 コードを大変丁寧に書いていただき、ありがとうございます。 質問があるのですが、 op-td{ ... white-space: nowrap; } .table1 op-td{ word-wrap: break-word; } のように、op-tdには、改行させないように、 .table1 op-tdには、改行させるように記述しました。 しかし、実際には、.table1 op-tdは改行されず、op-tdに従う形となってしまいました。 これは、op-tdにある命令をしたとき、例えばop-tdの一部分であるtable1のみ、違う動作させようとすることは、できないということことでしょうか?
s8_chu

2017/02/05 09:52

追記したコードのようにすることでそのような動作は実現できると思うのですが, 一度確認していただけませんか?
revoiot

2017/02/05 10:04

先ほど解決いたしました。ありがとうございます。
guest

0

ベストアンサー

op-td{
...
white-space: nowrap;
}

white-space: normal では?

参考情報

chrome の 開発ツールを使うと、html の要素にどんな css が指定されているかを確認したり、
その場で css 指定を変更して表示がどう変わるかを試すことができます。

イメージ説明

投稿2017/02/05 06:01

編集2017/02/05 07:16
katoy

総合スコア22324

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

revoiot

2017/02/05 06:17

op-tdは他の場所にも適用されており、他の場所では、op-tdの部分を改行なしとしたいため、このような表記させていただきました。 op-td{ ... white-space: nowrap; } 親要素op-tdと部分要素.table1 op-td{ を同じCSS内に表記することは、良くないのでしょうか?
katoy

2017/02/05 07:20

op-td-normal を定義して、 html の該当部分で、 class= "op-td-normal" を指定するとよいのでは?
revoiot

2017/02/05 07:26

返信いただきありがとうございます。.table1 op-tdという記述は文法的に間違っているということでしょうか?
revoiot

2017/02/05 09:49

ありがとうございます!!!!!!謎がとけました!!!!!参考もお送りいただきありがとうございます!!!!解決しました!!!!!!!
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問