Q&A
コードブロックにはコード／エラーのみを入れるようにしてください。文章はコードブロック外にあるほうが読みやすいです。
また、「うまくできない」とは「何がしたくて」「何をしたときに」「どうなると思って」「どうなったのか」を、具体的に記述されたほうが回答を得られやすいと思います。
flexboxを使って、最終的にはお問い合わせフォームを作成しようと思ております。 まだまだ????の域を出ず、大変お恥ずかしいのですが、ご教示いただけますと幸いです。 下記私の書いたコードに関しましても、ダメ出しなどいただけますと幸いです。 以下ＨＴＭＬコードです。 <!DOCTYPE html> <html lang="ja" dir="ltr"> <head> <meta charset="utf-8"> <title>タブキーのflexbox練習</title> <link rel="stylesheet" href="css/style1.css"> </head> <body> <header> <div class="header-container"> <h1>サンプル</h1> </div> </header> <div class="contents"> <div class="contens-wrapper"> <!-- ここにコメントを入れる。サンプルはここから --> <div class="contents-container"> <div class="contents-title"> <p><span>必須</span>お名前</p> </div> <div class="family-name"> <label>姓：<input type="text" name="family-name" value=""></label> </div> <div class="your-name"> <label>名：<input type="text" name="your-name" value=""></label> </div> </div> </div> </div> </body> </html> 以下ＣＳＳコードです。 @charset "UTF-8"; .contents-container{ display: flex; flex-flow: row; justify-content: space-around; } span{ background-color: #fcb603; } .contens-title{ vertical-align: middle; padding:20px; } h1{ background: #fcb603; padding: 10px; border-bottom: 10px solid #03fc07; }
タイトルだけでは質問点が不明確なので質問本文に補足説明を行ってください。また編集される際はkei344さんの修正の依頼も必ず行ってください。
> 下記私の書いたコードに関しましても、ダメ出しなどいただけますと幸いです。
コードレビューは質問ではなく依頼です。こちらは推奨されていません。
回答1件
0
ベストアンサー
下記でどうでしょうか。
css
1.contents-container{ 2 display: flex; 3 flex-flow: row; 4 justify-content: space-around; 5 align-items: center; /*追加*/ 6} 7span{ 8 background-color: #fcb603; 9} 10.contents-title { 11/* vertical-align: middle; 不要 */ 12 padding:20px; 13}
投稿2020/05/04 02:58
総合スコア33790
あなたの回答
tips
プレビュー
