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

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

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

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

CSS

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

Q&A

解決済

3回答

42584閲覧

HTML CSS、ボタンの文字を真ん中に表示したい

marimokomokmOk

総合スコア52

HTML

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

CSS

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

0グッド

0クリップ

投稿2017/02/15 01:36

編集2017/02/15 02:39

HTML、CSSについてわからないところがあります。
入力画面に戻るボタンの文字が下に沈んでしまいます。
ボタンの真ん中に文字がくるようにしたいです。
ご教示ください。
イメージ説明

php:

1<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 2"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 3<html xm1ns="http://www.w3.org/1999/xhtml"> 4<html lang="ja"> 5<head> 6<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 7<meta http-equiv="Content-Script-Type" content="text/javascript"> 8 9 10<title>Contact</title> 11<style type="text/css"> 12<!-- 13html,body { 14scrollbar-arrow-color:#ffccff; 15scrollbar-face-color:#ffcccc; 16scrollbar-3dlight-color:#ffffff; 17scrollbar-darkshadow-color:#ffcccc; 18scrollbar-highlight-color:#ff9999; 19scrollbar-shadow-color:#ff9999; 20scrollbar-track-color:#ffffff; 21} 22--> 23body{ 24 font-family: あずきフォント; 25} 26p#submit_btn { 27 text-align: center; 28} 29.fontButton{ 30 text-align: center; 31 32} 33.content { 34 margin-left: 137px; 35 margin-top: 0px; 36 font-size: 95%; 37 font-weight: bold; 38 font-family: あずきフォント; 39 color: #6c2735; 40} 41 42.form { 43 color: white; 44 background-color: #f7c2c2; 45 text-align: center; 46 /* padding-left: 370px; */ 47 padding-top: 5px; 48 padding-bottom: 5px; 49 font-weight: bold; 50 font-size: 95%; 51 width: 825px; 52 font-family: あずきフォント; 53} 54 55.textform { 56 margin-left: 68px; 57 font-family: あずきフォント; 58} 59 60.textform_postalCode { 61 margin-left: 30px; 62 font-family: あずきフォント; 63} 64 65.textstyle{ 66 font-size: 95%; 67 font-weight: bold; 68 font-family: あずきフォント; 69 color: #6c2735; 70/* font-family: "あずきフォント", sans-serif; */ 71} 72.required { 73 font-size: 87%; 74 font-weight: normal; 75 color: red; 76 font-family: あずきフォント; 77} 78#heading{ 79 border-left: 10px solid black; 80 border-bottom: medium solid black;; 81/* font-family: "あずきフォント", sans-serif; */ 82 font-family: あずきフォント; 83 color: #6c2735; 84} 85/* 送信ボタン */ 86 87button[type="button"] { 88 padding: 10px 20px; 89 border: none; 90/* background: #9FD6D2; */ 91 background: #f7c2c2; 92 color: #fff; 93 font-family: あずきフォント; 94 text-align: center; 95} 96 97 98 99/* 送信ボタン - マウスオーバー時 */ 100 101button[type="button"]:hover { 102/* background: #54A9BD; */ 103 background: #ff9b9f; 104 font-family: あずきフォント; 105 text-align: center; 106} 107 108/* 送信ボタン - 押せないとき */ 109button[type="button"][disabled] { 110 background-color: #ccc; 111 cursor: default; 112 font-family: あずきフォント; 113 text-align: center; 114} 115/*検索ボタン*/ 116button[type="button"] { 117 background: #f7c2c2; 118 color: white; 119 /* width: 55px; */ 120 height: 30px; 121 border: 0; 122 line-height: 30px; 123 font-family: "あずきフォント"; 124 text-align: center; 125} 126 127button[type="button"]:hover { 128 background: #ff9b9f; 129 height: 30px; 130 color: #fff; 131 border: 0; 132 cursor: pointer; 133 font-family: "あずきフォント"; 134 text-align: center; 135} 136 137button[type="button"].disabled { 138 background: #f7c2c2; 139 cursor: default; 140 text-align: center; 141} 142 143button[type="button"].disabled:hover { 144 background: #f7c2c2; 145 font-family: "あずきフォント"; 146 text-align: center; 147} 148@font-face { 149font-family: あずきフォント; 150src: url(azuki.ttf) format("truetype"); 151} 152 153</style> 154</head> 155<body bgcolor="#f2dae8"> 156 <h1 id="heading"> 157 <font color="black">お問い合わせ</font> 158 </h1> 159 <p class="form">送信完了</p> 160 <p class="textstyle"> 161 162 <p> 163 <button type="button" class="fontButton" onclick="location.href='contact.php'">入力画面に戻る</button> 164 </p> 165 166</body> 167</html>

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

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

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

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

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

kei344

2017/02/15 02:11

質問文のコードはコードブロックで囲んでいただけませんか? ```(バッククオート3つ)で囲み、前後に改行をいれるか、コードを選択して「<code>」ボタンを押すとコードブロックになります。
guest

回答3

0

解決はしていますが、気になった点を指摘します。
0. HTMLの開始タグが2個ある
まとめれば良いです。<html xm1ns="http://www.w3.org/1999/xhtml" lang="ja">
0. bodyのbgcolor属性は現在は使用しないことになっています
CSSで body{background-color:#f2dae8;} と指定してください。
0. 「入力画面に戻る」は a要素で普通にリンクにすればよいのでは

HTML

1<!-- 2<button type="button" class="fontButton" onclick="location.href='contact.php'">入力画面に戻る</button> 3↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓ --> 4<a href="contact.php" class="fontButton">入力画面に戻る</a>

また、HTML4の書き方なので、参考にされておられる本/サイトが古い可能性があります。

投稿2017/02/15 02:51

kei344

総合スコア69378

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

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

0

ベストアンサー

CSS

1button[type="button"] { 2padding: 0px; 3}

投稿2017/02/15 01:49

Lhankor_Mhy

総合スコア36039

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

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

0

既に回答されている方がいらっしゃいますが、
ファイルの89行目の

css

1padding: 10px 20px;

これを↓

css

1padding: 0;

としてやると添付イメージ画像の様になりますよ。
イメージ説明

投稿2017/02/15 02:45

YuichiKataoka

総合スコア216

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.49%

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

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

質問する

関連した質問