編集履歴

質問編集履歴

HTML及びCSS修正

2019/07/02 00:58

投稿

toll_tree

スコア199

title CHANGED Viewed

File without changes

body CHANGED Viewed

@@ -1,31 +1,91 @@
 table要素のthへのwidthの指定について、お聞きしたいことがあります。
 以下は該当のコードになります。
 ```html
+<!DOCTYPE html>
+<html lang="ja">
+<head>
+  <meta charset="utf-8">
+  <title>情報入力</title>
+  <link rel="stylesheet" href="/css/styles.css">
+</head>
+<body>
+  <!-- <header>
+    <div class="header_top">
+      <a class="svg_header_logo" href="http://localhost"></a>
+      <p>テスト</p>
+    </div>
+    <div class="clearfix vets_number">
+      <p><span class="font_bold">医院TEL</span><a href="000-0000-0000">000-0000-0000</a></p>
+    </div>
+    <div class="purpose">
+      <p>情報入力</p>
+    </div>
+  </header> -->
-<div class="top_content">
+  <div class="top_content">
+  <!-- <ul class="page_list">
+    <li>
+      <i class="check_circle_svg"></i>
+      <p>来院目的</p>
+    </li>
+    <li>»</li>
+    <li>
+      <i class="check_circle_svg"></i>
+      <p>予約日選択</p>
+    </li>
+    <li>»</li>
+    <li>
+      <i class="check_circle_svg"></i>
+      <p>予約時間選択</p>
+    </li>
+    <li>»</li>
+    <li>
+      <i class="black_circle_svg"></i>
+      <p>情報入力</p>
+    </li>
+    <li>»</li>
+    <li>
+      <i class="circle_svg"></i>
+      <p>入力確認</p>
+    </li>
+    <li>»</li>
+    <li>
+      <i class="circle_svg"></i>
+      <p>登録完了</p>
+    </li>
+  </ul> -->
   <div class="input_info_box">
     <h3 class="infomation_title">下記の情報を入力してください</h3>
     <table class="input_info_table">
       <tr><th>来院目的</th><td>初めての来院(初めて〇〇〇動物病院に来院さ…</td></tr>
-      <tr><th>希望日時</th><td>2019年06月15日(土)10時30分</td></tr>
+      <tr><th>希望日時</th><td>2019年07月01日(月)10時00分</td></tr>
     </table>
   </div>
-</div
+</div>
+</body>
+</html>
 ```
 ```css
 body{
   margin:0;
 }
+/*
 p{
   margin:0;
 }
 ul{
   list-style:none;
 }
-.header_top {
+ .header_top {
   width:100%;
   height:45px;
-  /* text-align:center; */
   background-color:#1625d9ad;
   height:45px;
   border-bottom:2px solid #497797;
@@ -153,8 +213,8 @@
   width:100%;
 }
+ */
+/*
 .check_circle_svg{
   height: 20px;
   display: block;
@@ -192,11 +252,11 @@
 .right_reserve_explain{
   display:inline-block;
   margin-bottom:5px;
-}
+} */
-.calendar_table{
+/* .calendar_table{
   border-collapse: collapse;
-  border: solid 2px orange;/*表全体を線で囲う*/
+  border: solid 2px orange;
   width:100%;
 }
@@ -220,9 +280,9 @@
   border: solid 1px #aa7b34;
   background: -webkit-linear-gradient(top, #faa200 50%, #ffba54);
   /* color: #fff; */
-  border-radius: 3px;
+  /* border-radius: 3px;
-}
+} */
-.next_calendar input[type="submit"]:hover{
+/* .next_calendar input[type="submit"]:hover{
   background:none;
   background:-webkit-linear-gradient(top, #ec6b0f 50%, #cf8648)
 }
@@ -299,10 +359,9 @@
   background-color: orange;
   border: solid 1px #aa7b34;
   background: -webkit-linear-gradient(top, #faa200 50%, #ffba54);
-  /* color: #fff; */
   border-radius: 3px;
-}
+} */
+/*
 .back_calendar input[type="submit"]:hover{
   background:none;
   background:-webkit-linear-gradient(top, #ec6b0f 50%, #cf8648);
@@ -370,7 +429,8 @@
   padding:0;
   border-right:none;
   color:red;
-}
+}  */
 table.input_info_table {
   border-collapse: collapse;
   border-spacing: 0;
@@ -379,7 +439,6 @@
 }
 .input_info_table th, .input_info_table td {
   border: 1px solid orange;
   padding: 3px 10px;
@@ -390,7 +449,7 @@
   /* border: 1px solid orange; */
   padding: 3px 10px;
   background-color: #ffce75;
-  width: 200px;
+  width: 40px;
   text-align: right;
 }
 .input_info_table td {
@@ -399,10 +458,6 @@
 .input_info_box{
   text-align:center;
 }
-.top_content{
-  width:34%;
-  margin:0 auto;
-}
 ```
 上記コードを実行した結果は以下になります。
@@ -412,4 +467,7 @@
 ![イメージ説明](cd5b0f92280a865d31a73392d91c19a1.png)
 今度はwidthが248pxになりました。確かに、widthは狭くなっているのですが、設定値よりも大きくなってしまっています。
 こちらの現象につきまして、解決法などご存じの方いらっしゃいましたら、教えて頂きましたら幸いです。
-よろしくお願いします。
+よろしくお願いします。
+**追記です**
+該当の画像のtable部分のHTML,CSS以外の原因の可能性もあります為、全てのHTML及びCSSを記載いたします。
+該当の部分以外はコメントアウトしてあります。

CSS修正

2019/07/02 00:58

投稿

toll_tree

スコア199

title CHANGED Viewed

File without changes

body CHANGED Viewed

@@ -13,6 +13,364 @@
 </div
 ```
 ```css
+body{
+  margin:0;
+}
+p{
+  margin:0;
+}
+ul{
+  list-style:none;
+}
+.header_top {
+  width:100%;
+  height:45px;
+  /* text-align:center; */
+  background-color:#1625d9ad;
+  height:45px;
+  border-bottom:2px solid #497797;
+}
+.header_top a {
+  background:no-repeat;
+  display: block;
+  height:50px;
+  width:11%;
+  float:left;
+  background-image:url(../images/top_logo.svg);
+}
+.header_top p{
+  padding-top:10px;
+  text-align:center;
+  color:white;
+  margin:0;
+  padding-right:11%;
+  font-weight:bold;
+}
+.clearfix:after{
+  content:"";
+  display:block;
+  height:0;
+  clear:both;
+  visibility:hidden;
+}
+.vets_number{
+  width:100%;
+  text-align:center;
+  background-color:#f8ce82;
+  border-bottom:1px solid #8d8d88d6;
+}
+.font_bold{
+  font-weight: bold;
+}
+.vets_number p{
+  margin-right:10%;
+}
+.vets_number a{
+  margin-left:15px;
+}
+.purpose{
+  width:100%;
+  height:40px;
+  text-align:center;
+  background-color:#bebeb82e;
+  border-bottom:1px solid #aaaaa4b8;
+}
+.purpose p {
+  line-height:2.5;
+}
+.black_circle_svg{
+  height: 20px;
+  display: block;
+  width: 20px;
+  background:url('../images/black_point.svg');
+}
+.circle_svg{
+  height: 20px;
+  display: block;
+  width: 20px;
+  background:url('../images/circle.svg');
+}
+.page_list{
+  display:flex;
+  justify-content: center;
+}
+.page_list li:not(:nth-child(3)):not(:nth-child(5)) i{
+  margin-left:16px;
+}
+.page_list li:nth-child(3) i{
+  margin-left:25px;
+}
+.page_list li:nth-child(5) i{
+  margin-left:30px;
+}
+.page_list p{
+  font-size:0.85em;
+}
+.top_content{
+  width:34%;
+  margin:0 auto;
+}
+.choose_purpose{
+  text-align:center;
+  font-size:20px;
+}
+.choose_btn:not(:hover){
+  background: -webkit-linear-gradient(top, #f69000 50%, #fdb140);
+}
+.choose_btn{
+  width:70%;
+  text-align:left;
+  cursor:default;
+  margin: 0 auto;
+  margin-left: 55px;
+  margin-bottom: 8px;
+  color: #fff;
+  background-color: #ff5e00;
+  border-radius: 3px;
+  box-shadow: 0px 0px 2px #7e8183e6;
+  border:1px solid #c59336;
+  font-size:14px;
+  display:block;
+  text-decoration:none;
+  text-shadow:0 1px 0 #ba3a00;
+}
+.index_purpose_button{
+  width:100%;
+}
+.check_circle_svg{
+  height: 20px;
+  display: block;
+  width: 20px;
+  background-image:url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/PjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxMy4wLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDE0OTQ4KSAgLS0+PCFET0NUWVBFIHN2ZyBQVUJMSUMgIi0vL1czQy8vRFREIFNWRyAxLjEvL0VOIiAiaHR0cDovL3d3dy53My5vcmcvR3JhcGhpY3MvU1ZHLzEuMS9EVEQvc3ZnMTEuZHRkIj48c3ZnIHZlcnNpb249IjEuMSIgaWQ9IiYjeDMwRUM7JiN4MzBBNDsmI3gzMEU0OyYjeDMwRkM7XzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IiB3aWR0aD0iMjBweCIgaGVpZ2h0PSIyMHB4IiB2aWV3Qm94PSIwIDAgMjAgMjAiIHN0eWxlPSJlbmFibGUtYmFja2dyb3VuZDpuZXcgMCAwIDIwIDIwOyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+PGNpcmNsZSBzdHlsZT0iZmlsbDojRkZFQkNEO3N0cm9rZTojRUM2QzFGO3N0cm9rZS13aWR0aDozOyIgY3g9IjEwIiBjeT0iMTAiIHI9IjguNSIvPjxsaW5lIHN0eWxlPSJmaWxsOm5vbmU7c3Ryb2tlOiMwREM0NDI7c3Ryb2tlLXdpZHRoOjM7c3Ryb2tlLWxpbmVjYXA6cm91bmQ7IiB4MT0iNi42IiB5MT0iMTAuOCIgeDI9IjguOCIgeTI9IjEyLjgiLz48bGluZSBzdHlsZT0iZmlsbDpub25lO3N0cm9rZTojMERDNDQyO3N0cm9rZS13aWR0aDozO3N0cm9rZS1saW5lY2FwOnJvdW5kOyIgeDE9IjE0LjMiIHkxPSI2LjkiIHgyPSI5LjEiIHkyPSIxMyIvPjwvc3ZnPg==");
+}
+.calendar_title{
+  text-align: center;
+  font-size:20px;
+}
+.reserve_explain_box{
+  text-align:center;
+  border:1px solid orange;
+  border-radius:3px;
+}
+.reserve_explain_box p{
+  border-bottom:1px solid #c6c5c5;
+  background-color:#ffd17d;
+  font-size:20px;
+  margin-bottom:7px;
+}
+.explain_blue_circle{
+  color:#6ea1ff;
+}
+.left_reserve_explain{
+  margin-right:90px;
+}
+.is_reservation{
+  margin:7px;
+}
+.right_reserve_explain{
+  display:inline-block;
+  margin-bottom:5px;
+}
+.calendar_table{
+  border-collapse: collapse;
+  border: solid 2px orange;/*表全体を線で囲う*/
+  width:100%;
+}
+.next_calendar{
+  display:inline-block;
+}
+.calendar_list_title {
+  text-align:center;
+  margin:10px 0;
+}
+.current_calendar_day{
+  display:inline-block;
+  text-align:center;
+  width:60%;
+  margin-left:63px;
+  font-size:19px;
+}
+.next_calendar input[type="submit"]{
+  padding:3px 38px;
+  background-color: orange;
+  border: solid 1px #aa7b34;
+  background: -webkit-linear-gradient(top, #faa200 50%, #ffba54);
+  /* color: #fff; */
+  border-radius: 3px;
+}
+.next_calendar input[type="submit"]:hover{
+  background:none;
+  background:-webkit-linear-gradient(top, #ec6b0f 50%, #cf8648)
+}
+.day{
+  background-color:#FFC746;
+}
+th{
+  font-weight:normal;
+}
+.sunday{
+  color:red;
+}
+.saturday{
+  color:#5796f4;
+}
+td{
+  border : 1px solid orange;
+  width:66px;
+}
+.reserved_date{
+  text-align:center;
+  font-size:16px;
+  font-weight:800;
+}
+.calendar_day_p{
+  padding-left:5px;
+}
+.calendar_button:hover{
+  background:none;
+  background:linear-gradient(to bottom,#d3d2d2,silver 50%,#afafaf);
+}
+.calendar_button{
+  background:linear-gradient(to bottom,#f3f3f3,#e2e2e2 50%,#d1d1d1);
+  background-color:#d1d1d1;
+  width: 53px;
+  height: 31px;
+  border: 1px solid silver;
+  border-radius:3px;
+  margin-left:6px;
+  color:#6ea1ff;
+  margin-bottom:3px;
+}
+.back_button{
+  margin: 20px 180px;
+  color: white;
+  text-shadow: 0 1px 0 #8d0909;
+  width: 26%;
+  background: linear-gradient(to bottom,#f07e7e,#ec5757 50%,#ff0000);
+  border: 1px solid #d1001d;
+  border-radius: 3px;
+  height: 30px;
+}
+.back_button:hover{
+  background:none;
+  background:linear-gradient(to bottom,#db0b0b,#bc3232 50%,#a82e2e);
+}
+.back_calendar{
+  width:20%;
+  display:inline-block;
+}
+.back_calendar input[type="submit"]{
+  padding:3px 38px;
+  background-color: orange;
+  border: solid 1px #aa7b34;
+  background: -webkit-linear-gradient(top, #faa200 50%, #ffba54);
+  /* color: #fff; */
+  border-radius: 3px;
+}
+.back_calendar input[type="submit"]:hover{
+  background:none;
+  background:-webkit-linear-gradient(top, #ec6b0f 50%, #cf8648);
+}
+.next_title_day{
+  width: 31%;
+  display: inline-block;
+  margin: 0 36% 0 11%;
+  font-size: 19px
+}
+.reservation_title_letter{
+  text-align:center;
+}
+.reservation_title_letter h3{
+  margin-bottom: 7px;
+  font-size: 18px;
+}
+.reservation_title_letter p{
+  font-weight:600;
+}
+.is_reservation_time{
+  margin:7px;
+  color:red;
+}
+.reserve_time_list p{
+  display:inline-block;
+}
+.reserve_status{
+  border: 1px solid orange;
+  margin-top:20px;
+}
+.reserve_status_left{
+  margin-right:30px;
+}
+.reserve_status p{
+  background-color: #ffce75;
+  padding: 3px 22px 0 22px;
+  line-height: 3;
+  height: 50px;
+  border-right:1px solid orange;
+}
+.reserve_status form{
+  display:inline-block;
+  width: 145px;
+  text-align: center;
+}
+.flex{
+  display: flex;
+}
+.reserved_time_button{
+  width:73px;
+  height:33px;
+  margin:10px 0;
+}
+.reserve_status .no_reservation{
+  background:none;
+  width: 145px;
+  text-align:center;
+  padding:0;
+  border-right:none;
+  color:red;
+}
 table.input_info_table {
   border-collapse: collapse;
   border-spacing: 0;

誤字修正

2019/07/02 00:26

投稿

toll_tree

スコア199

title CHANGED Viewed

File without changes

body CHANGED Viewed

@@ -53,5 +53,5 @@
 そして、今度はwidthに「40px」と指定しますと以下のようになりました。
 ![イメージ説明](cd5b0f92280a865d31a73392d91c19a1.png)
 今度はwidthが248pxになりました。確かに、widthは狭くなっているのですが、設定値よりも大きくなってしまっています。
-こちらの現象につきまして、解決法などご存じの方いらっしゃいましたら教えて頂きましたら幸いです。
+こちらの現象につきまして、解決法などご存じの方いらっしゃいましたら、教えて頂きましたら幸いです。
 よろしくお願いします。

修正

2019/07/01 18:20

投稿

toll_tree

スコア199

title CHANGED Viewed

File without changes

body CHANGED Viewed

@@ -53,5 +53,5 @@
 そして、今度はwidthに「40px」と指定しますと以下のようになりました。
 ![イメージ説明](cd5b0f92280a865d31a73392d91c19a1.png)
 今度はwidthが248pxになりました。確かに、widthは狭くなっているのですが、設定値よりも大きくなってしまっています。
-こちらの現象につきまして、解決法を教えて頂けましたら幸いです。
+こちらの現象につきまして、解決法などご存じの方いらっしゃいましたら教えて頂きましたら幸いです。
 よろしくお願いします。