雪ん子’s report

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

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


以上、参考にしてみてくださいね。