【CSS】いい感じの「破線」が作れちゃう？！【Dashed Border Generator】とは？ |

みなさんこんにちは！おさかなです！

今回は「Dashed Border Generator」について、書いていこうと思います！

それでは、レッツゴー！！！！！

想定読者
・破線を作成したい方
・デザインをチェックしながら、破線を実装したい方
・HTML/CSSを学習中の方

「破線」を実装したい！
「Dashed Border Generator」って何？
実際につかってみよう！
1. 破線をつくろう！
2. 実装しよう！

「破線」を実装したい！

おさかな

CSSを使ってサクッと「破線」を実装したい！

ナビまる

Dashed Border Generator

おさかな

もうア○クサみたいになってるじゃん…。笑

【HTML/CSS】「CSS」だけで画像を表示する方法とは？【プログラミング】

みなさんこんにちは！おさかなです！今回は「「CSS」だけで画像を表示する方法」について、書いていこうと思います！それでは、レッツゴー！！！！！想定読者・HTML/CSSを学習中の人・画像の配置方法を<img...

「Dashed Border Generator」って何？

「Dashed Border Generator」とは、CSSのbackground-imageプロパティを利用して「破線」を作ることが出来るサービスです。
直感的なマウス操作で「カラー」や「長さ」などを設定することができる上に、実際に破線のデザインをチェックしながら、最終的なCSSコードを決められる優れものとなっております！(便利！)

Just a moment...

【CSS・SVGあり】高画質な【背景画像】がたくさん使えちゃう【SVG backgrounds】とは？

みなさんこんにちは！おさかなです！今回は「SVG backgrounds」について、書いていこうと思います！それでは、レッツゴー！！！！！想定読者・SVG形式の画像を使いたい方・高画質な「背景画像」を使いたい方・W...

実際につかってみよう！

それでは早速サイトにアクセスします！

このままだと少し見づらいので、右上のボタンからレイアウトを変更します！(よいしょ！)

破線をつくろう！

これで見やすくなったので、いよいよ破線を作っていきたいと思います！(おー！)

作れる破線の見本が8パターン掲載されています！

Simple
Slanted
Dotted
Long
Cornered
Centered
Faded
Animated ※これは動きます！

ページをスクロールすると、破線をカスタマイズすることができるパラメーターが表示されます！(おお！)

カスタマイズ出来る項目は、全部で8つ！
すべてマウス操作のみで設定が可能となっております。

Border width　…　幅
Border color　…　色
Dash length　…　ダッシュの長さ
Spacing　…　間隔
Slanting angle　…　傾斜角
Fade 　…　フェード
Flip diraction　…　フリップ方向
Animation　…　アニメーション

幅

色

ダッシュの長さ

間隔

傾斜角

フェード

フリップ方向

アニメーション

カスタマイズが完了したら、破線内の「CSSコード」をコピーしておきましょう！(よいしょ！)

(あともう少し…🚩)

実装しよう！

それでは、作成した「CSSコード」を使って破線を実装していきましょう！(GO！)
※今回は「WordPress」に載せていきます。

まずダッシュボードから「投稿」＞「新規追加」へ移動します。

記事の編集ページが開いたら、プラスマーク「＋」から、「カスタムHTML」を選択しましょう！(はいっ！)

今回のCSSコードは「box」というクラス名がついているので、要素にboxクラスを追加しておきます。
例えば<p>タグを使用する場合は、下記のように書けばOKです！(ふむふむ…。)

<p class="box">破線の中に入れるテキストを入力</p>

次に<style>タグを記述して、その間に先ほどコピーしたCSSコードを貼り付けます！(えいやー！)

<style>ここにコピーしたコードを貼り付ける</style>

ちなみにデフォルトのままだと、破線に文字がくっつき過ぎてしまうので、.boxクラスにpaddingを30pxくらい足すと良い感じになります！(お好みで)

.box {
background-image: repeating-linear-gradient(-60deg, #000000, #000000 7px, transparent 7px, ~
background-repeat: no-repeat
padding: 30px;
}

プレビューに切替えて、破線が実装されていればOKです！(おめでとう🌼)

ちなみに同じページで2種類以上の破線を使いたい場合は、適宜「クラス名」を変更してください！
例えば「box1」「box2」など…。

<p class="box1">テキスト</p>

<style>
 .box1 {
background-image: repeating-linear-gradient(-60deg, #000000, #000000 7px, transparent 7px, transparent 14px, #000000 14px), repeating-linear-gradient(30deg, #000000, #000000 7px, transparent 7px, transparent 14px, #000000 14px), repeating-linear-gradient(120deg, #000000, #000000 7px, transparent 7px, transparent 14px, #000000 14px), repeating-linear-gradient(210deg, #000000, #000000 7px, transparent 7px, transparent 14px, #000000 14px);
background-size: 1px 100%, 100% 1px, 1px 100% , 100% 1px;
background-position: 0 0, 0 0, 100% 0, 0 100%;
background-repeat: no-repeat;
}
</style>

↓実際に作成したものがこちら

おためしで破線を作ってみました〜！
どうですか？
特に強調したいところや、目立たせたいところに使用したり
デザイン性を持たせたいところに使ったりするのが良さそうです。

↓アニメーションあり

離れ離れの街を繋ぐ列車は行ってしまったね
失くした言葉を知らないなら　ポケットで握りしめて
あがいた息を捨てて延びる今日は眠って誤魔化せ
失くした言葉を知らないなら　各駅停車に乗り込んで

夕方と退屈のお誘いを断って
一人きり　路地裏は決して急がないで
ほら　横断歩道も待ってくれと言ってる
見張る街角があなたを引き留めてく

離れ離れの街を繋ぐ列車は行ってしまったね
失くした言葉を知らないなら　ポケットで握りしめて
あがいた夢を捨てて揺れる今日は眠って誤魔化せ
失くした言葉を知らないなら　各駅停車に乗り込んで

夕方の駅のホームはひどく混み合って
ひとり占めできるまで休憩して欲しくて
また　集団下校があなたを急かしている
ほら　自動改札は待ってくれと言ってる
塞がる両手があなたを引き留めてく

あがいた夢を捨てて揺れる今日は眠って誤魔化せ
失くした言葉を知らないなら　各駅停車に乗り込んで

離れた街と街を繋ぐ列車が
呼んだ風に飛ばされないでいてくれ
失くした言葉はそのままでいいよ
揺れる列車に身を任せて欲しいから

離れ離れの街を

離れ離れの街を繋ぐ列車は行ってしまったね
失くした言葉を知らないなら　ポケットで握りしめて
あがいた息を捨てて延びる今日は眠って誤魔化せ
失くした言葉を知らないなら　各駅停車で旅をして