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

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

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

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

CSS

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

Q&A

解決済

1回答

2393閲覧

ProgateのHTML&CSSの実戦コースについて

kidaer

総合スコア31

HTML

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

CSS

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

0グッド

1クリップ

投稿2018/03/11 13:09

編集2018/03/11 14:38

質問文を修正しました。
Progateの実践コースで

このような状態から進めず困っています。
●イメージ1
イメージ説明

問題は仕様書とお手本を見て自分でもプログラムを組んでみるという内容です。
●仕様書
イメージ説明
イメージ説明

コードを組み上げて判定ボタンを押します。
何か間違っているとイメージ1の図が出て赤い枠内部分の修正指示が出ます。

●プログラム

【index.html】

HTML

1<!DOCTYPE html> 2<html lang="ja"> 3 <head> 4 <!-- head内に変更を加えないでください--> 5 <meta charset="utf-8"> 6 <meta http-equiv="X-UA-Compatible" content="IE=edge"> 7 <title>0からWEBサイトを作ってみよう</title> 8 <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css"> 9 <link rel="stylesheet" href="//fonts.googleapis.com/css?family=Dosis:300,400,500,600,700"> 10 <link rel="stylesheet" href="stylesheet.css"> 11 </head> 12 <body> 13 <!-- ここから書き始めてください --> 14 <!-- ヘッダー --> 15 <!-- ヘッダー --> 16 <header> 17 <div class="Hleft"> 18 <p>Progate School</p> 19 </div> 20 <div class="Hright"> 21 <a class="Hgaku" href="#">学習言語</a> 22 <a href="#">特徴</a> 23 <a href="#">料金</a> 24 <a href="#">コラム</a> 25 <a href="#">お問い合わせ</a> 26 </div> 27 </header> 28 <!-- メイン --> 29 <!--メインー --> 30 <div class="main"> 31 <div class="main2"> 32 <p class="mainM1">プログラミングは人生を変える</p> 33 <p class="mainM2">プログラミングを学んで、新しい自分を見つけよう。</p> 34 <a href="#">もっと詳しく</a> 35 </div> 36 </div> 37 <!-- ボックス --> 38 <!-- ボックス --> 39 40 <div class="boxlist"> 41 <p>学習する言語</p> 42 <!-- ボックス1 --> 43 <div class="boxs"> 44 <div class="box1"> 45 <img src="https://s3-ap-northeast-1.amazonaws.com/progate/shared/images/lesson/html/practice/lang_icons/html.png"> 46<h3>HTML & CSS</h3> 47<p>Webページの<br> 48見た目をつくる言語</p> 49 </div> 50 </div> 51 <!-- ボックス2 --> 52 <div class="boxs"> 53 <div class="box3"> 54 <img src="https://s3-ap-northeast-1.amazonaws.com/progate/shared/images/lesson/html/practice/lang_icons/jquery.png"> 55<h3>jQuery</h3> 56<p>効果やアニメーションを実装できる<br> 57Javascriptライブラリ</p> 58 </div> 59 </div> 60 <!-- ボックス3 --> 61 <div class="boxs"> 62 <div class="box1"> 63 <img src="https://s3-ap-northeast-1.amazonaws.com/progate/shared/images/lesson/html/practice/lang_icons/js.png"> 64<h3>Javascript</h3> 65<p>動的なウェブサイト構築に用いる<br> 66プログラミング言語</p> 67 </div> 68 </div> 69 <!-- ボックス4 --> 70 <div class="boxs"> 71 <div class="box4 box3"> 72 <img src="https://s3-ap-northeast-1.amazonaws.com/progate/shared/images/lesson/html/practice/lang_icons/git.png"> 73<h3>Git</h3> 74<p>ソースコードのバージョン管理、<br> 75共同開発を可能にするツール</p> 76 </div> 77 </div> 78 </div> 79 <!-- メイン2 --> 80 <!-- メイン2 --> 81 <div class="main22"> 82 <p>特徴</p> 83 <img src="https://s3-ap-northeast-1.amazonaws.com/progate/shared/images/lesson/html/practice/mac_code.png"> 84 </div> 85 86 <div class="M2block"> 87 <!--説明1 --> 88 <div class="M2setumei MS1"> 89 <p class="M2Bmidasi">① ProgateでWEB開発の基礎知識を身につけよう</p> 90 <p class="M2Betuei">Progateで各コースをクリアして基礎知識を身につけましょう。それぞれ2周することによって知識を定着させます。</p> 91 </div> 92 <!--説明2 --> 93 <div class="M2setumei MS1"> 94 <p class="M2Bmidasi">② Progateの道場で知識を習得しよう</p> 95 <p class="M2Betuei">Progateのコースで基礎知識を身につけたら、実践的な演習をこなしていきましょう。また道場では更に発展的な学習もしていきます。</p> 96 </div> 97 <!--説明3 --> 98 <div class="M2setumei MS1"> 99 <p class="M2Bmidasi">③ 実際にプロダクトを作ってみよう</p> 100 <p class="M2Betuei">Progateで実践的な力を身につけたら自分で1つのプロダクトを作ってみましょう。自分で1から作ってみると、意外に理解できていないことに気づくと思います。 バグを修正しながらプロダクトを完成させることで、エンジニアとしての力を磨きましょう。</p> 101 </div> 102 <!--説明4 --> 103 <div class="M2setumei MS1"> 104 <p class="M2Bmidasi">④ エンジニアインターンを体験しよう</p> 105 <p class="M2Betuei">実際に培ったスキルをインターンを通じて仕事として使ってみましょう。会社のエンジニアとともに仕事をしていくことによって、さらなるスキルアップを目指せるはずです。</p> 106 </div> 107 </div> 108 </body> 109</html>

【stylesheet.css】

CSS

1/*------- ここから共通のCSS --------*/ 2html, body, 3ul, ol, li, 4h1, h2, h3, h4, h5, h6, p, 5form, input, div { 6 margin: 0; 7 padding: 0; 8} 9 10li { 11 list-style: none; 12} 13 14a { 15 text-decoration: none; 16} 17 18body { 19 -webkit-font-smoothing: antialiased; 20} 21 22/*------- ここまで共通のCSS --------*/ 23/*------- ヘッダー --------*/ 24/*------- ヘッダー --------*/ 25 26header { 27 height: 50px; 28 background-color: white; 29 z-index: 10; 30 position: fixed; 31 width: 100%; 32} 33.Hleft p { 34 color: #777; 35 padding: 20px 50px; 36 font-size: 20px; 37 float: left; 38} 39.Hright { 40 float: right; 41 padding-top: 20px; 42padding-right: 70px; 43} 44.Hright a { 45 padding-left: 10px; 46 color: #323a45; 47 font-weight: bold; 48 font-size: 14px; 49 transition: all 0.5s; 50} 51.Hright a:hover { 52color: #0dc0c0; 53} 54 55/*------- メイン --------*/ 56/*------- メイン --------*/ 57 58.main { 59 background-image: URL(https://s3-ap-northeast-1.amazonaws.com/progate/shared/images/lesson/html/practice/backgrounds/top.jpg); 60 background-size: cover; 61 text-align: center; 62 63} 64.main2 { 65 background-color: rgba(0,0,0,0.6); 66 padding-bottom: 120px; 67} 68.mainM1 { 69 font-size: 48px; 70 color: white; 71 padding-top: 230px; 72} 73.mainM2 { 74 font-size: 18px; 75 padding-top: 30px; 76 padding-bottom: 40px; 77 color: rgba(255,255,255,0.8); 78} 79.main2 a { 80 display: inline-block; 81 padding: 10px 20px; 82 border: 1px solid rgba(250,250,250,0.15); 83 background-color: rgba(250,250,250,0.06); 84 color: rgba(255,255,255,0.8); 85 margin-bottom: 20px; 86 font-size: 20px; 87 font-weight: bold; 88 transition: all 0.5s; 89 margin-top: 10px; 90 91} 92.main2 a:hover { 93 border: 1px solid rgba(250,250,250,5); 94} 95/*------- ボックス --------*/ 96/*------- ボックス --------*/ 97 98.boxlist { 99 width: 60%; 100 height: 500px; 101 padding-top: 80px; 102 margin: 0 auto; 103 text-align: center; 104 padding-left: 30px; 105 106} 107.boxlist p { 108 font-size: 32px; 109 color: #555; 110 padding-bottom: 10px; 111} 112.boxs { 113 float: left; 114 width: 50%; 115 margin-top: 40px; 116 117} 118.boxs h3 { 119 font-weight: normal; 120 padding-top: 20px; 121 padding-bottom: 10px; 122} 123.boxs p { 124 font-size: 14px; 125 color: #888; 126} 127.box4 { 128 margin-bottom: 80px; 129} 130.box3 { 131margin-right: 60px; 132} 133/*------- メイン22 --------*/ 134/*------- メイン22--------*/ 135 136.main22 { 137 height: 376px; 138 background-color: #f4f4f4; 139 margin-top: 150px; 140 text-align: center; 141 margin-bottom: 130px; 142} 143.main22 p { 144 font-weight: lighter; 145 padding-top: 80px; 146 font-size: 35px; 147 color: #555; 148 149} 150.M2setumei { 151 float:left; 152 padding: 0 5%; 153 width: 40%; 154} 155.M2block{ 156 margin: 0 60px; 157} 158.M2Bmidasi { 159font-size: 18px; 160padding-bottom: 9px; 161color: #555; 162} 163.M2Betuei { 164 font-size: 14px; 165 color: #888; 166} 167.MS1 { 168 margin-bottom: 70px; 169} 170.MS2 { 171 margin-bottom: 60px; 172}

仕様書に書いてない部分は、判定して引っかかった部分をお手本を見ながらなんとなく合わせています。
よろしくお願いします。

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

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

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

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

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

退会済みユーザー

退会済みユーザー

2018/03/11 13:11

この質問文じゃ回答者もわからないですね。
Udomomo

2018/03/11 13:46

どういう問題で、どんなコードを書いた後にこうなったのでしょうか?
kei344

2018/03/11 14:32

質問文のコードはそれぞれコードブロックで囲んでいただけませんか? ```(バッククオート3つ)で囲み、前後に改行をいれるか、コードを選択して「<code>」ボタンを押すとコードブロックになります。
guest

回答1

0

ベストアンサー

こんばんは

プロゲートの担当者の方に聞いてみてはいかがでしょうか?
プロゲートは確か月額980円で様々なプログラムを動画形式で学んでいくサービスですね。
勘違いでしたらごめんない(´;ω;`)

投稿2018/03/11 16:40

編集2018/03/11 16:42
haruniku

総合スコア527

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

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

kidaer

2018/03/12 00:16

Progateはスタディサプリのような動画はありませんが、初心者向けの解説と自分でプログラムを打ち込んで反復練習できる場があります。 お問い合わせではなくご意見箱なので、対応して貰えるかはわかりませんが……。送ってみたいと思います。 回答ありがとうございました!
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問