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

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

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

FlexはFlash PlayerやAdobe Airで動作するRIA(リッチインターネットアプリケーション)を開発する為のフレームワークです

レスポンシブWebデザイン

レスポンシブWebデザイン(RWD)は、スクリーンのサイズ、プラットフォーム、オリエンテーションに基づいて様々なデバイスで最適のサイトを生成するのウェブデザインとその開発のアプローチ方法を呼びます。

文字コード

文字コードとは、文字や記号をコンピュータ上で使用するために用いられるバイト表現を指します。

HTML

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

CSS

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

Q&A

3回答

400閲覧

CSSで要素の横並びを整えたい

boku_Tnano

総合スコア5

Flex

FlexはFlash PlayerやAdobe Airで動作するRIA(リッチインターネットアプリケーション)を開発する為のフレームワークです

レスポンシブWebデザイン

レスポンシブWebデザイン(RWD)は、スクリーンのサイズ、プラットフォーム、オリエンテーションに基づいて様々なデバイスで最適のサイトを生成するのウェブデザインとその開発のアプローチ方法を呼びます。

文字コード

文字コードとは、文字や記号をコンピュータ上で使用するために用いられるバイト表現を指します。

HTML

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

CSS

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

0グッド

0クリップ

投稿2019/08/22 03:24

編集2022/01/12 10:55

前提・実現したいこと

CSSで横並びを整えたいです。
デスクトップ程の横幅の広いものですと綺麗に整うのですが(画像1枚目)、画面幅を狭めていくと本来画像2枚目のようにしたいのですが3枚目のように崩れてしまいます。
解決策を教えていただけたら幸いです。よろしくお願いいたします。
【1枚目】
イメージ説明
【2枚目】
イメージ説明
【3枚目】
イメージ説明

該当のソースコード

HTML

1<div class="container-fluid"> 2 <div id="announcement" class="row"> 3 <i class="far fa-comment-dots fa-2x"></i> 4 <span class="announce">今のところ、ギフトカードはアメリカ居住者のみご購入いただけます。アメリカにお住いの場合は、アカウントの設定から居住国を更新してください。</span> 5 <div class="close"> 6 <i id="close" class="fas fa-times"></i> 7 </div> 8 </div> 9</div>

CSS

1#announcement { 2 width: 100%; 3 padding: 8px 15px; 4 margin: 0; 5 background-color: #c2e4e7; 6 z-index: 2; 7 position: fixed; 8} 9.fa-comment-dots { 10 color: #58b5bf; 11 display: block; 12 float: left; 13 margin-left: auto; 14} 15.announce { 16 display: left; 17 padding: 0!important; 18 font-size: 14px; 19 color: #484848; 20 margin: auto 0 auto 1rem; 21 text-align: center; 22} 23.close { 24 margin-left: auto; 25 color: #007a87; 26 cursor: pointer; 27} 28.fa-times { 29 font-size: 16px; 30}

試したこと

floatやflexで整えようにもうまくいきませんでした。
table-cellを利用した場合画面幅が狭いときはうまくいったのですが、逆に広くするとmarginや文字の高さが思うように効きませんでした。

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

HTML5,CSS3,Bootstrap4

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

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

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

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

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

退会済みユーザー

退会済みユーザー

2019/08/22 03:31

こんにちは。 cssのコードの上の部分が切れてしまっていますので、修正していただけますでしょうか
boku_Tnano

2019/08/22 03:37

こんにちは。 不注意でした。すみません! 修正しました。
guest

回答3

0

flexで特に問題がなさそうに見えます。

CSS

1#announcement { 2 width: 100%; 3 padding: 8px 15px; 4 margin: 0; 5 background-color: #c2e4e7; 6 z-index: 2; 7 position: fixed; 8 display: flex; /* 追加 */ 9} 10.fa-comment-dots { 11 color: #58b5bf; 12 display: block; 13/* float: left; 削除 */ 14 margin-left: auto; 15} 16.announce { 17/* display: left; 削除 */ 18 padding: 0!important; 19 font-size: 14px; 20 color: #484848; 21 margin: auto 0 auto 1rem; 22 text-align: center; 23} 24.close { 25 margin-left: auto; 26 color: #007a87; 27 cursor: pointer; 28} 29.fa-times { 30 font-size: 16px; 31}

position: fixedで横幅がずれる場合、width: calc(100% - 30px);等としてpadding分を調整してみるのも手ではないでしょうか。

投稿2019/08/22 04:03

okne

総合スコア217

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

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

0

画面幅が小さくなったときのcloseの位置がいまいちわかりませんが、
私が再現するとしたら下記のような記述にすると思います。
文字を真ん中に寄せたりする箇所も散らばっていたので、全体的に変更してみました。

css

1.container-fluid { 2 width: 100%; 3 background-color: #c2e4e7; 4 position: fixed; 5 z-index: 2; 6} 7#announcement { 8 max-width: 1200px;/*任意の幅*/ 9 margin: 0 auto; 10 padding: 8px 15px; 11 display:flex; 12 align-items:center; 13} 14.fa-comment-dots { 15 color: #58b5bf; 16 display: block; 17 18 19} 20.announce { 21 22 padding: 0!important; 23 font-size: 14px; 24 color: #484848; 25 margin: auto 0 auto 1rem; 26 text-align: center; 27} 28.close { 29 30 color: #007a87; 31 cursor: pointer; 32} 33.fa-times { 34 font-size: 16px; 35} 36 37@media screen and (max-width: 768px) { 38/* 768pxまでの幅の場合に適応される */ 39 40 .close { 41 position: absolute; 42 top:0; 43 right:10px; 44 padding:2px; 45 } 46}

投稿2019/08/22 04:16

beginner_t

総合スコア716

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

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

0

css

1.announce { 2 display: left; 3 padding: 0!important; 4 font-size: 14px; 5 color: #484848; 6 margin: auto 0 auto 1rem; 7 text-align: center; 8}

display: left;
とありますが、displayプロパティーにleftという値は設定できないはずです
代わりにfloat: left;でやってみてください

投稿2019/08/22 03:42

退会済みユーザー

退会済みユーザー

総合スコア0

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

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

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

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問