justify-contentは基本的にCSS flexible box layoutのPropertyなので、
display : flex ; ではないと動作しないと思います。
2Like
section要素を中央寄せにできない
解決したいこと
htmlにて、section要素を中央寄せにしたいのですが、
見慣れないエラーによりcssの適用がブロックされてしまいます。
解決方法を教えてください。
発生している問題・エラー
display: table プロパティによって justify-content の適用がブロックされています。
display を table 以外に設定してみてください。
該当するソースコード
発生している問題・エラー
display: table プロパティによって justify-content の適用がブロックされています。
display を table 以外に設定してみてください。
例）
または、問題・エラーが起きている画像をここにドラッグアンドドロップ
該当するソースコード
<?php
//ここでエラーチェックして、変数に入れ、エラーの場合はエラーメッセージ出力、エラーじゃない場合はheaderで遷移。
//その際入力内容の値はセッションを利用して渡す。セッションはいらなくなったタイミング（送信時、完了ページ？）でunset
session_start();
$error_exist = 0;
if(isset($_POST["button"])){
$_SESSION["name"] = $_POST["name"];//次ページで値取れるようにセッションに格納
$_SESSION["kana"] = $_POST["kana"];
$_SESSION["tel"] = $_POST["tel"];
$_SESSION["email"] = $_POST["email"];
$_SESSION["body"] = $_POST["body"];
if(empty($_POST["name"]) || mb_strlen($_POST["name"]) > 10){
$error_name = '<dd id="name_error" class="error" style="display:block">氏名は必須入力です。10文字以内でご入力ください。</dd>';
$error_exist = 1;
}
if(empty($_POST["kana"]) || mb_strlen($_POST["kana"]) > 10){
$error_kana = '<dd class="error" style="display:block">フリナガは必須入力です。10文字以内でご入力ください。</dd>';
$error_exist = 1;
}
// if(!preg_match("/^[0-9]+$/", $_POST["tel"])){
// $error_tel = '<dd class="error" style="display:block">電話番号は0-9の数字のみでご入力ください。</dd>';
// $error_exist = 1;
// }
if(!preg_match("/^[0-9]+$/", $_POST["tel"]) && $_POST["tel"] != "" ){
$error_tel = '<dd class="error" style="display:block">電話番号は0-9の数字のみでご入力ください。</dd>';
$error_exist = 1;
}
// if (!is_numeric($_POST["tel"])){//こっちは小数も含む
// $error_tel = '<dd class="error" style="display:block">電話番号は0-9の数字のみでご入力ください。</dd>';
// $error_exist = 1;
// }
//if(empty($_POST["email"]) || !preg_match("/^[A-Za-z0-9]+@.{1}[A-Za-z0-9_.-]+$/", $_POST["email"]) || !preg_match("/^[x]+@.{1}[x]+$/", $_POST["email"]))
if(empty($_POST["email"]) || !preg_match("/^[A-Za-z0-9]+@.{1}[A-Za-z0-9_.-]+$/", $_POST["email"])){
$error_email = '<dd class="error" style="display:block">メールアドレスは正しくご入力ください。</dd>';
$error_exist = 1;
echo "email_error";
}
if(empty($_POST["body"])){
$error_body = '<dd class="error" style="display:block">お問い合わせ内容は必須入力です。</dd>';
$error_exist = 1;
}
if($error_exist == 0) {
header('Location:confirm.php');
//exit();
}
var_dump($error_exist);
// 接続設定
//例外処理
// データベースに接続
// データの取得
}
?>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Lesson Sample Site</title>
<link rel="stylesheet" type="text/css" href="css/style.css">
<link rel="stylesheet" type="text/css" href="css/sp.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body id="app" v-on="click: closeMenu">
<header class="contact">
<nav class="motion">
<div class='logo'><a href="cafe.php"><img src="cafe/img/logo.png" alt='Cafe'></a></div>
<div class='g_nav'>
<div class='menu'><a href="index.html#cafe_intro">はじめに</a></div>
<div class='menu'><a href="index.html#cafe_exp">体験</a></div>
<div class='menu'><a href="contact.php">お問い合わせ</a></div>
</div>
<div class='sign'>
<!-- <div class='signup'>登録</div> -->
<div class='signin _click' v-on="click: openModal">サインイン</div>
<div class='sp _click' v-on="click: spMenu=!spMenu"><img src="cafe/img/menu.png" alt="スマホメニュー"></div>
<div class='sp_nav sp_nav_motion' v-if="spMenu">
<div class='sp_signin _click' v-on="click: openModal">サインイン</div>
<div class='sp_menu _click'><a href="index.html#cafe_intro">はじめに</a></div>
<div class='sp_menu _click'><a href="index.html#cafe_exp">体験</a></div>
<div class='sp_menu'><a href="contact.php">お問い合わせ</a></div>
</div>
</div>
</nav>
</header>
<open-modal v-show="showContent" v-on="click: closeModal"></open-modal>
<section>
<div class="contact_box">
<h2>お問い合わせ</h2>
<form action="" method="post">
<h3>下記の項目をご記入の上送信ボタンを押してください</h3>
<p>送信頂いた件につきましては、当社より折り返しご連絡を差し上げます。</p>
<p>なお、ご連絡までに、お時間を頂く場合もございますので予めご了承ください。</p>
<p><span class="required">*</span>は必須項目となります。</p>
<dl>
<dt><label for="name">氏名</label><span class="required">*</span></dt>
<!-- <dd id="name_error" class="error" >氏名は必須入力です。10文字以内でご入力ください。</dd> -->
<?php //echo "<p style='color:red'>" . $error . '</p>'; ?>
<?php if(isset($_POST["button"])){
if(empty($_POST["name"]) || mb_strlen($_POST["name"]) > 10){
// $error = "氏名は必須入力です。";
// echo "<p style='color:red'>" . $error . '</p>';
echo $error_name;
}
}
//echo "<p style='color:red'>" . $error . '</p>'; ?>
<dd><input type="text" name="name" id="name" placeholder="山田太郎" value="<?php if( !empty($_SESSION['name']) ){ echo $_SESSION['name']; } ?>"></dd>
<dt><label for="kana">フリガナ</label><span class="required">*</span></dt>
<!-- <dd class="error">フリナガは必須入力です。10文字以内でご入力ください。</dd> -->
<?php if(isset($_POST["button"])){
if(empty($_POST["kana"]) || mb_strlen($_POST["kana"]) > 10){
echo $error_kana;
}
}?>
<dd><input type="text" name="kana" id="kana" placeholder="ヤマダタロウ" value="<?php if( !empty($_SESSION['kana']) ){ echo $_SESSION['kana']; } ?>"></dd>
<dt><label for="tel">電話番号</label></dt>
<!-- <dd class="error">電話番号は0-9の数字のみでご入力ください。</dd> -->
<?php if(isset($_POST["button"])){
if(!preg_match("/^[0-9]+$/", $_POST["tel"]) && $_POST["tel"] != ""){// && $_POST["tel"] != ""追記
echo $error_tel;
}
}?>
<dd><input type="text" name="tel" id="tel" placeholder="09012345678" value="<?php if( !empty($_SESSION['tel']) ){ echo $_SESSION['tel']; } ?>"></dd>
<dt><label for="email">メールアドレス</label><span class="required">*</span></dt>
<!-- <dd class="error">メールアドレスは正しくご入力ください。</dd> -->
<?php if(isset($_POST["button"])){
if(empty($_POST["email"]) || !preg_match("/^[A-Za-z0-9]+@.{1}[A-Za-z0-9_.-]+$/", $_POST["email"])){
echo $error_email;
}
}?>
<dd><input type="text" name="email" id="email" placeholder="test@test.co.jp" value="<?php if( !empty($_SESSION['email']) ){ echo $_SESSION['email']; } ?>"></dd>
</dl>
<h3><label for="body">お問い合わせ内容をご記入ください<span class="required">*</span></label></h3>
<dl class="body">
<!-- <dd class="error">お問い合わせ内容は必須入力です。</dd> -->
<?php if(isset($_POST["button"])){
if(empty($_POST["body"])){
echo $error_body;
}
}?>
<dd><textarea name="body" id="body" value="<?php ?>"><?php if( !empty($_SESSION['body']) ){ echo $_SESSION['body'];} ?></textarea></dd>
<dd><button id='submit' type="submit" name="button">送 信</button></dd>
</dl>
</form>
</div>
</section>
<section id="db_table" style="display: table;">
<?php
//var_dump($_SESSION["body"]);
//session_start();
// 接続設定
$user = 'root';
$pass = 'root';
//例外処理
try {
// データベースに接続
$dsn = 'mysql:host=mysql;dbname=cafe;charset=utf8';
$conn = new PDO($dsn, $user, $pass); //「$conn」は、任意のオブジェクト名
// データの追加
// $name = $_SESSION["name"];
// $kana = $_SESSION["kana"];
// $tel = $_SESSION["tel"];
// $email = $_SESSION["email"];
// $body = $_SESSION["body"];
//$sql = 'INSERT INTO form(name, kana, tel, email, body) VALUES("'.$name.'","'.$email.'","'.$blood.'","'.$message.'")';
//$sql = "INSERT INTO contacts (name, kana, tel, email, body) VALUES (:name, :kana, :tel, :email, :body)";
//$sql = "INSERT INTO contacts (name, kana, tel, email, body) VALUES ('ナカマエ', 'なか', 'なか', 'なか', 'なか')";
// $sql = 'INSERT INTO contacts (name, kana, tel, email, body) VALUES("'.$name.'","'.$kana.'","'.$tel.'","'.$email.'","'.$body.'")';
// $stmt = $conn -> prepare($sql);// SQL文をセット
// $stmt -> execute();// SQL文を実行
// echo 'DB接続成功'."<br>";
// データを取得
$sql2 = "SELECT * FROM contacts"; //formはテーブル名 *はすべてのカラム
$stmt2 = $conn->prepare($sql2);
$stmt2->execute();
$result = $stmt2->fetchAll(PDO::FETCH_ASSOC);
//var_dump($stmt2);
//データブラウザ表示
if ($result) {
echo "<table>";
echo "<tr><th>ID</th><th>名前</th><th>フリガナ</th><th>電話番号</th><th>メールアドレス</th><th>お問い合わせ内容</th><th>編集</th><th>削除</th></tr>";
foreach ($result as $row) {
echo "<tr>";
echo "<td>" . htmlspecialchars($row['id']) . "</td>";
echo "<td>" . htmlspecialchars($row['name']) . "</td>";
echo "<td>" . htmlspecialchars($row['kana']) . "</td>";
echo "<td>" . htmlspecialchars($row['tel']) . "</td>";
echo "<td>" . htmlspecialchars($row['email']) . "</td>";
echo "<td>" . htmlspecialchars($row['body']) . "</td>";
echo "<td>" . "<a href='edit.php?id=".$row['id']."'>編集</a>" . "</td>";
//echo "<td>" . "<form action='delete.php'><button type='submit' name='delete'>削除</button></form>" . "</td>";
echo "<td>" . "<a href='delete.php?id=".$row['id']."'>削除</a>" . "</td>";
echo "</tr>";
}
echo "</table>";
} else {
echo "データがありません。";
}
}catch(PDOException $e){
//エラー出力
echo "データベースエラー（PDOエラー）";
echo $e->getMessage()." - ".$e->getLine().PHP_EOL;
echo $sql;
//var_dump($e->getMessage()); //エラーの詳細を調べる場合、コメントアウトを外す
}
?>
</section>
<footer>
<div class="outer">
<div class="nav_area">
<div class="inner">
<h2>企業情報</h2>
<ul>
<li><a href="#">ご利用方法</a></li>
<li><a href="#">ニュースルーム</a></li>
<li><a href="#">株主・投資家のみなさまへ</a></li>
<li><a href="#">XXXXXXXXXXXXXXX</a></li>
<li><a href="#">XXXXXXXXXXXXXXX</a></li>
<li><a href="#">XXXXXXXXXXXXXXX</a></li>
<li><a href="#">採用情報</a></li>
</ul>
</div>
<div class="inner">
<h2>コミュニティ</h2>
<ul>
<li><a href="#">ダイバーシティ</a></li>
<li><a href="#">アクセシビリティ対応</a></li>
<li><a href="#">お友達を招待</a></li>
<li><a href="#">XXXXXXXXXXXXXXX</a></li>
<li><a href="#">XXXXXXXXXXXXXXX</a></li>
</ul>
</div>
<div class="inner">
<h2>ホスト</h2>
<ul>
<li><a href="#">XXXXXXXXXXXXXXX</a></li>
<li><a href="#">XXXXXXXXXXXXXXX</a></li>
<li><a href="#">XXXXXXXXXXXXXXX</a></li>
</ul>
</div>
<div class="inner">
<h2>サポート</h2>
<ul>
<li><a href="#">新型コロナウイルスに対する取り組み</a></li>
<li><a href="#">ヘルプセンター</a></li>
<li><a href="#">キャンセルオプション</a></li>
<li><a href="#">コミュニティサポート</a></li>
<li><a href="#">信頼＆安全</a></li>
</ul>
</div>
</div>
<div class="reserved">
<p>このサイトの素材は全て著作権フリーのものを使用しています。</p>
<div class="menu">
<span class="_click">プライバシーポリシー</span>
<span class="_click">利用規約</span>
<span class="_click">サイトマップ</span>
<span class="_click">企業情報</span>
</div>
<p>© 2021- LiNew, Inc. All rights reserved.</p>
</div>
</div>
</footer>
<!-- <script src="http://cdnjs.cloudflare.com/ajax/libs/vue/0.11.5/vue.min.js"></script>
<script type="text/javascript" src="js/script.js"></script>
<script type="text/javascript" src="https://code.jquery.com/jquery-3.5.1.min.js"></script> -->
<script>
// alert("氏名は必須入力です。10文字以内でご入力ください。\nフリガナは必須入力です。10文字以内でご入力ください。\n電話番号は0-9の数字のみでご入力ください。\nメールアドレスは正しくご入力ください。\nお問い合わせ内容は必須入力です。");
// 変数宣言
const submit = document.getElementById('submit');
const name = document.getElementById("name");
const kana = document.getElementById("kana");
const tel = document.getElementById("tel");
const email = document.getElementById("email");
const body = document.getElementById("body");
submit.addEventListener('click', function(){
let err_message = [];
let error_exist = 0;
if(name.value == "" || name.value.length > 10){
//画面遷移止める
err_message.push("氏名は必須入力です。10文字以内でご入力ください。\n")
//event.preventDefault();
error_exist = 1;
}
if(kana.value == ""){
err_message.push("フリナガは必須入力です。10文字以内でご入力ください。\n")
//event.preventDefault();
error_exist = 1;
}
if(!tel.value.match(/^-?[0-9]+$/) && tel.value != ""){
err_message.push("電話番号は0-9の数字のみでご入力ください。\n");
//event.preventDefault();
error_exist = 1;
}
if(!/^[A-Za-z0-9]+@.{1}[A-Za-z0-9_.-]+$/.test(email.value)){
err_message.push("メールアドレスは正しくご入力ください。\n");
//event.preventDefault();
error_exist = 1;
}
if(body.value == ""){
err_message.push("お問い合わせ内容は必須入力です。");
//event.preventDefault();
error_exist = 1;
}
if(error_exist == 1){//エラーがあった場合
alert(err_message.join(""));
}
})
/////////////
let name_error = document.getElementById('name_error');
// <?php
// if(empty($_POST("name"))){
// $name_error = "block";
// }
// echo ("エラー"); ?>
</script>
</body>
</html>
<?php
// if(isset($_POST["button"])){
// if($error_exist == 0){
// //確認画面へ遷移する処理
// header('Location:confirm.php');
// exit;
// }
// }
?>
例）
@charset "UTF-8";
/*---Reset---*/
body, h1, h2, h3, h4, h5, h6, p, address,
ul, ol, li, dl, dt, dd, img, form, table, tr, th, td {
margin: 0;
padding: 0;
border: none;
font-style: normal;
font-weight: normal;
font-size: 100%;
text-align: left;
list-style-type: none;
border-collapse: collapse;
}
textarea { font-size: 100%; vertical-align:middle;}
hr { display: none; }
em{font-style: normal}
input{line-height:auto;vertical-align:middle;}
strong.more{color:#c30}
a{text-decoration: none;}
body {
font-family:'ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','メイリオ',Meiryo,'ＭＳ Ｐゴシック',sans-serif;
}
/*クラス定義*/
.clearfix:after {
content: ".";
display: block;
clear: both;
height: 0;
visibility: hidden;
}
.clearfix {
display: inline-table;
}
/* Hides from IE-mac \*/
* html .clearfix{height: 1%;}
*+html .clearfix{min-height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-o-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
}
._click:hover {
cursor: pointer;
opacity: 0.8;
}
/*--- ページ基本デザイン ---*/
.alert {
position: relative;
top: 0;
z-index: 1;
background-color: black;
width: 100%;
text-align: center;
padding: 18px;
color: white;
font-size: 14px;
box-shadow: 5px 5px 5px 680px rgba(180,180,180,0.3);
}
.alert a {
text-decoration: underline;
color: white;
}
.alert a:hover {
opacity: 0.9;
}
.jump {
position: fixed;
right: 0;
bottom:0;
height: 3rem;
line-height: 3rem;
color: white;
text-align: center;
cursor: pointer;
background-color: black;
padding: 0 10px;
transition: all .3s ease;
}
.jump.v-enter, .jump.v-leave {
height: 0;
padding: 0 10px;
opacity: 0;
}
#signin_box {
z-index: 999;
margin-top: 50vh;
opacity: 0;
width: 40%;
background-color: white;
border-radius: 12px;
}
#signin_box h2 {
font-size: 1.2rem;
font-weight: bold;
text-align: center;
padding: 1rem 0;
border-bottom: 1px solid #ccc;
}
#signin_box dl {
padding: 20px;
}
#signin_box dd {
padding: 5px 0;
}
#signin_box dd input {
width: 100%;
font-size: 1.2rem;
padding: 10px 2.5px;
border-radius: 8px;
border: 1px solid #aaa;
}
#signin_box dd button {
color: white;
background-color: rgb(215, 4, 102);
width: 100%;
font-size: 1.2rem;
padding: 10px 2.5px;
border: 0;
border-radius: 8px;
cursor: pointer;
}
#signin_box dl.sns {
border-width: 90%;
border-top: 1px solid #ccc;
}
#signin_box .sns dd img {
width: 1.5rem;
}
#signin_box .sns dd button {
color: black;
background-color: white;
width: 100%;
font-size: 1.2rem;
padding: 10px 2.5px;
border: 1px solid #ccc;
border-radius: 8px;
}
#overlay {
z-index: 998;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
display: flex;
align-items: center;
justify-content: center;
}
header {
position: relative;
width: 100%;
min-height: 680px;
background-size: cover;
background-position: center;
background-image: url("../cafe/img/eyecatch.jpg"); /* "../img/eyecatch.jpg" ⇦元はこれ cafe/ */
}
header nav {
position: relative;
top: 0;
margin: auto;
width: 100%;
padding: 0 5%;
background-color: transparent; /*透明*/
display: flex;
flex-wrap: wrap;
padding-top: 15px;
color: white;
transition: all .5s ease;
}
header nav a {
color: white;
}
.motion {
background-color: rgba(0,0,0,0.8);
z-index: 2;
position: fixed;
top: 0;
transition: all .5s ease;
}
header nav .logo {
flex: 25%;
color: white;
font-weight: bold;
font-size: 32px;
}
header nav .logo img {
vertical-align: middle;
}
header nav .g_nav {
flex: 50%;
display: flex;
flex-wrap: wrap;
justify-content: center;
line-height: 50px;
}
header nav .g_nav .menu {
padding: 0 25px;
cursor: pointer;
}
header nav .sign {
flex: 25%;
display: flex;
flex-wrap: wrap;
justify-content: flex-end;
line-height: 50px;
}
header nav .sp {
display: none;
}
header nav .sp_nav {
position: fixed;
top: 125px;
width: 12.5rem;
background-color: white;
border-radius: 8px;
display: none ; /*追加*/
}
header nav .sp_nav a {
color: black;
}
header nav .sp_menu {
color: black;
padding: 0 1rem;
}
header nav .sp_signin {
color: black;
padding: 0 1rem;
border-bottom: 1px solid #ccc;
}
header nav .signup {
margin-right: 20px;
}
header h1.concept {
width: 90%;
margin: auto;
position: absolute;
top: 250px;
left: 5%;
color: white;
font-size: 64px;
line-height: 64px;
font-weight: bold;
}
header.contact {
position: relative;
width: 100%;
min-height: 100%;
background-image: none;
}
header.contact nav.motion {
position: relative;
}
section {
margin: 40px 0;
padding: 0 5%;
}
.bg_white {
background-color: white;
color: black;
}
.bg_black {
background-color: black;
color: white;
padding: 40px 5%;
}
main {
margin: 80px 0 60px;
}
section h2 {
font-size: 32px;
font-weight: bold;
}
section p {
font-size: 14px;
font-weight: 900;
}
/* はじめに */
.cafe_intro {
margin: auto;
display: grid;
grid-template-columns: repeat(4, 1fr);
}
.cafe_intro .box {
padding: 10px 0;
}
.cafe_intro .info {
display: flex;
justify-content: flex-start;
}
.cafe_intro .photo {
width: 64px;
height: 64px;
}
.cafe_intro .photo img {
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 8px;
}
.cafe_intro .access {
padding: 5px 15px;
}
.access .area {
font-weight: bold;
}
/* 体験 */
.cafe_local {
margin: auto;
display: grid;
grid-template-columns: repeat(4, 1fr);
column-gap: 15px;
}
.cafe_local .box {
padding: 10px 0;
}
.cafe_local .info {
}
.cafe_local .photo {
}
.cafe_local .photo img {
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 8px;
}
.cafe_local .text {
font-size: 18px;
font-weight: bold;
}
.goto {
margin-top: 40px;
opacity: 0.9;
position: relative;
}
.goto_text {
position: absolute;
top: 50px;
left: 50px;
background-color: rgba(255,255,255,0.3);
padding: 10px;
}
.goto_text h3 {
font-size: 42px;
font-weight: bold;
color: black;
}
.goto_text p {
font-size: 18px;
font-weight: 100;
color: black;
}
/* 体験 */
.cafe_exp {
margin: 15px auto 0 auto;
display: grid;
grid-template-columns: repeat(3, 1fr);
column-gap: 15px;
}
.cafe_exp .box {
padding: 10px 0;
}
.cafe_exp .info {
}
.cafe_exp .photo {
}
.cafe_exp .photo img {
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 8px;
}
.cafe_exp .text {
font-size: 18px;
font-weight: bold;
}
.cafe_exp p {
font-size: 14px;
font-weight: 100;
}
/* ホスト */
.cafe_host {
margin: 0 auto;
display: grid;
grid-template-columns: repeat(3, 1fr);
column-gap: 15px;
}
.cafe_host .box {
padding: 10px 0;
}
.cafe_host .info {
}
.cafe_host .photo {
}
.cafe_host .photo img {
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 8px;
}
.cafe_host .text {
font-size: 18px;
font-weight: bold;
}
footer {
border-top: 1px solid #ddd;
background-color: #f7f7f7;
padding: 4% 0;
}
footer .outer {
width: 90%;
margin: auto;
font-size: 0.9rem;
}
footer .nav_area {
display: grid;
grid-template-columns: repeat(4, 1fr);
}
footer .inner {
flex: auto;
}
footer .inner a {
color: #333;
}
footer .inner h2 {
font-weight: bold;
}
footer .inner li {
margin: 1rem 0;
}
footer .reserved {
padding-top: 2%;
color: #333;
border-top: 1px solid #ccc;
}
.contact_box {
width: 70%;
margin: 5% auto;
border-radius: 16px;
border: 1px solid #ccc;
}
.contact_box form {
margin: 3%;
}
.contact_box p {
font-weight: normal;
}
.contact_box .required {
color: red;
}
.contact_box h2 {
font-size: 1.2rem;
font-weight: bold;
text-align: center;
padding: 1rem 0;
border-bottom: 1px solid #ccc;
}
.contact_box h3 {
background: -webkit-gradient(linear, left top, left bottom, from(#f5f5f5), to(#eaeaea));
border-top: 1px solid #666;
border-bottom: 1px solid #666;
padding: 1%;
margin: 1% 0;
}
.contact_box dl {
margin: 2% 0;
}
.contact_box dd {
padding: 0.5% 0 1%;
font-size: 1.2rem;
word-wrap: break-word;/*追記*/
overflow-wrap: break-word;/*追記*/
}
.contact_box dd.error {
padding: 0;
color: red;
font-size: 1rem;
display: none; /*追加*/
}
.contact_box input {
width: 100%;
font-size: 1.2rem;
padding: 10px 2.5px;
border-radius: 8px;
border: 1px solid #aaa;
}
.contact_box textarea {
resize: none;
width: 100%;
height: 33vh;
font-size: 1.2rem;
padding: 10px 2.5px;
border-radius: 8px;
border: 1px solid #aaa;
}
.contact_box button {
color: white ;
background-color: rgb(215, 4, 102);
width: 100%;
font-size: 1.2rem;
padding: 10px 2.5px;
border: 0;
border-radius: 8px;
cursor: pointer;
}
tbody {/*追記-----------------------*/
/* margin: 10px 100px; */
}
table button {/*追記-----------------------*/
/* color: cornflowerblue !important;
background-color: white !important;
font-size: 100% !important; */
}
.contact_box .confirm dt {
margin-top: 1rem;
border-bottom: 1px solid #ccc;
}
.contact_box .confirm dd {
padding: 1%;
word-wrap: break-word;/*追記*/
overflow-wrap: break-word;/*追記*/
}
.contact_box .confirm dd.confirm_btn {
padding: 1% 0;
display: flex;
justify-content: space-between;
}
.contact_box .confirm dd.confirm_btn button {
margin-right: 10px;
}
.contact_box .confirm dd.confirm_btn a {
width: 100%;
text-align: center;
line-height: 40px;
margin-left: 10px;
background-color: transparent;
border: 2px solid #066;
border-radius: 8px;
cursor: pointer;
color: #066;
}
.complete_msg {
padding: 3%;
}
.complete_msg a {
display: block;
margin-top: 10px;
text-decoration: underline;
}
/* 追記 */
#db_table {
justify-content: center;
}
自分で試したこと
displayプロパティをblockやcontentsにして試してみましたが、同様の結果になりました。
0
2Answer
Comments
@juza11
Questionerdisplay : flex ; で解決できました。
参考ページまでありがとうございます。
cssで定義している下記要素を消してしまっても同じでしょうか。
（cssとhtmlのコード全体を見ないとなんとも）
element.style {
display: table;
}
1Like
Comments
@juza11
Questionerありがとうございます。
ご指摘の要素を消してみましたが結果変わらずでした。かなり長くなってしまいましたが、コード全体を載せなおしました。