見出しを個別に設定

「無添加石鹸洗顔料おすすめランキング」の下のスペースはその下にあるP要素のマージンです。

前に何かしらのトピックで書きましたが、マージンでスペースを作る時にそれらが他の要素と連続する場合は、「マージンは下にだけつける」というようなルールを作るとスタイルしやすいです。これらは逆でも構いませんし、特別な要素はこれらに縛られる必要はありませんが、ルールを決めておくことでどこを修正すればよいかがとてもわかりやすくなります。

例えば、

.article p {
  margin-bottom: 35px;
}

.article p:last-child {
  margin-bottom: 0;
}

こんな感じにやってみてはどうでしょうか？

薄ピンクでボーダーがドットの部分にもやはりmargin-bottomを指定します。がこれらは、style.css等に例えば、

■html

<div class="note">
その説明
</div>

■css

.note {
    padding: 10px;
    border: 1px dotted rgb(196, 103, 128);
    color: rgb(183, 33, 0);
    line-height: 40px;
    font-size: 16px;
    background-color: rgb(255, 249, 255);
    margin-bottom: 35px;
}

こんな感じにしたり、更に拡張するなら、

■html

<div class="note pink">
その説明
</div>
<div class="note gray">
また違う説明
</div>

■css

.note {
    padding: 10px;
    border: 1px dotted;
    line-height: 40px;
    font-size: 16px;
    margin-bottom: 35px;
}
.note.pink {
  border-color: rgb(196, 103, 128);
  color: rgb(183, 33, 0);
  background-color: rgb(255, 249, 255);
}
.note.gray {
  border-color: #666;
  color: #333;
  background-color: #ccc;
}

こんな感じにしておくと色はいくつでも作れますのでバリエーションを増やすことができます。通常cssはキャッシュされるのでタグにstyle属性で書くよりも高速に動作します。

ランキング部分で、緑のリンクの部分がやや上にあるように見えるのは、その前にある<div style="clear:both">の中にテキストがあって、閉じdivの後にpが続き、その後のaタグがclear:bothの所まで詰められてしまっているからです。

<div style="clear: both;">何かしらのテキスト</div>
<p>続く文章がありながら<a>緑のボタン</a></p>

このような構造になっているためです。これらを

<div style="clear: both;"></div>
<p>何かしらのテキスト<br>続く文章がありながら</p>
<a>緑のボタン</a>

このようにするとうまく表示できるかと思います。pの中にbrを入れていますが、pの改行スペースが問題ないのであれば、

<div style="clear: both;"></div>
<p>何かしらのテキスト</p>
<p>続く文章がありながら</p>
<a>緑のボタン</a>

としても良いかと思います。実質、floatしている要素がそれまでになさそうなので<div style="clear: both;"></div>は必要ないかと思うんですけれどもね(笑)

見出し部分は、画像なので文字数とか何行で収めるというのを決めておいてそれぞれの端末でどう表示するのが最適かを探す(この場合はメディアクエリとfont-size、paddingの調整でいけそう)か、

サンプル: いくつかのサンプル |codepen

こんな感じに書き換えるかでしょうか。
トロフィー部分だけ(帯なくして背景透過)だけあれば、h2のbeforeとしなくても、h2の中にimgで読み込んでposition:absoluteで位置はいじれますけれども、青い帯をh2で表示する場合はそれら画像の下に青い帯が見えることになり、画像左側に帯が突っ切る形になるため、うまく隠す必要があります。
サンプルの一番最後のように何かしらでh2の背景色を隠せればうまく行きそうな気はするんですけどね。

オリジナルの画像と同じようにしようとすると案外難しいものです。あれやったらこれがダメになるとかという感じになったり。

hidekichi様

いつもありがとうございます。
箇条書きの部分やリンク部分についてもご教示頂きありがとうございます。
お陰でかなりスッキリした見栄えになりました。

薄ピンクでボーダーがドットの部分ですが、
この方法だと一括して設定出来るので後々変更する場合にも便利ですね。
こういう事がしたいと思っていたのですが、自力でできず諦めていたので嬉しいです。

しかし、ご教示頂いた内容を全て反映させてみたのですが、
「無添加石鹸洗顔料おすすめランキング」の下について、
PCでは問題ない余白になったのですが、スマホ表示では大きな余白が出来てしまいます。

それと、スマホ表示で見出しのテキストが途中で切れるのはどうにかならないでしょうか。
改行とかで対応するしかないでしょうか。

再度ご教示頂けると助かります。
宜しくお願い致します。

hidekichi様

すみません、返信している間に追加の情報頂けましたね。
試してみますので、上記の私の返信はとりあえず気にしないでください。
申し訳ありません。

hidekichi様

サンプルまでご用意頂きましてありがとうございます。
そのサンプルを微調整して、かなり思い通りの内容に出来ているのですが、
もとのh2で設定している吹き出し部分（下三角）がどうしても残ってしまいます。
これを消す方法はありますでしょうか。

わいひら様

ありがとうございます。
他のh2については吹き出しの下三角部分を残しつつ、
個別に設定した見出しだけ消したかったんです。

しかし、アドバイス頂けたのがヒントになり、
.rank::after {
border-style:none !important;
}

をcssに追記する事で解決できました。

この度も、わいひらさん、hidekichiさん、共にありがとうございました。

#header {
  height: 0;
  padding: 0 0 19.6%;
}
#h-top {
  min-height: unset;
}

これを追加したら幸せになれる「かも」しれません。

hidekichi様

ありがとうございます！
特にスマホ表示でヘッダーとh1との間に空白が出来ていて、
何とかしたいと思っていた矢先でした。

というか自分なりにも色々試して無理だったので実は諦めかけていた事でもありました。
hidekichiさんが仰るように追加したら幸せになれました。メチャクチャ嬉しいです。
ありがとうございました。