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

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

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

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

Q&A

解決済

3回答

7013閲覧

html、文字サイズを改行せずに変更、センタリング

jackie1993427

総合スコア66

HTML

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

0グッド

0クリップ

投稿2015/09/04 03:25

編集2015/09/04 04:09

すごく初歩的かもしれませんが質問させていただきます。
ページ内で価格を表記する際に、(税込)の部分のみフォントのサイズを小さくしたいです。
WordPressで扱っているので、CSSは使用せずにhtmlのみでスタイルを指定しています。

<div style="width:300px; margin:0 auto;"> <div style="background-color:#eeeeee; border:solid 1px none; border-radius:10px; height:40px; width:100%;"> <p> <span style="float:left; font-size: 30px; color: #ee0000; margin:-5px 0 0 10px;">¥4,500</span> <span style="color: #ee0000; margin:20px 0 -15px 0;">(税込)</span> </p> </div> <div class="sel" style="margin-top:15px; width:216px; display:block; margin:0 auto;"> <form name="form2"><select name="select2" style="float:left;"> <option value="">サイズを選択してください</option> <option value="">【Sサイズ】</option> <option value="">【Mサイズ】</option> <option value="">【Lサイズ】SOLDOUT</option> </select> <input style="background-color: #ffffff; background-image: url('images/btn_cart.png'); margin:10px 0 0 -5px; width: 216px; height: 50px; border: none;" type="button" value="" /></form></div> </div> </div>

現在はこのようなソースになっていますが、
値段、税込は1行、
下のセレクト、ボタン要素全部を
センタリングしたく、
質問させていただきました。

[¥4,500(税込)]
[サイズを選択してください]
[ ボタン ]

というイメージです。

すみませんがよろしくお願いいたします。

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

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

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

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

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

guest

回答3

0

html

1<div style="width:300px; margin:0 auto; text-align:center;"> 2 <div style="background-color:#eeeeee; border:solid 1px none; border-radius:10px; height:40px; width:100%;"> 3 <p style="padding-top:5px;"> 4 <span style="font-size: 30px; color: #ee0000; margin:-5px 0 0 10px;">\4,500</span> 5 <span style="color: #ee0000; margin:20px 0 -15px 0;">(税込)</span> 6 </p> 7 </div> 8 9 <div class="sel" style="margin-top:15px;"> 10 <form name="form2"> 11 <select name="select2" style="width: 216px;"> 12 <option value="">サイズを選択してください</option> 13 <option value="">【Sサイズ】</option> 14 <option value="">【Mサイズ】</option> 15 <option value="">【Lサイズ】SOLDOUT</option> 16 </select> 17 <input style="background-color: #ffffff; background-image: url('images/btn_cart.png'); margin:10px 0 0 -5px; width: 216px; height: 50px; border:none;" type="button" value="button" /> 18 </form> 19 </div> 20</div>

こんな感じでいかがでしょうか?
style内の変更点は・・・

  1. 1行目 <div>text-align:center; を追加
  2. 3行目 <p>padding-top:5px; を追加
  3. 4行目 <span>からfloat:left;を削除
  4. 9行目 <div class="sel">からwidth:216px; display:block; margin:0 auto;を削除
  5. 11行目 <select name="select2">float:left;width: 216px;に変更

です。

投稿2015/09/04 06:54

kaputaros

総合スコア1844

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

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

jackie1993427

2015/09/04 07:07

ありがとうございます。 価格が#eeeeeeのdivからはみ出してしまいますね...。
guest

0

ベストアンサー

html

1<div style="width:300px; margin:0 auto;"> 2 <div style="background-color:#eeeeee; border-radius:10px; height:40px; width:100%;"> 3 <p style="line-height: 40px; margin: 0; padding: 0"> 4 <span style="font-size: 30px; color: #ee0000; padding-left: 10px;">¥4,500</span> 5 <span style="color: #ee0000;">(税込)</span> 6 </p> 7 </div> 8 9 <form name="form2"> 10 <div class="sel" style="text-align: center;"> 11 <select name="select2" style=""> 12 <option value="">サイズを選択してください</option> 13 <option value="">【Sサイズ】</option> 14 <option value="">【Mサイズ】</option> 15 <option value="">【Lサイズ】SOLDOUT</option> 16 </select> 17 <input style="background-image: url('https://cdn.teratail.com/uploads/avatars/24784/v0p4ZXAP_thumbnail.jpg?1435125086'); width: 216px; height: 50px; border: none;" type="button" value="" /></div> 18 </div> 19 </form> 20</div>

で、どうでしょうか?
一旦無駄そうなスタイル指定は抜いてます。

投稿2015/09/04 05:10

rk7fd3s

総合スコア61

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

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

jackie1993427

2015/09/04 06:46

ありがとうございます。これで大体は大丈夫そうです。 ¥4,500(税込)の文字列自体はセンタリングできないでしょうか?
rk7fd3s

2015/09/04 07:07 編集

<p>タグに「text-aling: center;」で行けると思います。
jackie1993427

2015/09/04 07:46

ご迷惑おかけいたしました。 解決いたしました!ありがとうございます!
guest

0

ちょっとイマイチわからないのですが、¥4500(税込)をセンタリングしたいなら

html

1<div> 2 <p> 3 <span style="font-size: 30px; color: #ee0000; background-color:#000000;4,500</span> 4 <span style="color: #ee0000; background-color:#dddddd;">(税込)</span> 5 </p> 6</div> 7

こんなかんじでいかがでしょうか

投稿2015/09/04 03:42

MasakazuFukami

総合スコア1869

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

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

jackie1993427

2015/09/04 04:05

すみません、情報が足りていませんでした。 <div style="width:300px; margin:0 auto;"> <div style="background-color:#eeeeee; border:solid 1px none; border-radius:10px; height:40px; width:100%;"> <p> <span style="float:left; font-size: 30px; color: #ee0000; margin:-5px 0 0 10px;">¥4,500</span> <span style="color: #ee0000; margin:20px 0 -15px 0;">(税込)</span> </p> </div> <div class="sel" style="margin-top:15px; width:216px; display:block; margin:0 auto;"> <form name="form2"><select name="select2" style="float:left;"> <option value="">サイズを選択してください</option> <option value="">【Sサイズ】</option> <option value="">【Mサイズ】</option> <option value="">【Lサイズ】SOLDOUT</option> </select> <input style="background-color: #ffffff; background-image: url('images/btn_cart.png'); margin:10px 0 0 -5px; width: 216px; height: 50px; border: none;" type="button" value="" /></form></div> </div> </div> 下のセレクト要素、ボタン共に全てセンタリングしたいと考えています。 ただし、テキストは¥4500(税込)で配置したく。。。 よろしくお願いいたします。
MasakazuFukami

2015/09/04 05:10

こんな感じでしょうか?? <p style="text-align:center;"> <span style="font-size: 30px; color: #ee0000; margin:-5px 0 0 10px;">¥4,500</span> <span style="color: #ee0000; margin:20px 0 -15px 0;">(税込)</span> </p>
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問