ナビゲーション - コピペっと copypet.jp｜パーツで探す、web制作に使えるコピペサイト。 https://copypet.jp CSS3などで新たに追加された要素･装飾方法など、日々コードを書いていないと忘れてしまったり、ささっとプロトタイプを作る時などちょっとしたことに時間をかけている暇はない。困った自分用のストックブログ Fri, 22 Nov 2019 07:23:30 +0000 ja hourly 1 https://wordpress.org/?v=6.9 140159577 簡単なJavaScriptで作る記事の読み込み https://copypet.jp/codedescription/2411/ Tue, 21 Aug 2018 08:01:40 +0000 https://copypet.jp/codedescription/2411/ copypet.jp]]> copypet.jp]]> 2411 [パーツ]ナビゲーション　コンパクトなステップ表示 よりシンプルなマークのみの表現 https://copypet.jp/codedescription/2165/ Tue, 05 Jun 2018 07:33:50 +0000 https://copypet.jp/codedescription/2165/ copypet.jp

コンパクトなステップ表示 よりシンプルなマークのみの表現 購入ステップや手順説明などに使うコンパクトなステップ表示です。 こちらはよりシンプルなマークのみの表現となります。 [li]のclassに以下のクラスをつけること […]

The post [パーツ]ナビゲーション　コンパクトなステップ表示 よりシンプルなマークのみの表現 first appeared on コピペっと copypet.jp｜パーツで探す、web制作に使えるコピペサイト。.

]]> copypet.jp

コンパクトなステップ表示 よりシンプルなマークのみの表現

購入ステップや手順説明などに使うコンパクトなステップ表示です。
こちらはよりシンプルなマークのみの表現となります。

[li]のclassに以下のクラスをつけることで表示が変わります。
[completed]＝完了したもの
[active]＝現在値
何もつけなければ、未完了の表示となります。

The post [パーツ]ナビゲーション　コンパクトなステップ表示 よりシンプルなマークのみの表現 first appeared on コピペっと copypet.jp｜パーツで探す、web制作に使えるコピペサイト。.

]]> 2165 [パーツ]ナビゲーション　コンパクトなステップ表示 よりシンプルな色のみの表現 https://copypet.jp/codedescription/2164/ Tue, 05 Jun 2018 07:28:41 +0000 https://copypet.jp/codedescription/2164/ copypet.jp

コンパクトなステップ表示 よりシンプルな色のみの表現 購入ステップや手順説明などに使うコンパクトなステップ表示です。 こちらはよりシンプルな色のみの表現となります。 [li]のclassに以下のクラスをつけることで表示が […]

The post [パーツ]ナビゲーション　コンパクトなステップ表示 よりシンプルな色のみの表現 first appeared on コピペっと copypet.jp｜パーツで探す、web制作に使えるコピペサイト。.

]]> copypet.jp

コンパクトなステップ表示 よりシンプルな色のみの表現

購入ステップや手順説明などに使うコンパクトなステップ表示です。
こちらはよりシンプルな色のみの表現となります。

[li]のclassに以下のクラスをつけることで表示が変わります。
[completed]＝完了したもの
[active]＝現在値
何もつけなければ、未完了の表示となります。

The post [パーツ]ナビゲーション　コンパクトなステップ表示 よりシンプルな色のみの表現 first appeared on コピペっと copypet.jp｜パーツで探す、web制作に使えるコピペサイト。.

]]> 2164 [パーツ]ナビゲーション　コンパクトなステップ表示 まる囲み数字タイプ https://copypet.jp/codedescription/2163/ Tue, 05 Jun 2018 07:25:19 +0000 https://copypet.jp/codedescription/2163/ copypet.jp

コンパクトなステップ表示 まる囲み数字タイプ 購入ステップや手順説明などに使うコンパクトなステップ表示です。 まる囲み数字がステップに使用されます。 [li]のclassに以下のクラスをつけることで表示が変わります。 [ […]

The post [パーツ]ナビゲーション　コンパクトなステップ表示 まる囲み数字タイプ first appeared on コピペっと copypet.jp｜パーツで探す、web制作に使えるコピペサイト。.

]]> copypet.jp

コンパクトなステップ表示 まる囲み数字タイプ

購入ステップや手順説明などに使うコンパクトなステップ表示です。
まる囲み数字がステップに使用されます。

[li]のclassに以下のクラスをつけることで表示が変わります。
[completed]＝完了したもの
[active]＝現在値
何もつけなければ、未完了の表示となります。

The post [パーツ]ナビゲーション　コンパクトなステップ表示 まる囲み数字タイプ first appeared on コピペっと copypet.jp｜パーツで探す、web制作に使えるコピペサイト。.

]]> 2163 [パーツ]ナビゲーション　コンパクトなステップ表示 バータイプ2 https://copypet.jp/codedescription/2162/ Tue, 05 Jun 2018 07:22:18 +0000 https://copypet.jp/codedescription/2162/ copypet.jp

コンパクトなステップ表示 バータイプ2 購入ステップや手順説明などに使うコンパクトなステップ表示です。 こちらは横軸のみのバータイプです。 [li]のclassに以下のクラスをつけることで表示が変わります。 [compl […]

The post [パーツ]ナビゲーション　コンパクトなステップ表示 バータイプ2 first appeared on コピペっと copypet.jp｜パーツで探す、web制作に使えるコピペサイト。.

]]> copypet.jp

コンパクトなステップ表示 バータイプ2

購入ステップや手順説明などに使うコンパクトなステップ表示です。
こちらは横軸のみのバータイプです。

[li]のclassに以下のクラスをつけることで表示が変わります。
[completed]＝完了したもの
[active]＝現在値
何もつけなければ、未完了の表示となります。

The post [パーツ]ナビゲーション　コンパクトなステップ表示 バータイプ2 first appeared on コピペっと copypet.jp｜パーツで探す、web制作に使えるコピペサイト。.

]]> 2162 [パーツ]ナビゲーション　コンパクトなステップ表示 バータイプ https://copypet.jp/codedescription/2161/ Tue, 05 Jun 2018 07:19:18 +0000 https://copypet.jp/codedescription/2161/ copypet.jp

コンパクトなステップ表示 バータイプ 購入ステップや手順説明などに使うコンパクトなステップ表示です。 こちらはバータイプです。 [li]のclassに以下のクラスをつけることで表示が変わります。 [completed]＝ […]

The post [パーツ]ナビゲーション　コンパクトなステップ表示 バータイプ first appeared on コピペっと copypet.jp｜パーツで探す、web制作に使えるコピペサイト。.

]]> copypet.jp

コンパクトなステップ表示 バータイプ

購入ステップや手順説明などに使うコンパクトなステップ表示です。
こちらはバータイプです。

[li]のclassに以下のクラスをつけることで表示が変わります。
[completed]＝完了したもの
[active]＝現在値
何もつけなければ、未完了の表示となります。

The post [パーツ]ナビゲーション　コンパクトなステップ表示 バータイプ first appeared on コピペっと copypet.jp｜パーツで探す、web制作に使えるコピペサイト。.

]]> 2161 [パーツ]ナビゲーション　コンパクトなステップ表示 https://copypet.jp/codedescription/2160/ Tue, 05 Jun 2018 07:15:37 +0000 https://copypet.jp/codedescription/2160/ copypet.jp

コンパクトなステップ表示 購入ステップや手順説明などに使うコンパクトなステップ表示です。 [li]のclassに以下のクラスをつけることで表示が変わります。 [completed]＝完了したもの [active]＝現在値 […]

The post [パーツ]ナビゲーション　コンパクトなステップ表示 first appeared on コピペっと copypet.jp｜パーツで探す、web制作に使えるコピペサイト。.

]]> copypet.jp

コンパクトなステップ表示

購入ステップや手順説明などに使うコンパクトなステップ表示です。

[li]のclassに以下のクラスをつけることで表示が変わります。
[completed]＝完了したもの
[active]＝現在値
何もつけなければ、未完了の表示となります。

The post [パーツ]ナビゲーション　コンパクトなステップ表示 first appeared on コピペっと copypet.jp｜パーツで探す、web制作に使えるコピペサイト。.

]]> 2160 [パーツ]ナビゲーション　ベーシックなステップ表示 上テキスト付き https://copypet.jp/codedescription/2159/ Tue, 05 Jun 2018 07:10:57 +0000 https://copypet.jp/codedescription/2159/ copypet.jp

ベーシックなステップ表示 上テキスト付き 購入ステップや手順説明などに使うベーシックなステップ表示です。 ステップの説明テキストが上につきます。 [li]のclassに以下のクラスをつけることで表示が変わります。 [co […]

The post [パーツ]ナビゲーション　ベーシックなステップ表示 上テキスト付き first appeared on コピペっと copypet.jp｜パーツで探す、web制作に使えるコピペサイト。.

]]> copypet.jp

ベーシックなステップ表示 上テキスト付き

購入ステップや手順説明などに使うベーシックなステップ表示です。
ステップの説明テキストが上につきます。

[li]のclassに以下のクラスをつけることで表示が変わります。
[completed]＝完了したもの
[active]＝現在値
何もつけなければ、未完了の表示となります。

The post [パーツ]ナビゲーション　ベーシックなステップ表示 上テキスト付き first appeared on コピペっと copypet.jp｜パーツで探す、web制作に使えるコピペサイト。.

]]> 2159 [パーツ]ナビゲーション　ベーシックなステップ表示 下テキスト付き https://copypet.jp/codedescription/2158/ Tue, 05 Jun 2018 06:59:52 +0000 https://copypet.jp/codedescription/2158/ copypet.jp

ベーシックなステップ表示 下テキスト付き 購入ステップや手順説明などに使うベーシックなステップ表示です。 ステップの説明テキストが下につきます。 [li]のclassに以下のクラスをつけることで表示が変わります。 [co […]

The post [パーツ]ナビゲーション　ベーシックなステップ表示 下テキスト付き first appeared on コピペっと copypet.jp｜パーツで探す、web制作に使えるコピペサイト。.

]]> copypet.jp

ベーシックなステップ表示 下テキスト付き

購入ステップや手順説明などに使うベーシックなステップ表示です。
ステップの説明テキストが下につきます。

[li]のclassに以下のクラスをつけることで表示が変わります。
[completed]＝完了したもの
[active]＝現在値
何もつけなければ、未完了の表示となります。

The post [パーツ]ナビゲーション　ベーシックなステップ表示 下テキスト付き first appeared on コピペっと copypet.jp｜パーツで探す、web制作に使えるコピペサイト。.

]]> 2158 [パーツ]ナビゲーション　ベーシックなステップ表示 完了したものにチェックマーク https://copypet.jp/codedescription/2157/ Tue, 05 Jun 2018 06:52:09 +0000 https://copypet.jp/codedescription/2157/ copypet.jp

ベーシックなステップ表示 完了したものにチェックマーク 購入ステップや手順説明などに使うベーシックなステップ表示です。 完了したものにチェックマークがつきます。 [li]のclassに以下のクラスをつけることで表示が変わ […]

The post [パーツ]ナビゲーション　ベーシックなステップ表示 完了したものにチェックマーク first appeared on コピペっと copypet.jp｜パーツで探す、web制作に使えるコピペサイト。.

]]> copypet.jp

ベーシックなステップ表示 完了したものにチェックマーク

購入ステップや手順説明などに使うベーシックなステップ表示です。
完了したものにチェックマークがつきます。

[li]のclassに以下のクラスをつけることで表示が変わります。
[completed]＝完了したもの
[active]＝現在値
何もつけなければ、未完了の表示となります。

アイコンはfontawesomeを使用しています。

fontawesome.io

Font Awesome, the iconic font and CSS toolkit

Font Awesome, the iconic font and CSS framework……

fontawesome.com

ホームページを見る

The post [パーツ]ナビゲーション　ベーシックなステップ表示 完了したものにチェックマーク first appeared on コピペっと copypet.jp｜パーツで探す、web制作に使えるコピペサイト。.

]]> 2157