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

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

ただいまの
回答率

90.51%

  • HTML

    9000questions

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

  • CSS

    5809questions

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

  • HTML5

    4027questions

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

  • CSS3

    2076questions

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

line-heightの1行目の上余白だけ消したい

受付中

回答 4

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 3,757

takamiii_158cm

score 29

前提・実現したいこと

line-heightで発生する1行目の上の余白だけ消したいです。
調べても出てこなかったです。。
すみませんがご回答頂けますと幸いです。

イメージ説明

使用する状況は、アイコンの横に文章が並ぶレイアウトで
・文言が1行で終わる時はアイコンに対して縦中央そろえ(vertical-align: middle)
・文言が2行以上の場合、文言がtopに揃う(vertical-align: top)

というイメージです。。

イメージ説明
イメージ説明

2行以上になった場合、文言をアイコンの高さと揃えたいのにlineheightのせいで文言に上アキが出るので解消したいです。。

cssはシングルクラスで書いています。

該当のソースコード

            <div class="faqList__body__table">
              <div class="faqList__body__icon"><span>A</span></div>
              <p class="faqList__body__txt">この文章はダミーです。文字の大きさ、量、字間、</p>
            </div>
.faqList__body__table {
  display: table;
}

.faqList__body__icon {
  position: relative;
  display: block;
  margin-right: 20px;
  width: 45px;
  height: 45px;
  border-radius: 23px;
  float: left;
  font-family: "Montserrat", "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "游ゴシック体", "Yu Gothic", "YuGothic", "メイリオ", "Meiryo", sans-serif;
  font-weight: 700;
  font-size: 1.28571rem;
  line-height: 1.1;
  background-color: #cb4e0c;
}

.faqList__body__icon > span {
  content: "";
  display: block;
  text-align: center;
  position: absolute;
  margin-top: -10px;
  padding: 0;
  top: 50%;
  left: 0;
  right: 0;
  color: #fff;
}

.faqList__body__txt {
  display: table-cell;
  font-size: 1.14286rem;
  line-height: 2;
  vertical-align: middle;
}
  • 気になる質問をクリップする

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

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

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 4

+2

疑似要素:first-lineを使ってみてはいかがでしょうか。ブロック内の「1行目」にだけに反映されるスタイルが記述できます。

p {
  line-height: 2;
}
p:first-line {
  line-height: 1;
}

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2017/02/17 11:39

    下のほうで上書きされるってことですね。

    「p要素内1行目以外にline-heightを適用する」はできないでしょうか?

    p:not(first-line) ← 左に似ている記載方法はありますか?

    キャンセル

  • 2017/02/17 11:52

    上の回答通りにするだけで1行目だけline-height:1、それ以外は2のままですよ。cssはあとから書かれた要素で上書きされますが、この場合上書きされるのは1行目要素だけで、p全体で見たらline-height:2なのは維持されていますよ
    https://jsfiddle.net/qaztwh5p/

    キャンセル

  • 2017/02/17 12:08

    下のほうで上書きされるってことですね。
    → p:first-line、1行目だけ上書きされるってことでした。

    ちなみに、p と p:first-lineの記載順番を入れ替えて同じ結果になりますね。
    必ず後で記載したものが勝つ仕様ではなかったんですね。

    キャンセル

  • 2017/02/17 12:22

    CSSはセレクタの要素数が高いほど優先されるという仕様もあります。同じpを指すとしても、pだけで指すものとbody pと指す場合では2要素使って指定している後者のほうが優先されます。他にも優先度に関わってくるのは!important指定であったり、外部cssによる指定<内部cssによる指定<タグのstyle属性による指定なども関わってきます。
    あなたのいう2行目以降だけ指定したいのであれば、全体のpを使って指定、first-lineの方でそれを打ち消すような書き方をすればできます。残念ながらp:not(first-line)のように、単体のセレクタで「2行目以降だけ」を指定するものは無いと思います。

    キャンセル

  • 2017/02/17 12:26

    勉強になりました、ありがとうございます。

    キャンセル

  • 2017/02/17 16:44

    これだと、1行目と2行目の行間と2行目と3行目の行間が変わってしまうのではないでしょうか。

    キャンセル

+1

padding-top: 値;
をスタイルシートに加えてみるとか。
padding-スタイルシートリファレンス

ブロック要素同士の隙間・余白の調整は、
marginとpaddingでいじりますが、
ブロック要素の背景色や背景画像を使ったりする場合に、
marginでいじるべきかpaddingでいじるべきかを
しっかり考える必要があります。
今回の件は一見するとmargin-topでもpadding-topでも差し支えないように見えますが、
使い分けは知っておいたほうがいいですよ。

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2017/02/17 11:19

    すみません、質問文が簡潔すぎたので、もう少し詳しく書き直します。
    table-cellを使用しているのでmarginが使えないのです。。

    キャンセル

  • 2017/02/17 11:25

    であれば、該当箇所のhtmlも示してもらわないと、ズレた回答が続きますよ。

    キャンセル

  • 2017/02/17 11:29

    表でもないところでtable,tr,tdを使ってレイアウトしてしまうと、この件のように調整がしづらくなってしまうので、divやspanを駆使してレイアウトの指定をスタイルシートを主軸に書けるようになっておくといいです。(きっとブーメラン)

    キャンセル

  • 2017/02/17 11:43

    この状況だとtableとtable-cellを使わないとアイコンと文字が縦中央そろえにならないと思うのですが、ブロック要素で表現できる方法があれば教えて頂きたいです。。

    1行だとアイコンに対して縦中央、2行以上だとアイコンに対して上揃えになるという流動的なスタイルの作り方がいまいちわかりません・・。

    キャンセル

+1

p{
line-height: 2;
margin-top: -10px;
}
いまいちどういった状況でそれをしたいのか分かりませんが、
上マージンをマイナスで指定するのはどうでしょう?

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

0

リンク内容

上記にその例があります。
確認してみてください。

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2017/02/17 11:33

    ありがとうございます、今回の件では使えない指定でしたがこんな方法もあるのか・・と参考になりました!

    キャンセル

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

  • ただいまの回答率 90.51%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

  • 受付中

    cssのfloatの箇所が分かりません。

    初めて投稿させて頂きます。 cssで、一段組みのサイト全体の中央揃えと画像、 テキストの左揃えの箇所が分かりません。 サイト全体を中央揃えにし、全体の幅960px、

  • 受付中

    dl dtの横並び 縦がずれる

    どなたかわかる方いましたら、よろしくお願いします。 1.beforeで作成した「あああああ」の左下に1行目のdtの「1」が表示されてしまう。ちゃんと下に表示されるようにしたい

  • 受付中

    適切なイベントがわからない。

    前提・実現したいこと imgタグで表示されているアイコンをクリックした後で、ポップアップされるdatepickerの表示崩れを修正したいです。 datepicker内のtabl

  • 解決済

    jQueryを使ってボタン操作でsection移動をうまくしたい

    現状・目標 シンプルに下ボタンを押せば下に、上ボタンを押せば上に 指定したクラスに一個ずつスクロールするjsを組みたいです。 参考URLを参考に作りました。 これの、逆

  • 解決済

    複数行の文章が長い場合に文末に「...」をつける「-webkit-line-clamp」がうまく当た...

    タイトルにある通り、複数行に渡る文の文末に「...」をつけたく、調べていたら、ブラウザは限定されるものの「-webkit-line-clamp」を用いて、「...」をつける行数を指

  • 受付中

    CSSで左右に要素を寄せて、それぞれ上下中央寄せにしたい

     やりたいこと 下記の図のように各要素を配置したいと考えています。 なお、青いボックスは赤いボックスにくっついても構わないです。 コードは下記のようになります。 <

  • 解決済

    HTMLCSSの表の改行に関すること

    今、HTMLとCSSを用いて、<オプション>の炭酸シャンプーと[300円(税込) 頭皮を直接刺激してあげることで、根本から従来のハリとツヤを取り戻せます。 ]の行の部分の作成をして

  • 解決済

    HTMLの表の中の文字の配置について

    tableタグ内で、文字の配置の調整を行いたいのですが、うまくいかなかったため、質問させていただきました。 下の写真にtableタグの中に「炭酸シャンプー」とあると思いますが

同じタグがついた質問を見る

  • HTML

    9000questions

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

  • CSS

    5809questions

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

  • HTML5

    4027questions

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

  • CSS3

    2076questions

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