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>

 

 

The following two tabs change content below.
50代も後半の主婦アフィリエイター、2018年4月に月収100万を超えました。(収入の柱は物販アフィリエイト♪) 『50代は50代の稼ぎ方』をおススメしています!初心者向け講座を開講中!SNSも3つやっています。一緒にアフィリできる仲間を募集しています(*^^*)メルマガは心を込めて書いています。主に稼ぐための思考を書いています。右側サイドバーより登録できます。アフィリエイトのことでお困りでしたらお気軽にご質問ください^^
スポンサーリンク
スポンサーリンク

関連記事

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

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

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

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

コメント

  • コメント (0)

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

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

スポンサーリンク

最近の記事

  1. 【100記事到達特典】Aさんへ
  2. 楽天アフィリエイトのクッキーが30日から24時間へ!逆転思考で!
  3. 【A8.net】登録サイトの追加の方法
  4. 無料ブログ(FC2ブログ③)アフィリエイトリンクの設置方法
  5. 無料ブログ(Seesaa③)記事を投稿する方法
  6. 無料ブログ【はてなブログ③】アフィリエイトリンクの設置方法

姉妹サイト 最新記事

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

PAGE TOP

楽Press特典

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

【100記事到達特典】Aさんへ

楽天アフィリエイト

楽天アフィリエイトの規約が変更に!ピンチをチャンスにアフィリエイトを楽しむ♪

楽天アフィリエイトのクッキーが30日から24時間へ!逆転思考で!

アフィリエイトの始め方

【アフィリエイト講座18】A8.netで登録サイトを追加する方法

【A8.net】登録サイトの追加の方法

アフィリエイトの始め方

【アフィリエイト講座16】無料ブログ(FC2ブログ③)アフィリエイトリンクの設置…

無料ブログ(FC2ブログ③)アフィリエイトリンクの設置方法

アフィリエイトの始め方

【アフィリエイト講座13】無料ブログ(Seesaa③)アフィリエイトリンクの設置…

無料ブログ(Seesaa③)記事を投稿する方法

アフィリエイトの始め方

【アフィリエイト講座10】無料ブログ(はてなブログ③)アフィリエイトリンクの設置…

無料ブログ【はてなブログ③】アフィリエイトリンクの設置方法

アフィリエイトの始め方

【アフィリエイト講座17_1】ASPでアフィリエイトする商品の提携申請の方法(例…

ASPでアフィリエイトする商品の提携申請の方法(例:A8.net)

アフィリエイトの始め方

【アフィリエイト講座01_1】アフィリエイトの種類と特徴

アフィリエイトの始め方

【アフィリエイト講座17】ここさえ登録すればOK!厳選ASP7社

【アフィリエイト講座14】ここさえ登録すればOK!厳選ASP7社

アフィリエイトの始め方

【アフィリエイト講座12】無料ブログ(Seesaaブログ②)記事を投稿する方法

無料ブログの開設【Seesaa②】ブログに記事を投稿する方法