![](http://oshiete.xgoo.jp/images/v2/pc/qa/question_title.png?5a7ff87)
CSSについて教えてください。
こちらのサイトを参考にしているのですが、ナンバーを自動で付けているのを解除して、ナンバーではなく直接任意のテキストを表示したいです。
spanに入れただけだと白枠の中に表示されてしまうのですが、どうすれば良いかご教授いただけないでしょうか。
画像の上に要素を重ねるレイアウトの実装方法
https://tips-log.com/css-layout/
(コード貼り付けようとしたのですが文字数が足りませんでした)
<span class="p-textImgBox__number"></span>
.p-textImgBox__number::before {
position: absolute;
font-size: 70px;
letter-spacing: 0.1em;
line-height: calc(84/70);
color: var(--base-color);
right: 25px;
font-weight: 100;
content: "0"counter(number) " ";
top: 0;
}
content: "0"counter(number) " ";
を消せばいけるかと思いましたが、ダメでした…。
No.3ベストアンサー
- 回答日時:
htmlで指定した文字列を渡したいんでしょ?
以下にします。例です。
【css側】
content: "0"counter(number) " ";
↓
content: attr(kahendata); ←kahendataにhtmlから渡す
【html側】
<span class="p-textImgBox"></span>
↓
<span class="p-textImgBox__number" kahendata="ここに渡す文字"></span>
わわわ!ありがとうございます!
attrでHTMLから取得するんですね!
これならわかりやすいし管理も楽ですね!
とても勉強になりました!
No.2
- 回答日時:
contentを使って違うテキストを表示する場合は、それぞれのブロックに「もうひとつクラス」をつけてやるとよいです。
上記の例なら
p-textImgBox__number::before
の指定がすべてについてると思うんですけれど、
<span class="p-textImgBox__number hoge1"></span>
<span class="p-textImgBox__number hoge2"></span>
と半角スペース+追加クラス名をつける。
で、p-textImgBox__number::beforeからはcontentの一行だけ外して。
.p-textImgBox__number.hoge1::before {content:”任意の”}
.p-textImgBox__number.hoge2::before {content:”テキスト”}
というふうに、hogeに対応する部分だけをCSSファイルに追記するといいんじゃないかなー、と思います。
p-textImgBox__number::before {}よりも下の行に
.p-textImgBox__number.hoge1::before {content:”任意の”}
.p-textImgBox__number.hoge2::before {content:”テキスト”}
を追記します。
CSSの書き方ってわりと幅が広いので、それも覚えていただければ。
ただ上記のような書き方って面倒なので、わかってる人はなんとか自動化できんのか? と考え始めるみたいです。
ありがとうございます!
Chrome分けてできました!
確かに数が増えたときに大変だから自動化とか色々考えないとですね…勉強します!
No.1
- 回答日時:
別の箇所で counter-increment の設定などが生きてませんか?
カウンターについてはこちら↓
ここでカウンター関係のCSSを探してコメントアウトしてみてください。
https://developer.mozilla.org/ja/docs/Web/CSS/CS …
https://developer.mozilla.org/ja/docs/Web/CSS/co …
content: "0"counter(number) " ";
は、数字のゼロを自動でつけて、かつ、カウンターのナンバーも表示してね、という指定です。
content: "0"
これが0をつける
counter(number) " ";
これがカウンターの数字
任意のテキストをCSSでつけるだけなら
content:"任意の文字";
って試してみたら、参考にされたページのカウンターまわりの仕組みがどうなってるか、なんとなくわかるんじゃないかなーと思います。
ありがとうございます!!!ご指摘の通りでした!
ただ今度は、content:"任意の文字";をすると、他のところも同じ文字になるので、どうしたもんかと悩んでいます…。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- JavaScript 【JavaScript】検索がヒットした場合、プルダウンをオープンで表示させる方法 2 2023/09/06 14:02
- HTML・CSS アコーディオンメニューが思うように動作しません。 1 2023/08/20 16:48
- HTML・CSS ヘッダーの画像にメインエリアがかぶってしまいます 1 2022/11/28 14:06
- HTML・CSS 初心者html・CSS ウィンドウを縮小するとタグの一部が隠れてしまう。 1 2023/12/18 19:52
- HTML・CSS cssの display: flex;で横並びにならずに困ってます 1 2022/12/04 13:18
- HTML・CSS html cssのmargin 5 2022/12/03 11:04
- JavaScript vertical sliderをautoplayしたい 2 2022/08/25 14:47
- HTML・CSS HTMLですCSSです この画像のように 文字を打ち込みたいのですが、 下の3この四角にを画像のよ 3 2023/12/25 16:07
- HTML・CSS HTMLですCSSです 画像のように作りたいのですが 以下のようにあってますか?間違ってる感じがしま 3 2023/12/24 16:15
- HTML・CSS 書籍を見つつサイト造りの練習をしているのですが、見た目が一致しません 2 2022/11/28 15:00
このQ&Aを見た人はこんなQ&Aも見ています
-
性格の違いは生まれた順番で決まる?長男長女・中間子・末っ子・一人っ子の性格の傾向
同じ環境で生まれ育っても、生まれ順で性格は違うものなのだろうか。家庭教育研究家の田宮由美さんに教えてもらった。
-
index.phpって何ですか? 具体的に教えてください
PHP
-
プログラミングの課題がわからないので教えていただきたいです。特にサークル関数を定義した後に呼び出す方
C言語・C++・C#
-
コードを書いて下さい( ; ; )写真有り
HTML・CSS
-
-
4
以下のURL入れますか?皆さんは↓
AJAX
-
5
だれがとけるの?
C言語・C++・C#
-
6
なんで
C言語・C++・C#
-
7
swift言語の最適化 swift最適化を最大限に出来たらcc++よりもだいぶ早く実行出来ますか?s
C言語・C++・C#
-
8
擬似コード
C言語・C++・C#
-
9
CSSデータの作成方法について(FTP内)
HTML・CSS
-
10
C言語 配列と関数の練習問題
C言語・C++・C#
-
11
プログラミング ソースコード
その他(プログラミング・Web制作)
-
12
こんなことてしますか??
C言語・C++・C#
-
13
システムエンジニアの適正について
C言語・C++・C#
-
14
どちのほうがすきですか?
C言語・C++・C#
-
15
VBAで各列の+"と"o"の合計数を数え3行目と4行目に入力したい"
Visual Basic(VBA)
-
16
右ビットシフト
C言語・C++・C#
-
17
mallocについて
C言語・C++・C#
-
18
過剰なオブジェクト指向脳からの脱却について
その他(プログラミング・Web制作)
-
19
プログラミング
その他(プログラミング・Web制作)
-
20
バッチファイルで以下のようなものは作れますか? ・Microsoft Defenderでウイルススキ
C言語・C++・C#
関連するカテゴリからQ&Aを探す
このQ&Aを見た人がよく見るQ&A
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
background-color: #ddd;の意味...
-
スタイルシート
-
HTMLの疑問です・・・
-
Firefoxで2ちゃんねるのAAがず...
-
マイクロ(μ)の文字を半角で出...
-
outlook 文字を揃えたい。tab...
-
MsgBoxについて
-
教えてください。
-
テーブル内の文字サイズを変更...
-
メールで、榊の文字を木辺に神...
-
cssの【float】について教えて...
-
cssファイルの名称付け
-
16x16のスプライトフォント
-
vb2019を使ってリッチテキスト...
-
h1タグについて教えてください。
-
gvimでフォント、色テーマ設定...
-
OUTLOOKでスペースを入力した際に
-
サイトを作る時のcssファイルは...
-
HPを閲覧しても色が変わらな...
-
B4サイズを実寸大で表示できる...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
WEBサイトの作成で、imgタグに...
-
文字の位置、上下のマージンが...
-
リストの前後の行間をなくす方...
-
特定の文字のみcssを適用するに...
-
全角半角含めて等幅で表示したい
-
ホームページビルダー作成HPがi...
-
テキストファイルの行を指定し...
-
background-color: #ddd;の意味...
-
Format 関数 表示書式指定文字...
-
リンク文字
-
fontサイズ指定の ”-(マイナ...
-
HTMLで特定の文字だけ色を変え...
-
CSSを一部無効にしたい
-
指定の文字だけ色を変える
-
上付き文字と下付き文字を同時...
-
Excel VBA メール作成について ...
-
遊明朝のプロポーショナルフォ...
-
テキストエリア内の文字の装飾
-
テキストボックス途中で切れて...
-
jquery.validationEngine.jsカ...
おすすめ情報