困っていること
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">©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}
回答1件
あなたの回答
tips
プレビュー