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

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

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

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

解決済

1回答

2057閲覧

HTML CSS デザインがうまくいかない

agawa

総合スコア14

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

0クリップ

投稿2019/04/23 02:09

編集2019/04/23 02:58

困っていること

HTML・CSSを使って独学でWebページを作成しています。
以下のようなデザインにしたいのですが、色々試してもうまくいかず困っております。
どのようなコーディングにすれば希望通りのデザインになるのか、アドバイスいただけませんでしょうか。

以下の、「ああああ」「いいいい」「うううう」の文字およびアイコンとその下のコメント文が
青色シェードの中で左寄りに表示されているのを中央に表示させたいです。
イメージ説明
今書いているコードが大きく変わっても問題ないです。
よろしくお願いします。

現在書いているコード

HTML

1<!doctype html> 2<html lang="en-US"> 3<head> 4<meta charset="utf-8"> 5<meta http-equiv="X-UA-Compatible" content="IE=edge"> 6<meta name="viewport" content="width=device-width, initial-scale=1"> 7<title>Sample</title> 8<link href="css/sample.css" rel="stylesheet" type="text/css"> 9<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries --> 10<!-- WARNING: Respond.js doesn't work if you view the page via file:// --> 11<!--[if lt IE 9]> 12 <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script> 13 <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script> 14 <![endif]--> 15</head> 16<body> 17<!-- Main Container --> 18<div class="container"> 19 <!-- Navigation --> 20 <header> 21 <nav> 22 <ul> 23 <li><a href="#about"><img src="http://placehold.jp/98x27.png" alt="新規登録"></a></li> 24 <li><a href="#hero"><img src="http://placehold.jp/98x27.png" alt="ログイン"></a></li> 25 </ul> 26 </nav> 27 </header> 28 <!-- Hero Section --> 29 <section class="topimage" id="topimage"> 30 <div class="imagecomment"> 31 <h2>あいうえおかきくけこ</h2> 32 </div> 33 </section> 34 <!-- PickUp Section --> 35 36 <h2 class="about_heading">タイトル</h2> 37 <section class="about_body"> 38 <div class="about_merit"> 39 <div class="about_merititem"> 40 <h3 class="about_heading">ああああ</h3> 41 <div class="about_meritmedia"> <img src="http://placehold.jp/160x160.png" alt="ああああ"> </div> 42 <h4 class="about_comment">テストテストテストテストテストテストテストテストテストテストテスト</h4> 43 </div> 44 <div class="about_merititem"> 45 <h3 class="about_heading">いいいい</h3> 46 <div class="about_meritmedia"> <img src="http://placehold.jp/160x160.png" alt="いいいい"> </div> 47 <h4 class="about_comment">テストテストテストテストテストテストテストテストテストテストテストテストテスト 48  テストテストテストテストテストテストテスト</h4> 49 </div> 50 <div class="about_merititem"> 51 <h3 class="about_heading">うううう</h3> 52 <div class="about_meritmedia"> <img src="http://placehold.jp/160x160.png" alt="うううう"> </div> 53 <h4 class="about_comment">テストテストテストテストテストテストテストテストテストテストテスト</h4> 54 </div> 55 </div> 56 </section> 57 <!-- More Info Section --> 58 <section class="banner"> </section> 59 <!-- Footer Section --> 60 <footer> 61 <nav class="footer_menu"> 62 <ul class="footer_menu"> 63 <li class="footer_menu"> 64 <h1 class="footer_menu">〇〇〇について</h1> 65 </li> 66 <li class="footer_menu"><a href="#about">プライバシーポリシー</a></li> 67 <li class="footer_menu"><a href="#about">利用箇所</a></li> 68 <li class="footer_menu"><a href="#about">お問い合わせ</a></li> 69 </ul> 70 </nav> 71 </footer> 72 <!-- Copyrights Section --> 73 <div class="copyright">&copy;2019 - <strong></strong></div> 74</div> 75<!-- Main Container Ends --> 76</body> 77</html>

css

1@charset "UTF-8"; 2/* Body */ 3body { 4 font-family: Quicksand,'游ゴシック体','Yu Gothic', YuGothic,'ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro', 'メイリオ', Meiryo, Osaka, 'MS Pゴシック', 'MS PGothic', 'sans-serif'; 5 6 background-color: #f2f2f2; 7 margin-top: 0px; 8 margin-right: 0px; 9 margin-bottom: 0px; 10 margin-left: 0px; 11 font-style: normal; 12 font-weight: 200; 13 font-size: 100%; 14} 15/* Container */ 16.container { 17 width: 80%; 18 margin-left: auto; 19 margin-right: auto; 20 height: auto; 21 background-color: #FFFFFF; 22} 23/* Navigation */ 24header { 25 width: 100%; 26 height: 60px; 27 border-bottom: 0px; 28} 29 30nav { 31 float: right; 32 width: 50%; 33 text-align: right; 34 margin-right: 25px; 35} 36nav ul { 37 list-style: none; 38 float: right; 39} 40nav ul li { 41 float: right; 42 color: #FFFFFF; 43 font-size: 18px; 44 text-align: left; 45 margin-right: 25px; 46 letter-spacing: 2px; 47 font-weight: normal; 48 transition: all 0.3s linear; 49} 50ul li a { 51 color: #FFFFFF; 52 text-decoration: none; 53} 54ul li:hover a { 55 color: #2C9AB7; 56} 57 58/* Hero Section */ 59 60.topimage { 61 background-image: url("http://placehold.jp/1536x400.png"); 62 background-color: #B3B3B3; 63 background-position: center center; 64 background-repeat: no-repeat; 65 background-size: cover; 66 padding-top: 10px; 67 padding-bottom: 200px; 68} 69 70.imagecomment { 71 font-family: source-sans-pro, "ヒラギノ角ゴ Pro W3"; 72 font-size: 90%; 73 color: #FFFFFF; 74 text-align: left; 75 margin-top: 200px; 76 margin-left: 25%; 77 margin-bottom: 0px; 78 letter-spacing: 4px; 79} 80 81/* About Section */ 82.about_heading { 83 background-position: center center; 84 background-repeat: no-repeat; 85 background-size: cover; 86 display: block; 87 text-align: center; 88 font-weight: bold; 89} 90 91.about_body { 92 padding-top: 20px; 93 display: inline-block; 94 padding-left: 10%; 95 padding-right: 10%; 96 background-color: #FFFFFF; 97} 98 99.about_merit{ 100 display: flex; 101 float: center; 102} 103 104.about_merititem{ 105 width: 26%; 106 padding-right: 25px; 107 padding-left: 25px; 108 109} 110 111.about_comment { 112 text-align: left; 113 line-height: 1.5; 114 font-size: 17px; 115 font-weight: lighter; 116} 117 118.about_meritmedia{ 119 padding: 0 0.5px; 120 text-align: center; 121} 122 123/* Parallax Section */ 124.banner { 125 background-color: #B3B3B3; 126 height: 120px; 127} 128 129/* More info */ 130footer { 131 background-color: #021626; 132 color: #FFFFFF; 133 width: 100%; 134 height: 250px; 135 padding-bottom: 20px; 136} 137 138.footer_menu { 139 font-family: Quicksand,'游ゴシック体','Yu Gothic', YuGothic,'ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro', 'メイリオ', Meiryo, Osaka, 'MS Pゴシック', 'MS PGothic', 'sans-serif'; 140 width: 20%; 141 text-align: left; 142 padding-top: 3px; 143 line-height: 25px; 144 float: left; 145 font-size: 100%; 146} 147 148nav .footer_menu { 149 float: left; 150 width: 100%; 151 box-sizing: border-box; 152 text-align: left; 153} 154 155nav ul .footer_menu { 156 list-style: none; 157 float: left; 158} 159nav ul li .footer_menu { 160 float: left; 161 display: block; 162 color: #FFFFFF; 163 font-size: 18px; 164 text-align: left; 165 letter-spacing: 2px; 166 font-weight: normal; 167 transition: all 0.3s linear; 168} 169 170nav ul li a .footer_menu { 171 text-align: left; 172} 173 174a .footer_menu:hover{ 175 color:#000000; 176} 177 178footer .footer_column p { 179 color: #ffffff; 180 padding-left: 30px; 181 padding-right:0px; 182 text-align: left; 183 line-height: 25px; 184 font-weight: lighter; 185 margin-left: 20px; 186 margin-right: 0px; 187} 188 189.copyright { 190 text-align: right; 191 padding-top: 5px; 192 padding-bottom: 5px; 193 padding-right: 10px; 194 background-color: #717070; 195 color: #FFFFFF; 196 text-transform: uppercase; 197 font-weight: lighter; 198 letter-spacing: 2px; 199 border-top-width: 2px; 200 font-size: 14px; 201} 202.footer_banner { 203 background-color: #000000; 204 padding-top: 60px; 205 padding-bottom: 60PX; 206 margin-bottom: 0px; 207}

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

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

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

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

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

yambejp

2019/04/23 02:12

imgファイルが肝の質問で画像が見えないのであれば挙動が確認できません http://placehold.jp/ など利用して、画像が表示されるサンプルを書いてください
m.ts10806

2019/04/23 02:17

初心者アイコンもありますし「初心者です」はタイトル上不要かと思います。 https://teratail.com/help/question-tips#questionTips3-1 > ありがちな失敗としては、「助けてください」「初心者です」という表題をつけてしまうことです。
guest

回答1

0

ベストアンサー

多分これで思い通りの配置にはなるはず。
float: center;はありません。

css

1.about_merit { 2 display: flex; 3 float: center; 4}

css

1.about_merit { 2 display: flex; 3 justify-content: center; 4}

投稿2019/04/23 02:18

kszk311

総合スコア3404

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

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

agawa

2019/04/23 02:44 編集

ありがとうございます。無事思い通りの配置になりました。 後学のために追加でもう一つ教えていただきたのですが、 自分で以下のような変更を試してみたのですが希望通りの配置にならなかった理由が分かっておりません。(質問時で掲載した画像とレイアウトが同様になってしまいました) もしお分かりでしたら下記コードではどういった問題があるのか教えていただけませんでしょうか。 よろしくお願いします。 ```css .about_body { padding-top: 20px; display: inline-block; padding-left: 10%; padding-right: 10%; background-color: #FFFFFF; } .about_merit{ display: flex; float: center; } ``` ↓ ```css .about_body { padding-top: 20px; padding-left: 10%; padding-right: 10%; background-color: #FFFFFF; text-align: center; } .about_merit{ display: inline-block; text-align: left; } ```
kszk311

2019/04/23 03:01

上記の変更をしたら、縦積みになり、同じようなレイアウトにはなりませんでした。 他に変更したところはありませんか?
aKusano

2019/04/23 03:13

.about_merit{ display: inline-block; text-align: left; } ・display:inline-block→自動改行されなくなり、ボックスが横並びとなる ・text-align: left →コンテンツを左詰めで配置 なので、2つ合わさって質問時と同様な左寄り配置のレイアウトになったと思われます。 ひとつ上の親要素.about_bodyでtext-align:centerとしているので、.about_meritでの text-align:leftを削除すればセンター寄せになると思います。 ただ、inline-blockでの横並びは改行制御が難しいので、display:flexでコントロールするほうがおすすめです。
kszk311

2019/04/23 03:27

aKusanoさん、ありがとうございます!
agawa

2019/04/23 03:41

kszk311さん、aKusanoさん ご回答いただきありがとうございます。 text-align: leftを削除しても配置に変化がなくセンター寄せにならないのですが、 そもそも自分がイマイチinline-blockについて理解できていないことが分かりました。 もう少ししっかり勉強して色々試してみることにします。 今回の件はaKusanoさんにいただいたご回答で解決しましたので解決済にします。 ありがとうございました!
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問