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

前提・実現したいこと

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

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だけでなら作れそうなので一度作ってみます！ありがとうございます。

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

回答2件

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

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

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

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

自己解決

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

元々

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