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

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

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

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

CSS

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

Q&A

解決済

2回答

311閲覧

HTML & CSS 要素を横並びに表示するとき

dogfood

総合スコア19

HTML

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

CSS

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

0グッド

0クリップ

投稿2019/04/10 22:38

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

ブラウザはグーグルクロムを使用しております。

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

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

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

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

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

m.ts10806

2019/04/10 22:50

もうちょっとミニマムコードで試しては?
dogfood

2019/04/10 22:51

恐れ入りますミニマムコードとはどのようなものでしょうか?
m.ts10806

2019/04/10 22:53

色々な処理やレイアウトが入り交じったものではなく、確認したい箇所だけを切り出した最小構成のコードです。 問題切り分けのために有用です。
dogfood

2019/04/10 22:54

有難うございます。挑戦してみます。
guest

回答2

0

ベストアンサー

下記も原因の一つですが、lessonの中身も影響しているかと思います。
画像のサイズと文字の量が最大の横幅に影響を与えています。
下記のCSSのパーセンテージや文字の量を減らしてみたりして動作確認すると理解できると思います。

.lessons{ width:25%; }

投稿2019/04/10 23:46

devneko64bit

総合スコア164

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

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

danof

2019/04/10 23:55

lessonを囲っているlesson"s"なのでたぶんパーセンテージは増やさないといけないのではないか思います。
guest

0

css

1.lessons{ 2 width:25%; 3}

ここが横並びにならない原因です。
クラス名をよく見てみて下さい。

投稿2019/04/10 23:42

danof

総合スコア59

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問