ProgateのHTML&CSSの中級道場において、
要素(レッスンコンテンツ)を横並びに表示させたいときは、
インラインブロックにしてもそのようにならない理由をご教授いただけたらと思います。
HTML
1<!DOCTYPE html> 2<html> 3<head> 4 <meta charset="utf-8"> 5 <title>Progate</title> 6 <link rel="stylesheet" type="text/css" href="stylesheet.css"> 7 <!-- ここでFont Awesomeを読み込んでください --> 8 <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css"> 9</head> 10<body> 11 <!-- ここにコードを書いていきましょう --> 12 <header> 13 <div class="header-wrapper"> 14 <div class="container"> 15 <div class="header-left"> 16 <img src="https://prog-8.com/images/html/advanced/main_logo.png" alt="logo" width="124px"> 17 </div> 18 <div class="header-right"> 19 <a href="" class="login">ログイン</a> 20 </div> 21 </div> 22 </div> 23 </header> 24 25 <section class="main"> 26 27 <div class="top-wrapper"> 28 <div class="container"> 29 <div class="title-wrapper"> 30 <div class="title"> 31 <h1>LEARN TO CODE.</h1> 32 <h1>LEARN TO BE CREATIVE.</h1> 33 <p>Progateはオンラインプログラミング学習サービスです。</p> 34 <p>初心者にもやさしいスライドとレッスンで、ウェブサービスを作りながらプログラミングを学んでいきましょう。</p> 35 </div> 36 </div> 37 <div class="btn-wrapper"> 38 <a href="" class="btn signup">新規登録はこちら</a> 39 <p>or</p> 40 <a href="" class="btn facebook">Facebookで登録</a> 41 <a href="" class="btn twitter">Twitterで登録</a> 42 </div> 43 </div> 44 </div> 45 46 <div class="contents-wrapper"> 47 <div class="container"> 48 <div class="contents-title"> 49 <h3>Learn Where to Get Started!</h3> 50 </div> 51 <div class="lessons"> 52 <div class="lesson"> 53 <img class="img" src="https://prog-8.com/images/html/advanced/html.png" alt="" /> 54 <h4>HTML & CSS</h4> 55 <p>ウェブページの作成に使用される言語です。HTMLとCSSを組み合わせることで、静的なページを作り上げることができます。</p> 56 </div> 57 <div class="lesson"> 58 <img class="img" src="https://prog-8.com/images/html/advanced/jQuery.png" alt="" /> 59 <h4>jQuery</h4> 60 <p>素敵な動きを手軽に実装できるJavaScriptライブラリです。 アニメーション効果をつけたり、Ajax(エイジャックス)を使って外部ファイルを読み込んだりと色々なことができます。</p> 61 </div> 62 <div class="lesson"> 63 <img class="img" src="https://prog-8.com/images/html/advanced/ruby.png" alt="" /> 64 <h4>Ruby</h4> 65 <p>オープンソースの動的なプログラミング言語で、 シンプルさと高い生産性を備えています。大きなWebアプリケーションから小さな日用ツールまで、さまざまなソフトウェアを作ることができます。</p> 66 </div> 67 <div class="lesson"> 68 <img class="img" src="https://prog-8.com/images/html/advanced/php.png" alt="" /> 69 <h4>PHP</h4> 70 <p>HTMLだけではページの内容を変えることはできません。PHPはHTMLにプログラムを埋め込み、それを可能にします。</p> 71 </div> 72 </div> 73 </div> 74 </div> 75 76 </section> 77</body> 78</html>
CSS
1/* CSSのリセット(消さないでください) */ 2html, body, 3ul, ol, li, 4h1, h2, h3, h4, h5, h6, p, div { 5 margin: 0; 6 padding: 0; 7} 8 9body { 10 font-family: 'Hiragino Kaku Gothic ProN W3', sans-serif; 11} 12 13li { 14 list-style: none; 15} 16 17a { 18 text-decoration: none; 19} 20 21header{ 22 height: 65px; 23 width: 100%; 24 background-color: rgba(34, 49, 52, 0.9); 25 position :fixed; 26 top: 0; 27 z-index: 10; 28} 29 30.container{ 31 width:1170px; 32 margin:0 auto; 33 34} 35 36/* header */ 37 38 39.header-left{ 40 float:left; 41 padding:20px 0; 42} 43 44.header-right{ 45 float:right; 46 padding:20px 0; 47} 48 49.login{ 50 color:white; 51 background-color:rgba(255,255,255,0.3); 52 padding:20px 25px; 53} 54 55 56 57 58/* main */ 59.top-wrapper{ 60 width:100%; 61 background-image:url("https://prog-8.com/images/html/advanced/top.png"); 62 background-size:cover; 63} 64 65.title-wrapper{ 66 padding-top:180px; 67} 68 69.title h1{ 70 font-size:45px; 71 letter-spacing:5px; 72 text-align:center; 73 color:white; 74 opacity:0.7; 75} 76 77.title p{ 78 text-align:center; 79 color:white; 80 opacity:0.7; 81 82} 83 84.btn-wrapper{ 85 display:inline-block; 86 text-align:center; 87 width:100%; 88 margin:0 auto; 89 padding-top:30px; 90 padding-bottom:100px; 91} 92 93.btn{ 94 display:inline-block; 95 background-color:black; 96 color:white; 97 padding:8px 24px; 98 border-radius:5px; 99} 100 101.btn-wrapper p{ 102 color:white; 103 padding:15px 0; 104} 105 106.signup { 107 background-color:#239b76; 108 opacity:0.8; 109} 110 111.facebook{ 112 background-color:#3b5998; 113 opacity:0.8; 114 margin-right:10px; 115} 116 117.twitter{ 118 background-color:#55acee; 119 opacity:0.8; 120} 121 122/* contents */ 123 124.contents-wrapper{ 125 background-color:#f7f7f7; 126 width:100%; 127 margin:0 auto; 128 height:580px; 129} 130 131.contents-title h3{ 132 text-align:center; 133 padding-top:80px; 134 padding-bottom:50px; 135 font-weight:normal; 136 font-size:26; 137 color:#5f5d60; 138} 139 140.lessons{ 141 width:25%; 142} 143 144.lesson{ 145 display:inline-block; 146
ブラウザはグーグルクロムを使用しております。
回答2件
あなたの回答
tips
プレビュー