[Q&A] 初心者サポートお願いします！

@mrbonjin posted at 2023-11-03

このようなレイアウトを行うのであればCSS標準のグリッドレイアウトで行うのが適当ではないかと思います。

tableタグを使ったやり方はCSSがない時代からの旧式のやり方なので今の時代では用いるべきではないです(遺物扱いされてもいいなら別ですが･･･)。
bootstrapもグリッドシステムの考え方ですが、CSSのグリッドレイアウトがサポートされる前に作成されたものなので、今から学ぶのであれば最初に標準のやり方を学んだ方が良いでしょう。

Comments

@mayuge1919
Questioner
ご回答ありがとうございます！
グリットレイアウトが標準だったんですね
bootstrapも調べて試したものなのでよく知りもせず使っていました。
遺物扱いされては、恥ずかしいので覚え直します！
@SurferOnWww
bootstrap は遺物ではありません。table も遺物ではありません。「グリットレイアウトが標準」ということもありません。

適材適所（質問者さんのスキルなど質問者さん独自の諸事情も含めて）で考えるべきです。今回の質問者さんの例で「グリッドレイアウト」がホントに適切なのか、table の方が適切ではないのか、他に適切な手段はないかも考えてみてください。

（組織のコーディングルールなどがあって、table は NG とかの事情があるなら話は別かもしれませんが。ただ、ルールがあるとしても、昔々、ページ全体の段組みに table を使っていたという時代があって、その拒否反応的なものだけかも）
@mayuge1919
Questioner
適材適所その通りだと思います。私のスキル、状況に合わせて頂きありがとうございます。
@mrbonjinさん、@SurferOnWwwさんどちらの意見も参考にさせて頂きます。
改めて、御回答ありがとうございます。

@changkejun posted at 2023-11-02

画面レイアウトに関わるタグは、divのほかに、tableタグがあります。
labelとinputがそれぞれ左揃えしたいから、それぞれをtableタグのtdに配置すれば解決になります。

<table>
<tr class="Nickname">
  <td><label for="...">ニックネーム</label></td>
  <td><input type="text" ... ></td>
</tr>
...
</table>

Comments

@mayuge1919
Questioner
ご回答ありがとうございます！
tdタグ、初めて知りました。
試させて頂きます！

@SurferOnWww posted at 2023-11-02

全部自力で CSS を書くのですか？　それとも、Bootstrap などの利用も考えるのですか？

【追記】

HTML CSSを使い完成図にある通り作成したいのですが名前、ニックネームなどのテキストとの間に余白を作るにはどのようにコードを作成すればよろしいでしょうか？

Bootstrap 5.0 - Horizontal form を紹介しておきます。

Horizontal form
https://getbootstrap.jp/docs/5.0/forms/layout/#horizontal-form

Bootstrap の一つのメリットは、レスポンシブデザイン対応なところです。例えば、表示幅を狭くすると以下のようになります。

完成図のように名前から送信までに背景を適用するにはどのようにコードを作成すればよろしいでしょうか？

それらを div で囲って、それにスタイルを適用すれば良いと思います。上に紹介したデモページを例に使うと以下のような感じ。

Comments

@mayuge1919
Questioner
ご回答ありがとうございます！
Horizontal form と言うものがあるんですね
聞いたこともないもので、ゆっくり理解を深め学んでいきます。
試しに使わせていただきます！

@myr posted at 2023-11-02

ソースコードを提示する際はスクリーンショットではなく、コードブロックを用いてテキストデータとして提示すると回答者が読みやすくなるため、次からそのようにすると良いかと思います。

```
コードブロック
```

このようにバッククオート3つで囲むとコードブロックとして記述できます。

CSSでの画面レイアウトですが、<table>タグはその名の通り表を表す要素として使用するタグであるため、表以外で<table>タグを用いるのは誤った使用方法となります。
<table>タグ以外で横並びを実現する方法はいくつかあるのですが、覚えると汎用性が高く使い勝手の良いflexを利用することをおすすめします。

参考：https://www.webcreatorbox.com/tech/css-flexbox-cheat-sheet

<html>
    <head>
        <style>
            .form .form-row {
                display: flex;
                align-items: center;
                background-color: #999;
                margin: 40px 20px 0;
            }

            .form .form-row .label {
                flex-basis: 240px;
            }

            .form .form-row .input-area {
                flex-basis: 400px;
            }
        </style>
    </head>

    <body>
        <div class="form">
            <div class="form-row">
                <div class="label">名前</div>
                <div class="input-area">
                    <input type="text" name="name" placeholder="名前を入力">
                </div>
            </div>

            <div class="form-row">
                <div class="label">ニックネーム</div>
                <div class="input-area">
                    <input type="text" name="nickname" placeholder="ニックネームを入力">
                </div>
            </div>

            <!-- 中略 -->
        </div>
    </body>
</html>

Comments

@mayuge1919
Questioner
無知を晒してしまい、すみません
コードブロックの使い方、理解できました。
次回からは見やすく、投稿しますので
機会があればまたお願いします！

flexを用いてのコード汎用性が高いのはとても魅力的です。
よく理解し、どんどん使っていこうと思います！

初心者サポートお願いします！

解決したいこと

発生している問題

自分で試したこと

4Answer

Comments

Comments

Comments

Comments

Your answer might help someone💌

Popular Questions