電脳TIMES

ゲーム、プログラミング好きのブログです。関連する情報を発信していきます。

【CSS】テキストをボタン・カプセル型っぽく表すためのコードを紹介【解説系の記事で役立つ】

【CSS】テキストをボタン・カプセル型っぽく表すためのコードを紹介【解説系の記事で役立つ】
テキストをボタン・カプセル型で囲って、強調したいときに使えるソースコードを紹介します。
こういう感じに→a仕上がります。

専門的なことを紹介したり、教科書っぽく表現したいときに便利です。




CSSを紹介

CSSに記述するソースコードは以下の通りです。
加工される文字が黒バージョンと、白バージョンで使い分けると便利かなと思います。

kyotyo1 {
margin: 0 5px;
padding: 4px 15px;
border-radius: 20px;
background: linear-gradient(#299a0b, #91c149);
color: #000000;  <!-- ここを#ffffffにすると文字が白色になります -->
}

このままコピペで使ってください。

使用例

以下のような感じで使ってみてください。

記事作成時

=====================================
1.ビタミンB1

1-1.ビタミンB1とは
・<kyotyo1>水溶性</kyotyo1>のビタミンの1つです。
・<kyotyo1>糖質</kyotyo1>からのエネルギー産生を助ける働きがあります。
・ビタミンB1が欠乏すると<kyotyo1>脚気</kyotyo1>を引き起こします。

=====================================

見え方

=====================================
1.ビタミンB1

1-1.ビタミンB1とは
水溶性のビタミンの1つです。
糖質からのエネルギー産生を助ける働きがあります。
・ビタミンB1が欠乏すると脚気を引き起こします。

=====================================

ちなみに、文字を白色にするとこんな感じになります。
水溶性のビタミンの1つです。

白色の方が見やすいかもですね。

教科書、参考書のテキスト的な感じにしたいときに、ぜひ使ってみてください。

こういう感じにCSSでパーツ作成をしたいときに、参考になる本を紹介しておきます。
かゆいところに手が届くコード満載です。
実際の仕事にも使えるのでオススメです。


最後まで読んでいただき、ありがとうございました。


キーボードの「キー」を表したいときのCSSはこちら

www.denno-times.com