編集履歴

質問編集履歴

cssの追加 markdownの利用

2021/10/09 02:58

投稿

maruco2525

スコア3

test CHANGED Viewed

File without changes

test CHANGED Viewed

@@ -2,7 +2,9 @@
 色々試しましたが原因が分からないので教えていただけないでしょうか？
-html
+```html
     <div id="wrapper">
@@ -66,7 +68,7 @@
                 <p class="main_message">Design for Smile.</p>
-                <p class="sub_message">快適なオフィスを<span>デザインする</span></p>
+                <p class="sub_message"><span></span></p>
             </div>
@@ -88,9 +90,7 @@
             <P class="concept_message">
-                "働きたくなる空間"をデザインすることで<br>
-                人々を幸せにする。
             </P>
@@ -98,15 +98,11 @@
                 <p class="concept_explanation">
-                    私たちは、オフィスに特化した空間デザイン専門としております。その理由は、「働きたくなる空間で仕事ができれば
-                    多くの人を幸せにできるのではないか」と考えるためです。そんな想いの株式会社Cresta Designだからこそできる
-                    空間デザインを提供させていただきます。
                 </p>
-                <img class="concept_img" src="img/concept-image@2x.jpg" alt="空間デザインイメージ写真">
+                <img class="concept_img" src="img/concept-image@2x.jpg" alt="">
             </div>
@@ -128,7 +124,7 @@
                     <dt><img src="img/card-img01@2x.jpg" alt="新規サイトイメージ写真"></dt>
-                    <dd>新規サイトを公開しました。今回のサイトは白と黒を基調にしたミニマルなデザインになっています。</dd>
+                    <dd></dd>
                 </dl>
@@ -136,7 +132,7 @@
                     <dt><img src="img/card-img02@2x.jpg" alt="新規サイトイメージ写真"></dt>
-                    <dd>新規サイトを公開しました。今回のサイトは白と黒を基調にしたミニマルなデザインになっています。</dd>
+                    <dd></dd>
                 </dl>
@@ -144,7 +140,7 @@
                     <dt><img src="img/card-img03@2x.jpg" alt="新規サイトイメージ写真"></dt>
-                    <dd>新規サイトを公開しました。今回のサイトは白と黒を基調にしたミニマルなデザインになっています。</dd>
+                    <dd></dd>
                 </dl>
@@ -186,7 +182,7 @@
             </div>
-            <p>お気軽にご相談ください。</p>
+            <p></p>
             <button><a href="#">Contact</a></button>
@@ -196,14 +192,724 @@
     </section>
     <footer>
-        <p>&copy;cresta.design all rights reserved</p>
     </footer>
     </div>
+```
+```css
+    #wrapper {
+  width: 100%;
+}
+/*ヘッダー*/
+header {
+  width: 100%;
+  height: 750px;
+  position: relative;
+}
+header nav {
+  float: right;
+}
+header nav li {
+  display: inline-block;
+  padding: 5px 10px;
+}
+header nav li a {
+  font-size: 81%;
+  display: block;
+  border-bottom: 1px solid #333;
+}
+header .main_name {
+  font-size: 225%;
+  position: absolute;
+  top: 50%;
+  transform: translate(-50%);
+  z-index: 20;
+  left: 50%;
+}
+header .sub_name {
+  font-size: 10vw;
+  position: absolute;
+  top: 50%;
+ transform: translateY(-50%);
+  z-index: 10;
+  left: 50%;
+}
+/*article共通*/
+article {
+  padding: 50px 30px;
+  width: 100%;
+  box-sizing: border-box;
+}
+article h2 {
+  font-size: 187%;
+  margin-bottom: 20px;
+  font-weight: bold;
+}
+article h2 span {
+  font-size: 80%;
+  display: block;
+}
+/*プロフィール*/
+#profile {
+  margin-bottom: 50px;
+}
+#profile .profile_inner {
+  display: flex;
+ align-items: center;
+}
+#profile .profile_inner .profile_image {
+  width: 50vw;
+}
+#profile .profile_inner span {
+  display: block;
+  padding-left: 20px;
+  margin-bottom: 10px;
+}
+#profile .profile_inner .profile_sentence {
+  width: 50vw;
+}
+#profile .profile_inner .profile_sentence p {
+  padding-left: 20px;
+  text-align: justify;
+  line-height: 1.8em;
+}
+/*制作物*/
+#works {
+  width: 100%;
+  margin-bottom: 50px;
+  /*キャンプ場hp*/
+  /*cresta design hp*/
+}
+#works h3 {
+  font-size: 112%;
+  margin-bottom: 20px;
+}
+#works dl dd {
+  padding: 10px 1em;
+  text-indent: 1em;
+}
+#works button {
+  background-color: #7fd1b9;
+  border: none;
+  border-radius: 10px;
+  float: right;
+  padding: 0;
+}
+#works button a {
+  padding: 5px 20px;
+  display: block;
+}
+#works .camp_hp, #works .cresta_hp {
+  display: flex;
+  margin-bottom: 50px;
+}
+#works .camp_hp ul li:nth-of-type(1) img, #works .cresta_hp ul li:nth-of-type(1) img {
+  width: 25vw;
+}
+#works .camp_hp ul li:nth-of-type(2), #works .cresta_hp ul li:nth-of-type(2) {
+  margin: 10% 0 0 10vw;
+}
+#works .camp_hp ul li:nth-of-type(2) img, #works .cresta_hp ul li:nth-of-type(2) img {
+  width: 5vw;
+}
+#works .camp_hp .camp_explanation, #works .camp_hp .cresta_explanation, #works .cresta_hp .camp_explanation, #works .cresta_hp .cresta_explanation {
+  width: 70vw;
+  padding: 5px 0 0 50px;
+}
+#works .cresta_explanation dd span {
+  display: block;
+  font-size: 75%;
+}
+#works .cresta_explanation dd span:nth-of-type(1) {
+  margin-top: 2em;
+}
+/*できること*/
+#skills {
+  margin: 0 auto　40px;
+}
+#skills .skills_inner {
+  display: flex;
+      flex-wrap: wrap;
+}
+#skills .skills_inner dl {
+  width: 400px;
+  margin-bottom: 40px;
+}
+#skills .skills_inner dl dt {
+  font-weight: bold;
+  margin-top: 5px;
+  margin-bottom: 20px;
+}
+#skills .skills_inner dl .fab {
+  font-size: 300%;
+}
+#skills .skills_inner dl .ps_icon, #skills .skills_inner dl .ai_icon {
+  width: 40px;
+  height: 40px;
+  text-align: right;
+  line-height: 56px;
+  margin-bottom: 13px;
+}
+responsive css
+@media screen and (min-width: 599px) {
+  #hamburger_menu {
+    display: none;
+  }
+}
+@media screen and (max-width: 599px) {
+  /*ヘッダー*/
+  .header_inner {
+    /*ハンバーガーメニュー*/
+  }
+  .header_inner #header_fixed {
+    width: 100%;
+  }
+  .header_inner h1 {
+    padding-left: 2%;
+  }
+  .header_inner #nav_menu {
+    padding-right: 0;
+    display: none;
+  }
+  .header_inner .top_message {
+    width: 100%;
+    padding-left: 0;
+    padding-top: 154px;
+  }
+  .header_inner .top_message .main_message {
+    font-size: 37px;
+    width: 100%;
+    text-align: center;
+    margin-bottom: 20px;
+  }
+  .header_inner .top_message .sub_message {
+    font-size: 30px;
+    line-height: 1.8em;
+  }
+  .header_inner .top_message span {
+    display: block;
+    font-weight: bold;
+  }
+  .header_inner #hamburger_menu {
+    position: absolute;
+    top: 0;
+    right: -110%;
+    width: 100%;
+    height: 100vh;
+    background-color: #282F35;
+    transition: .7s;
+  }
+  .header_inner #hamburger_menu ul {
+    margin: 50vh auto 0;
+   transform: translateY(-50%);
+    text-align: center;
+  }
+  .header_inner #hamburger_menu ul li a {
+    color: #fff;
+    display: block;
+    padding: 10px;
+    translate: .5s;
+  }
+  .header_inner #hamburger {
+    display: block;
+    position: absolute;
+    width: 30px;
+    height: 22px;
+    top: 30px;
+    right: 30px;
+    transition: 1s;
+  }
+  .header_inner #hamburger .inner_line {
+    display: block;
+    position: absolute;
+    width: 30px;
+    height: 3px;
+    background-color: #fff;
+    transition: 1s;
+   transform-origin: 28px;
+  }
+  .header_inner #hamburger #line_top {
+    top: 0;
+  }
+  .header_inner #hamburger #line_middle {
+    top: 10px;
+  }
+  .header_inner #hamburger #line_bottom {
+    bottom: 0;
+  }
+  .header_inner .top_move {
+            transform: rotate(-45deg);
+    top: 50%;
+  }
+  .header_inner .middle_move {
+    opacity: 0;
+  }
+  .header_inner .bottom_move {
+            transform: rotate(45deg);
+    bottom: 0;
+  }
+  .header_inner .in {
+            transform: translateX(-110%);
+  }
+  article .left_title {
+    padding-left: 0;
+  }
+  article h2 {
+    font-size: 30px;
+  }
+  article h2::after {
+    width: 90px;
+  }
+  /*コンセプト*/
+  #concept {
+    padding: 0 10px;
+  }
+  #concept .concept_contents {
+    flex-direction: column;
+    width: 100%;
+    margin: 0 auto 55px;
+   justify-content: center;
+  }
+  #concept .concept_contents .concept_explanation {
+    width: 100%;
+  }
+  #concept .concept_message {
+    width: 100%;
+    margin: 0 auto 34px;
+  }
+  #concept img {
+    width: 100vw;
+    height: auto;
+  }
+  /*ワークス*/
+  #works .works_inner {
+  flex-direction: column;
+  }
+  #works dl {
+    margin: 0;
+  }
+  /*サービス*/
+  #service h2 {
+    padding-left: 6%;
+    text-align: left;
+  }
+  #service ul {
+   flex-direction: column;
+  align-items: center;
+  }
+  #service ul li {
+    width: 100%;
+  }
+}
+``````