cssだけを用いて、上下2つの文字の塊を文字の始まりを左寄せにしつつ、上のひらがなは、右端の矢印に寄せたいです。
例）
Ruby on RailsでQiitaのようなWebアプリをつくっています。
記事を投稿する機能の実装中にエラーが発生しました。
解決方法を教えて下さい。
例）
NameError (uninitialized constant World)
プ
ソースコードを入力
例）
def greet
puts Hello World
end
chatGPTを用いて、上下２つの文字の左端を揃えつつ、上の文字を右の矢印に寄せる方法を試しました。
しかし、どの提案も、javascriptの使用を推奨すると書かれました。
cssって無能なんですか。
最近のcssはアニメーションもできるのですよ！
質問への回答ではないですが、
chatGPTを用いて、上下２つの文字の左端を揃えつつ、上の文字を右の矢印に寄せる方法を試しました。
しかし、どの提案も、javascriptの使用を推奨すると書かれました。
これはおそらくプロンプトの問題かと思います。
以下のプロンプトでそれらしいレイアウトのHTMLとCSSが出力されました。
プロンプトエンジニアリングという言葉もある通り、ChatGPTなどLLMを使いこなすにはどういうプロンプトを投げられるかが鍵になります。
思った回答が得られなければ、もう少し質問の内容を工夫してみるとよいかもしれません。
HTMLとCSSで以下のレイアウト実現したいです。
・ひらがなと英語名が上下に分かれている１くくりの要素
・それらが横に並んでいて、左右外側に寄せて配置
・テキストは左寄せ
例）
日の出 汐留
hinode Shiodome
あともう１点、質問なのですが、CSSについてある程度体系的に学ばれたことはありますでしょうか？
これまでの質問の内容から、ChatGPTに質問を投げて、出てきたHTML・CSSをとりあえず貼り付けながら実装しているように見受けられました。
学習のためにChatGPTを活用しているのであればよいとは思うのですが、何かアプリを製作している段階でよくわからないまま出力されたソースを貼り付けて実装していくのはあまりお勧めできないです…
「おおさかじょうこうえん」「osakajokoen」の文字を左寄せで上下に並べて表示し、その２つの文字全体を外枠の右に寄せるレイアウトのhtmlを書いてください。
以下のHTMLコードは、「おおさかじょうこうえん」と「osakajokoen」の文字を左寄せで上下に並べて表示し、それらを外枠の右側に寄せるレイアウトを実現します。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
.container {
display: flex;
justify-content: flex-end;
border: 1px solid black;
height: 200px;
}
.text-wrapper {
text-align: left;
}
</style>
<title>文字のレイアウト</title>
</head>
<body>
<div class="container">
<div class="text-wrapper">
<div>おおさかじょうこうえん</div>
<div>osakajokoen</div>
</div>
</div>
</body>
</html>