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

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つです。

Q&A

1回答

782閲覧

画像と文字の位置配置がうまいことできません。

sonnabanana

総合スコア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つです。

0グッド

0クリップ

投稿2020/10/15 07:21

画像と文字の位置配置がうまいことできません。
イメージ説明

全体図
イメージ説明

前回も同じようなことがあったんですが、その時は「 align-items: center;」でなおりました。
今回は「 align-items: center;」で修正が効かず2時間ほど時間が経ってしまったので質問させて頂きました。
模写コーディングをしている住友商事のLPを検証ツールを使ってStylesみてみてもわからない状態です。

ご教授よろしくお願いします。

コードはこちらになります。

HTML

1、、、<省略> 2 <div class="notice"> 3 <div class="notice1"> 4 <div class="noticeList"> 5 <p class="noticeView"><img class="noticeImg" src="img/icons/icon-pagetop1.png" alt="#">【重要なお知らせ】当社における新型コロナウイルス感染者の発生について</p> 6 <p class="noticeView"><img class="noticeImg" src="img/icons/icon-pagetop1.png" alt="#">【重要なお知らせ】新型コロナウイルス感染拡大に伴う対応について(5月26日時点)</p> 7 <p class="noticeView"><img class="noticeImg" src="img/icons/icon-pagetop1.png" alt="#">【重要なお知らせ】当社社名、当社役職員名等をかたった詐欺メールについて</p> 8 </div> 9 <div class="listInline"> 10 <img class="listInlineImg" src="img/icons/icon-pagetop1.png" alt="#">ニュースリリース 11 <img class="listInlineImg" src="img/icons/icon-pagetop1.png" alt="#">トピックス 12 </div> 13 </div> 14 </div> 15 </article> 16 </main> 17</body> 18</html>

CSS

1、、、<省略> 2 3.notice { 4 background-color: #fff; 5} 6 7.notice1 { 8 margin-left: 360px; 9 margin-top: 35px; 10} 11 12.noticeList { 13 display: flex; 14 flex-direction: column; 15 flex-wrap:nowrap; 16} 17 18.noticeImg { 19 height: 16px; 20 width: 16px; 21 margin-right: 15px; 22} 23 24.listInlineImg { 25 height: 16px; 26 width: 16px; 27 margin-right: 10px; 28} 29 30.noticeView { 31 margin-bottom: 15px; 32 font-family: 'Noto Sans JP', sans-serif; 33 font-weight: 100; 34} 35 36.listInline { 37 font-family: 'Noto Sans JP', sans-serif; 38 font-weight: 100; 39 display: flex; 40 align-items: center; 41}

よろしくお願いします!

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

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

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

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

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

Lhankor_Mhy

2020/10/15 07:40

「ニュースリリース」の後に余白を開けたい、ということですか?
dit.

2020/10/15 07:46

模写元のサイトを見ると各項目はリスト(li)になっていて、そのliに対してmarginを設定し隙間を空けているようです。 構造が違いますが質問に提示のコードのままニュースリリースとトピックスの間に余白を入れたいということでしょうか?
guest

回答1

0

こんばんは。

すごくアドホックな感じの解決法ですが……

css

1.listInlineImg { 2 height: 16px; 3 width: 16px; 4/*margin-right: 10px;*/ 5 margin-right: -14px; 6} 7.listInline { 8 font-family: 'Noto Sans JP', sans-serif; 9 font-weight: 100; 10 display: flex; 11 align-items: center; 12 gap: 24px; /* 追加 */ 13}

投稿2020/10/15 09:52

Lhankor_Mhy

総合スコア35867

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

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

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

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問