pタグやaタグの縦横配置の方法

前提・実現したいこと

駆け出しのエンジニアです。
今、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件

ベストアンサー

1.aタグ、pタグを参考サイトの様に配置できるのか。

できます。

前提として、CSSでのレイアウトにおいて「aタグだからできない」「pタグだからできない」ということはないです。重要なのは、どのタグを使っているかということではなく「display」に何が指定されているか、です。

具体的には、chiko.unagiさんがvertical-alignとfloatで実現したいことは、2020年現在ではdisplay: flex;で対応するのがセオリーとなっています。

2.text-alignやvertical-align、floatなどはどのようなときに使えて、また使えないのか

（理屈　を含めて）

text-align

text-alignは、文字の左揃え、右揃え、中央揃えに使います。
display: block;を指定した要素を左右中央配置にするときには使えません。

vertical-align

vertical-alignは、文章の中の要素、例えば文字と画像アイコンの上下方向の位置を微調整するようなときに使います。また、display: table-cell;の中身に対してだけ、割と自由に上下中央配置などを指定できます。

float

floatは、私はteratailで質問に答えるときにしか使っていません。

以下の画像のようなレイアウトの場合だけ使える、と思うのですが、そもそも以下のようなデザインをすることがあまりないです。ブログ記事のコーディングをするような場合は使えるかもしれません。

あとは、display: inline-block;やdisplay: table-cell;が使えるようになったのがIE8からなので、IE6 (2014年サポート切れ) や IE7 (2016年サポート切れ) の対応を行う場合はfloatが使えると思います。

投稿2020/04/17 22:03

編集2020/04/17 22:04

new1ro

総合スコア4528

chiko.unagi

2020/04/18 08:01

display:flex; を用いて再現する際、子要素のそれぞれに対して右寄せ、左寄せの設定はできるのでしょうか。それとも親要素に指定する　justify-content:space-betweenなどでいくつかの子要素を均等に配置する方法などといったものをうまく使いこなすといったことなのでしょうか。知識が浅くて申し訳ありません。

new1ro

2020/04/18 09:07

display: flex;により子要素を右側に配置する場合、以下のような書き方になります。 <div style="display: flex;"> <div style="margin-left: auto;">右側に配置する子要素</div> </div> ---- 左と右に配置する場合は以下でも可能です。 (必ずしもjustify-content: space-between;などを使わなくてもOK) <div style="display: flex;"> <div>左側に配置する子要素</div> <div style="margin-left: auto;">右側に配置する子要素</div> </div> もしくは <div style="display: flex;"> <div style="margin-right: auto;">左側に配置する子要素</div> <div>右側に配置する子要素</div> </div> ---- 当方デザイナーなのですが、デザイン観点だと「余白」が重要で、横幅はpx単位では割とどうでもよかったりします。そのため、「横幅は自由に伸び縮みして、余白はpx単位で指定」する書き方が、デザインする際の思考に近いので私は「justify-content: space-between;」は使いません。 (「margin: 0 auto;」で事足りてしまうこともあり) ただ上記は個人の主観が強い、やや偏った意見ということをご留意ください。

chiko.unagi

2020/04/21 16:20

回答を参考にしてもう一度flexデザインやmarginについて調べてみたところ、より理解が深まり実践でも問題なく使えるようになりました！細かい説明までありがとうございました。

行動規範の内容に同意します

模写先のサイトは inline-block で横並びにしているようですが、flex を使った方がシンプルに実現できますね。

css
1*{
2  margin: 0px;
3  padding: 0px;
4}
5
6a{
7  text-decoration: none;
8}
9
10.header{
11  width: 1170px;
12  max-width: calc(100% - 20px);
13  margin: 0 auto;
14  height: 70px;
15  display: flex;  /*横並び*/
16  justify-content: space-between; /*両端揃え*/
17  align-items: center; /*垂直位置中央配置*/
18  background-color: #fff;
19}
20
21.logo{
22  display: flex; /*横並び*/
23  align-items:flex-end; /*下辺揃え*/
24}
25
26.access {
27   color: #fff;
28   padding: 10px 30px;
29   background-color: #da6b64;
30   border-radius: 25px;
31}