コピペOK! 枠線の指定

css,コーディング枠線,border,吹き出し風,三角形,コピペOK,色の設定,16進数カラーコード,和色大辞典,洋色大辞典,作成,作り方,ホームページ,webサイト,検証ツール,webサイト作成

コーディング編♬

★コピペOK! 枠線の指定
border プロパティ基礎編

こんにちは。snowです。当サイトを訪れてくださりありがとうございます。

この章では HTML, CSS, jQueryのコーディング覚書をまとめます。

基本的なコードから当サイトで実装している機能などもご案内していこうと思っています。

今回は

枠線の指定

です。

シンプルなボーダー

枠で囲む

テキストや画像の周りを枠線で囲みます。

HTMLコーディングとCSS装飾は次のようになります。

<div class="border_box turquise">テキストや画像の周りを枠線で囲みます。</div>
.border_box.turquise {
	border: 3px solid #00ced1;
}

テキストだけでなく画像の周りを囲むこともできます。

WordPressの場合は枠線で囲みたい箇所の追加CSSクラスにクラス名を付与します。
上記の画像では画像部分に border_box turquise のクラス名を付与しています。

そのクラス名に対してCSSファイルにコードを追加します。

.border_box.tuequise {
	border: 3px solid #00ced1;
}
3px は線の太さです。数値が大きければ線も太くなります。
solid は実線です。
dotted は点線です。
dashed は破線です。
double は二重線です。

#で始まる数値はカラーコードです。
カラーコードの検索はこちらのサイトが便利です。

当ブログで「色のいろいろ」という記事を書いています。
カラーコードの調べ方や、配色をシュミレーションできるサイトなど紹介しています。
こちらの記事を参考になさってください。

枠の一部分の線を引く

テキストや画像などの周りを囲むだけでなく、下線部のみ、左側だけ、右側だけなどの線も引くことができます。

左側のみに線を引きます。
border_left で左側の線を設定できます。

<div class="border_left turquise">左側のみに線を引きます。</div>
.border_left.turquise {
	border-left: 3px solid #00ced1;
}

右側のみに線を引きます。
border_right で右側の線を設定できます。

<div class="border_right turquise">右側のみに線を引きます。</div>
.border_right.turquise {
	border-right: 3px solid #00ced1;
}

上側のみに線を引きます。
border_top で上側の線を設定できます。

<div class="border_top turquise">上側のみに線を引きます。</div>
.border_top.turquise {
	border-top: 3px solid #00ced1;
}

下側のみに線を引きます。
border_bottom で下側の線を設定できます。

<div class="border_bottom turquise">下側のみに線を引きます。</div>
.border_bottom.turquise {
	border-bottom: 3px solid #00ced1;
}

角を丸める

枠線の角を丸くすることができます。

.border_pink {
	border: 3px solid #ef9c99 !important;
	border-radius: 10px;
}

border-radius が角を丸くするプロパティです。
上記のように px で指定することも % で指定することができます。

border-radius: 50%; と設定すると

円になります。
.border_round {
	border-radius: 50%;
	width: 300px;
	height: 300px;
	padding: 120px 90px;
}

また四角の各角をひとつずつ設定することもできます。

.border_box_radius_01 {
	border: 3px solid #00ced1;
	border-radius: 10px 0 20px 5px;
}

左上の角、右上の角、右下の角、左下の角の順に設定します。zeroは角を丸めないということですね。

.border_box_radius_02 {
	border: 3px solid #00ced1;
	border-radius: 10px 0;
}

設定がふたつの場合は最初の数値が左上の角、右下の角、ふたつめの数値が右上の角、左下の角の数値になります。この設定だと左上と右下の角が丸くなり、右上、左下の角は丸くなっていませんね。

.border_box_radius_03 {
	border: 3px solid #00ced1;
	border-radius: 10px 0 30px;
}

設定が3つの場合はひとつめが左上の角、ふたつめが右上の角と左下の角、3つめが右下の角の順設定になります。

.border_box_radius {
	width: 100%;
	height: 200px;
	border-radius: 50% 0;
}
.border_box_radius.cream {
	background: #ffffe0;
	border: 3px solid #00ced1;
}
.border_box_radius {
	width: 100%;
	height: 200px;
	border-radius: 50% 0;
}
.border_box_radius.turquise {
	background: #00ced1;
	border: 3px solid #00ced1;
}

background を指定すれば背景に色がつきます。

.border_box_radius.cafe {
	width: 100%;
	height: 200px;
	border-radius: 100px 100px 0 100px;
	background: url(画像のファイルパス) no-repeat;
	border: 3px solid #00ced1;
}
.border_box_radius.flower {
	width: 100%;
	height: 200px;
	border-radius: 100px 100px 100px 0;
	background: url(画像のファイルパス) no-repeat;
	border: 3px solid #00ced1;
}

background で画像をはめこむこともできますね。

二重線

double で二重線を引くことはできますが、 外側と内側の線の太さや色など細かい設定をすることもできます。

コーディング編♬

枠線の指定

このページのトップ画面も二重線で囲んでいます。

.wp-block-cover.has-background-dim {
     background-color: #fff3b8;
     border: solid 1px #009b9f;     /* 内側の線になる一本線の枠線をひく*/
     outline: solid 3px #009b9f;    /* 外側の線になる一本線の枠線をひく*/
     outline-offset: 2px;           /* 外側の線と内側の線の空き具合を調整*/
     margin: 25px 5px 5px;          /* outline + outline-offset */ 
     min-height: 300px !important;
}

内側の線の border 、外側の線の outline 、外側と内側のあいだの幅の ouline-offset で設定します。

バディのクリス

内側と外側で色や太さを変えたりできるんだね!

三角の設定

border の設定で三角を作ることもできます。

.triangle_frame01 {
	width: 100px;
	height: 100px;
	border-top: 20px solid #F0897F;
	border-right: 20px solid #f6da69;
	border-bottom: 20px solid #b2ce54;
	border-left: 20px solid #6aa7cd;
}

border-top 、border-bottom 、border-left 、border-right を色を変えて設定しています。
それぞれの線の境目が斜めになっていますね。

この空白部分をなくすと……
(ボーダーを太くする)

.triangle_frame02 {
	width: 100px;
	height: 100px;
	border-top: 50px solid #F0897F;
	border-right: 50px solid #f6da69;
	border-bottom: 50px solid #b2ce54;
	border-left: 50px solid #6aa7cd;
}

100pxの幅(width)を半分ずつ border-left と border-right を 50px に設定し、100pxの高さ(height)を border-top と border-bottom で半分に分け 50px に設定しています。

4とおりの三角ができました。

border-top 、border-bottom 、border-left 、border-right のうち3つを透明にしてみます。

.triangle_top {
	width: 100px;
	height: 100px;
	border-top: 50px solid #F0897F;
	border-right: 50px solid transparent;
	border-bottom: 50px solid transparent;
	border-left: 50px solid transparent;
}

下向きの三角ができました。

border_top 以外の色をtransparent (透明)に設定しています。

.triangle_top {
	width: 100px;
	height: 100px;
        border: 50px solid transparent;
	border-top: 50px solid #F0897F;
}

.triangle_bottom {
	width: 100px;
	height: 100px;
	border: 50px solid transparent;
	border-bottom: 50px solid #b2ce54;
}
.triangle_left {
	width: 100px;
	height: 100px;
	border: 50px solid transparent;
	border-left: 50px solid #6aa7cd;
}
.triangle_right {
	width: 100px;
	height: 100px;
	border: 50px solid transparent;
	border-right: 50px solid #f6da69;
}

こちらのサイトを参考にさせていただきました。

バディのクリス

border の設定で三角ができちゃった!

snow

次項の吹き出しの設定でこの三角形がさっそく利用できます♬

吹き出し風

当ブログの次回予告部分です。

このような吹き出し風のラインを引くこともできます。

.next_jump {
    padding: 0px 15px;
    margin-bottom: 15px;
    position: relative;
    display: inline-block;
    background: #ffffe0;
    border: 3px solid #008000;
    border-radius: 20px;
}
.next_jump::before {
    content: "";
    position: absolute;
    top: 101%;
    right: 10%;
    margin-left: -15px;
    border: 15px solid transparent;
    border-top: 15px solid #008000;
}

上記の左側の吹き出しの設定です。

まずテキスト部分の四角を設定します。
next_jump で本体の四角の設定をしています。
position: relative;
display: inline-block; はこのまま使います。
padding や margin 、background 、 border の色やborder-radius は適宜設定してください。
ラインだけ引きたくて背景色は付けない場合はbackground を設定しません。

.next_jump::before で吹き出し部分の三角を設定しています。この三角を本体にくっつけて吹き出し風に見せているんですね。
content: “";
position: absolute; はこのまま使います。
content: “"; を設定しないとbefore 要素が機能しなくなります。
top 、right で三角をくっつける場所を設定します。場合によっては bottom、left を設定します。
border と border-top で三角の大きさを設定します。ここの色がラインの色になります。(緑色ですね。#008000)

いろいろ試して調整してみてください。

.next_jump::after {
    content: "";
    position: absolute;
    top: 98%;
    right: 10.3%;
    border: 14.7px solid transparent;
    border-top: 14.7px solid #ffffe0;
}

次にクリーム色の三角部分の設定です。

疑似要素の after で設定します。
position: relative;
display: inline-block; はこのまま使います。
border 、 border-top の太さが before 要素よりやや小さい数値になっています。border-top の色はbackground と同じ色ですね。background を設定していない場合(無色)は カラーコードの代わりに transparent を設定します。
これでbefore の緑色の三角がはみ出してラインのように見えるようになります。

いろいろ試して調整してみてください。

応用編 楕円やいびつな丸

楕円やいびつな丸は border-radius で設定できます。
こちらのサイトが参考になります。

バディのクリス

面白い形が作れるんだね。どこかで使ってみたくなるね🐾

お疲れ様でした。
シンプルな枠線を引く border というプロパティですが、設定次第でいろいろな形を表現することができますね。
CSS をコピーして数値などといろいろと設定してみて試してみてください。

今回はここまでです。

わかりづらい点、うまくいかなかった箇所などありましたらお知らせください。   コメント欄へ

枠線の指定についてでした。

border というプロパティはいろいろな設定ができます。
そのうちの基本的な設定をまとめてみました。

コーディング編ではひとつずつ項目の設定方法や記述方法を紹介していきます。

バディのクリス

読んでくれてどうもありがとう!!

フェードイン・スライドイン
          

趣味で源氏物語を【超訳】しています。
 話し言葉でお気軽GENJI

 よかったら遊びにきてください。

小倉百人一首も【超訳】しています。
 話し言葉でお気軽 OGURA

 よかったら遊びにきてください。