こちらのサイトの模写を行っていました。
https://iyell.co.jp/business/loancenter/
画像を左端に寄せようとmargin-rightで頑張ってみましたが、数を増やしてしまうと画像が大きくなり変になってしまいます。
また文字列のEnglishリンクタブの図v←この小さvのやり方が分からないです。
HTML
1<body> 2 <!-- startヘッダー ---------------------------------------------------------> 3 <header class="header-login"> 4 <div class="container header-flex"> 5 <!-- ロゴアイコン------------------------------------------------- --> 6 <div class="logo-header"> 7 <img src="img/logoK.png" alt="logo" /> 8 </div> 9 <!-- ロゴライン--------------------------------------------------- --> 10 <div class="logo-line"> 11 <ul class="ul-line"> 12 <li class="house-icon"><img src="img/ico-homeK.gif" alt="house" /></li> 13 <li>経営方針</li> 14 <li>プラットフォーム</li> 15 <li class="a-line"><a href="#">サービス</a></li> 16 <li>メンバー</li> 17 <li>アソビゴコロv</li> 18 <li>会社情報v</li> 19 <li class="link">採用サイト<img src="img/リンク.png" alt="リンク" /li> 20 <li class="link">English<img src="img/リンク.png" alt="リンク" /li> 21 </ul> 22 </div> 23 </div> 24 </header> 25 <!-- endヘッダー ---------------------------------------------------------------> 26 <!-- main start -------------------------------------------------------------------> 27 <div class="topface"> 28 <img src="img/topface.png" alt="パソコン" /> 29 <ul class="topface-line"> 30 <li class="top"><a href="#">【在宅ローンテック iYell(イエール)株式会社】></a></li> 31 <li class="middle"><a href="#">サービス</a></li> 32 <li>不動産事業者向け在宅ローンテック</li> 33 34 </ul> 35 </div>
css
1.container { 2 max-width: 1200px; 3 margin: 0 auto; 4 } 5 6 /* ヘッダー */ 7 8 .header { 9 padding: 0 40px; 10 color: #000; 11 background-color: #fff; 12 } 13 14 /* ロゴライン */ 15 16 .header-flex { 17 display: flex; 18 justify-content: space-between; 19 white-space: nowrap; 20 margin: 0 auto; 21 } 22 23 .logo-header img { 24 margin-right: 300px; 25 } 26 27 .house-icon { 28 width: 10%; 29 } 30 31 .logo-header img { 32 width: 50%; 33 text-align: left; 34 } 35 36 .logo-line header-login { 37 padding: 17px 1em; 38 vertical-align: middle; 39 } 40 41 .ul-line { 42 display: flex; 43 align-items: center; 44 margin-left: 250px; 45 } 46 47 .ul-line li { 48 list-style: none; 49 font-size: 15px; 50 margin-left: 30px; 51 } 52 53 /* main */ 54 55 .topface img { 56 width: 100%; 57 }
回答1件
あなたの回答
tips
プレビュー