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

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

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

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

CSS

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

Q&A

解決済

2回答

574閲覧

ProgateのHTML&CSSコースで詰んでしまいました。

syosinsha

総合スコア2

HTML

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

CSS

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

0グッド

0クリップ

投稿2020/06/11 11:14

編集2020/06/11 13:08

イメージ説明イメージ説明

Progateの道場(中級編)でこのような間違いが出てしまい、解決できません。
私は四つ並んでいるアイコンを少し中央付近に寄せたらいいと解決できるのではないか、と考えているのですがその為のCSSがわかりません。
初歩的なことかもしれませんが、よろしくお願いします。

CSSのコードです

1 2/* CSSのリセット(消さないでください) */ 3html, body, 4ul, ol, li, 5h1, h2, h3, h4, h5, h6, p, div { 6 margin: 0; 7 padding: 0; 8} 9 10body { 11 font-family: 'Hiragino Kaku Gothic ProN W3', sans-serif; 12} 13 14li { 15 list-style: none; 16} 17 18a { 19 text-decoration: none; 20} 21 22/* ここからCSSを書いていきましょう */ 23header { 24 background-color :rgba(34,49,52,0.9); 25 height : 64px; 26 width : 100%; 27 position : fixed; 28 z-index : 10; 29} 30.title-logo { 31 width : 124px; 32 margin : 20px 20px 20px 50px; 33} 34.login { 35 text-decoration :none; 36 color : #fff; 37 line-height : 65px; 38 float : right; 39 background-color : rgba(255,255,255,0.3); 40 padding :0 25px; 41 margin-right : 50px; 42 display : block; 43} 44 45.main { 46 background-image : url(https://prog-8.com/images/html/advanced/top.png); 47 text-align : center; 48 background-size : cover; 49 padding : 180px 0 100px 0; 50} 51.title { 52 font-size : 45px; 53 letter-spacing : 5px; 54 color : #fff; 55 opacity : 0.7; 56} 57.sub-title { 58 color : #fff; 59 opacity : 0.7; 60} 61.sign-up { 62 text-decoration : none; 63 color : #fff; 64 display : inline-block; 65 padding : 8px 24px; 66 border-radius : 8px; 67} 68.new { 69 background-color : #239b76; 70 opacity : 0.8; 71 margin-top : 30px; 72} 73.facebook { 74 background-color : #3b5998; 75 opacity : 0.8; 76 margin-right : 10px; 77} 78.twitter { 79 background-color : #55acee; 80 opacity : 0.8; 81} 82.sign-up p { 83 margin : 10px; 84} 85.lesson-wrapper { 86 height : 580px; 87 background-color : #f7f7f7; 88 text-align : center; 89} 90.container { 91 font-weight : normal; 92 padding : 80px 0 50px 0; 93 color : #5f5d60; 94} 95.lesson { 96 width : 25%; 97 float : left; 98} 99.lesson-icon { 100 position : relative; 101} 102.lesson-icon p { 103 position : absolute; 104 width : 100%; 105 top : 44%; 106 color : #fff; 107} 108.text-contents { 109 display : inline-block; 110 width : 80%; 111 margin-top : 15px; 112 font-size : 13px; 113 color : #b3aeb5; 114}

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

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

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

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

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

guest

回答2

0

初心者ですが回答失礼します。
leson-iconをwidth:25px;にするとどうでしょう?

投稿2020/06/11 13:02

Yuto0824

総合スコア5

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

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

syosinsha

2020/06/11 13:10

お返事ありがとうございます。 やってみた画像追加しました。なぜか文字が画像の左側に寄ってしまいました。
guest

0

自己解決

lesson-wrapperにpdding:0 55px;を追加したら解決しました。
単純に自分で幅を調整しろってことだったんですかね。
こんな事に半日以上かけてた自分アホくさって感じですが明日も頑張ります。

投稿2020/06/11 14:03

syosinsha

総合スコア2

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.35%

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

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

質問する

関連した質問