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

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

新規登録して質問してみよう
ただいま回答率
85.35%
レスポンシブWebデザイン

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

HTML

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

CSS

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

Q&A

1回答

600閲覧

レスポンシブ対応について

toshiaki4

総合スコア1

レスポンシブWebデザイン

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

HTML

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

CSS

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

0グッド

0クリップ

投稿2021/04/30 13:19

編集2021/05/01 03:10

前提・実現したいこと

スマホサイズのレスポンシブ対応を実現したいです。
フッター部分のSNSアイコンをTELの電話番号の下にアイコンを縦に並べたいです。

該当のソースコード

HTML

1 2 3 <Feature> 4 <div class="feature-titles"> 5 <div class="feature-title-a"> 6 Feature 7 </div> 8 <div class="feature-text"> 9 it is long established fact a reader will be distracted by the readable<br> 10 content of a page when looking at its layout.<br> 11 The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters 12 </div> 13 </div> 14 <div> 15 <div class="features"> 16 <div class="feature1"> 17 <div class="feature-img"> 18 <img src="img/code-solid.svg" alt="" width="60px" height="60px" class=""> 19 </div> 20 <div class="feature-title"> 21 Strength1 22 </div> 23 <div> 24 Contrary to popular belief, Lorem Ipsum<br> 25 is not simply random text.It has roots<br> 26 in a piece of classical Latin literature<br> 27 from 45 BC, making it over 2000 years<br> 28 old Richard MacClintock, a Latin<br> 29 professor at Hampden-Sydney College<br> 30 in Virginia, looked up one of the more<br> 31 obscure Latin words consectetur<br> 32 </div> 33 </div> 34 <div class="feature2"> 35 <div class="feature-img"> 36 <img src="img/pc.svg" alt="" width="60px" height="60px"> 37 </div> 38 <div class="feature-title">Strength2</div> 39 <div> 40 Contrary to popular belief, Lorem Ipsum<br> 41 is not simply random text.It has roots<br> 42 in a piece of classical Latin literature<br> 43 from 45 BC, making it over 2000 years<br> 44 old Richard MacClintock, a Latin<br> 45 professor at Hampden-Sydney College<br> 46 in Virginia, looked up one of the more<br> 47 obscure Latin words consectetur<br> 48 </div> 49 </div> 50 <div class="feature3"> 51 <div class="feature-img"> 52 <img src="img/cogs-solid.svg" alt="" width="60px" height="60px"> 53 </div> 54 <div class="feature-title">Strength3</div> 55 <div> 56 Contrary to popular belief, Lorem Ipsum<br> 57 is not simply random text.It has roots<br> 58 in a piece of classical Latin literature<br> 59 from 45 BC, making it over 2000 years<br> 60 old Richard MacClintock, a Latin<br> 61 professor at Hampden-Sydney College<br> 62 in Virginia, looked up one of the more<br> 63 obscure Latin words consectetur<br> 64 </div> 65 </div> 66 </div> 67 </div> 68 </Feature> 69 <Contact> 70 <div class="profiles"> 71 <div class="profile-top"> 72 <div class="profile"> 73 Profile 74 </div> 75 <div class="profile-text"> 76 it is long established fact a reader will be distracted by the readable<br> 77 content of a page when looking at its layout.<br> 78 The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters 79 </div> 80 </div> 81 <div class="profile-bottom"> 82 <div class="profile-bottom-text"> 83 <div class="icon-imgs"> 84 <img src="img/my-icon.jpg" alt="" class="icon-img" width="250px" height="250px"> 85 </div> 86 <div class="myname"> 87 <h3 class="myname-title"> 88 MyName<br> 89 </h3> 90 <div class="MyName-text"> 91 Contrary to popular belief, Lorem Ipsum is not simply random<br> 92 text. It has roots in a piece of classical Latin literature from 45<br> 93 BC,making it over 2000years old. Richard McClintock, a Latin<br> 94 professor at Hampden-Sydney College in Virinia, looked up<br> 95 one of the more obscure Latin words, consectetur 96 </div> 97 <div class="myskills"> 98 <h3 class="mayname-title"> 99 MySkills<br> 100 </h3> 101 HTML/CSS/JavaScript/JQuery/PhotoShop 102 </div> 103 </div> 104 </div> 105 </div> 106 </div> 107 </div> 108 <div class="contacts"> 109 <div class="contact"> 110 <div class="contact-title">Contact</div> 111 <div class="contact-text"> 112 it is long established fact a reader will be distracted by the readable<br> 113 content of a page when looking at its layout.<br> 114 The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters 115 </div> 116 <div class="contact-bottom"> 117 <div class="contact-left"> 118 <div class="contact-left-a"> 119 <div class="contact-top"> 120 <h3 class="contact-bottom-title">Mail</h3> 121 <a href="#" class="contact-link">xxx@xxx.com</a> 122 <div class="contact-down"> 123 <h3 class="contact-bottom-title">Tel</h3> 124 <a href="#" class="contact-link">000-0000-0000</a> 125 </div> 126 </div> 127 </div> 128 <div class="contact-right"> 129 <div class="contact-right-a"> 130 <h3 class="contact-bottom-title">SNS</h3> 131 <div class="sns-images"> 132 <img src="img/facebook-f-brands.svg" alt="" width="50px" height="50px"> 133 <img src="img/twitter-brands.svg" alt="" width="50px" height="50px" class="contact-img"> 134 <img src="img/instagram-brands.svg" alt="" width="50px" height="50px"> 135 </div> 136 </div> 137 </div> 138 </div> 139 </div> 140 </div> 141 142 143 ``````CSS 144/* タブレット縦置きサイズ(768px)以下の際に適用される設定 */ 145```CSS```ここに言語を入力 146コード

@media screen and (max-width: 768px) {
.social i {
color: red;
}
.main-visual-img p {
color: #fafafa;
text-align: center;
font-size: 18px;
padding-top: 10px;
}
.main {
background-color: #ECEFF1;

}
.portfolio-title {
display: inline-block;
padding-top: 90px;
font-size: 32px;
color: #000000;
padding-bottom: 8px;
margin-bottom: 30px;
text-align: center;
margin: 0 auto;
}
.portfolio-title::after {
background-color: #EC715F;
height: 3px;
width: 70px;
content: "";
display: block;
margin: 8px auto 0 auto;
}
.portfolio-titles {
text-align: center;
}
.portfolio-text {
font-size: 16px;
color: #000000;
margin-bottom: 30px;
}
.portfolio {
width: 100%;
float: center;
margin: 0 auto;
background-color: #ECEFF1;
padding-bottom: 90px;
}
.feature-titel {
display: inline-block;
font-size: 32px;
color: #000000;
margin-top: 90px;
padding: 8px;
margin-bottom: 30px;
text-align: center;
border-bottom: solid 3px #ec715f;
}
.features {
width: 980px;
margin: 0 auto;
padding-bottom: 90px;
}
.feature-titles {
text-align: center;
margin-bottom: 30px;
}
.feature-text {
font-size: 16px;
color: #000000;
}
.features {
display:block;

}
.feature1 {
width: 320px;
height: auto;

}
.feature2 {
width: 320px;
height: auto;
margin: 0 10px;

}
.feature3 {
width: 320px;
height: auto;

}
.feature-title {
text-align: center;
font-size: 20px;
padding: 10px 0;
}

.feature-title-a {
text-align: center;
font-size: 32px;
font-weight: 600;
margin-top: 90px;
margin-bottom: 30px;
color: #000000;
padding: 10px 0;
}
.feature-title-a::after {
display: block;
content: "";
background-color:#EC715F;
height: 3px;
width: 70px;
margin: 8px auto 0 auto;
}
.feature-img {
text-align: center;
}
.profiles {
background-color: #ECEFF1;

}
.profile {
font-size: 32px;
color: #000000;
padding-bottom: 8px;
margin-bottom: 30px;
text-align: center;
font-weight: 700;

}
.profile::after {
content: "";
display:block;
background-color:#EC715F;
height: 3px;
width: 70px;
margin: 8px auto 0 auto;
}
.profile-text {
text-align: center;
margin-bottom: 30px;
}
.profile-bottom {
display: flex;
}
.icon-img {
border-radius: 50%;
}
.profile-bottom-text {
display: block;
text-align: center;
margin: 0 auto;

}
.myname {
width: 512px;
text-align: left;
margin-bottom: 90px;

}
.myname-title {
font-size: 20px;
padding-bottom: 5px;

}
.profile-top {

}
.icon-imgs {
width: 512px;
}
.MyName-text {
margin-bottom: 20px;
}

.contact {
margin: 90px auto;
width: 90%;

}
.contact-title {
font-size: 32px;
font-weight: 600;
color: "000000";
margin-bottom: 30px;

}
.contact-text {
margin-bottom: 30px;
width: 90%;
}
.contact-title::after {
content: "";
background-color:#EC715F;
display: block;
margin: 8px auto 0 auto;
height: 3px;
width: 70px;

}
.contact-bottom-title {
font-size: 20px;
padding: 5px;
}
.contact-bottom {
lex-flow: row wrap;
}
.contact-left {

}
.contact-right {

}
.contact-link {
color: black;
}
.contact-img {
margin: 0 20px;
}
.contact-left-a {

試したこと

display:flexの解除とblockを試しましたが、変わらず横のままです。

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

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

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

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

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

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

m.ts10806

2021/04/30 22:43

コードやエラーはマークダウンのcode機能を利用してご提示ください。 https://teratail.com/questions/238564 また、「目指す表示」と「現在の表示」を目視できる情報(キャプチャやイメージ図)を添付してください。
K_3578

2021/05/01 02:47

回答に反応するならこっちも反応してくれよなー。 m.ts10806さんが仰る通りコードはコードブロック化してください。 インデントぐっちゃぐちゃですしこれを見た第三者の何の参考にもなりません
K_3578

2021/05/01 03:07

閉じのバッククォート重なってるせいでcssが個別にブロック化してないので ```HTML ソース ``` (1行以上のスペース) ```CSS ソース ``` って感じに修正して下さい。
K_3578

2021/05/01 03:11

またミスってるけど・・・まぁいいか
guest

回答1

0

こんにちは。

フッター部分のSNSアイコンをTELの電話番号の下にアイコンを縦に並べたい

以下のようにしてはいかがでしょうか。

css

1.sns-images img { 2 display: block; 3}

投稿2021/05/01 00:55

Lhankor_Mhy

総合スコア36960

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

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

toshiaki4

2021/05/01 02:43

お世話になります。 アイコンは縦並びになりますが、縦並びのアイコンをTELの下には移動しません。
Lhankor_Mhy

2021/05/01 02:45

当方の環境ではTELの下になっていますね。
Lhankor_Mhy

2021/05/01 02:46

下、というのはY軸上の下と理解していますが、もしかしてZ軸上の下ですか?
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

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

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

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

ただいまの回答率
85.35%

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

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

質問する

関連した質問