質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.35%
CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

Q&A

解決済

2回答

3170閲覧

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

chiko.unagi

総合スコア13

CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

0グッド

0クリップ

投稿2020/04/17 14:46

編集2020/04/17 15:00

前提・実現したいこと

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

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答2

0

ベストアンサー

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

できます。

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

具体的には、chiko.unagiさんがvertical-alignfloatで実現したいことは、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について調べてみたところ、より理解が深まり実践でも問題なく使えるようになりました!細かい説明までありがとうございました。
guest

0

模写先のサイトは 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}

Flexbox の基本的な使い方/Web Design Leaves

投稿2020/04/17 17:19

hatena19

総合スコア34075

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.35%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問