Q&A
見本というのはどこから持ってきたのですか？ 使用許可は得ているのですか？
プログラミング初心者です。
初めてのサイト模写中です。
お手柔らかにお願いします。
見本と同様に文章の配置を行いたいのですが、構成方法がわかりません。
見本は以下の通りです。
【見本PC画面】
【見本モバイル画面】
【見本モバイル続き】
続けて私のものになります
【模写PC画面】
【模写モバイル】
【模写モバイル続き】
HTML
1<div class="pre-footer"> 2 <div class="footer-container"> 3 <div class="row container-home"> 4 <div class="col-12"> 5 <i class="fas fa-home"></i> 6 <a href="#" class="home" style="font-family:'Noto Sans JP', sans-serif; font-size: 12px; line-height: 23px; font-style: normal; color: #222222;font-weight: 400;letter-spacing: -0.09rem;">ホーム</a> 7 </div> 8 </div> 9 10 <div class="row"> 11 <div class="col-12 text-center align-middle"> 12 <a href="#"><img src="images/logo.svg" alt="" class="logo" style=";"></a> 13 </div> 14 </div> 15 16 <hr> 17 18 <div class="row"> 19 <div class="col-md-4 Social-net" style="text-align: right;"> 20 <div class="icon"> 21 <a href="#"><i class="fab fa-facebook-f"></i></a> 22 <a href="#"><i class="fab fa-twitter"></i></a> 23 <a href="#"><i class="fab fa-youtube"></i></a> 24 <a href="#"><i class="fab fa-instagram"></i></a> 25 <div class="icon-one"> 26 <a href="#">サッポロビールソーシャルメディアカウント一覧</a> 27 </div> 28 </div> 29 </div> 30 <div class="col-md-3" style="text-align: right;"> 31 <ul> 32 <li><a href="#">商品情報</a></li> 33 <li><a href="#">特集・サービス</a></li> 34 <li><a href="#">エリア情報・サッポロを飲む</a></li> 35 <li><a href="#">工場見学・ミュージアム</a></li> 36 <li><a href="#">キャンペーン・CM</a></li> 37 </ul> 38 </div> 39 <div class="col-md-2" style="text-align: right;"> 40 <ul> 41 <li><a href="#">企業情報</a></li> 42 <li><a href="#">採用情報</a></li> 43 <li><a href="#">マイアカウント</a></li> 44 <li><a href="#">会員規約</a></li> 45 <li><a href="#">お客様サポート</a></li> 46 <li><a href="#">飲食店様サポート</a></li> 47 </ul> 48 </div> 49 <div class="col-md-3" style="text-align: right;"> 50 <ul> 51 <li><a href="#">ご利用規約</a></li> 52 <li><a href="#">快適なご利用のために</a></li> 53 <li><a href="#">プライバシーポリシー</a></li> 54 <li><a href="#">アクセシビリティポリシー</a></li> 55 <li><a href="#">公式アカウントコミュニケーションガイドライン 56 </a></li> 57 </ul> 58 </div> 59 </div> 60 61 </div> 62</div>
CSS
1.container-home { 2 display: none; 3} 4 5.logo { 6 width:4rem; 7} 8}
最初のclass="social-net"（Facebookなどのアイコンの部分）をモバイル画面では右端に、モバイルでは初めに持ってくる方法がわかりません。text-align-rightで変わりませんでした。
また、下2つのクラス（col-md-2、col-md-3 企業情報～ ご利用規約～）はモバイル画面では同じ並列させないといけませんが方法がわかりません。
以下のように2つのクラスを一緒にしてみましたが変わりませんでした。
HTML
1<div class="col-md-2" style="float: right;"> 2 <ul> 3 <li><a href="#">企業情報</a></li> 4 <li><a href="#">採用情報</a></li> 5 <li><a href="#">マイアカウント</a></li> 6 <li><a href="#">会員規約</a></li> 7 <li><a href="#">お客様サポート</a></li> 8 <li><a href="#">飲食店様サポート</a></li> 9 </ul> 10 <ul> 11 <li><a href="#">ご利用規約</a></li> 12 <li><a href="#">快適なご利用のために</a></li> 13 <li><a href="#">プライバシーポリシー</a></li> 14 <li><a href="#">アクセシビリティポリシー</a></li> 15 <li><a href="#">公式アカウントコミュニケーションガイドライン 16 </a></li> 17 </ul> 18 </div>
初歩的な質問かもしれませんが、ご回答いただければ幸いです。
よろしくお願いします。
回答1件
0
ベストアンサー
・並び替えはorder-*
Bootstrap4カラムを入れ替える（表示順の変更）
・bootstrapのrowとcolをこちらで参考にしてください。
Grid system
(ブレイクポイントも参考になると思います)
例：
html
1<!-- 12等分になっているので`col-*`で12になると改行されます --> 2<div class="col-12 col-md-4 Social-net order-md-4" style="text-align: right;"> 3<div class="col-12 col-md-3" style="text-align: right;"> 4<div class="col-6 col-md-2" style="text-align: right;"> 5<div class="col-6 col-md-3" style="text-align: right;"> 6 7<!-- row での入れ子でも可能です --> 8<div class="row"> 9 <div class=" col-md-4 Social-net order-md-4" style="text-align: right;"> 10 <div class=" col-md-3" style="text-align: right;"> 11 <div class="row col-md-5"> 12 <div class="col-6 col-md-5" style="text-align: right;"> 13 <div class="col-6 col-md-7" style="text-align: right;"> 14
投稿2020/08/03 01:08
総合スコア955
あなたの回答
tips
プレビュー
