カテゴリー: 装飾

参考にしたいギャラリーサイトを紹介 初心者がサイトを一から作ろうと思うと、どこかセンスがないような感じになってしまいがち。 サイト模写を何度もやっていても、色の選択ミスだったり、作りが汚かったり、出来上がっても想像通りの […]

ハンバーガーメニューをHTMLとCSSだけで作ってみる WordPressのテーマ選びに失敗して、スマホサイズでメニューがない！とか、wp・テーマ更新したらメニューなくなったけど！という時に。簡単に後付けできるハンバーガ […]

メインコンテンツ内で紹介したいことが多すぎるとき、簡単にタブで切り替えして見やすくしたい！ html・cssだけでできるタブ切り替えを紹介します。 レスポンシブ対応するベースソース 以下のHTMLとCSSがベースになりま […]

ブログやwebサイトを作るとき、ワードプレスのテーマのままだと背景が真っ白だったり、薄いグレーだったりしますよね。 華やかにしたいけど、画像を使うとガチャガチャするし、background-colorでベタ塗すると重くな […]

たくさん入れすぎるとごちゃごちゃしてしまうけど、いつか使いたいもののストック。 ホバーで縦に割れるテキスト 縦割DEMO testtest 縦割のHTML 　 <div class=”word”> <s […]

svgにするといいと聞くけど、調べても何やら難しい内容がつらつら書かれていて結局諦めてしまっていませんか？ イラレとかエディタ使って書き出して～～とかよくわからないと感じている方必見。 簡単にsvgを使ってアニメーション […]

画像の上に文字を置いてベタ色を塗るのではなく、 ちょっとおしゃれに、文字の形に切り抜いてみたり、文字の部分だけオーバーレイをかけてみたりしてみます。 切り抜くときに使うのは、background-clip。 クロームやs […]

アニメーションで動かす メインビジュアルに入れたら印象ガッツリ残りそう。 やりたすぎるので、そのままお借りしてきました。 四角がふわふわするDEMO 引用：https://webdesignfacts.net/entry […]

もくもくしたい時にcssのみで作ってみる 上と下に付けるだけ。 保育系とかママ系サイトの装飾に使ってもいいかもしれませんね。 モクモクDEMO こんなかんじになるよ 画像でやるとレスポンシブで崩れてしまったり、画質が荒れ […]