Q&A
>お願いします！
何を、でしょうか。質問ではなく作業依頼ですかね。
質問を書いてください。
HTML内の<i class="fas fa-bars"></i>にmargin:0 auto;やmargin-left:auto;など試しても右寄せされません。bootstrapは使ってません。お願いします！
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 <link rel="stylesheet" href="copy.css"> 8 <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css"> 9</head> 10<body> 11 <header> 12 <div class="head"> 13 <a href="#"><img src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzNjAiIGhlaWdodD0iNTgiIHZpZXdCb3g9IjAgMCAzNjAgNTgiPgogICAgPGRlZnM+CiAgICAgICAgPHN0eWxlPgogICAgICAgICAgICAuY2xzLTF7ZmlsbDojMjI0NzVkfQogICAgICAgIDwvc3R5bGU+CiAgICA8L2RlZnM+CiAgICA8ZyBpZD0iY29tbW11bmVfbG9nbyIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoLTQ3LjI3OSAtMjYuNDg2KSI+CiAgICAgICAgPGcgaWQ9Ikdyb3VwXzM3OSIgZGF0YS1uYW1lPSJHcm91cCAzNzkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDExMS41NyA0My4yNjEpIj4KICAgICAgICAgICAgPHBhdGggaWQ9IlBhdGhfMTgzIiBkPSJNMjIzLjU2NiA4Ny4xODhjLTMuMDU5IDMuOTcyLTcuMzUzIDUuOTU5LTEyLjkzNiA1Ljk1OS05LjcxNSAwLTE2LTYuNi0xNi0xNC45MjIgMC04LjUzNSA2LjY1Ni0xNS4wODMgMTYuMS0xNS4wODMgNS41ODIgMCAxMC4zMDUgMi4zMDggMTMuMTUxIDYuNWwtNS45NTggMy4yNzRhOC45NzIgOC45NzIgMCAwIDAtNy4xMzktMy4yMjFjLTUuNDc1IDAtOC45NjQgMy43LTguOTY0IDguNjQyIDAgNC44MzEgMy4zODIgOC4yNjYgOC42NDIgOC4yNjZhOS4wNjQgOS4wNjQgMCAwIDAgNy40NjEtMy4yNzR6IiBjbGFzcz0iY2xzLTEiIGRhdGEtbmFtZT0iUGF0aCAxODMiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0xOTQuNjM1IC02My4xNDEpIi8+CiAgICAgICAgICAgIDxwYXRoIGlkPSJQYXRoXzE4NCIgZD0iTTI5MC41NDkgNzguMTE3YTE0Ljk0OSAxNC45NDkgMCAxIDEtMTUuMTM3LTE0Ljk3NiAxNC44NDkgMTQuODQ5IDAgMCAxIDE1LjEzNyAxNC45NzZ6bS0yMi43IDBjMCA0LjgzMSAzLjA1OSA4LjI2NiA3LjY3NiA4LjI2NiA0LjQgMCA3LjgzNy0zLjIyIDcuODM3LTguMjEyIDAtNC44MzEtMy4xNjctOC4yNjYtNy44MzctOC4yNjYtNC40Ni0uMDA1LTcuNjggMy40ODgtNy42OCA4LjIxMnoiIGNsYXNzPSJjbHMtMSIgZGF0YS1uYW1lPSJQYXRoIDE4NCIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoLTIyOC45ODIgLTYzLjE0MSkiLz4KICAgICAgICAgICAgPHBhdGggaWQ9IlBhdGhfMTg1IiBkPSJNMzU0LjkwOSA5Mi4zOTVoLTcuMTM5Vjc4LjZjMC01LjUyOC0xLjA3NC04LjkxLTUuMDQ2LTguOTEtMy41NDMgMC02LjExOSAyLjktNi4xMTkgOC43NDl2MTMuOTU2aC03LjEzOXYtMjguNWg3LjEzOXYzLjI3NGExMS45MjMgMTEuOTIzIDAgMCAxIDguOTEtNC4wMjYgOC45NTQgOC45NTQgMCAwIDEgOC4zMiA1LjFjMi42My0zLjMyOCA1LjI2LTUuMSA5LjU1NC01LjFhOS42OTQgOS42OTQgMCAwIDEgNy42MjIgMy4zMjhjMS44NzggMi4zNjIgMi4wOTMgNS40NzUgMi4wOTMgOS4yMzJ2MTYuNjkyaC03LjEzOVY3Ni42NjdjMC00LjY3LTEuNjY0LTYuOTc4LTQuODg1LTYuOTc4LTMuNiAwLTYuMTczIDIuNzkyLTYuMTczIDguNjQyeiIgY2xhc3M9ImNscy0xIiBkYXRhLW5hbWU9IlBhdGggMTg1IiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgtMjY0Ljc4NSAtNjMuMTQxKSIvPgogICAgICAgICAgICA8cGF0aCBpZD0iUGF0aF8xODYiIGQ9Ik00NTQuNDkzIDkyLjM5NWgtNy4xMzlWNzguNmMwLTUuNTI4LTEuMDc0LTguOTEtNS4wNDYtOC45MS0zLjU0MyAwLTYuMTE5IDIuOS02LjExOSA4Ljc0OXYxMy45NTZoLTcuMTM5di0yOC41aDcuMTM5djMuMjc0YTExLjkyMiAxMS45MjIgMCAwIDEgOC45MS00LjAyNiA4Ljk1NCA4Ljk1NCAwIDAgMSA4LjMyIDUuMWMyLjYzLTMuMzI4IDUuMjYtNS4xIDkuNTU0LTUuMWE5LjY5MiA5LjY5MiAwIDAgMSA3LjYyMiAzLjMyOGMxLjg3OSAyLjM2MiAyLjA5MyA1LjQ3NSAyLjA5MyA5LjIzMnYxNi42OTJoLTcuMTM4Vjc2LjY2N2MwLTQuNjctMS42NjQtNi45NzgtNC44ODUtNi45NzgtMy42IDAtNi4xNzMgMi43OTItNi4xNzMgOC42NDJ6IiBjbGFzcz0iY2xzLTEiIGRhdGEtbmFtZT0iUGF0aCAxODYiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0zMTYuNTk1IC02My4xNDEpIi8+CiAgICAgICAgICAgIDxwYXRoIGlkPSJQYXRoXzE4NyIgZD0iTTU1NC4wNzcgOTIuMzk1aC03LjE0Vjc4LjZjMC01LjUyOC0xLjA3My04LjkxLTUuMDQ1LTguOTEtMy41NDMgMC02LjExOSAyLjktNi4xMTkgOC43NDl2MTMuOTU2aC03LjEzOXYtMjguNWg3LjEzOXYzLjI3NGExMS45MjMgMTEuOTIzIDAgMCAxIDguOTEtNC4wMjYgOC45NTQgOC45NTQgMCAwIDEgOC4zMiA1LjFjMi42My0zLjMyOCA1LjI2LTUuMSA5LjU1NC01LjFhOS42OTIgOS42OTIgMCAwIDEgNy42MjIgMy4zMjhjMS44NzkgMi4zNjIgMi4wOTQgNS40NzUgMi4wOTQgOS4yMzJ2MTYuNjkyaC03LjEzOVY3Ni42NjdjMC00LjY3LTEuNjY0LTYuOTc4LTQuODg1LTYuOTc4LTMuNiAwLTYuMTczIDIuNzkyLTYuMTczIDguNjQyeiIgY2xhc3M9ImNscy0xIiBkYXRhLW5hbWU9IlBhdGggMTg3IiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgtMzY4LjQwNiAtNjMuMTQxKSIvPgogICAgICAgICAgICA8cGF0aCBpZD0iUGF0aF8xODgiIGQ9Ik02MjguMzE1IDY0LjcwOGg3LjEzOXYxNC44NjhjMCA1LjEgMS42MSA3Ljc4MyA1LjM2OCA3Ljc4MyAzLjgxMSAwIDUuMzY4LTIuNjMgNS4zNjgtNy40NjF2LTE1LjE5aDcuMTM5djEzLjE1YzAgNS4yNjEtLjMyMiA5LjEyNS0zLjMyOCAxMi40NTMtMi4yNTQgMi41MjMtNS4yMDYgMy42LTkuMTc5IDMuNi02Ljg3MSAwLTExLjExMS0zLjQ4OS0xMi4yMzgtMTAuMTQ1YTMyLjA0MiAzMi4wNDIgMCAwIDEtLjI2OC02LjAxMXoiIGNsYXNzPSJjbHMtMSIgZGF0YS1uYW1lPSJQYXRoIDE4OCIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoLTQyMC4yNTkgLTYzLjk1NikiLz4KICAgICAgICAgICAgPHBhdGggaWQ9IlBhdGhfMTg5IiBkPSJNNjk2LjkgNjYuNzkxYzIuNzM3LTIuMzA4IDUuMjYtMy42NSA4LjQyNy0zLjY1YTkuMzgxIDkuMzgxIDAgMCAxIDkuNzY5IDkuNzY5djE5LjQ4NWgtNy4xMzlWNzguOTIyYzAtNS42MzYtLjQ4My05LjIzMi00LjgzMS05LjIzMmE1LjYgNS42IDAgMCAwLTQuODMxIDIuNzM4Yy0xLjQ0OSAyLjMwOC0xLjQgNC44ODUtMS40IDcuODM3djEyLjEzaC03LjEzOXYtMjguNWg3LjE0NHoiIGNsYXNzPSJjbHMtMSIgZGF0YS1uYW1lPSJQYXRoIDE4OSIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoLTQ1Mi4yMzUgLTYzLjE0MSkiLz4KICAgICAgICAgICAgPHBhdGggaWQ9IlBhdGhfMTkwIiBkPSJNNzc2LjYzMiA4Ni44NjZjLTMuMDU5IDQuMzQ4LTcuMDg1IDYuMjgxLTEzLjEgNi4yODEtOS4wNzEgMC0xNC45MjItNi42NTYtMTQuOTIyLTE1LjAzIDAtNy43ODMgNS42MzYtMTQuOTc2IDE0LjgxNS0xNC45NzYgOS4wMTcgMCAxNS4xMzYgNi40NDEgMTUuMTM2IDE1LjQ1OSAwIC42NDQtLjA1My45NjYtLjA1MyAxLjYxaC0yMi45NzFjLjcgNC4yNCAzLjkxOSA2LjYgOCA2LjZhOS4yMjYgOS4yMjYgMCAwIDAgNy4wODYtMi43OTF6bS01LjI2LTEyLjI5MmMtLjk2Ni0zLjMyOC00LjAyNi01LjM2OC03LjgzNy01LjM2OGE3Ljc4IDcuNzggMCAwIDAtNy42NzUgNS4zNjh6IiBjbGFzcz0iY2xzLTEiIGRhdGEtbmFtZT0iUGF0aCAxOTAiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC00ODIuODU1IC02My4xNDEpIi8+CiAgICAgICAgPC9nPgogICAgICAgIDxnIGlkPSJHcm91cF8zODAiIGRhdGEtbmFtZT0iR3JvdXAgMzgwIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSg0Ny4yNzkgMjYuNDg2KSI+CiAgICAgICAgICAgIDxwYXRoIGlkPSJQYXRoXzE5MSIgZD0iTTg3Ljc0NSAyNi40ODZINjYuMTYzQTE4LjY5NCAxOC42OTQgMCAwIDAgNDcuMjc5IDQ0Ljk0djIxLjA5MmExOC42OTQgMTguNjk0IDAgMCAwIDE4Ljg4NCAxOC40NTRoMjEuNTgyYTE4LjY5NCAxOC42OTQgMCAwIDAgMTguODg0LTE4LjQ1NFY0NC45NGExOC42OTQgMTguNjk0IDAgMCAwLTE4Ljg4NC0xOC40NTR6bTEzLjQ4OSAzOS41NDZhMTMuMzUzIDEzLjM1MyAwIDAgMS0xMy40ODkgMTMuMTgySDY2LjE2M2ExMy4zNTMgMTMuMzUzIDAgMCAxLTEzLjQ4OS0xMy4xODJWNDQuOTRhMTMuMzUzIDEzLjM1MyAwIDAgMSAxMy40ODktMTMuMTgxaDIxLjU4MmExMy4zNTMgMTMuMzUzIDAgMCAxIDEzLjQ4OSAxMy4xODF6IiBjbGFzcz0iY2xzLTEiIGRhdGEtbmFtZT0iUGF0aCAxOTEiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC00Ny4yNzkgLTI2LjQ4NikiLz4KICAgICAgICAgICAgPHBhdGggaWQ9IlBhdGhfMTkyIiBkPSJNMTMxLjg0MiA2Ny4wMTVhMTMuNzc4IDEzLjc3OCAwIDAgMSAyLjMwNSA1LjQ2bC4xNjkuOTI5IDYuMjktMS4xNDgtLjE3LS45MjlhMjAuMjIzIDIwLjIyMyAwIDAgMC0zLjM3OS04LjAxbC0uNTQ2LS43NjktNS4yMTUgMy43eiIgY2xhc3M9ImNscy0xIiBkYXRhLW5hbWU9IlBhdGggMTkyIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgtOTAuOTkxIC00NS43MjkpIi8+CiAgICAgICAgICAgIDxwYXRoIGlkPSJQYXRoXzE5MyIgZD0iTTExOC40OCA1NS40MjlsLjc3Ni41MzggMy42NDItNS4yNTUtLjc3Ni0uNTM3YTE5LjY5MiAxOS42OTIgMCAwIDAtNy45LTMuMjVsLTEuMS0uMjEtMS4wMSA2LjMzLjkxOC4xNTlhMTMuNTczIDEzLjU3MyAwIDAgMSA1LjQ1IDIuMjI1eiIgY2xhc3M9ImNscy0xIiBkYXRhLW5hbWU9IlBhdGggMTkzIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgtODEuMDEgLTM3LjI3MikiLz4KICAgICAgICAgICAgPHBhdGggaWQ9IlBhdGhfMTk0IiBkPSJNMTM0LjI1MSA5Mi4yNjlBMTMuNTYgMTMuNTYgMCAwIDEgMTMyIDk3Ljc1bC0uNTQuNzc0IDUuMjQ1IDMuNjU2LjUzOS0uNzc1YTE5LjcgMTkuNyAwIDAgMCAzLjI4Ni03Ljk1OGwuMjA2LTEuMTM5LTYuMzMxLS45NDh6IiBjbGFzcz0iY2xzLTEiIGRhdGEtbmFtZT0iUGF0aCAxOTQiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC05MS4wNzggLTYxLjEwNCkiLz4KICAgICAgICAgICAgPHBhdGggaWQ9IlBhdGhfMTk1IiBkPSJNMTE4LjY1OCAxMTEuMTE4YTEzLjggMTMuOCAwIDAgMS01LjQ2NyAyLjI5MWwtLjkyOS4xNjcgMS4xMzMgNi4yOTIuOTI5LS4xNjdhMjAuMjQyIDIwLjI0MiAwIDAgMCA4LjAxNy0zLjM1N2wuNzcxLS41NDQtMy42ODItNS4yMjZ6IiBjbGFzcz0iY2xzLTEiIGRhdGEtbmFtZT0iUGF0aCAxOTUiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC04MS4wODcgLTcxLjMyMykiLz4KICAgICAgICAgICAgPHBhdGggaWQ9IlBhdGhfMTk2IiBkPSJNODcuODQ5IDU1LjQ5MWExMy44IDEzLjggMCAwIDEgNS40NjgtMi4yOTFsLjkyOS0uMTY3LTEuMTMzLTYuMjkyLS45MjkuMTY3YTIwLjI0NSAyMC4yNDUgMCAwIDAtOC4wMTcgMy4zNTdsLS43NzEuNTQ0IDMuNjgyIDUuMjI2eiIgY2xhc3M9ImNscy0xIiBkYXRhLW5hbWU9IlBhdGggMTk2IiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgtNjYuMDY5IC0zNy4yODYpIi8+CiAgICAgICAgICAgIDxwYXRoIGlkPSJQYXRoXzE5NyIgZD0iTTc2LjMzNSA5Ny45YTEzLjc3MSAxMy43NzEgMCAwIDEtMi4zLTUuNDZsLS4xNjktLjkyOS02LjI5NSAxLjE0OS4xNy45MjlhMjAuMjE4IDIwLjIxOCAwIDAgMCAzLjM3OSA4LjAxMWwuNTQ2Ljc3IDUuMjE1LTMuN3oiIGNsYXNzPSJjbHMtMSIgZGF0YS1uYW1lPSJQYXRoIDE5NyIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoLTU3LjgzNiAtNjEuMTg2KSIvPgogICAgICAgICAgICA8cGF0aCBpZD0iUGF0aF8xOTgiIGQ9Ik03My45NjQgNzIuNjg1YTEzLjU1MyAxMy41NTMgMCAwIDEgMi4yNDctNS40ODVsLjU0LS43NzUtNS4yNDUtMy42NTYtLjU0Ljc3NWExOS43IDE5LjcgMCAwIDAtMy4yODUgNy45NThsLS4yMDYgMS4xMzkgNi4zMzEuOTQ4eiIgY2xhc3M9ImNscy0xIiBkYXRhLW5hbWU9IlBhdGggMTk4IiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgtNTcuNzg2IC00NS44NDkpIi8+CiAgICAgICAgICAgIDxwYXRoIGlkPSJQYXRoXzE5OSIgZD0iTTg4LjEgMTExLjIyNWwtLjc3Ni0uNTM4LTMuNjQyIDUuMjU1Ljc3Ni41MzhhMTkuNjk0IDE5LjY5NCAwIDAgMCA3LjkgMy4yNWwxLjEuMjEgMS4wMDktNi4zMy0uOTE3LS4xNTlhMTMuNTY3IDEzLjU2NyAwIDAgMS01LjQ1LTIuMjI2eiIgY2xhc3M9ImNscy0xIiBkYXRhLW5hbWU9IlBhdGggMTk5IiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgtNjYuMjE4IC03MS4zODIpIi8+CiAgICAgICAgPC9nPgogICAgPC9nPgo8L3N2Zz4K"></a> 14 <i class="fas fa-bars"></i> 15 </div> 16 </header> 17</body> 18</html>
css
1body{margin: 0; 2 padding: 0; 3 width: 100%; 4 height: 100%; 5} 6header .head{position: fixed; 7 width: 100%; 8 height: 76px; 9 background-color: white; 10 top: 0px; 11 box-shadow: 0 2px 10px 2px rgb(156, 156, 156);} 12.head img{width: 150px; 13 max-width: 250px; 14 margin-left: 20px; 15 margin-bottom: auto; 16 margin-top: 28px;} 17.head i{font-size: 30px; 18 color: rgb(19, 43, 20); 19 } 20 21
よくある問い合わせの中の「teratailについて知りたい」をご参照ください????
「質問を書いてない」という指摘ですよ？
「こういう問題が起きてる。お願い！」だけの文章のどこに「質問事項」が書いてますか？赤の他人ですよ。読む人は。
それにteratailのことは少なくともあなたより100倍は知っています。
https://teratail.com/questions/242562#reply-352493
にて「Font awesomeを使わなくなったため。」なんて大嘘ついて使い続けてるあなたよりは。
それにヘルプページをたてにとる割には守ってないじゃないですか。
https://teratail.com/help/question-tips#questionTips4-2
どのように解決したのかコメントには一切書かれていません。
きちんとわかってくれた人が回答してくれたのでもう大丈夫です????
自分だけが良ければいい人にはそのうち誰も手をさしのべなくなります。
大嘘ついてまで逃げてるわけですから覚悟しておいてください。
客観的に見てもteratailとして非推奨の丸投げ質問です。
そして「動くコードくれ」だけの作業依頼です。通報しておきます。
あ、もう大丈夫です????
ではもう質問しないでくださいね。ルール守れないんだから(嘘もついてるし)。
あと、どうやら日本語通じてないようですし。
人に読めってすすめた記事を自分で読んでないのは致命的でしょう。
あ、もう大丈夫です????
Botでしたか。それは失礼。
運営にも回答者にも迷惑かけてるって製作者に伝えておいてください。
了解です！
さて。
あなたの今後のために真面目なアドバイスしておくと、
このくらいのレベルで面倒になって逃げたり他人に丸投げするようですから、別のことやったほうが人生にはプラスになります。
もっと面倒で訳がわからなくて逃げたくなるようなことばかりですから。私のルール遵守の指摘など、もともと指摘されてることがおかしいくらいですから。
注意されても信号無視する人を擁護する人はどの世界にもいませんしね。
嘘ついたらお客さんに逃げられるどころか業界にいれなくなります。
人のアドバイスを聞く気がないなら、学習自体をやめた方がいいです。
予備校でよくいる、「俺は予備校に通ってる、受からせるのは教師らだ！」のような頭の逝かれた害児と同じことをしようとしています。
回答2件
0
ベストアンサー
.headをdisplay:flex、.head aをdisplay:block;
iにdivをラップして、display:flex;width:calc(100% - 180px);justify-content:flex-end;
align-items:center;
投稿2020/03/02 05:20
総合スコア116724
0
.head i に float: right; を設定すれば右寄せになりますが、垂直位置を揃えたりが面倒なので、CSS Flexboxを使う方法がお勧めです。
css
1header .head { 2 position: fixed; 3 width: 100%; 4 height: 76px; 5 background-color: white; 6 top: 0px; 7 box-shadow: 0 2px 10px 2px rgb(156, 156, 156); 8 display: flex; /* 横並び */ 9 justify-content: space-between; /* 両端揃え */ 10 align-items: center; /* 垂直位置中央揃え */ 11}
HTMLを修正する必要はなし。
投稿2020/03/02 05:11
編集2020/03/02 05:45
総合スコア34075
あなたの回答
tips
プレビュー
