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

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

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

SCSSは、SassのCSSメタ言語です。Webページのスタイルを指定するCSSを効率的に記述することができます。ネストと呼ばれる入れ子構造で記述するため、CSSの全体の記述量を減らせる点が特徴です。さらに変数も利用できるため、変更や修正の際に少ない作業量で対応することもできます。

HTML

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

解決済

HTML SCSS ページネーション ボタンの間隔が均等に並ばない

tkm0604
tkm0604

総合スコア494

SCSS

SCSSは、SassのCSSメタ言語です。Webページのスタイルを指定するCSSを効率的に記述することができます。ネストと呼ばれる入れ子構造で記述するため、CSSの全体の記述量を減らせる点が特徴です。さらに変数も利用できるため、変更や修正の際に少ない作業量で対応することもできます。

HTML

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

1回答

0リアクション

0クリップ

142閲覧

投稿2022/08/08 09:27

HTML SCSSでレイアウトを組んだ ページネーション、ボタンの間隔が均等に並ばない

イメージ説明

HTML

<div class="info-list-pagination"> <span class="info-list-pagination__btn info-list-pagination__current">{{ $page }}</span> <a href="{{ $url }}" class="info-list-pagination__btn info-list-pagination__link" aria-label="{{ __('Go to page :page', ['page' => $page]) }}">{{ $page }}</a> </div>

SCSS

.info-list-pagination { text-align: center; width: 100%; &__btn{ margin-right: 20px; } &__btn:last-of-type{ margin-right: 0; } &__current { background: #0079ea; color: #ffffff; display: inline-block; height: 30px; line-height: 1; padding: 6px 0; text-align: center; width: 30px; @include f(16, 'NotoSansJP-Medium', 25); } &__link { background: transparent; border: 1px solid #0079ea; color: #0079ea; display: inline-block; padding: 6px 0; text-align: center; width: 30px; @include f(16, 'NotoSansJP-Medium', 25); } &__link:hover { background: #0079ea; color: #ffffff; } }

currentページの<span>タグ、他のページネーションボタンの<a>タグそれぞれにclass="info-list-pagination__btn"を持たせて、margin-right:20px を指定。
class="info-list-pagination__btn" last-of-typeにmargin-right:0を指定。

しかし、ブラウザーに表示すると、<span>タグにclass="pagination__btn:last-of-type" が当たっており、margin-right:0となってしまいます。。。。

<span> タグ、<a>タグにclass="info-list-pagination__btn"を与えているのになぜ<span>タグにclass="pagination__btn:last-of-type" となってしまうのでしょうか?

以下のような質問にはリアクションをつけましょう

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

リアクションが多い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

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

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

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

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

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

適切な質問に修正を依頼しましょう。

2022/08/10 07:11

こちらの質問が他のユーザーから「やってほしいことだけを記載した丸投げの質問」という指摘を受けました。

hatena19

2022/08/08 10:48

HTMLはコンパイルして出力されたものを提示してください。 SCSSも可能なら、コンパイルしてCSSにしたものを提示した方が回答がつきやすいでしょう。 現状のSCSSは @include の定義部分がないのでコンパイルできません。 回答者が状況を再現できるものを提示しないと回答はつきにくいです。

まだ回答がついていません

会員登録して回答してみよう

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

ただいまの回答率
87.20%

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

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

質問する

関連した質問

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

SCSS

SCSSは、SassのCSSメタ言語です。Webページのスタイルを指定するCSSを効率的に記述することができます。ネストと呼ばれる入れ子構造で記述するため、CSSの全体の記述量を減らせる点が特徴です。さらに変数も利用できるため、変更や修正の際に少ない作業量で対応することもできます。

HTML

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