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

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

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

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

Webサイト

一つのドメイン上に存在するWebページの集合体をWebサイトと呼びます。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

CSS

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

Q&A

解決済

2回答

422閲覧

フォームの入力時刻を適切に表示したい

Alex_M

総合スコア32

HTML5

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

Webサイト

一つのドメイン上に存在するWebページの集合体をWebサイトと呼びます。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

CSS

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

0グッド

0クリップ

投稿2020/06/25 18:05

前提・実現したいこと

Webページ上で入力内容がブラウザ画面に表示される擬似的なメモ帳を作成しています。

以下の画像の時間の部分(2020/06/26 24:48:13)を黄色の枠線内の右上(ページの右上)に表示したいです。
![イメージ説明
(この画像は「新しいメモ」と入力して投稿ボタンを押したものです。)

初めはフォームと投稿ボタン、そのしたの棒線のみを表示し、
フォームに任意の入力をして投稿ボタンを押すと入力した時間と内容が黄色い枠線に囲まれて表示させることが目標です。
その際、時間が右上づめ、入力内容が左づめになるように表示したいです。

発生している問題・エラーメッセージ

適切な右詰の書き方がわかりません。

現在は何も指定していない入力内容は左づめですが、時間は枠外に表示されてしまっています。

divタグにcssを適用すると全部右詰になってしまい、pタグには使用できないので解決方法が分からなかったため質問させていただきました。

該当のソースコード

html

1<html> 2<head> 3 <meta charset="UTF-8" /> 4 <title>JavaScript Test</title> 5 <link rel="stylesheet" href="sample.css" /> 6 <script src="sample.js"></script> 7</head> 8 9<body> 10 <h1>メモが追加できます</h1> 11 <form> 12 <textarea id="textarea" rows="4" cols="40" placeholder="次のメモ"></textarea> 13 <button type="button" onclick="textcopy()">投稿</button> 14 <hr> 15 <div id="insert"> 16 </div> 17 </form> 18</body> 19</html>

javascript

1function textcopy() { 2 //年月日時間を取得 3 var now = new Date(); 4 var y = now.getFullYear(); 5 var m = now.getMonth() + 1; 6 var d = now.getDate(); 7 var hou = now.getHours(); 8 var min = now.getMinutes(); 9 var sec = now.getSeconds(); 10 if (m < 10) { 11 m = '0' + m; 12 } 13 if (d < 10) { 14 d = '0' + d; 15 } 16 //console.log(y + "/" + m + "/" + d); d 17 var time = y + "/" + m + "/" + d + " " + hou + ":" + min + ":" + sec; 18 console.log(time); 19 // テキストエリアの内容を取得 20 var textarea = document.getElementById("textarea").value; 21 // テキストエリアの内容を消去 22 document.getElementById("textarea").value = ""; 23 // これまでに追加されたテキストとの連結を行う 24 textarea = "<div>" + time.fontsize(2) + "<p class='memo'>" + "<br>" + 25 textarea + "</p>" + "</div>" + document.getElementById("insert").innerHTML; 26 // "insert"のidが指定されたの要素の中に挿入 27 document.getElementById("insert").innerHTML = textarea; 28}

css

1.memo { 2 padding: 2.5em 1em; 3 margin: 2em 0; 4 border: solid 4px rgb(244,212,155); 5 /*線*/ 6 border-radius: 7px; 7 /*角の丸み*/ 8} 9

試したこと

text-align: right;
を適用するためにいろいろJavaScript内で書き換えたのですが、解決できませんでした。

JavaScriptを勉強し始めたばかりで、どこが不適切なコードなのか、解決方法を調べても正しく理解できているのかわかりませんでした。
稚拙な質問ですが、どうかご教授くださると幸いです。

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

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

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

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

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

kei344

2020/06/25 18:07

JavaScriptの問題ではなくHTML/CSSの問題では?
Alex_M

2020/06/25 18:12

コメントありがとうございます。 JavaScriptの方でinnerHTMLを使用しているのでそこに間違いがあると思っていたのですが、、、 どこが間違っているか自分ではわからなかったため質問致しました。 何か不足している情報があればすぐに追記いたしますのでどうかよろしくお願い位します。
kei344

2020/06/25 18:18

HTMLの要素をJavaScriptで追加しているだけなので、位置についてはHTMLの構造とCSSで処理するものです。まずJavaScript関係なしにHTMLとCSSで目的の構造を作り、それをJavaScriptで組み立てるようにしてみてはいかがでしょう。
Alex_M

2020/06/25 18:23

確かにそうですね。 その方法は思いつきませんでした。。 html,cssだけでなら作れそうなので一度作ってみます! ありがとうございます。
guest

回答2

0

「黄色の枠内に表示したい」、というのを見落としていたので修正。

JavaScript

1textarea = "<div>" + "<p class='memo'>" + "<span class='timestamp'>" + time.fontsize(2) + "</span>" + "<br>" + 2 textarea + "</p>" + "</div>" + document.getElementById("insert").innerHTML;

CSS

1.timestamp { 2 display: block; 3 text-align: right; 4}

投稿2020/06/25 23:30

編集2020/06/26 08:26
Daregada

総合スコア11990

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

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

Alex_M

2020/06/26 08:19

回答ありがとうございます。 私も一度同じように考えたのですが、それでも外に出ていた時間が右に詰められるだけで枠内に入りませんでした。
Daregada

2020/06/26 08:24

ああ、黄色の枠内に表示したいってことね。見落としていた。 訂正したのを回答に書きますね。
Alex_M

2020/06/26 09:15

訂正までありがとうございます! また私の方でも自己解決することができました。
guest

0

自己解決

いくつかの修正方法があると思いますが、とりあえず自己解決した方法を記述します。

元々

javascript

1//改善前 2 textarea = "<div>" + time.fontsize(2) + "<p class='memo'>" + "<br>" + 3 textarea + "</p>" + "</div>" + document.getElementById("insert").innerHTML;

css

1//改善前 2.memo { 3 padding: 2.5em 1em; 4 margin: 2em 0; 5 border: solid 4px rgb(244,212,155); 6 /*線*/ 7 border-radius: 7px; 8 /*角の丸み*/ 9}

と記述していましたが、これではdivタグに何もクラスがついていないため、入力された内容(pタグクラスmemo)のみにcssが適用されていました。
JavaScriptの方でdivタグにクラスをつけて、cssの方でそちらに適用させれば解決いたします。

Javascript

1//改善後 2textarea = "<div class='frame'>" + "<p class='time-log'>" 3+ time.fontsize(2) + "</p>" + "<p class='memo'>" + textarea 4+ "</p>" + "</div>" + document.getElementById("insert").innerHTML;

css

1.frame { 2 padding: 0 1em 0 2em; 3 margin: 2em 0; 4 border: solid 4px rgb(244,212,155); 5 /*線*/ 6 border-radius: 7px; 7 /*角の丸み*/ 8} 9 10.time-log { 11 text-align: right; 12} 13

またDaregadaさん、回答ありがとうございました。

投稿2020/06/26 09:20

Alex_M

総合スコア32

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.35%

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

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

質問する

関連した質問