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