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

The post コピペでできる！css gridのsubgridを使った子要素の高さを揃えたカードレイアウト 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制作に使えるコピペサイト。.

長い文章などの高さを制限して、クリックで表示したいときによく使われている「続きを読む」 「もっと見る」ボタンのサンプルです。
要素を隠して、ボタンをクリックすると全文が表示されるアレです。
UIが適切かはともかく、ページの高さを節約したいときや、別ページに移管させたくない時などに使えますね。
仕組は、チェックボックスを使用し、チェックされたら兄弟要素を表示状態にするというものになります。

今回は、グラデーションで先の文章が隠されているバージョンとボタンを押したらピロっと下にテキストが出てくるバージョンをご用意しました。

The post コピペでできる！CSSとhtmlのみで作る「続きを読む」の開閉ボタン first appeared on コピペっと copypet.jp｜パーツで探す、web制作に使えるコピペサイト。.

ブログの記事などで注目して欲しい時などにつかうチェックポイントの一覧などの「注目枠」サンプルです。
長文になってしまった時などにこれを利用すると、何を読むべきかがわかり見やすくなります。
また、デザインによっては目次などにも使い回しがきくでしょう。

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

The post コピペでできる！CSSとhtmlのみのブログの記事などで注目して欲しい時などにつかう「注目枠」のデザイン first appeared on コピペっと copypet.jp｜パーツで探す、web制作に使えるコピペサイト。.