CSS・THML

CSSでの枠線の作り方のまとめ、コピペで超簡単に♪備忘録代わり

CSSでの枠線の作り方のまとめ、コピペで超簡単に♪備忘録代わり

CSSでの枠線の作り方のまとめ、コピペで超簡単に♪備忘録代わり

枠線を付けるときにいちいち調べていたので、備忘録代わりとしてです。

 

文字の周りに枠を付ける場合。

 

<div style=”padding: 10px; border: 3px solid #FEB4C2;”>
<p>文章</p>
<p>文章</p>
</div>

5px→ 枠線の太さ/ solid → 線の種類色 / #00cccc → 線の色

 

 

文字のバックに色を付ける場合。

 

<div style=”padding: 10px; background: #e0ffff; “>
<p>文章</p>
<p>文章</p>
</div>

背景の色は「#e0ffff」の部分を変えます。

 

 

文字のバックに色と枠線を付ける場合。

 

<div style=”padding: 10px; background: #fffacd;  border: 1px solid #f39800;”>
<p>文章</p>
<p>文章</p>
</div>

枠線の太さと色・・・border: 1px solid #f39800

 

 

文字に角丸の枠線を付ける場合。

 

<div style=”padding: 10px; border-radius: 10px; border: 5px solid #FEB4C2;”>
<p>文章</p>
<p>文章</p>
</div>

10px → 角丸の大きさ

 

 

文字に角丸の背景色を付ける場合。

 

<div style=”padding: 10px; background: #e0ffff; border-radius: 10px; “>
<p>文章</p>
<p>文章</p>
</div>

背景の色「#e0ffff」を変える。

 

 

文字に角丸の二重枠線を付ける場合。

 

<div style=”padding: 10px; border-radius: 10px; border: 5px double #00cccc;”>
<p>文章</p>
<p>文章</p>
</div>

線の色「#00cccc」を変える。

 

 

文字に角丸の点線枠(太い線)を付ける場合。

 

<div style=”padding: 10px; border-radius: 30px; border: 5px dashed #00cccc;”>
<p>文章</p>
<p>文章</p>
</div>

線の色「#00cccc」を変える。

 

 

文字に角丸の点線枠(細い線)を付ける場合。

 

<div style=”padding: 10px; border-radius: 15px; border: 2px dashed #FEB4C2;”>
<p>文章</p>
<p>文章</p>
</div>

 

 

文字に角丸のてんてん枠を付ける場合。

 

<div style=”padding: 10px; border-radius: 30px; border: 5px dotted #ff7f50;”>
<p>文章</p>
<p>文章</p>
</div>

 

 

スポンサーリンク
スポンサーリンク

関連記事

  1. カエレバの画像が大きく(小さくならず)画面が白くなる解決方法

    カエレバの画像が大きく(小さくならず)画面が白くなる解決方法

  2. 保護中: ワードプレス(プラグイン)のショートコードの参考デザイン

  3. 【追加CSSエラー】何かうまくいかなかったようです。時間を置いてもう一…

コメント

  • コメント (0)

  • トラックバックは利用できません。

  1. この記事へのコメントはありません。

スポンサーリンク

最近の記事

  1. 05_Gmailアカウント・Gメールアドレス取得方法
  2. 04_先にしておきたいアフィリエイトの準備
  3. 】ワードプレスのメリット・デメリットとは?
  4. 02_無料ブログのメリット・デメリット
  5. 「メルマガを読んでくれてありがとう」

姉妹サイト 最新記事

にほんブログ村 小遣いブログ アフィリエイトへ   

PAGE TOP

アフィリエイトの始め方

【アフィリエイト講座06】Yahoo!メールのアドレス取得方法

アフィリエイトの始め方

【アフィリエイト講座05】Gmailアカウント・Gメールアドレス取得方法

05_Gmailアカウント・Gメールアドレス取得方法

アフィリエイトの始め方

【アフィリエイト講座04】先にしておきたいアフィリエイトの準備

04_先にしておきたいアフィリエイトの準備

アフィリエイトの始め方

【アフィリエイト講座03】ワードプレスのメリット・デメリットとは?

】ワードプレスのメリット・デメリットとは?

アフィリエイトの始め方

【アフィリエイト講座02】無料ブログのメリット・デメリット

02_無料ブログのメリット・デメリット

無料プレゼントご紹介

メルマガでアフィリエイトを始めてもすぐに稼げるわけではない

「メルマガを読んでくれてありがとう」

無料プレゼントご紹介

アフィリエイトで稼ぎたくて始めたのに稼げないのは?

メルマガを読んでくれてありがとう

アフィリエイトの始め方

【アフィリエイト講座01】始めにとアフィリエイトとは?

01_はじめに、アフィリエイトとは?

楽Press特典

楽天アフィリエイト「楽Pressの特典のSNS」って、やっぱりいいかも♪

楽PressのSNSメンバー リノさん

楽Press特典

保護中: 【100記事到達特典】Yさんへ(楽Press購入者専用ページ)