質問編集履歴
2
cssを追加しました
    
        title	
    CHANGED
    
    | 
         
            File without changes
         
     | 
    
        body	
    CHANGED
    
    | 
         @@ -30,11 +30,238 @@ 
     | 
|
| 
       30 
30 
     | 
    
         
             
              width:100%;
         
     | 
| 
       31 
31 
     | 
    
         
             
            }
         
     | 
| 
       32 
32 
     | 
    
         
             
            ```
         
     | 
| 
      
 33 
     | 
    
         
            +
            ### home.scss
         
     | 
| 
      
 34 
     | 
    
         
            +
             
     | 
| 
      
 35 
     | 
    
         
            +
            ```
         
     | 
| 
      
 36 
     | 
    
         
            +
            * {
         
     | 
| 
      
 37 
     | 
    
         
            +
              box-sizing: border-box;
         
     | 
| 
      
 38 
     | 
    
         
            +
            }
         
     | 
| 
      
 39 
     | 
    
         
            +
             
     | 
| 
      
 40 
     | 
    
         
            +
            html {
         
     | 
| 
      
 41 
     | 
    
         
            +
              font: 100%/1.5 'Avenir Next', 'Hiragino Sans', sans-serif;
         
     | 
| 
      
 42 
     | 
    
         
            +
              line-height: 1.7;
         
     | 
| 
      
 43 
     | 
    
         
            +
              letter-spacing: 1px;
         
     | 
| 
      
 44 
     | 
    
         
            +
            }
         
     | 
| 
      
 45 
     | 
    
         
            +
             
     | 
| 
      
 46 
     | 
    
         
            +
            ul, li {
         
     | 
| 
      
 47 
     | 
    
         
            +
              list-style-type: none;
         
     | 
| 
      
 48 
     | 
    
         
            +
              padding: 0;
         
     | 
| 
      
 49 
     | 
    
         
            +
              margin: 0;
         
     | 
| 
      
 50 
     | 
    
         
            +
            }
         
     | 
| 
      
 51 
     | 
    
         
            +
             
     | 
| 
      
 52 
     | 
    
         
            +
            a {
         
     | 
| 
      
 53 
     | 
    
         
            +
              text-decoration: none;
         
     | 
| 
      
 54 
     | 
    
         
            +
              color: #2d3133;
         
     | 
| 
      
 55 
     | 
    
         
            +
              font-size: 14px;
         
     | 
| 
      
 56 
     | 
    
         
            +
            }
         
     | 
| 
      
 57 
     | 
    
         
            +
             
     | 
| 
      
 58 
     | 
    
         
            +
            h1, h2, h3, h4, h5, h6, p {
         
     | 
| 
      
 59 
     | 
    
         
            +
              margin: 0;
         
     | 
| 
      
 60 
     | 
    
         
            +
            }
         
     | 
| 
      
 61 
     | 
    
         
            +
            input {
         
     | 
| 
      
 62 
     | 
    
         
            +
              background-color: transparent;
         
     | 
| 
      
 63 
     | 
    
         
            +
              outline-width: 0;
         
     | 
| 
      
 64 
     | 
    
         
            +
            }
         
     | 
| 
      
 65 
     | 
    
         
            +
             
     | 
| 
      
 66 
     | 
    
         
            +
            form input[type="submit"] {
         
     | 
| 
      
 67 
     | 
    
         
            +
              border: none;
         
     | 
| 
      
 68 
     | 
    
         
            +
              cursor: pointer;
         
     | 
| 
      
 69 
     | 
    
         
            +
            }
         
     | 
| 
      
 70 
     | 
    
         
            +
             
     | 
| 
      
 71 
     | 
    
         
            +
            body {
         
     | 
| 
      
 72 
     | 
    
         
            +
              color: #2d3133;
         
     | 
| 
      
 73 
     | 
    
         
            +
              background-color: #3ecdc6;
         
     | 
| 
      
 74 
     | 
    
         
            +
              margin: 0;
         
     | 
| 
      
 75 
     | 
    
         
            +
              min-height: 1vh;
         
     | 
| 
      
 76 
     | 
    
         
            +
            }
         
     | 
| 
      
 77 
     | 
    
         
            +
             
     | 
| 
      
 78 
     | 
    
         
            +
            .main {
         
     | 
| 
      
 79 
     | 
    
         
            +
              position: absolute;
         
     | 
| 
      
 80 
     | 
    
         
            +
              top: 64px;
         
     | 
| 
      
 81 
     | 
    
         
            +
              width: 100%;
         
     | 
| 
      
 82 
     | 
    
         
            +
              height: auto;
         
     | 
| 
      
 83 
     | 
    
         
            +
              min-height: 100%;
         
     | 
| 
      
 84 
     | 
    
         
            +
              background-color: #f5f8fa;
         
     | 
| 
      
 85 
     | 
    
         
            +
            }
         
     | 
| 
      
 86 
     | 
    
         
            +
             
     | 
| 
      
 87 
     | 
    
         
            +
            .container {
         
     | 
| 
      
 88 
     | 
    
         
            +
              max-width: 600px;
         
     | 
| 
      
 89 
     | 
    
         
            +
              margin: 60px auto;
         
     | 
| 
      
 90 
     | 
    
         
            +
              padding-left: 15px;
         
     | 
| 
      
 91 
     | 
    
         
            +
              padding-right: 15px;
         
     | 
| 
      
 92 
     | 
    
         
            +
              clear: both;
         
     | 
| 
      
 93 
     | 
    
         
            +
            }
         
     | 
| 
      
 94 
     | 
    
         
            +
             
     | 
| 
      
 95 
     | 
    
         
            +
            header {
         
     | 
| 
      
 96 
     | 
    
         
            +
              height: 64px;
         
     | 
| 
      
 97 
     | 
    
         
            +
              position: absolute;
         
     | 
| 
      
 98 
     | 
    
         
            +
              z-index: 1;
         
     | 
| 
      
 99 
     | 
    
         
            +
              width: 100%;
         
     | 
| 
      
 100 
     | 
    
         
            +
            }
         
     | 
| 
      
 101 
     | 
    
         
            +
             
     | 
| 
      
 102 
     | 
    
         
            +
            .header-logo {
         
     | 
| 
      
 103 
     | 
    
         
            +
              float: left;
         
     | 
| 
      
 104 
     | 
    
         
            +
              padding-left: 20px;
         
     | 
| 
      
 105 
     | 
    
         
            +
              color: white;
         
     | 
| 
      
 106 
     | 
    
         
            +
              font-size: 22px;
         
     | 
| 
      
 107 
     | 
    
         
            +
              line-height: 64px;
         
     | 
| 
      
 108 
     | 
    
         
            +
            }
         
     | 
| 
      
 109 
     | 
    
         
            +
             
     | 
| 
      
 110 
     | 
    
         
            +
            .header-logo a{
         
     | 
| 
      
 111 
     | 
    
         
            +
              color: white;
         
     | 
| 
      
 112 
     | 
    
         
            +
              font-size: 22px;
         
     | 
| 
      
 113 
     | 
    
         
            +
            }
         
     | 
| 
      
 114 
     | 
    
         
            +
             
     | 
| 
      
 115 
     | 
    
         
            +
            .header-menus {
         
     | 
| 
      
 116 
     | 
    
         
            +
              float: right;
         
     | 
| 
      
 117 
     | 
    
         
            +
              padding-right: 20px;
         
     | 
| 
      
 118 
     | 
    
         
            +
            }
         
     | 
| 
      
 119 
     | 
    
         
            +
             
     | 
| 
      
 120 
     | 
    
         
            +
            .header-menus li {
         
     | 
| 
      
 121 
     | 
    
         
            +
              float: left;
         
     | 
| 
      
 122 
     | 
    
         
            +
              line-height: 64px;
         
     | 
| 
      
 123 
     | 
    
         
            +
              font-size: 13px;
         
     | 
| 
      
 124 
     | 
    
         
            +
              color: white;
         
     | 
| 
      
 125 
     | 
    
         
            +
              padding-left: 15px;
         
     | 
| 
      
 126 
     | 
    
         
            +
            }
         
     | 
| 
      
 127 
     | 
    
         
            +
             
     | 
| 
      
 128 
     | 
    
         
            +
            .header-menus a {
         
     | 
| 
      
 129 
     | 
    
         
            +
              float: left;
         
     | 
| 
      
 130 
     | 
    
         
            +
              font-size: 13px;
         
     | 
| 
      
 131 
     | 
    
         
            +
              color: white;
         
     | 
| 
      
 132 
     | 
    
         
            +
            }
         
     | 
| 
      
 133 
     | 
    
         
            +
             
     | 
| 
      
 134 
     | 
    
         
            +
            .header-menus .fa {
         
     | 
| 
      
 135 
     | 
    
         
            +
              padding-right: 5px;
         
     | 
| 
      
 136 
     | 
    
         
            +
            }
         
     | 
| 
      
 137 
     | 
    
         
            +
             
     | 
| 
      
 138 
     | 
    
         
            +
            .header-menus input[type="submit"] {
         
     | 
| 
      
 139 
     | 
    
         
            +
              padding: 0 20px;
         
     | 
| 
      
 140 
     | 
    
         
            +
              float: left;
         
     | 
| 
      
 141 
     | 
    
         
            +
              line-height: 64px;
         
     | 
| 
      
 142 
     | 
    
         
            +
              color: white;
         
     | 
| 
      
 143 
     | 
    
         
            +
              margin: 0;
         
     | 
| 
      
 144 
     | 
    
         
            +
              font-size: 13px;
         
     | 
| 
      
 145 
     | 
    
         
            +
            }
         
     | 
| 
      
 146 
     | 
    
         
            +
             
     | 
| 
      
 147 
     | 
    
         
            +
            .top-main {
         
     | 
| 
      
 148 
     | 
    
         
            +
              padding: 200px 0 100px;
         
     | 
| 
      
 149 
     | 
    
         
            +
              text-align: center;
         
     | 
| 
      
 150 
     | 
    
         
            +
              position: absolute;
         
     | 
| 
      
 151 
     | 
    
         
            +
              top: 0;
         
     | 
| 
      
 152 
     | 
    
         
            +
              width: 100%;
         
     | 
| 
      
 153 
     | 
    
         
            +
              height: auto;
         
     | 
| 
      
 154 
     | 
    
         
            +
              min-height: 100%;
         
     | 
| 
      
 155 
     | 
    
         
            +
              color: white;
         
     | 
| 
      
 156 
     | 
    
         
            +
              background-color: #3ecdc6;
         
     | 
| 
      
 157 
     | 
    
         
            +
              background-repeat: no-repeat;
         
     | 
| 
      
 158 
     | 
    
         
            +
              background-position: center 50%;
         
     | 
| 
      
 159 
     | 
    
         
            +
              background-size: cover;
         
     | 
| 
      
 160 
     | 
    
         
            +
              background-image:url("../top.png");
         
     | 
| 
      
 161 
     | 
    
         
            +
            }
         
     | 
| 
      
 162 
     | 
    
         
            +
             
     | 
| 
      
 163 
     | 
    
         
            +
            .top-message {
         
     | 
| 
      
 164 
     | 
    
         
            +
              position: relative;
         
     | 
| 
      
 165 
     | 
    
         
            +
            }
         
     | 
| 
      
 166 
     | 
    
         
            +
             
     | 
| 
      
 167 
     | 
    
         
            +
            .top-main h2 {
         
     | 
| 
      
 168 
     | 
    
         
            +
              font-size: 70px;
         
     | 
| 
      
 169 
     | 
    
         
            +
              font-weight: 500;
         
     | 
| 
      
 170 
     | 
    
         
            +
              line-height: 1.3;
         
     | 
| 
      
 171 
     | 
    
         
            +
              -webkit-font-smoothing: antialiased;
         
     | 
| 
      
 172 
     | 
    
         
            +
              margin-bottom: 20px;
         
     | 
| 
      
 173 
     | 
    
         
            +
              color:gold;
         
     | 
| 
      
 174 
     | 
    
         
            +
              font-weight:bold;
         
     | 
| 
      
 175 
     | 
    
         
            +
            }
         
     | 
| 
      
 176 
     | 
    
         
            +
             
     | 
| 
      
 177 
     | 
    
         
            +
            .top-main p {
         
     | 
| 
      
 178 
     | 
    
         
            +
              font-size: 24px;
         
     | 
| 
      
 179 
     | 
    
         
            +
              color:gold;
         
     | 
| 
      
 180 
     | 
    
         
            +
              font-weight:bold;
         
     | 
| 
      
 181 
     | 
    
         
            +
            }
         
     | 
| 
      
 182 
     | 
    
         
            +
             
     | 
| 
      
 183 
     | 
    
         
            +
            .about-main {
         
     | 
| 
      
 184 
     | 
    
         
            +
              padding: 180px 8% 0;
         
     | 
| 
      
 185 
     | 
    
         
            +
              color: white;
         
     | 
| 
      
 186 
     | 
    
         
            +
            }
         
     | 
| 
      
 187 
     | 
    
         
            +
             
     | 
| 
      
 188 
     | 
    
         
            +
            .about-main h2 {
         
     | 
| 
      
 189 
     | 
    
         
            +
              font-size: 64px;
         
     | 
| 
      
 190 
     | 
    
         
            +
              font-weight: 500;
         
     | 
| 
      
 191 
     | 
    
         
            +
              line-height: 1.4;
         
     | 
| 
      
 192 
     | 
    
         
            +
            }
         
     | 
| 
      
 193 
     | 
    
         
            +
             
     | 
| 
      
 194 
     | 
    
         
            +
            .about-main p {
         
     | 
| 
      
 195 
     | 
    
         
            +
              font-weight: 200;
         
     | 
| 
      
 196 
     | 
    
         
            +
              font-size: 20px;
         
     | 
| 
      
 197 
     | 
    
         
            +
            }
         
     | 
| 
      
 198 
     | 
    
         
            +
             
     | 
| 
      
 199 
     | 
    
         
            +
            .about-img {
         
     | 
| 
      
 200 
     | 
    
         
            +
              width: 84%;
         
     | 
| 
      
 201 
     | 
    
         
            +
            }
         
     | 
| 
      
 202 
     | 
    
         
            +
             
     | 
| 
      
 203 
     | 
    
         
            +
            .form {
         
     | 
| 
      
 204 
     | 
    
         
            +
              max-width: 600px;
         
     | 
| 
      
 205 
     | 
    
         
            +
              margin: 0 auto;
         
     | 
| 
      
 206 
     | 
    
         
            +
              background-color: white;
         
     | 
| 
      
 207 
     | 
    
         
            +
              box-shadow: 0 2px 6px #c1ced7;
         
     | 
| 
      
 208 
     | 
    
         
            +
            }
         
     | 
| 
      
 209 
     | 
    
         
            +
             
     | 
| 
      
 210 
     | 
    
         
            +
            .form-heading {
         
     | 
| 
      
 211 
     | 
    
         
            +
              font-weight: 300;
         
     | 
| 
      
 212 
     | 
    
         
            +
              margin: 60px 0 20px;
         
     | 
| 
      
 213 
     | 
    
         
            +
              font-size: 48px;
         
     | 
| 
      
 214 
     | 
    
         
            +
              color: #bcc8d4;
         
     | 
| 
      
 215 
     | 
    
         
            +
            }
         
     | 
| 
      
 216 
     | 
    
         
            +
             
     | 
| 
      
 217 
     | 
    
         
            +
            .form-body {
         
     | 
| 
      
 218 
     | 
    
         
            +
              padding: 30px;
         
     | 
| 
      
 219 
     | 
    
         
            +
            }
         
     | 
| 
      
 220 
     | 
    
         
            +
             
     | 
| 
      
 221 
     | 
    
         
            +
            .form-error {
         
     | 
| 
      
 222 
     | 
    
         
            +
              color: #ff4d75;
         
     | 
| 
      
 223 
     | 
    
         
            +
            }
         
     | 
| 
      
 224 
     | 
    
         
            +
             
     | 
| 
      
 225 
     | 
    
         
            +
            .form input {
         
     | 
| 
      
 226 
     | 
    
         
            +
              width: 100%;
         
     | 
| 
      
 227 
     | 
    
         
            +
              border: 1px solid #d8dadf;
         
     | 
| 
      
 228 
     | 
    
         
            +
              padding: 10px;
         
     | 
| 
      
 229 
     | 
    
         
            +
              color: #57575f;
         
     | 
| 
      
 230 
     | 
    
         
            +
              font-size: 16px;
         
     | 
| 
      
 231 
     | 
    
         
            +
              letter-spacing: 2px;
         
     | 
| 
      
 232 
     | 
    
         
            +
              border-radius: 2px;
         
     | 
| 
      
 233 
     | 
    
         
            +
            }
         
     | 
| 
      
 234 
     | 
    
         
            +
             
     | 
| 
      
 235 
     | 
    
         
            +
            .form textarea {
         
     | 
| 
      
 236 
     | 
    
         
            +
              width: 100%;
         
     | 
| 
      
 237 
     | 
    
         
            +
              min-height: 110px;
         
     | 
| 
      
 238 
     | 
    
         
            +
              font-size: 16px;
         
     | 
| 
      
 239 
     | 
    
         
            +
              letter-spacing: 2px;
         
     | 
| 
      
 240 
     | 
    
         
            +
            }
         
     | 
| 
      
 241 
     | 
    
         
            +
             
     | 
| 
      
 242 
     | 
    
         
            +
            .form input[type="submit"] {
         
     | 
| 
      
 243 
     | 
    
         
            +
              background-color: #3ecdc6;
         
     | 
| 
      
 244 
     | 
    
         
            +
              color: white;
         
     | 
| 
      
 245 
     | 
    
         
            +
              cursor: pointer;
         
     | 
| 
      
 246 
     | 
    
         
            +
              font-weight: 300;
         
     | 
| 
      
 247 
     | 
    
         
            +
              width: 120px;
         
     | 
| 
      
 248 
     | 
    
         
            +
              border-radius: 2px;
         
     | 
| 
      
 249 
     | 
    
         
            +
              margin-top: 8px;
         
     | 
| 
      
 250 
     | 
    
         
            +
              margin-bottom: 0;
         
     | 
| 
      
 251 
     | 
    
         
            +
              float: right;
         
     | 
| 
      
 252 
     | 
    
         
            +
            }
         
     | 
| 
      
 253 
     | 
    
         
            +
             
     | 
| 
      
 254 
     | 
    
         
            +
            .form-body:after {
         
     | 
| 
      
 255 
     | 
    
         
            +
              content: '';
         
     | 
| 
      
 256 
     | 
    
         
            +
              display: table;
         
     | 
| 
      
 257 
     | 
    
         
            +
              clear: both;
         
     | 
| 
      
 258 
     | 
    
         
            +
            }
         
     | 
| 
      
 259 
     | 
    
         
            +
            ```
         
     | 
| 
      
 260 
     | 
    
         
            +
             
     | 
| 
       33 
261 
     | 
    
         
             
            ### 試したこと
         
     | 
| 
       34 
262 
     | 
    
         | 
| 
       35 
263 
     | 
    
         
             
            float:left;と記入しても真ん中に表示されたままです。
         
     | 
| 
       36 
264 
     | 
    
         | 
| 
       37 
     | 
    
         
            -
            githubも貼っておきます。
         
     | 
| 
       38 
     | 
    
         
            -
            https://github.com/malas-kohei/bolehboleh.git
         
     | 
| 
       39 
265 
     | 
    
         | 
| 
      
 266 
     | 
    
         
            +
             
     | 
| 
       40 
267 
     | 
    
         
             
            よろしくお願いいたします。
         
     | 
1
githubを加えました
    
        title	
    CHANGED
    
    | 
         
            File without changes
         
     | 
    
        body	
    CHANGED
    
    | 
         @@ -34,4 +34,7 @@ 
     | 
|
| 
       34 
34 
     | 
    
         | 
| 
       35 
35 
     | 
    
         
             
            float:left;と記入しても真ん中に表示されたままです。
         
     | 
| 
       36 
36 
     | 
    
         | 
| 
      
 37 
     | 
    
         
            +
            githubも貼っておきます。
         
     | 
| 
      
 38 
     | 
    
         
            +
            https://github.com/malas-kohei/bolehboleh.git
         
     | 
| 
      
 39 
     | 
    
         
            +
             
     | 
| 
       37 
40 
     | 
    
         
             
            よろしくお願いいたします。
         
     |