雪ん子’s report

スマホ1つでブログは書けるか⁉ スマホの使い方(初級編)と日々のことをお伝えします。

雪ん子’s report

スマホだけでブログに挑戦!

border(枠線)の例




こんにちは。雪ん子です。

前回に引き続き、画像や文字などの枠線について。おさらいも含めます。
 
次の回の「見出し」にも関係してくるので書いておきます。
 

 

線を引く場所や太さ、色

 

どこの線?

 

囲む border

 
border:solid red 5px;
padding: 8px 8px 8px 8px;
 
あかさたなはまやらわ
 
※paddingは文字のまわりの余白。前回の記事で紹介したmarginを加えてもOK! しかも-(マイナス)の数字も設定可能ですよ。
 

上だけ border-top

 
border-top:solid blue 5px;
padding: 8px 8px 8px 8px;"
 
あかさたなはまやらわ
 

右だけ border-right

 
border-right:solid orange 5px;
padding: 8px 8px 8px 8px;
 
あかさたなはまやらわ

下だけ border-bottom

 
border-bottom:solid green 5px;
padding: 8px 8px 8px 8px;
 
あかさたなはまやらわ
 

左だけ border-left

 
border-left:solid pink 5px;
padding: 8px 8px 8px 8px;
 
あかさたなはまやらわ
 

左と下 border-leftとborder-bottom

 
border-left:solid pink 5px;
border-bottom:solid green 5px;
padding: 8px 8px 8px 8px;
 
あかさたなはまやらわ
 

線の太さ

 

border-width

 
border:solid red;
border-width:2px 4px 6px 8px;
padding: 8px 8px 8px 8px;
 
あかさたなはまやらわ
 

線の種類

 

none 枠線なし

 
※ボーダーの幅の値は強制的に0となります
 
border:solid none 5px;
padding: 8px 8px 8px 8px;
 
あかさたなはまやらわ
 

solid 実線

border:solid blue 5px;
padding: 8px 8px 8px 8px;
 
あかさたなはまやらわ
 

double 二重線

 
border:solid double 5px;
padding: 8px 8px 8px 8px;
 
あかさたなはまやらわ
 

dotted 点線

 
border:dotted blue 5px;
padding: 8px 8px 8px 8px;
 
あかさたなはまやらわ
 

dashed 破線

 
border:dashed blue 5px;
padding: 8px 8px 8px 8px;
 
あかさたなはまやらわ
 

 
【#D22C2C】
border:solid #D22C2C 5px;
 
あかさたなはまやらわ
 
【#23a887】
border:solid #23a887 5px;
 
あかさたなはまやらわ
 
 
「カラーコード」で検索すれば色々なサイトがみつかります。
 
私がお世話になったサイトはこちらです。ありがとうございます。
WEBカラーチャート HTML・CSSで使える色の見本一覧 - PEKO STEP
 

【推奨】デザインCSSや、スマホの記事下等に設置する

 
出来上がった設定は、デザインCSSや、スマホの記事下等に設置しましょう。

設置場所、設置方法はこちら。
文字サイズと行の高さを変更 - 雪ん子’s report
 

例)デザインCSS ページ全部に適用

 
.entry-content {
background-color: lightblue;
padding: 8px 8px 8px 8px;
border:ridge blue 20px;
}
 

例)デザインCSS 画像のみに適用

 
.entry-content img {
background-color: lightblue;
padding: 8px 8px 8px 8px;
border:ridge blue 20px;
}
 

例)スマホ記事下 ページ全部に適用

 
<style type="text/css">
.entry-content {

background-color: lightblue;
padding: 8px 8px 8px 8px;
border:ridge blue 20px;
}
</style>

 

例)スマホ記事下 画像のみに適用

 
<style type="text/css">
.entry-content img {

background-color: lightblue;
padding: 8px 8px 8px 8px;
border:ridge blue 20px;
}
</style>

 
 
スマホの記事下に設置する際は
<style type="text/css">
</style>

で挟むのを忘れずに。
 

文中で設定する場合

 
一時的に使用するなら文中に直接入力してもいいと思います。
 

例)文字のまわりだけ

 
<span style="border:solid #23a887 5px;padding: 8px 8px 8px 8px;">あかさたなはまやらわ</span>
 
あかさたなはまやらわ
 

例)文字のあるブロックごと

 
<div style="border:solid #23a887 5px;padding: 8px 8px 8px 8px;">あかさたなはまやらわ</div>
 

あかさたなはまやらわ
 
たぶん一部だけ変える方法も、もっと簡単なのがあるはずですので探してみます。
 
追記)一部だけ変える方法もCSSで設定できることを発見。こちらで紹介しています。
 
デザインCSSやスマホ記事下に設定をオススメする理由はこちら。
見出しをカスタマイズ - 雪ん子’s report
 
 
以上、参考にしてみてくださいね。