解決済み
3回答
うな
2023年02月16日 15:17
(編集済み)
各フォームのラベルと入力欄を横並びにしたかったです。
実行結果が一緒になりません。
出来るだけhtml/cssをもう一度遡りましたが見つけることが出来ませんでした。
また、検証ツールを使ったのですがイマイチ使い方を把握できずです。
全3件の回答
朝日奈 聖弥
講師2023年02月17日 01:39
ご質問ありがとうございます。講師の朝日奈です。
ご質問の内容について回答いたします。
共有していただいた画像を確認させていただきましたが、現時点では原因を断定できかねます。
お手数をおかけしますが、HTML及びCSSのコードの全文をこのメッセージ欄に貼り付けていただければと思います。
コードの貼り付けは、バッククオーテーション(`)3つで以下のようにすると貼り付けできます。
1<div>Hello</div>Copy
うな
2023年02月17日 06:21
(編集済み)
1 <section id="company"> 2 <h2 class="index-h2">COMPANY</h2> 3 <h3>会社概要</h3> 4 <table id="company-table"> 5 <tr> 6 <th class="tableheader-first">会社名</th> 7 <td class="cell-first">株式会社SocialTech</td> 8 </tr> 9 <tr> 10 <th class="tableheader">所在地</th> 11 <td class="cell">〒150-0043 東京都渋谷区道玄坂２丁目11-1 Gスクエア渋谷道玄坂４F<br>JR山手線「渋谷駅」より徒歩3分</td> 12 </tr> 13 <tr> 14 <th class="tableheader">代表者</th> 15 <td class="cell">代表取締役 田中 太郎</td> 16 </tr> 17 <tr> 18 <th class="tableheader">設立</th> 19 <td class="cell">2015年3月19日</td> 20 </tr> 21 </table> 22 <iframe 23 src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3241.7759544892483!2d139.69399665123464!3d35.65789123876098!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x60188caa0042e8d1%3A0xba130bea826a7aa2!2z44CSMTUwLTAwNDMg5p2x5Lqs6YO95riL6LC35Yy66YGT546E5Z2C77yS5LiB55uu77yR77yR4oiS77yR!5e0!3m2!1sja!2sjp!4v1636872991912!5m2!1sja!2sjp" 24 style="border:0;" allowfullscreen="" loading="lazy"> 25 </iframe> 26 </section> 27 <section> 28 <h2 class="index-h2">CONTACT</h2> 29 <h3>お問い合わせ</h3> 30 <form> 31 <div> 32 <div class="contact-heading"> 33 <label class="contact-label">お名前<span class="contact-span">必須</span></label> 34 </div> 35 <div class="contact-form"> 36 <input type="text" name="name" placeholder="入力してください" class="contact-textbox"> 37 </div> 38 </div> 39 <div> 40 <div class="contact-heading"> 41 <label class="contact-label">フリガナ<span class="contact-span">必須</span></label> 42 </div> 43 <div> 44 <input type="text" name="hurigana" placeholder="入力してください" class="contact-textbox"> 45 </div> 46 </div> 47 <div> 48 <div class="contact-heading"> 49 <label class="contact-label">メールアドレス<span class="contact-span">必須</span></label> 50 </div> 51 <div> 52 <input tyle="text" name="name" placeholder="入力してください" class="contact-textbox"> 53 </div> 54 </div> 55 <div> 56 <div class="contact-heading"> 57 <label class="contact-label">電話番号</label> 58 </div> 59 <div> 60 <input type="text" name="name" placeholder="入力してください" class="contact-textbox"> 61 </div> 62 </div> 63 <div> 64 <div class="contact-heading"> 65 <label class="contact-label">お問い合わせ内容<span class="contact-span">必須</span></label> 66 </div> 67 <div> 68 <textarea class="contact-textarea" placeholder="入力してください" name="message"></textarea> 69 </div> 70 </div> 71 <div> 72 <div class="contact-heading"> 73 <label class="contact-label">ご希望の連絡先<span class="contact-span">必須</span></label> 74 </div> 75 <div> 76 <input class="radiobutton" type="radio" value="tel" name="contact" checked><label>お電話</label> 77 <input class="radiobutton" type="radio" value="mail" name="contact"><label>メール</label> 78 <input class="radiobutton" type="radio" value="both" name="contact"><label>どちらでも</label> 79 </div> 80 </div> 81 <div> 82 <div class="contact-heading"> 83 <label class="contact-label">個人情報の取り扱い</label> 84 </div> 85 <div> 86 <details> 87 <summary>お問い合わせフォームの個人情報取り扱いについて</summary> 88 <div> 89 <span>1. 組織の名称又は氏名</span><br> 90 株式会社SocialTech<br><br> 91 <span>2. 個人情報保護管理者（若しくはその代理人）の使命又は職名、所属及び連絡先 92 鈴木 一郎 コープレート部</span><br> 93 メールアドレス:support@socialtech.net<br> 94 TEL:03-xxxx-xxxx<br> 95 <span>3. 個人情報の利用目的</span><br> 96 ・本サービス及び本サービスに関する情報の提供又はそれらに関する連絡のため<br> 97 ・ユーザーの本人確認のため<br> 98 ・当社サービスのご案内のため<br> 99 ・当社の商品等の広告または宣伝（電子メールによるものを含むものとします。）<br><br> 100 <span>4. 個人情報の取り扱い業務の委託</span><br> 101 個人情報の取り扱い業務の全部または一部を外部に業務委託捨場合があります。<br> 102 その際、弊社は、個人情報を適切に保護できる管理体制を敷き実行していることを条件として<br> 103 委託先を厳選した上で、秘密保持契約を委託先と締結し、お客様の個人情報を厳密に管理させます。<br><br> 104 <span>5. 個人情報の開示等の請求</span><br> 105 お客様は、弊社に対してご自身の個人情報の開示等（利用目的の通知、開示、内容の訂正、追加、削除、路用の停止又は削除、第三者への提供の停止）に関して、当社問い合わせ窓口に申し出ることが出来ます。<br> 106 その際、弊社はお客様ご本人を確認させていただいたうえで、合理的な期間内に対応いたします。<br><br> 107 なお、個人情報に関する弊社問い合わせ先は次の通りです。<br><br> 108 株式会社SocialTech 個人情報問い合わせ口<br> 109 〒150-0043 東京都渋谷区道玄坂２丁目11-1 Gスクエア渋谷道玄坂４F<br> 110 メールアドレス:support@socialtech.net TEL03-xxxx-xxxx<br><br> 111 <span>6. 個人情報を提供されることの任意性について</span><br><br> 112 お客様がご自身の個人情報を弊社に提供されるか否かは、お客様のご判断によりますが、もしご提供されなかった場合には、適切なサービスが提供できない場合がございますので予めご了承ください。 113 </div> 114 </details> 115 <input type="checkbox" name="agree"> 116 <span>個人情報の取り扱いについてご同意いただける場合は、チェックをしてください。</span> 117 </div> 118 </div> 119 <input type="image" src="images/button-submit.png" alt="送信する"> 120 </form> 121 </section> 122 </article> 123 </main> 124 </body> 125</html>Copy
文字数の関係で会社概要のところからです。
キャンセル
うな
2023年02月17日 06:19
1 margin: 80px auto 80px auto; 2 } 3 4 5 #company-table { 6 width: 100%; 7 } 8 9 .tableheader { 10 text-align: left; 11 padding:20px; 12 border-bottom-color: #2710d5; 13 border-bottom-width: 1px; 14 border-bottom-style: solid; 15 width: 100px; 16 } 17 18 .tableheader-first { 19 text-align: left; 20 padding:20px; 21 border-bottom-color: #2710d5; 22 border-bottom-width: 1px; 23 border-bottom-style: solid; 24 border-top-color: #2710d5; 25 border-top-width: 1px; 26 border-top-style: solid; 27 width: 100px; 28 } 29 30 .cell { 31 padding:30px; 32 border-bottom-color: #ececec; 33 border-bottom-width: 1px; 34 border-bottom-style: solid; 35 } 36 37 .cell-first { 38 padding:30px; 39 border-bottom-color: #ececec; 40 border-bottom-width: 1px; 41 border-bottom-style: solid; 42 border-top-color:#ececec; 43 border-top-width: 1px; 44 border-top-style: solid; 45 } 46 47 #company > iframe { 48 width: 100%; 49 height: 368px; 50 margin-top: 40px; 51 } 52 53 54 55 #contact { 56 margin: 80px auto 80px auto; 57 } 58 59 #contact > form > div { 60 display: flex; 61 flex-direction: row; 62 flex-wrap: wrap; 63 padding-bottom: 30px; 64 } 65 66 .contact-heading { 67 width: 240px; 68 align-self: center; 69 } 70 71 .contact-label { 72 font-weight: bold; 73 } 74 75 .contact-span { 76 color: red; 77 margin-left: 20px; 78 font-weight: bold; 79 }Copy
よろしくお願いいたします。
佐藤 聡亮
講師2023年02月17日 08:47
質問有り難う御座います。
講師の佐藤です。
以下のような感じで横並びにできるかと思いますので、お試しください。
1 2.company-table tr { 3 display:flex; 4} 5Copy
よろしくお願い致します。
+過去10件の返信を表示
うな
2023年02月18日 08:49
横並びになっていました！
ありがとうございました！
キャンセル
キャンセル
