文中の背景色の変更について

Simplicityの特徴 フォーラム Simplicity2に関する話題何でも 文中の背景色の変更について

このトピックには5件の返信が含まれ、1人の参加者がいます。11 ヶ月、 1 週前 Hidekichi さんが最後の更新を行いました。

  • 投稿者
    投稿
  • #49312

    インパラ

    お世話になっております。

    初心者の質問で申し訳ありませんが

    文中の背景色をこのように変更したいのですが(このCSSを設定したい)

    background: linear-gradient(transparent 40%, #FAD5DC 40%);
        padding-bottom: .2em;
        font-weight: bold;

    CSSはどのidもしくはclass名で設定したらよいのでしょうか?

  • #49313

    Hidekichi

    「文中」というのはどこなんでしょうか?

    記事部分で言えば、#the-content(あるいは.entry-content)ですし、タイトル・ポストメタ部分を含むのであれば.article、(デフォルト状態で言う)2カラムの左側なら#mainです。
    厳密に文だけで言えば、それが段落と捉えたら#the-content pになるでしょうし、文中がどこを指すのかが具体的にわからないと何とも答えられないかも知れません。

    #mainの背景である#body-in(あるいは#body、はたまた#main自体)の背景に画像を入れていたり色を変えているようであればtransparentで良いかと思いますが、できるだけグラデーションの色はrgba等で指定するようにしてだいたいどんな色を置こうとしているのかを後から見てわかりやすいようにしておくのが良いかと思います。
    白の半透明の場合、rgba(255,255,255, .5)とか。

    angleもデフォルトは上から下へのグラデーションだと思いますが、できるだけto bottomとか、あるいは任意の角度で90deg(左から右)などと指定するのが良いかと思います。

    background: linear-gradient(transparent 40%, #FAD5DC 40%);この指定だと、firefoxではスパンと色が変わりグラデーションしないのではなかろうかと思います。させないのであればそれで良いですが。

  • #49314

    インパラ

    返信ありがとうございます。

    「文中」の説明不足ですみません。

    おっしゃる通り記事部分のことです。

    >>できるだけグラデーションの色はrgba等で指定‥後から見てわかりやすいよう‥

    丁寧にありがとうございます。

    返信を頂いてすぐに

    >>firefoxではスパンと色が変わりグラデーションしない‥

    この部分の意味がわからなかったので調べていました‥

    恥ずかしいのですがもう少しこの部分を説明していただいてもよろしいですか?

  • #49316

    Hidekichi

    サンプル: グラデーションサンプル | jsFiddle

    こういう感じです。
    ブラウザによって表示が変わるかも知れないので、firefox、chrome等で確認してみてください。

  • #49317

    インパラ

    わざわざありがとうございます!

    違いがわかりやすく参考になりました。

    そして「to bottom」も。

    助かりました。

  • #49318

    Hidekichi

    グラデーションはおそらくたいていのブラウザで実装されていますが、これまでに色々と書き方の変遷があったので、古いブラウザに向けてのフォールバック等も含めて面倒くさいですが色々と書いておいたほうが良いかと思います。

    参考: linear-gradient | MDN
    ※ ここの最後の方に「クロスブラウザなグラデーション」というのがあります。

トピック「文中の背景色の変更について」への新規返信追加は締め切られています。

スポンサーリンク
アドセンス(大)
アドセンス(大)