質問編集履歴

最新版に変更しました。

2018/11/05 01:52

投稿

kazupo

スコア12

test CHANGED Viewed

	@@ -1 +1 @@
1	- ~~フッター~~が、~~メインのコンテンツに被ってしま~~い~~ます。。~~
1	+ お問い合わせ（contents-title）が、左寄せできない

test CHANGED Viewed

@@ -1,12 +1,10 @@
-![写真のようにフッターが被っている。。](54d9cfb2e5777c34dd2625ce83d15196.png)
+![お問い合わせを左寄せしたい](324870420791b9bf0778290340544567.png)
 コードは、以下になります。。
-```<!DOCTYPE html>
-<html>
+```<html>
   <head>
@@ -84,58 +82,58 @@
     <div class="contents">
+      <h3 class="section-title">
+        学べるレッスン
+      </h3>
+      <div class="contents-item">
+        <img src="https://s3-ap-northeast-1.amazonaws.com/progate/shared/images/lesson/html/study/html.svg
+">
+        <p>HTML & CSS</p>
+      </div>
+      <div class="contents-item">
+        <img src="https://s3-ap-northeast-1.amazonaws.com/progate/shared/images/lesson/html/study/php.svg">
+        <p>PHP</p>
+      </div>
+      <div class="contents-item">
+        <img src="https://s3-ap-northeast-1.amazonaws.com/progate/shared/images/lesson/html/study/ruby.svg
+">
+        <p>Ruby</p>
+      </div>
+      <div class="contents-item">
+      <img src="https://s3-ap-northeast-1.amazonaws.com/progate/shared/images/lesson/html/study/swift.svg
+">
+      <p>Swift</p>
+    </div>
+    <div class="contactform">
       <h3 class="contents-title">
-        学べるレッスン
+      お問い合わせ
       </h3>
-      <div class="contents-item">
-        <img src="https://s3-ap-northeast-1.amazonaws.com/progate/shared/images/lesson/html/study/html.svg
-">
-        <p>HTML & CSS</p>
-      </div>
-      <div class="contents-item">
-        <img src="https://s3-ap-northeast-1.amazonaws.com/progate/shared/images/lesson/html/study/php.svg">
-        <p>PHP</p>
-      </div>
-      <div class="contents-item">
-        <img src="https://s3-ap-northeast-1.amazonaws.com/progate/shared/images/lesson/html/study/ruby.svg
-">
-        <p>Ruby</p>
-      </div>
-      <div class="contents-item">
-      <img src="https://s3-ap-northeast-1.amazonaws.com/progate/shared/images/lesson/html/study/swift.svg
-">
-      <p>Swift</p>
-    </div>
-    <div class="contactform">
-      <h3 class="contents-title">
-      お問い合わせ
-      </h3>
       <p>メールアドレス（必須）</p>
       <input>
@@ -162,8 +160,6 @@
       </div>
-    </div>
     <div class="footer-list">
         <ul>
@@ -190,12 +186,12 @@
       </div>
+    </div>
   </body>
 </html>
-コード
 ```
 ```/* CSSのリセット（消さないでください） */
@@ -226,233 +222,225 @@
 /* ここからCSSを記述してください */
-.body{
-  font-family:"Avenir Next", "Hiragino Kaku Gothic ProN W3", sans-serif;
-}
-.header{
-  height:90px;
-  background-color:#26d0c9;
-  color:#fff;
-}
-.header-logo{
-  font-size:36px;
-  float:left;
-  margin:20px 40px;
-}
-.header-list li{
-  float:left;
-  margin:33px 20px;
-}
-.main{
-  margin:100px 80px;
-}
-.copy-container h1{
-  font-size:115px;
-}
-.copy-container span{
-  color:#ff4a4a;
-}
-.copy-container h2{
-  font-size:60px;
-  padding-top:40px;
-}
-.contents{
-  margin-top:100px;
-  height:500px;
-}
-h3{
-  font-size:28px;
-  padding-bottom:15px;
-  margin-bottom:35px;
-  border-bottom:2px solid #dee7ec;
-}
-.contents-item{
-  float:left;
-  padding-right:40px;
-  margin-bottom:120px;
-  margin-top:50px;
-}
-p{
-  font-size:24px;
-  padding-top:30px;
-}
-.contactform{
-  width:400px;
-}
-.contactform p{
-  padding-bottom:10px;
-   font-size:18px;
-}
-input {
-  border:1px solid #dee7ec;
-  width:400px;
-  padding:20px;
-  margin-bottom:30px;
-  font-size:18px;
-}
-textarea{
-  border:1px solid #dee7ec;
-  width:400px;
-  padding:20px;
-  font-size:18px;
-}
-.submit-button{
-  font-size:18px;
-  background-color:#889eab;
-  margin-bottom:30px;
-}
-.footer{
-  background-color:#2f5167;
-  color:#fff;
-  padding:40px;
-  height:200px;
-}
-.footer-logo{
-  font-size:32px;
-  float:left;
-}
-.footer-list{
-  float:right;
-  color:#fff;
-  padding-bottom:20px;
-}
-ul{
-  padding-bottom:20px;
-}
-コード
+body {
+  font-family: "Avenir Next", "Hiragino Kaku Gothic ProN W3", sans-serif;
+}
+.header {
+  background-color: #26d0c9;
+  color: #fff;
+  height: 90px;
+}
+.header-logo {
+  float: left;
+  font-size: 36px;
+  padding: 20px 40px;
+}
+.header-list {
+  float: left;
+}
+.header-list li {
+  float: left;
+  padding: 33px 20px;
+}
+.main {
+  padding: 100px 80px;
+  overflow:hidden;
+}
+.copy-container h1 {
+  font-size: 140px;
+}
+.copy-container h2 {
+  font-size: 60px;
+}
+.copy-container span {
+  color: #ff4a4a;
+}
+.contents {
+  margin-top: 100px;
+  overflow:hidden;
+}
+.section-title {
+  border-bottom: 2px solid #dee7ec;
+  font-size: 28px;
+  padding-bottom: 15px;
+  margin-bottom: 50px;
+}
+.contents-item {
+  float: left;
+  margin-right: 40px;
+}
+.contents-item p {
+  font-size: 24px;
+  margin-top: 30px;
+}
+.contact-form {
+  padding-top: 100px;
+}
+input, textarea {
+  width: 400px;
+  margin-top: 10px;
+  margin-bottom: 30px;
+  padding: 20px;
+  font-size: 18px;
+  border: 1px solid #dee7ec;
+}
+.contact-submit {
+  background-color: #dee7ec;
+  color: #889eab;
+}
+.footer {
+  background-color: #2f5167;
+  color: #fff;
+  height: 120px;
+  padding: 40px;
+}
+.footer-logo {
+  float: left;
+  font-size: 32px;
+}
+.footer-list {
+  float: right;
+}
+.footer-list li {
+  padding-bottom: 20px;
+}
+.contents-title {
+  border-bottom: 2px solid #dee7ec;
+  font-size: 28px;
+  padding-bottom: 15px;
+  margin-bottom: 50px;
+}
 ```
@@ -462,9 +450,11 @@
-footerのmargin-topを入れてみた。→未解決
+初めは、「学べるレッスン」と同じ.section-titleで作っていましたが、
+「お問い合わせ」だけ、左に寄らないので、.contents-titleとして、cssを別に書いていじってみました。。ができずでした。。
-mainのheigtを大きくした。→未解決
+他にも、align="right"など試しましたが、解決できませんでした。。