Q&A
<ul class="nav-main">に指定したliの最後にフェイスブックアイコンを配置したのですが、
位置調整がうまくいきません。
cssのfaクラスにwidthやline-heightの設定などを試してみたのですが、
位置調整がうまく反映されません。
例えば5px上に、下に配置するときのやり方が知りたいです。
どなたか方法を教えていただければ幸いです。
よろしくお願いいたします。
html
1<!DOCTYPE html> 2<html lang="ja"> 3 <head> 4 <meta charset="utf-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <title>タイトルタイトルタイトル</title> 7 <meta name="description" content="ディスクリプションディスクリプションディスクリプション"> 8 <link rel="stylesheet" href="https://unpkg.com/ress/dist/ress.min.css"> 9 <link href="https://fonts.googleapis.com/css2?family=Lato:wght@400;700&family=Lora:wght@400;600&family=Noto+Sans+JP:wght@400;700&family=Noto+Serif+JP:wght@400;700&display=swap" rel="stylesheet"> 10 <link rel="stylesheet" href="css/style.css"> 11 <link rel="stylesheet" href="css/responsive.css"> 12 <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css"> 13 </head> 14 <body> 15 <div id="top-wrapper"> 16 <div class="container"> 17 <img class="top-logo" src="ダミーダミーダミー" alt="トップイメージ"> 18 </div> 19 </div> 20 <header> 21 <div class="container header-flexbox"> 22 <div><a href="index.html"><img class="header-logo" src="images/index/header-logo.svg" alt="ナビゲーションロゴ"></a></div> 23 <nav> 24 <ul class="nav-main"> 25 <li><a href="#">ダミーダミー</a></li> 26 <li><a href="#">ダミーダミー</a></li> 27 <li><a href="#">ダミーダミー</a></li> 28 <li><a href="#">ダミーダミー</a></li> 29 <li><a href="#">ダミーダミー</a></li> 30 <li><a href="#">ダミーダミー</a></li> 31 <li><a href="#"><i class="fa fa-facebook-square fa-lg"></i></a></li> 32 </ul> 33 </nav> 34 </div> 35 </header> 36 </body> 37</html>
css
1@charset "UTF-8"; 2* { 3 box-sizing: border-box; 4} 5html { 6 font-size: 100%; 7} 8body { 9 font-family: 'Lora', serif; 10 font-family: 'Noto Serif JP', serif; 11} 12a { 13 text-decoration: none; 14} 15h2, h3, p { 16 font-weight: normal; 17} 18.container { 19 width: 1170px; 20 padding: 0 15px; 21 margin: 0 auto; 22} 23#top-wrapper { 24 min-height: 100vh; 25 background-image: url(../images/index/top-bg.jpg); 26 background-size: cover; 27 background-position: center top; 28 background-repeat: no-repeat; 29} 30.top-logo { 31 position: absolute; 32 top: 50%; 33 left: 50%; 34 width: 20%; 35 -webkit-transform: translate(-50%, -50%); 36 -moz-transform: translate(-50%, -50%); 37 transform: translate(-50%, -50%); 38 z-index: 100; 39} 40header { 41 height: 80px; 42 width: 100%; 43 background-color: #fff; 44 position: sticky; 45 top: 0; 46 box-shadow: 0 1px 5px #DCDDDD; 47} 48.header-flexbox { 49 display: flex; 50 justify-content: space-between; 51} 52.header-logo { 53 width: 55px; 54 margin-top: 13px; 55} 56.nav-main { 57 display: flex; 58 list-style: none; 59 margin-top: 27px; 60 font-size: 1rem; 61 text-transform: uppercase; 62} 63.nav-main li { 64 margin-left: 50px; 65 letter-spacing: 5px; 66} 67.fa { 68 color: grey; 69} 70.nav-main a { 71 color: #000; 72 position: relative; 73 display: inline-block; 74 75} 76.nav-main a::after { 77 position: absolute; 78 bottom: -10px; 79 left: 0; 80 content: ''; 81 width: 100%; 82 height: 1px; 83 background: #333; 84 transform: scale(0, 1); 85 transform-origin: right top; 86 transition: transform .3s; 87} 88.nav-main a:hover::after { 89 transform-origin: left top; 90 transform: scale(1, 1); 91} 92.nav-main li:last-child a::after { 93 display: none; 94} 95
回答1件
0
ベストアンサー
こんにちは。
vertical-align を使ってみてはどうでしょうか。
css
1.fa { 2 vertical-align: 5px !important; /* マイナスは下に下がる */ 3}
投稿2020/12/23 05:36
総合スコア36930
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2020/12/23 06:13