@sembokulove (Missing place)

Are you sure you want to delete the question?

Leaving a resolved question undeleted may help others!

cssだけを用いて、上下2つの文字の塊を文字の始まりを左寄せにしつつ、上のひらがなは、右端の矢印に寄せたいです。

Q&A

Closed

解決したいこと

cssだけを用いて、上下2つの文字の塊を文字の始まりを左寄せにしつつ、上のひらがなは、右端の矢印に寄せたいです。

例)
Ruby on RailsでQiitaのようなWebアプリをつくっています。
記事を投稿する機能の実装中にエラーが発生しました。
解決方法を教えて下さい。

発生している問題・エラー


例)

NameError (uninitialized constant World)

css 質問 下半分 20240613 Thu.png
uploading...0

該当するソースコード

ソースコードを入力

例)

def greet
  puts Hello World
end

chatGPTを用いて、上下2つの文字の左端を揃えつつ、上の文字を右の矢印に寄せる方法を試しました。
しかし、どの提案も、javascriptの使用を推奨すると書かれました。
cssって無能なんですか。
最近のcssはアニメーションもできるのですよ!

1 likes

2Answer

質問への回答ではないですが、

chatGPTを用いて、上下2つの文字の左端を揃えつつ、上の文字を右の矢印に寄せる方法を試しました。
しかし、どの提案も、javascriptの使用を推奨すると書かれました。

これはおそらくプロンプトの問題かと思います。
以下のプロンプトでそれらしいレイアウトのHTMLとCSSが出力されました。

プロンプトエンジニアリングという言葉もある通り、ChatGPTなどLLMを使いこなすにはどういうプロンプトを投げられるかが鍵になります。
思った回答が得られなければ、もう少し質問の内容を工夫してみるとよいかもしれません。

HTMLとCSSで以下のレイアウト実現したいです。

・ひらがなと英語名が上下に分かれている1くくりの要素
・それらが横に並んでいて、左右外側に寄せて配置
・テキストは左寄せ

例)
日の出         汐留
hinode        Shiodome

See the Pen Untitled by yotty (@yotty) on CodePen.

1Like

Comments

  1. あともう1点、質問なのですが、CSSについてある程度体系的に学ばれたことはありますでしょうか?

    これまでの質問の内容から、ChatGPTに質問を投げて、出てきたHTML・CSSをとりあえず貼り付けながら実装しているように見受けられました。
    学習のためにChatGPTを活用しているのであればよいとは思うのですが、何かアプリを製作している段階でよくわからないまま出力されたソースを貼り付けて実装していくのはあまりお勧めできないです…

  2. cssはデザインをするところで、jsは命令をするところです。
    あくまで、フォントの配置の指示はcssで解決できるところです。
    でなければ、cssの必要性が反故にされてしまう。

  3. cssはデザインをするところで、jsは命令をするところです。
    あくまで、フォントの配置の指示はcssで解決できるところです。
    でなければ、cssの必要性が反故にされてしまう。

    質問者様への返信だったらすみません。
    これは私への返信でしょうか…?

    私も文字の配置はCSSですべきだと思います。
    CodePenの例を見ていただければわかると思いますが、JavaScriptは一切使わずに実装されています。

  4. 間違っていたらすみません。
    もしかしてなのですが、@izumikota2014さんは質問者様(@sembokulove)と同一人物でしょうか?

    cssはデザインをするところで、jsは命令をするところです。
    あくまで、フォントの配置の指示はcssで解決できるところです。
    でなければ、cssの必要性が反故にされてしまう。

    だとすると、私の理解力が浅くこちらのコメントの意図が読み取れませんでした...。:bow:
    元の質問に「ChatGPTからjsの使用を推奨される」とあったので、「プロンプトを工夫すればHTMLとCSSだけの出力が得られます」という回答をしておりました。
    こちらのコメントはどういったことだったのでしょうか?

  5. cssでは済まない問題なのですね。
    たかがフォントの配置ごときなのに。

  6. CodePenのソースは確認されましたでしょうか?
    CSSのみで実装しています。

    もしかしてなのですが、「プロンプト」という言葉を誤解されているかもしれません。
    「プロンプト」はChatGPT(AI)になげる命令文のことを指しています。

    何度もお伝えしている通りですが、文字の配置はHTMLとCSSだけで実装できます。

「おおさかじょうこうえん」「osakajokoen」の文字を左寄せで上下に並べて表示し、その2つの文字全体を外枠の右に寄せるレイアウトの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>
0Like

Your answer might help someone💌