CSS・THML

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

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

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

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

 

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

 

記事を書く欄(ビジュアルではなく、テキストタブ)へコピペする。

ビジュアルではなく、テキストタブ

以下の枠内の4行を、テキスト欄へ貼り付けます。

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

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

 

 

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

 

記事を書く欄(ビジュアルではなく、テキストタブ)へコピペする。

ビジュアルではなく、テキストタブ

以下の枠内の4行を、テキスト欄へ貼り付けます。

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

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

 

 

 

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

記事を書く欄(ビジュアルではなく、テキストタブ)へコピペする。

ビジュアルではなく、テキストタブ

以下の枠内の4行を、テキスト欄へ貼り付けます。

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

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

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

 

 

 

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

 

記事を書く欄(ビジュアルではなく、テキストタブ)へコピペする。

ビジュアルではなく、テキストタブ

以下の枠内の4行を、テキスト欄へ貼り付けます。

10px → 角丸の大きさ

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

 

 

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

 

記事を書く欄(ビジュアルではなく、テキストタブ)へコピペする。

ビジュアルではなく、テキストタブ

以下の枠内の4行を、テキスト欄へ貼り付けます。

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

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

 

 

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

 

記事を書く欄(ビジュアルではなく、テキストタブ)へコピペする。

ビジュアルではなく、テキストタブ

以下の枠内の4行を、テキスト欄へ貼り付けます。

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

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

 

 

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

 

記事を書く欄(ビジュアルではなく、テキストタブ)へコピペする。

ビジュアルではなく、テキストタブ

以下の枠内の4行を、テキスト欄へ貼り付けます。

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

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

 

 

 

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

 

記事を書く欄(ビジュアルではなく、テキストタブ)へコピペする。

ビジュアルではなく、テキストタブ

以下の枠内の4行を、テキスト欄へ貼り付けます。

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

 

 

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

 

記事を書く欄(ビジュアルではなく、テキストタブ)へコピペする。

ビジュアルではなく、テキストタブ

以下の枠内の4行を、テキスト欄へ貼り付けます。

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

 

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

関連記事

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

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

コメント

  • コメント (0)

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

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

スポンサーリンク

最近の記事

  1. カエレバの画像が大きく(小さくならず)画面が白くなる解決方法
  2. Windowsムービーメーカーをインストールする方法
  3. キーワード選定のコツと思考が学べる動画教材
  4. 私が過去に何を購入してきたかをまとめたもの
  5. 【記事ネタ】長く検索されやすいキーワードの探し方

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

PAGE TOP

100記事到達特典

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

CSS・THML

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

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

ムービーメーカー最新2018

【最新2018】終了したムービーメーカーを使える裏技、英語版から日本語版へ安全な…

Windowsムービーメーカーをインストールする方法

アクセスアップ

アフィリエイト【キーワード選定のコツと100万思考】が学べる動画教材はコレ!

キーワード選定のコツと思考が学べる動画教材

稼ぐためのマインド

アフィリエイトをするために必要だったツールや教材一覧(みりんの足跡)

私が過去に何を購入してきたかをまとめたもの

アクセスアップ

【記事ネタ】長く検索されやすいキーワードの探し方

【記事ネタ】長く検索されやすいキーワードの探し方

グーグルアドセンス

プラグインやタグでアドセンスを設置403エラー(403Error)このページのア…

プラグインやタグでアドセンスを設置

CSS・THML

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

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

稼ぐためのマインド

アフィリエイト プロへの道は失敗を重ねる事

稼ぐためのマインド

アフィリエイトは記事を一生懸命書いたら稼げるのですか?