Webデザインで困っています

前提・実現したいこと

テキストの位置指定で困っています。
「お問い合わせ」という部分のみ右揃えにしたいのですが、なぜかかかりません。

<table>は間違っていないかと思うのですが、なぜかからないのかがわからないです。 CSSが適応されていない、左揃えのまま変わりません。 ### 該当のソースコード <HTLM> <table> <tr> <td><img src="素材/55718.jpeg" alt="ロゴ" width="400"></td> <td class="otoiawase">お問い合わせ<td> </tr> </table> <CSS> .otoiawase{ text-align:right; }

試したこと

ここに問題に対して試したことを記載してください。

補足情報（FW/ツールのバージョンなど）

ここにより詳細な情報を記載してください。

退会済みユーザー

2018/08/17 17:42 編集

提示されたコードは、このまま全く同じように書いているのですか？ <css> という表記は、タグとして書いたものですか？

YukariTakamatsu

2018/08/17 17:50

<HTMI><CSS>の部分は質問のために書いただけで実際にコードには書いていません。

退会済みユーザー

2018/08/17 17:53

回答者はあなたのことを知りません。cssを描くには、style というタグを使うということを知っている人なのか知らない人なのかということすらわかりません。あなたのことを知らない人が読んで、わかるように質問を書いてください。

m.ts10806

2018/08/17 21:23

このタイトルでは要件がわかりません。タイトルには要件を書いてください。HTLMという宣言はありません。HTMIというのもありません。プログラムは指示したとおりにしか動かないので1字違えば別の指示です。それだけで動かなくなるので表記は正しくしてください。コードはコードブロック```で囲ってください。テンプレート文言が残っていますが、不要な項目であれば除くか、きちんと埋めてください。あとは「質問するときのヒント」をきちんと読んで、質問として自分の伝えたいことが伝わるか、検討して調整してください（質問は編集することができます）https://teratail.com/help/question-tips 質問投稿画面で[tips]というアイコンがありますのでクリックし、最低限そちらに書かれていることは確認してください。

m.ts10806

2018/08/17 21:26 編集

<>で囲ってしまうとhtml構文上は「タグ」として認識されます。これはこのサイトを見ている多くの回答者はそう認識します。紛らわしいので表現は変えるべきですね。コード部分のみコードブロックで囲えば多少は分かりやすくなりますが、それでも紛らわしい表現は避けるべきです。

行動規範の内容に同意します

回答1件

ベストアンサー

おそらく手元のソースはこのようになっているのだろうと推測します。

html
1<!DOCTYPE HTML>
2<html lang="ja">
3	<head>
4		<meta charset="UTF-8">
5		<title></title>
6		<style type="text/css">
7			.otoiawase {
8				text-align: right;
9			}
10		</style>
11	</head>
12	<body>
13		<table>
14			<tr>
15				<td><img src="https://dummyimage.com/400x60/000/fff" /></td>
16				<td class="otoiawase">お問い合わせ</td>
17			</tr>
18		</table>
19	</body>
20</html>

このソースで、.otoiawase は右寄せに設定さあれています。
どういうことかは、下のソースを見ればわかります。
table にborder を設定しました。
table が画面いっぱいに広がっているわけではないため、「お問い合わせ」は右寄せになっていないかのように見えるだけです。

html
1<!DOCTYPE HTML>
2<html lang="ja">
3	<head>
4		<meta charset="UTF-8">
5		<title></title>
6		<style type="text/css">
7			table {
8				border: 1px solid #CCC;
9			}
10			.otoiawase {
11				text-align: right;
12			}
13		</style>
14	</head>
15	<body>
16		<table>
17			<tr>
18				<td><img src="https://dummyimage.com/400x60/000/fff" /></td>
19				<td class="otoiawase">お問い合わせ</td>
20			</tr>
21		</table>
22	</body>
23</html>

どうすべきかというと、

html
1<!DOCTYPE HTML>
2<html lang="ja">
3	<head>
4		<meta charset="UTF-8">
5		<title></title>
6		<style type="text/css">
7			table {
8				border: 1px solid #CCC;
9				width: 100%;
10			}
11			.otoiawase {
12				text-align: right;
13			}
14		</style>
15	</head>
16	<body>
17		<table>
18			<tr>
19				<td><img src="https://dummyimage.com/400x60/000/fff" /></td>
20				<td class="otoiawase">お問い合わせ</td>
21			</tr>
22		</table>
23	</body>
24</html>