CSSミニテクニック

ボタン風ラベルを表示してみよう!

【Web・通販 専用モデル】ネットするなら小型・省電力PC「NP31S」がおすすめ!.png

ワンポイントで挿入すると、見映えがよくなると思いませんか。

↓上記画像の実記事はこちら
>> 【Web・通販 専用モデル】ネットするなら小型・省電力PC「NP31S」がおすすめ!
 
 

CSSのポイントは、4つのプロパティ


  • 表示例
Windows 8 対応

  • CSSコード
<span style="background:#00188f; color:#fff; padding:5px; border-radius:5px;">Windows 8 対応</span>


backgroundプロパティ


background-colorプロパティは、背景を指定します。
色だけであれば「backgrounf-color」でもいけますね。


colorプロパティ


colorプロパティは、文字色を指定します。
これは、普段からよく使っているのでおなじみですね。
背景に色のポイントを置くため「白抜き文字」が標準になると思います。


paddingプロパティ


paddingプロパティは、領域内側のスペースを指定します。

Windows 8 対応 ←「padding:10px」の場合
Windows 8 対応 ←「padding:5px」の場合
Windows 8 対応 ←「padding:0px」の場合

※marginプロパティと関連性がありますので、一緒に覚えてしまいましょう。marginプロパティは、領域外側のスペースを指定します。

【参考記事】
>> ブログの記事投稿画面から指定できる!コンテンツをセンタリングするインラインスタイルシートの記述方法


border-radiusプロパティ


border-radiusプロパティは、領域の角丸を指定します。

backgroundプロパティで背景色をつけると、デフォルトでは四角に表示されますが、このプロパティを指定することで角を丸めることができます。

「border-radius:5px」では、領域の各コーナーを半径5pxで丸めます。

Windows 8 対応 ←「border-radius:5px」の場合
Windows 8 対応 ←「border-radius:10px」の場合
Windows 8 対応 ←「border-radius:20px」の場合

各コーナーの個別指定や、水平方向・垂直方向を個別指定することもできるようです。興味のある方は下記リンクを参照してみて下さい。
>> border-radius-CSS3リファレンス


今回のミニテクニックいかがでしたか。

簡単でわかりやすいプロパティを指定してやるだけで、記事にもメリハリのある表現ができるようになりますね。リンクを追加すれば「リンクボタン」として機能させることもできます。

いろいろ工夫して、
ブログライフの質を向上させてみましょう!



最後に、今回の記事を投稿するきっかけになったブログ記事を紹介します。
>> コピペでできる!CSS3の素敵効果でテキストリンクを装飾する小技あれこれ | Webクリエイターボックス

ロンドンに住まわれているManaさん(@chibimana)、
ありがとうございました。


最後までご覧いただきましてありがとうございます。
 
スポンサード・リンク