フォームはサイトにはかならず必要になってくるアイテムですが、わかりやすく間違えにくいものにしたいですよね。
ラジオボタン[input type=”radio”]とチェックボックス[input type=”checkbox”]のデザインで、
シンプルだけどわかりやすいデザインを集めました。

The post コピペでできる！cssとhtmlのみでシンプルでわかりやすいラジオボタン＆チェックボックス5選 first appeared on コピペっと copypet.jp｜パーツで探す、web制作に使えるコピペサイト。.

CSSとhtmlだけの[clip-path]で作るリストデザインです。
[clip-path]を使ったら以前のやり方より融通が効いたりメンテナンスが楽だったり、指定も少なくて済んだりして便利です。

カウンタの利用について

cssでカウンタを利用する場合初期値をリセットしなければなりません。
リセット後には要素にカウンタの値を加えるため、 counter() 関数を使用します。

<ol class="cp_listsample">
	<li>item</li>
	<li>item</li>
	<li>item</li>
	<li>item</li>
</ol>

ol.cp_listsample {
	counter-reset: number; /* section のカウンタを 0 にセット */
}
ol.cp_listsample li:before {
	counter-increment: number; /* number カウンタを増加 */
	content: counter(number); /* カウンタを表示 */
}

また、文字列を付与させることも可能です。
counter-reset: カウンタ名（任意）;
counter-increment: カウンタ名（上と同じカウンタ名）;
content:counter(上と同じカウンタ名) “付与したい文字”;

ol {
	counter-reset: number; /* カウンタ名（任意） */
}
ol li:before {
	counter-increment: number; /* カウンタ名（上と同じカウンタ名） */
	content: counter(number) "付与したい文字"; /* カウンタを表示 */
}

カウンタを入れ子にする

カウンタを入れ子にする場合は自動的に子要素で生成されますが、
counters() 関数を使って、入れ子となったカウンタの異なる階層の間に、文字列を挿入することができます。

ol {
	counter-reset: number;                /* 各 ol 要素に新しいインスタンスの number カウンタを生成 */
	list-style-type: none;
}
li:before {
	counter-increment: number;            /* number カウンタのこのインスタンスのみ増加 */
	content: counters(number, ".") " ";   /* "." で区切られた number カウンタのインスタンスの値を付加 */
}

色は好みで変えていただければ、かまいません。
また、基本htmlは<ul><li>タグを使用しています。

紹介している<ul>タグには、クラス名（.cp_list）を付与していますが、こちらも
css部分を下記のように変更すれば、クラスをつけずに使用することも可能です。

ul {cssの中身}

色には6桁の16進数のカラーコード(#000000)も使えますが、他に、

• 3桁の16進数カラーコード(#000)
• RGB色相・彩度・明度(rgb(0,0,0))
• RGBA色相・彩度・明度・透明度(rgb(0,0,0,1))

なども使用できます。
RGBA値での指定は、サポートしていないブラウザだと、透明度だけが無視されるのではなく、色指定そのものが認識されずに無効となるので注意が必要です。

The post コピペでできる！CSSとhtmlだけの[clip-path]で作るリストデザイン10選 first appeared on コピペっと copypet.jp｜パーツで探す、web制作に使えるコピペサイト。.

ECサイトなどでよくつかうセールやポイントとしてブロック（商品や画像など）につけるリボン。
こちらではステッチ付きやブロック上部の全体をおおう大きなリボンタイプなどをご用意。

The post コピペでできる！cssとhtmlだけの[clip-path]で作るブロックの一部につけるリボンデザイン8種 first appeared on コピペっと copypet.jp｜パーツで探す、web制作に使えるコピペサイト。.

ECサイトなどでよくつかうセールやポイントとしてブロック（商品や画像など）の四隅につけるリボン。
こちらではそれぞれ右上下・左上下の四隅につけるシンプルなデザインをご紹介。

The post コピペでできる！cssとhtmlだけ[clip-path]で作るコーナーにつけるシンプルなリボンデザイン4種 first appeared on コピペっと copypet.jp｜パーツで探す、web制作に使えるコピペサイト。.

htmlとcssだけでできる見出し6選です。
過去に公開している見出しは、borderで三角形を無理やり作ったりしていましたが、
[clip-path]がほとんどのブラウザで対応可能になったので、[clip-path]で表現できるものはそちらに切り替えました。

色は好みで変えていただければ、かまいません。
また、基本htmlは<h1>タグを使用していますが、<h2>〜<h6>などにそのまま変更することができます。

紹介している<h1>タグには、クラス名（.cp_h1title）を付与していますが、こちらも
css部分を下記のように変更すれば、クラスをつけずに使用することも可能です。

h1 {cssの中身}

色には6桁の16進数のカラーコード(#000000)も使えますが、他に、

• 3桁の16進数カラーコード(#000)
• RGB色相・彩度・明度(rgb(0,0,0))
• RGBA色相・彩度・明度・透明度(rgb(0,0,0,1))

なども使用できます。
RGBA値での指定は、サポートしていないブラウザだと、透明度だけが無視されるのではなく、色指定そのものが認識されずに無効となるので注意が必要です。

The post コピペでできる！CSSとhtmlだけ[clip-path]を使った見出し6選 first appeared on コピペっと copypet.jp｜パーツで探す、web制作に使えるコピペサイト。.

htmlとcssだけでできる見出し10選です。
見出し次第で、記事の読みやすさは大きく変わります。
雑誌などの紙デザインでありそうなデザイン見出しを集めました。

色は好みで変えていただければ、かまいません。
また、基本htmlは<h1>タグを使用していますが、<h2>〜<h6>などにそのまま変更することができます。

紹介している<h1>タグには、クラス名（.cp_h1title）を付与していますが、こちらも
css部分を下記のように変更すれば、クラスをつけずに使用することも可能です。

h1 {cssの中身}

色には6桁の16進数のカラーコード(#000000)も使えますが、他に、

• 3桁の16進数カラーコード(#000)
• RGB色相・彩度・明度(rgb(0,0,0))
• RGBA色相・彩度・明度・透明度(rgb(0,0,0,1))

なども使用できます。
RGBA値での指定は、サポートしていないブラウザだと、透明度だけが無視されるのではなく、色指定そのものが認識されずに無効となるので注意が必要です。

The post コピペでできる！CSSとhtmlだけ紙のデザインぽい見出しデザイン10選 first appeared on コピペっと copypet.jp｜パーツで探す、web制作に使えるコピペサイト。.

cssアニメーションはローディングはもちろんのこと、背景全体のグラデーションを変えたりポイントを目立たせたりと、アイディア次第でいろんなところで使えます。
今回はローディングだけじゃない、cssアニメーションを使ったサンプルをご紹介します。

The post ローディングだけじゃない！コピペでできる！cssアニメーションサンプル8選 first appeared on コピペっと copypet.jp｜パーツで探す、web制作に使えるコピペサイト。.

画像なしでもちょっとした柄ならもうcssで再現できちゃいますよね。
以前は基本的なボーダーやストライプをご紹介しましたが、今回はちょっとクセ強めです。
アイディア次第で複雑な柄も作れます。どっかで見たチェックやシャツの柄のようなちょっとだけ複雑なパターンをご紹介します。
わかりやすいようにベンダープレフィックスはつけていませんので、必要に応じてつけてください。

基本的なパターンはこちら

コピペでできる！cssとhtmlのみで作るいい感じの背景パターン 12選

画像なしでもちょっとした柄ならもうcssで再現できちゃいますよね。 アイディア次第で複雑な柄も作れますが、ここでは基本的なパターンをご紹介します。 全面背景はもちろん、ブロック要素や見出しの背景にも使えるよう、色の差を少なめにしています。 また、わかりやすいようにベンダープレフィックスはつけていませんので、必要に応じてつけてください。…

copypet.jp

記事を見る

The post コピペでできる！cssとhtmlのみで作るちょっと複雑なの背景パターン 12選 first appeared on コピペっと copypet.jp｜パーツで探す、web制作に使えるコピペサイト。.

見出し次第で、記事の読みやすさは大きく変わります。
今回はちょいとシャレたデザインの見出しを集めました。
ほんのちょっとの手間でグッといい感じにできちゃいますよ。

紹介している<h1>タグには、クラス名（.cp_h1title）を付与していますが、こちらも
css部分を下記のように変更すれば、クラスをつけずに使用することも可能です。

h1 {cssの中身}

ちなみによく出てくる擬似要素の::beforeと::afterって何よ？って方はこちらをご覧ください。

で？そもそも擬似要素の::before(:before)と::after(:after)って何がどうなってどう使えるの？ | copypet.jp｜パーツで探す、web制作に使えるコピペサイト。

copypet.jpでも頻繁に使っている::before(:before)と::after(:after)ですが、コピペだけしていると調整やプラスアルファのデザインを加えたい時に悩んでしまうこともあるでしょう。 とりあえずコピペすりゃええと思うが、だがしかし・・・何がどうなっているかは知っておきたい。とこっそり思っておられる方のために「何とな〜くわかる」から「知ってる！知ってる！」ぐらいになるよう説明しておきます。…

copypet.jp

記事を見る

The post コピペでできる！CSSとhtmlだけできるちょいとシャレた見出し12選 first appeared on コピペっと copypet.jp｜パーツで探す、web制作に使えるコピペサイト。.

コンテンツの間や文章の間に使う水平線・区切り線<hr />はそのまま使うとなんだか味気ない感じになりますよね。
そんな時は、ちょっとした手間で、水平線・区切り線をいい感じにしてしまいましょう。

[update]クレヨンで書いたような滲んだ線を追加しました。（2024/7/9）

The post コピペでできる！cssとhtmlのみで作る水平線・区切り線 12選 first appeared on コピペっと copypet.jp｜パーツで探す、web制作に使えるコピペサイト。.