質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
86.12%
Webサイト

一つのドメイン上に存在するWebページの集合体をWebサイトと呼びます。

デザイン

プログラミングでのデザインとは、プログラムの構成や、使用の信頼性・持続性・正確性・利便性の目標達成にはどうするのがベストなのか特定の選択を行うことです。

コードレビュー

コードレビューは、ソフトウェア開発の一工程で、 ソースコードの検査を行い、開発工程で見過ごされた誤りを検出する事で、 ソフトウェア品質を高めるためのものです。

受付中

【XDデータからコーディング】要素をデザイン通りに並べられない

退会済みユーザー

退会済みユーザー

総合スコア0

Webサイト

一つのドメイン上に存在するWebページの集合体をWebサイトと呼びます。

デザイン

プログラミングでのデザインとは、プログラムの構成や、使用の信頼性・持続性・正確性・利便性の目標達成にはどうするのがベストなのか特定の選択を行うことです。

コードレビュー

コードレビューは、ソフトウェア開発の一工程で、 ソースコードの検査を行い、開発工程で見過ごされた誤りを検出する事で、 ソフトウェア品質を高めるためのものです。

0回答

0リアクション

0クリップ

702閲覧

投稿2021/09/23 15:12

前提・実現したいこと

WebサイトをAdobe XDデータを見ながらコーディングしています。
お問い合わせフォームのようなものを作成しているのですが、デザイン通りに要素を並べられていません。

目指しているデザイン
イメージ説明

コーディング中画面
イメージ説明

発生している問題・エラーメッセージ

要素をうまく並べられません。

該当のソースコード

HTML <div class="line" id="contentLine"></div> <p class="consultation">ご相談内容種別</p> <!--必須--> <div class="boxSquare"><p>必須</p></div> <!--チェックボックス--> <input type="checkbox" id="checkbox_A" name="checkbox01" checked="checked"> <label for="chkboxA" class="checkbox_1">チェックボックス1</label> <input type="checkbox" id="checkbox_B" name="checkbox01"> <label for="chkboxB" class="checkbox_1">チェックボックス2</label> <input type="checkbox" id="checkbox_C" name="checkbox01"> <label for="chkboxC" class="checkbox_1">チェックボックス3</label> <!--罫線--> <div class="line" id="contentLine"></div> <p class="consultation">ご相談内容</p> <!--必須--> <div class="boxSquare"><p>必須</p></div> <!--ご相談内容テキストエリア--> <div class="textarea_1"><textarea name="consultationBox"></textarea></div> <!--罫線--> <div class="line" id="contentLine"></div>
CSS  #contentLine { margin: auto; width: 1180px; height: 1px; display: inline-block; margin-left: 93px; background: #B9B9B9; } .consultation { display: inline; font-size: 16px; font-family: YuGothic; font-weight: bold; } .boxSquare { display: inline-block; width: 38px; height: 20px; background: #D73635; border-radius: 5px; line-height: 23px; } .boxSquare p{ text-align: center; font-size: 12px; font-family: YuGothic; font-weight: bold; padding: 0; margin: 0; color: #fff; } input[type=checkbox] { display: none; } .checkbox_1 { box-sizing: border-box; display: block; cursor: pointer; position: relative; padding: 5px 30px; width: auto; margin-left: 93px; } .checkbox_1::before { display: block; border: 1px solid #A8A8A8; border-radius: 3px; content: ''; height: 16px; left: 5px; margin-top: -8px; position: absolute; top: 50px; width: 16px; background: #fff; } .checkbox_1::after { display: block; border-right: 3px solid #266AAD; border-bottom: 3px solid #266AAD; content: ''; width: 5px; height: 9px; left: 10px; margin-top: -7px; opacity: 0; position: absolute; top: 50px; transform: rotate(45deg); } input[type=checkbox]:checked + .checkbox01::after { opacity: 1; } .checkbox_1:hover { background: #F5F5F5; } textarea { display: block; width: 809px; height: 160px; resize: none; } .textarea_1 { text-align: right; }

補足情報(FW/ツールのバージョンなど)

VS Codeを使ってコーディングしています。

以下のような質問にはリアクションをつけましょう

  • 質問内容が明確
  • 自分も答えを知りたい
  • 質問者以外のユーザにも役立つ

リアクションが多い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

気になる質問をクリップする

クリップした質問は、後からいつでもマイページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

下記のような質問は推奨されていません。

  • 間違っている
  • 質問になっていない投稿
  • スパムや攻撃的な表現を用いた投稿

適切な質問に修正を依頼しましょう。

まだ回答がついていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
86.12%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問

同じタグがついた質問を見る

Webサイト

一つのドメイン上に存在するWebページの集合体をWebサイトと呼びます。

デザイン

プログラミングでのデザインとは、プログラムの構成や、使用の信頼性・持続性・正確性・利便性の目標達成にはどうするのがベストなのか特定の選択を行うことです。

コードレビュー

コードレビューは、ソフトウェア開発の一工程で、 ソースコードの検査を行い、開発工程で見過ごされた誤りを検出する事で、 ソフトウェア品質を高めるためのものです。