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

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

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

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

HTML5

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

HTML

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

CSS

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

CSSフレームワーク

CSSフレームワークは、Webページのスタイルを指定する言語であるCSSを容易に構築するためのツールです。ツイッター社が開発した「Bootstrap」や段組レイアウトが可能な「Foundation」など様々なCSSフレームワークがあります。

Q&A

1回答

3696閲覧

Progate道場コース中級編 どこが違うかわかりません

yuta73

総合スコア5

CSS3

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

HTML5

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

HTML

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

CSS

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

CSSフレームワーク

CSSフレームワークは、Webページのスタイルを指定する言語であるCSSを容易に構築するためのツールです。ツイッター社が開発した「Bootstrap」や段組レイアウトが可能な「Foundation」など様々なCSSフレームワークがあります。

1グッド

0クリップ

投稿2020/03/11 04:59

編集2022/01/12 10:55

前提・実現したいこと

HTML & CSS 道場コース 中級編 中級編を復習しよう 3.レッスン一覧部分を作ろう
画像を見ても違いがわからず次にすすめません。どなたか助けてください。
道場編はコードも全く一緒にしないといけないのでしょうか?

該当のソースコード

HTML

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

試したこと

仕様書通りに色もサイズも整えました。もう成す術がありません。
イメージ説明

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

ここにより詳細な情報を記載してください。

phish_tempura👍を押しています

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

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

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

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

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

m.ts10806

2020/03/11 05:22

>道場編はコードも全く一緒にしないといけないのでしょうか? 本当にどこにも説明ないですか? それならProgate自体に苦情入れてください。
kome_as

2020/03/11 05:43 編集

txt-contentsの色が違いますね よく確認してください
m.ts10806

2020/03/11 05:50

ファイル内容の比較ツール使えば一目瞭然では? 人間の目ほど信用できないものはないですよ。コードは書いた通りにしか動かないわけですし
yuta73

2020/03/11 23:42

txt-contetsの色は目視では違うように見えますが、仕様書ではこの色で記載されてました。
kome_as

2020/03/11 23:54

#b5aeb3ではなく#b3aeb5ではないですか?
yuta73

2020/03/12 11:24

申し訳ありませんでした。#b3aeb5で試してみましたけどできませんでした CSS訂正しときます。
guest

回答1

0

.container pのせいで文章の色が薄くなっています。以下のように変えることで直ると思います。

css

1.top-wrapper p { 2 opacity: 0.7; 3}

投稿2020/03/19 11:27

soliste16

総合スコア757

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

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

yuta73

2020/04/03 04:39

やっと解決できました! ありがとうございます。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問