どうも！LSSです！！
最近、桜のつぼみが開くのを待ちながら撮影散歩していました。
ようやく神戸でもソメイヨシノが開き始めたところで、春っぽいCSSネタを考えてみました！
サンプル
コード
<style>
.hnbr{
border-radius:10px;
padding:10px;
border:6px groove #ffcccc;
background-image:
radial-gradient(at 90% 50%,#ffffffff 7%,#ffffff00)
,repeating-conic-gradient(from 40deg at 90% 50%,#ffcccc,#fff0f0 30deg 42deg,#ffcccc 72deg);
color:#ffffff;
font-size:27px;
font-weight:bold;
text-shadow:-1px -1px 2px #000000c0,1px 1px 2px #ffffffc0;
}
</style>
<div class="hnbr">桜の花、開く季節に…</div>
CSSセレクタについて
コード冒頭の、
<style>
.hnbr{
この赤太字部分、これは「CSSセレクタ」という箇所で、「それに続く { ～ } の指定をどこに当てるか」を記述する箇所になります。
この例では「.hnbr」としており、先頭に「.」をつけると「クラス」を指定する事になります。
つまり「hnbr」というクラス名を持つHTML要素がこの指定を受ける事になり、コードの最後の、
<div class="hnbr">桜の花、開く季節に…</div>
「クラス名をhnbrと指定したdiv要素（<div>から</div>までの部分）」が影響を受ける事になります。
先頭に「.」をつっけると「クラス」を指定、と書きましたが、ここで「.」をつけないと、「タグ名」を指定する事になります。
例えば、はてなブログでいう「大見出し」は実際には「h3」タグになるので、
<style>
h3{
border-radius:10px;
padding:10px;
border:6px groove #ffcccc;
background-image:
radial-gradient(at 90% 50%,#ffffffff 7%,#ffffff00)
,repeating-conic-gradient(from 40deg at 90% 50%,#ffcccc,#fff0f0 30deg 42deg,#ffcccc 72deg);
color:#ffffff;
font-size:27px;
font-weight:bold;
text-shadow:-1px -1px 2px #000000c0,1px 1px 2px #ffffffc0;
}
</style>
のように書き換えると、「大見出し」が変化する事になります^^
文字に対する指定
今回のコードは、中の文字に「影のついた白」を指定していますが、
「正直みづらい！」
という方もおられるかと思います^^;
その場合、コード中の
color:#ffffff;
font-size:27px;
font-weight:bold;
text-shadow:-1px -1px 2px #000000c0,1px 1px 2px #ffffffc0;
この４行が「文字に対する指定」部分となりますので、これをバッサリ削除すると普通の文字になります。
一行目の「color:#ffffff;」が文字色を指定している箇所なので、ここを変えるだけでも見やすくなりそうですね^^
ってなとこで、今回はこのへんで！
次回もまた、よろしくお願いします^^
