前提・実現したいこと
駆け出しのエンジニアです。
今、isaraの模写コーディングを始めたところです。
参考サイト
https://isara.life/
発生している問題・エラーメッセージ
まずheaderのコーディングなのですが、
今更感のある質問になりますが、pタグの縦横配置、aタグの縦横配置はどのようにコーディング
するべきなのでしょうか。
例えばpタグに
css
1 p{ 2 vertical-align: bottom; 3}
としても反応しない場合や、
aタグに
css
1a{ 2 float:right; 3}
などが効かない場合、なぜできていないのかといった理屈をしりたいです。
質問をまとめると、
1.aタグ、pタグを参考サイトの様に配置できるのか。
2.text-alignやvertical-align、floatなどはどのようなときに使えて、また使えないのか
(理屈 を含めて)
改めて初歩的なことが分からなくなってしまったので教えていただきたいです。
試したこと
aタグの右寄せに関して
・text-alignはインラインでの配置なので、width:100%にして右寄せにしてみた。
(しかしinline-blockで指定したいことを考えたら、だいぶ左側にカーソルを持ってきたときにもaタグにhoverした状態になってしまった)
・margin 0 0 0 auto で右寄せにしてみた。しかし、その状態から右に空白をあけるのに paddingではなく margin を使いたかったので、都合が悪く感じた。
・float rightを実行してみた。しかし反応しなかった。
pタグの下寄せに関して
・heightを100%にして vertical-align:bottom を実行してみた。
しかし反応しなかった。
追記:
justify-content:space-betweenで両端にできるのかも試してみました。
### 該当のコード
html
1<!DOCTYPE html> 2<html lang="ja"> 3 4<head> 5 <meta charset="UTF-8"> 6 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 7 <title>isara</title> 8 <link rel="stylesheet" href="stylesheet.css"> 9 <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" 10 integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous"> 11</head> 12 13<body> 14 15 <div class="header"> 16 <div class="logo"> 17 <img src="images/isaralogo.png" alt="isara" width=128px height=44.65px> 18 <p>バンコクのノマドエンジニア育成講座</p> 19 </div> 20 21 <div class="access"> 22 <a href="#" class="access">お問い合わせ / 資料請求はこちら</a> 23 </div> 24 </div> 25 26 <!-- top-wrapper --> 27 28 29 30 <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" 31 integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" 32 crossorigin="anonymous"></script> 33 <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" 34 integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" 35 crossorigin="anonymous"></script> 36 <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" 37 integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" 38 crossorigin="anonymous"></script> 39</body> 40 41</html>
css
1*{ 2 margin: 0px; 3 padding: 0px; 4} 5 6a{ 7 display: inline-block; 8 text-decoration: none; 9} 10 11.header{ 12 width:100%; 13 height: 70px; 14 display: flex; 15} 16 17.logo{ 18 display: flex; 19 height: 100%; 20 21} 22 23.logo p{ 24 vertical-align: bottom; 25} 26 27 28.access { 29 display: flex; 30 31} 32
回答2件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2020/04/18 08:01
2020/04/18 09:07
2020/04/21 16:20