質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
Windows 10

Windows 10は、マイクロソフト社がリリースしたOSです。Modern UIを標準画面にした8.1から、10では再びデスクトップ主体に戻され、UIも変更されています。PCやスマホ、タブレットなど様々なデバイスに幅広く対応していることが特徴です。

CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

コードレビュー

コードレビューは、ソフトウェア開発の一工程で、 ソースコードの検査を行い、開発工程で見過ごされた誤りを検出する事で、 ソフトウェア品質を高めるためのものです。

Brackets

Bracketsは、オープンソースで開発されているHTML/CSS/JavaScriptのコードエディターです。

Q&A

解決済

1回答

663閲覧

①サービス部のレイアウト(テキストとイメージの余白) ②お問い合わせが中央にこない

mitrasi

総合スコア49

Windows 10

Windows 10は、マイクロソフト社がリリースしたOSです。Modern UIを標準画面にした8.1から、10では再びデスクトップ主体に戻され、UIも変更されています。PCやスマホ、タブレットなど様々なデバイスに幅広く対応していることが特徴です。

CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

コードレビュー

コードレビューは、ソフトウェア開発の一工程で、 ソースコードの検査を行い、開発工程で見過ごされた誤りを検出する事で、 ソフトウェア品質を高めるためのものです。

Brackets

Bracketsは、オープンソースで開発されているHTML/CSS/JavaScriptのコードエディターです。

0グッド

0クリップ

投稿2021/02/08 12:49

編集2021/02/08 12:59

前提・実現したいこと

①サービス部のレイアウト(テキストとイメージの間に余白)をそれぞれ70px

②お問い合わせが中央に来ない

どちらも自分でやったときはできたはずなのですが、解答のやり方にそってやろうと思うとどうにもわからなくなってしまいます。。。

該当のソースコード

HTML

1<!DOCTYPE html> 2<html> 3 4<head> 5 <meta charset="utf-8"> 6 <meta name="viewport" content="width=device-width,initial-scale=1"> 7 <link rel="stylesheet" href="css/reset.css"> 8 <link rel="stylesheet" href="css/style.css"> 9 <link rel="stylesheet" href="css/responsive.css"> 10 <title>模写テイク2</title> 11</head> 12 13<body> 14 <header class="header"> 15 16 <h1 class="site-title"><a href="./">クリ★スタ</a></h1> 17 <!-- <a href="#" class="header-title">クリ★スタ</a>--> 18 <div class="nav-wrapper"> 19 <nav class="header-nav"> 20 <ul class="nav-list"> 21 <!-- href のなかの書き方--> 22 <li class="nav-item"><a href="#about">About</a></li> 23 <li class="nav-item"><a href="#blog">Service</a></li> 24 <li class="nav-item"><a href="#access">Contents</a></li> 25 </ul> 26 </nav> 27 28 </div> 29 <!-- 全然かけなかったボタン--> 30 <button class="burger-btn"> 31 <span class="fa-bars"> 32 <span class="bar bar-top"></span> 33 <span class="bar bar-mid"></span> 34 <span class="bar bar-button"></span> 35 </span> 36 </button> 37 </header> 38 <main> 39 <div class="main-visial"> 40 <h1 class="kv-copy">Cresta.design</h1> 41 </div> 42 43 44 45 <!-- アバウト--> 46 <section class="about section-wrapper"> 47 <h2 class="section-title">About</h2> 48 <h3 class="sub-title">ミニマルで<br>洗練されたデザインを。</h3> 49 <p class="section-text">近年、ミニマルなデザインが流行しています。そこで弊社では、クライアント企業様新規サービス等の課題に対してミニマルで洗練されたデザインを実現させることで解決のサポートを致します。もちろん全てのサービスにおいてミニマルなデザインが課題解決になるわけではないので、課題や今後のサービスの展開等しっかりとヒアリングを行なった上でご提案させて頂きます。</p> 50 </section> 51 52 <!-- サービス--> 53 <section class="service section-wrapper"> 54 <h2 class="section-title">Service</h2> 55 <div class="content-wrapper"> 56 <div class="content-item"> 57 <div class="content-img"><img src="img/service-image@2x.jpg" alt="一眼レフ"></div> 58 <div class="content-text-section"> 59 <h3 class="sub-title">リリース時のサポートで<br>サービスのブランディングを</h3> 60 <p class="content-text">弊社では、リリース時もサポートさせて頂きます。プレスリリース用のサイトや動画制作を通して、サービスのブランディングを行わせて頂きます。</p> 61 </div> 62 </div> 63 <div class="content-item reverse"> 64 <div class="content-img"><img src="img/service-image02@2x.jpg" alt="アイフォン"></div> 65 <div class="content-text-section"> 66 <h3 class="sub-title">リリース後のサポートで<br>効果を最大化させる</h3> 67 <p class="content-text">弊社では、リリース後もサポートさせて頂きます。サービスはリリース後に様々な課題にぶつかります。そこでクライアント様と一緒に改善を行うことで、デザインの効果を最大化させます。</p> 68 </div> 69 </div> 70 </div> 71 </section> 72 <!--ニュース--> 73 <section class="news section-wrapper"> 74 <h2 class="section-title">Contents</h2> 75 <div class="news-list"> 76 <div class="news-card"> 77 <div class="news-img"><img class="card-img" src="img/card-image1@2x.jpg" alt="アイフォン"></div> 78 <p class="news-text">新規サイトを公開しました。今回のサイトは白と黒を基調にしたミニマルなデザインになっています。</p> 79 </div> 80 <div class="news-card"> 81 <div class="news-img"><img class="card-img" src="img/card-image2@2x.jpg" alt="アイフォン"></div> 82 <p class="news-text">新規サイトを公開しました。今回のサイトは白と黒を基調にしたミニマルなデザインになっています。</p> 83 </div> 84 <div class="news-card"> 85 <div class="news-img"><img class="card-img" src="img/card-image3@2x.jpg" alt="アイフォン"></div> 86 <p class="news-text">新規サイトを公開しました。今回のサイトは白と黒を基調にしたミニマルなデザインになっています。</p> 87 </div> 88 </div> 89 </section> 90 <!-- お問い合わせ--> 91 92 <div class="section-wrapper"> 93 <section class="contact-wrapper"> 94 <h2 class="contact-title">お問い合わせ</h2> 95 <ul class="contact-list"> 96 <li class="contact-form mei"> 97 <p>担当者名</p><input type="text"> 98 </li> 99 <li class="contact-form tel"> 100 <p>電話番号</p><input type="tel"> 101 </li> 102 <li class="contact-form mail"> 103 <p>メールアドレス</p><input type="email"> 104 </li> 105 <li class="contact-form mail"> 106 <p>お問い合わせ内容</p><textarea></textarea> 107 </li> 108 </ul> 109 <input class="btn" type="submit" value="送信"> 110 </section> 111 </div> 112 </main> 113 <footer> 114 <small> ©︎crest.design all rights reserved</small> 115 116 </footer> 117</body> 118 119</html> 120

該当のソースコード

CSS

1@charset "UTF-8"; 2/*ヘッダーフッター送信ボタン*/ 3/*ニュースの枠線など*/ 4/*共通レイアウト*/ 5/*html { 6 font-family: "Roboto", sans-serif, "Noto Sans CJK JP", sans-serif; 7 font-size: 0.8rem; 8 /*letter-spacing: 30px;*/ 9/* color: $text-black;*/ 10html { 11 font-size: 62.5%; 12 /*フォントサイズを簡潔に計算しやすくするため*/ 13} 14html body { 15 color: #141414; 16 font-size: 1.4rem; 17 line-height: 1.8; 18 letter-spacing: 0.05em; 19 /*変換表でXDの「0.7px」を変換した0.043の四捨五入*/ 20 /*和文フォントの目安高さ*/ 21 /* .wrapper { 22 margin: 0 auto; 23 padding: 0 10% 20px; 24 text-align: center; 25 }*/ 26} 27html body img { 28 max-width: 100%; 29 vertical-align: bottom; 30} 31html body a { 32 text-decoration: none; 33 color: #FFFFFF; 34} 35html body .section-title { 36 font-size: 3.6rem; 37 font-weight: bold; 38 margin-top: 150px; 39 margin-bottom: 70px; 40 letter-spacing: 0.05em; 41 /*(文字間「1.8」÷フォントサイズ「36px」)=0.05em*/ 42 text-align: center; 43 /*まん中に寄せる*/ 44} 45html body h3 { 46 font-weight: bold; 47 letter-spacing: 0.1em; 48 /*文字間「2.4」÷フォントサイズ「24」=0.1em*/ 49 margin-bottom: 40px; 50 font-size: 2.4rem; 51} 52html body .section-wrapper { 53 padding: 100px 10% 50px; 54} 55 56/*ヘッダー*/ 57header { 58 background-color: #1B1310; 59 border-bottom: 1px solid #FFFFFF; 60 line-height: 74px; 61 display: flex; 62 justify-content: space-between; 63 align-items: center; 64 padding: 0 120px; 65} 66header .nav-list { 67 display: flex; 68} 69header .nav-list .nav-item { 70 /*margin-left: 55px;*/ 71 margin-right: 55px; 72 /*margin-rightの分だけ左に寄ってしまうからmargin-leftで余白を作るようにする*/ 73} 74header .nav-list .nav-item:last-of-type { 75 padding-right: 0; 76} 77header .burger-btn { 78 display: none; 79} 80 81/*メインビジュアル*/ 82.main-visial { 83 height: 90vh; 84 /*ビューポートの高さを基準にした高さ どこから90を導いてきたのか*/ 85 background-image: url(../img/fv-bgi@2x.jpg); 86 background-size: cover; 87 background-position: center; 88 /*padding: 300px 0;*/ 89 display: flex; 90 /*写真と同じ幅いっぱいに伸びていた枠線が指定した幅になる*/ 91 justify-content: center; 92 /*ど真ん中に配置*/ 93 align-items: center; 94 flex-direction: column; 95} 96.main-visial .kv-copy { 97 color: #FFFFFF; 98 border: 2px solid #FFFFFF; 99 /* text-align: center;*/ 100 font-size: 5rem; 101 /*なぜフォントサイズ5rem*/ 102 font-weight: bold; 103 padding: 34px 42px; 104 /*枠内部の余白*/ 105} 106 107/*アバウト*/ 108.about { 109 text-align: left; 110 display: inline-block; 111} 112/*サービス*/ 113.content-text-section, 114.content-img { 115 width: 480px; 116 /*画像とテキストの幅が480になる*/ 117} 118 119.content-item { 120 display: flex; 121 align-items: center; 122 /*写真の高さでまんなかにする*/ 123 justify-content: space-between; 124 /*めいっぱいに広がる*/ 125 flex-wrap: wrap; 126} 127.content-item .content-text-section1 { 128 padding-left: 0.7rem; 129} 130 131.reverse { 132 flex-direction: row-reverse; 133 /*二つ目の要素のみ逆転する*/ 134 margin-top: 70px; 135} 136.reverse .content-text-section { 137 padding-right: 70px; 138} 139 140/*ニュース*/ 141.news .news-list { 142 display: flex; 143 justify-content: center; 144} 145.news .news-list .news-card { 146 box-shadow: 0 0 6px #1B131066; 147 width: 320px; 148 margin-right: 35px; 149} 150.news .news-list .news-card .news-text { 151 width: 255px; 152 text-align: center; 153 line-height: 25px; 154 margin: 25px auto; 155} 156.news .news-list .news-card:last-of-type { 157 padding-right: 0; 158} 159 160/*お問い合わせ*/ 161.contact-wrapper { 162 /*display: inline-block;*/ 163 /*フォームのマックスの長さ*/ 164 margin: 0 auto; 165 /*ボタン*/ 166} 167.contact-wrapper .contact-title { 168 font-size: 24px; 169 font-weight: bold; 170 margin-top: 150px; 171 margin-bottom: 72px; 172} 173.contact-wrapper .contact-list { 174 max-width: 700px; 175} 176.contact-wrapper .contact-list .contact-form { 177 width: 100%; 178 margin: 0 auto; 179} 180.contact-wrapper .contact-list .contact-form p { 181 text-align: left; 182} 183.contact-wrapper .btn { 184 background-color: #1B1310; 185 color: #FFFFFF; 186 font-size: 2rem; 187 /*フォントサイズはrem*/ 188 /*border-radius: 51px;*/ 189 border-radius: 30px; 190 font-weight: bold; 191 /*フォント太く*/ 192 /* margin: 50px;*/ 193 width: 235px; 194 /*ボタンの幅をつくる*/ 195 box-shadow: 0px 0px 6px #1B1310; 196 /*ボタンのうっすらとしたかげ*/ 197 /*padding: 20px 97px;*/ 198 /*なんとなく数値が近いのはわかるけどなぜ20*/ 199 padding: 16px 97px; 200} 201 202/*フッター*/ 203footer { 204 background-color: #1B1310; 205 /*padding: 29px auto;*/ 206 height: 80px; 207 /*フッターの高さをつくる*/ 208} 209footer small { 210 color: #FFFFFF; 211 display: block; 212 /*インラインじゃなくてブロック*/ 213 text-align: center; 214 /*line-height: 30px;*/ 215 /*font-size: 14px;*/ 216 padding-top: 30px; 217 /*上に余白を作ることでまんなかになる*/ 218} 219 220/**/

試したこと


②中央にするためにmarginやblockなどおもいつくことはしてみました。

補足情報(FW/ツールのバージョンなど)

OS:Windows
エディタ:Brackets
ブラウザ:クローム

模写元

解説記事

解説コード

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

①については、.content-inner が付いている div が display: flex; になっており、justify-content: space-between; で左右均等配置になっているだけだと思います。
解説コード?を見た限りですと、余白を指定する形では管理していません。

②については、

.form に width を指定して(解説コードだと700px) margin: 0 auto;

h2.contact-titletext-align: center;

各入力項目のdiv(質問者さんはliにしているようですが) に display: flex;flex-direction: column;

ボタンもdivでくくってtext-align: center;

で大体キレイに成形できるのではないでしょうか。

flex関連はこの辺をご確認ください。
https://developer.mozilla.org/ja/docs/Web/CSS/CSS_Flexible_Box_Layout
https://developer.mozilla.org/ja/docs/Web/CSS/justify-content
https://developer.mozilla.org/ja/docs/Web/CSS/flex-direction

投稿2021/02/15 08:24

編集2021/02/15 08:56
mai1210

総合スコア272

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

mitrasi

2021/02/15 23:25

ご回答ありがとうございます! 無事解決いたしました!
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問