cssの「grid」については、たくさんの記事もあるし、普通に使われていると思うのですが、
中でも「subgrid」を使ったら、今まで色々面倒だった、カードレイアウトのボタン位置揃える問題が非常に簡単だよということで。
「subgrid」については、多くの記事が出ていますのでそちらにお任せします。

The post コピペでできる！css gridのsubgridを使った子要素の高さを揃えたカードレイアウト first appeared on コピペっと copypet.jp｜パーツで探す、web制作に使えるコピペサイト。.

リンクやボタンなどに添える矢印アイコンですが、これだけのために画像を用意するのは面倒。
ということで、[clip-path]で作る三角矢印アイコンを5種ご用意。
ボタンやリンクの設置例も一緒に載せています。
「clip-path」を使用することでよりシンプルに設置できました。
よく使う左右上下以外にも左上左下右上右下もあります。
htmlのベースはほぼ一緒ですので、ご自由に組み合わせて新しいバージョンを作ってみてはいかがでしょう？

The post コピペでできる！[clip-path]で作る三角矢印アイコンセット5種 first appeared on コピペっと copypet.jp｜パーツで探す、web制作に使えるコピペサイト。.

リンクやボタンなどに添える矢印アイコンですが、これだけのために画像を用意するのは面倒。
ということで、[clip-path]で作る矢印アイコンを5種ご用意。
「clip-path」を使用することでよりシンプルに設置できました。
よく使う左右上下以外にも左上左下右上右下もあります。
htmlのベースはほぼ一緒ですので、ご自由に組み合わせて新しいバージョンを作ってみてはいかがでしょう？

The post コピペでできる！[clip-path]で作る矢印アイコンセット5種 first appeared on コピペっと copypet.jp｜パーツで探す、web制作に使えるコピペサイト。.

cssとhtmlのみで作れるモーダルウィンドウです。

The post コピペでできる！cssとhtmlのみで作るモーダルウィンドウパート2 first appeared on コピペっと copypet.jp｜パーツで探す、web制作に使えるコピペサイト。.

ページ送りをつけるのもいいですが、最近では、記事を隠しておいてボタンを押したら記事を表示する方法もあります。
「続きを読むの開閉ボタン」のようにcssだけでやろうとすると、件数での制御が難しいですね。
なので、簡単なJavaScriptでできる記事（件数）の読み込みをご紹介します。

The post コピペでできる！簡単なJavaScriptで作る記事の読み込み first appeared on コピペっと copypet.jp｜パーツで探す、web制作に使えるコピペサイト。.

記事下など著者情報など通常の記事とは表現を分けたい時などありませんか？
そんな時にちょっとの手間で見やすくなるブロックデザインをご紹介

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

Font Awesome, the iconic font and CSS toolkit

Font Awesome, the iconic font and CSS framework……

fontawesome.com

ホームページを見る

The post コピペでできる！cssとhtmlのみで作る記事ブロック7選 first appeared on コピペっと copypet.jp｜パーツで探す、web制作に使えるコピペサイト。.

シンプルなフッターですが、よく使うコンテンツに応じてfixさせたり、hoverで表示させたりするフッターを5種ご用意。

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

Font Awesome, the iconic font and CSS toolkit

Font Awesome, the iconic font and CSS framework……

fontawesome.com

ホームページを見る

The post コピペでできる！cssとhtmlのみで作るフッター5選 first appeared on コピペっと copypet.jp｜パーツで探す、web制作に使えるコピペサイト。.

wordpressのメールフォームと言ったら、Contact Form 7が有名ですね。
利用されている方も多いかと思います。
今回は、そのContact Form 7を使ったメールフォームのテンプレートをご紹介します。

Contact Form 7側（フォーム内の部分）の設定はいずれも下記になります。

<div class="cp_cf7name">[text* cp_name placeholder "name"]</div>
<div class="cp_cf7email">[email* cp_email placeholder "email"]</div>
<div class="cp_cf7telephone">[tel cp_telephone placeholder "telephone"]</div>
<div class="cp_cf7subject">[select cp_subject first_as_label "Please select" "subject1" "subject2" "subject3"]</div>
<div class="cp_cf7textarea">[textarea cp_textarea placeholder "textarea"]</div>
<div class="cp_cf7submit">[submit "submit"]</div>

*フォームはデモモードになっていますので送信はされませんが、エラーのチェックは可能です。
*サンプルの必須項目は「Name」と「email」です。

インストールや基本的な使い方については、下記をご参照ください。

Contact Form 7のインストールについて

Contact Form 7 | WordPress.org

…

ja.wordpress.org

ホームページを見る

Contact Form 7の使い方

使い方 | Contact Form 7 [日本語]

…

contactform7.com

ホームページを見る

The post コピペでできる！cssとhtmlで作るContact Form 7を使ったメールフォームセット 4選 first appeared on コピペっと copypet.jp｜パーツで探す、web制作に使えるコピペサイト。.

全画面を覆うようなフルスクリーンのメニューはメニュー数が少ない時や、ランディングページなどにも使い勝手が良いと思います。
そんなフルスクリーンメニューを４つご紹介。

The post コピペでできる！cssとhtmlのみで作るフルスクリーンメニュー4選 first appeared on コピペっと copypet.jp｜パーツで探す、web制作に使えるコピペサイト。.

ブログのトップページなどで一覧を表示する時に一つ一つの記事をブロック状に並べたりすると思いますが、
複数繰り返すパーツなのでシンプルでわかりやすいものがいいですよね。
そのパーツに使えそうな、ブログカードやニュースカードをご紹介。

The post コピペでできる！cssとhtmlのみで作る記事などのニュースカード/ブログカード 7選 first appeared on コピペっと copypet.jp｜パーツで探す、web制作に使えるコピペサイト。.