タグ・デザイン掲示板

[

文字に背景色を付けたい
by 匿名

2016-08-13 02:51
スペースお借りします。『文字　背景色』などの検索で解決できず、こちらの掲示板以外でも見つからなかった為質問させて頂きます。既出でしたら削除勧告お願い致します。

以前拝見したサイト様で、見出しにバイカラーの背景色が付いていて可愛らしかったので挑戦しようと思ったのですが、自分の力では解決できませんでした。

┌───────────┐
│　　　文│字　　 │
└───────────┘

上のような感じで真ん中の部分で色が変わる文字背景になっていました。

自身で試したのは以下のCSSです。

span.sample{
display: inline-block;
position: relative;
z-index: 0;
text-shadow: 0px 0px 1px rgba(255,255,255,0.7);
}
span.sample:before{
content: '';
position: absolute;
z-index: -1;
box-shadow: 0 0 3px 0 white inset;
left: -2px;
right: -2px;
top: 45%;
bottom: 5%;
border-radius:10px;
background-color:#fd3;
}

<span class="sample">文字</span>を組み込む形で文字にマーカー風の下線や背景色を入れる所までは出来たのですが、真ん中で色を変えるにはどうしたらいいでしょうか。

拝見したサイト様はナノ様で作成されていて携帯端末でもPCでも画像として表示されなかったので、CSSやタグで作成したものだと思うのですが…

ご回答宜しくお願い致します。

pc
[編集]

by 匿名

2016-08-13 08:57
そのサイトのソースを見ればはっきり分かると思いますがとりあえず

①beforeとafterを使ってマーカーを50%のところで分割する。
②border-radiusは両端のみに指定、真ん中に来る部分には指定しない。
他にもやり方はあると思いますが上記の場合↓

span.border {
display:inline-block;
position: relative;
padding: 0 .4em 0;
}

span.border::after {
position: absolute;
top:40%;
bottom: 0;
left: 0;
z-index: -1;
content: '';
width: 50%;
height: 0.8em;
border-radius:10px 0 0 10px;
background-color: #b6f0fc;
}

span.border::before {
position: absolute;
top:40%;
bottom: 0;
right: 0;
z-index: -1;
content: '';
width: 50%;
height: 0.8em;
border-radius:0 10px 10px 0;
background-color: #ffdd33;
}

<span class="border">あいうえお</span>

別の解説サイトさんの見よう見まねなのでマーカーのやり方が違いますがご参考までに
iPhoneで見ると上手く出来ました

追記
ああ、すみません
質問者様の調べ方が不足しているという意味ではなく、憶測で書いたものよりも実際のサイトのソースを見た方が確実かなと思っただけなので気にしないでください
↑のcssでAndroidでも上手く出来たとのことでこちらも参考になりましたし、スレ自体は消さなくても良いと思いますよ

pc
[編集]

by 匿名

2016-08-13 11:50
匿名様

お返事ありがとうございます。
Androidユーザーの為自分でも確認してみた所、上手く表示されました。本当にありがとうございます。確かにやりたい事自体はソースをよく確認すればわかる事でしたね…すみません。

公式テンプレではなく人からお借りしたテンプレを改変していて、今までに使った事のないCSSだった為何をやっても表示されず困惑していたのですが、匿名様にお教え頂いてから公式テンプレを使用した所無事に表示されたので、単に私のミスかテンプレに合っていないだけのようでした。本当にありがとうございました。

匿名様のご指摘の通りソースを確認すればわかる内容でしたので、ご指摘がありましたらスレ削除させて頂きます。ありがとうございました。

pc
[編集]

[