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

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

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

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

HTML5

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

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

CSSフレームワーク

CSSフレームワークは、Webページのスタイルを指定する言語であるCSSを容易に構築するためのツールです。ツイッター社が開発した「Bootstrap」や段組レイアウトが可能な「Foundation」など様々なCSSフレームワークがあります。

Q&A

解決済

4回答

2925閲覧

このh1タグの「青枠内の余白」は消せませんか・・?

fuhixx

総合スコア22

CSS3

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

HTML5

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

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

CSSフレームワーク

CSSフレームワークは、Webページのスタイルを指定する言語であるCSSを容易に構築するためのツールです。ツイッター社が開発した「Bootstrap」や段組レイアウトが可能な「Foundation」など様々なCSSフレームワークがあります。

0グッド

0クリップ

投稿2020/05/05 08:33

仕様なので消せないと思っておりますが、
消せる方法は存在しますか・・?

以下画像の通り、
「paddingやmarginなどの余白」のことではなく、
「青枠内にある、h1タグそのものがもつ余白」のことです。

矢印で示した部分になります↓

イメージ説明

これは、一切CSSを使用していません。
「あいうえお」と入力しただけのものです。

使用しているのは、「code pen」というサイトです↓

イメージ説明

html

1<h1>あいうえお</h1>

css

1なし

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

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

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

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

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

guest

回答4

0

ベストアンサー

その部分は、「行の高さ」と言ってline-heightプロパティで調整可能ですよ。
デフォルトは「normal」なので、何も指定していなければ、ブラウザ判断された値が適用されます。

投稿2020/05/05 08:50

yamyam0003

総合スコア20

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

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

0

明示的にline-heightなど指定すれば消せるでしょうが、その領域はフォント側で適切だと考えて設定された高さなので、消すべきかどうかは慎重に判断してください。
ふつう、フォントの高さはそのフォントに含まれるすべての文字のうち最も上にある部分と最も下にある部分がおおむね収まるように設定されています。上は「Ǻ」あたりを入れてみると分かるかと。
(下は分かりやすい文字が無いです。「y」だとたぶん一番下までは行かず、合成用丸「 ̥」を適切な文字に付けたりすると行くのかなと)


訂正: height→line-height

投稿2020/05/05 09:02

編集2020/05/05 09:16
ikadzuchi

総合スコア3047

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

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

0

既にある回答を参考にされると良いです。line-heightですね。
1を指定すれば「文字列のサイズの高さ」そのままになります。

下記、質問見間違えたための誤答

h1タグそのものがもつ余白

それを制御するのがpaddingです。

要素の全四辺のパディング領域を設定します。

投稿2020/05/05 08:38

編集2020/05/05 09:14
m.ts10806

総合スコア80875

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

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

fuhixx

2020/05/05 08:41

なにも設定していないのに、余白があるときはpaddingが原因なのですね。。 ご回答いただきありがとうございます!
m.ts10806

2020/05/05 08:43

大抵の要素はデフォルトで様々な設定を持っています。 ブラウザ間で設定値が違うこともあるのでそれらをなくすべく reset.cssを用いて調整をはかります。
m.ts10806

2020/05/05 09:11

あぁそうか。オレンジのところかと思ってました。これは見間違いました。 「line-height」 ですね。heightではなく。
ikadzuchi

2020/05/05 09:14

そうですね、うろ覚えでした。
m.ts10806

2020/05/05 09:15

誤答した私が言うのもあれですが、一応、試された方が。
ikadzuchi

2020/05/05 09:18

そうですね…。回答の本題としては必ずしも消さない方が良いのではないかという部分だったので、消す方法については試していませんでした。
m.ts10806

2020/05/05 09:20

確かに、「結局どうしたいのか」が見えづらい内容ではありますね。 「仕様」部分のみにフォーカスをあてたほうが良いのか、どうか。
fuhixx

2020/05/05 11:32

ご回答いただきありがとうございます! 試してみたのですが、原因は「line-height」でした!
m.ts10806

2020/05/05 12:00

いえ、私のはもともと誤答で、yamyam0003さんの回答を元に補足しただけのものです。 先にline-heightに言及されたyamyam0003さんの回答をベストアンサーにしてあげてください。
guest

0

line-heightが原因でした!イメージ説明

投稿2020/05/05 11:32

fuhixx

総合スコア22

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

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

fuhixx

2020/05/06 11:54 編集

私が最終的にたどり着きたかったのは、 【「line-height:1;」以外で発生する「無駄な余白の抹消」】です! やっと理解できました!↓ https://codepen.io/fuhixx/pen/MWaQadJ https://codepen.io/fuhixx/pen/KKdQVjo codepenでは、「width:1px height:1px」の記述がないとおかしくなりますが、 ローカル環境からchromeとfirefoxで確認したときはなくても反映されました。 これは原因がよくわかりませんでした。 →結局どちらもwidthかheightが1px以上ないと反映されませんでした。 参考サイト:https://oshiete.goo.ne.jp/qa/7988606.html しかし、この計算を自動化できたら もっと楽にできるのですが・・(^^;) 以下サイトの方法を試してもダメでした↓(個別で設定し直す必要があるため) 参考サイト:https://yuyakinoshita.com/blog/2020/01/20/line-height-crop/
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.35%

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

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

質問する

関連した質問