Tag : CSS

- 120 Articles -

CSSのみでcheckboxの装飾とチェック時アニメーションを実装したものをまとめた「Switcher styles collection」

Read Article

CSSのみでcheckboxの装飾とチェック時アニメーションを実装したものをまとめた「Switcher styles collection」

ひと通り揃っていて良いなと思ったので備忘録兼ねてご紹介。「Switcher styles collection」は`<input type="checkbox">`と`<label>`を組み合わせて作成したスイッチスタイルをまとめているもので、装飾やチェック時のアニメーションなどすべてCSSのみで実装されています。

  • Tips
CSSのみで実装するシンプルなドロップダウンメニュー

Read Article

CSSのみで実装するシンプルなドロップダウンメニュー

JavaScriptは使用せず、CSSのみで展開時にちょっとしたアニメーションも加えたシンプルなドロップダウンメニューのサンプルです。最近ではスマートフォンやタブレットに対応させたりレスポンシブ対応したりで、クリック時にも対応とかウィンドウサイズによって見栄えを大きく変えるといったものが多いとは思いますが、こちらは主にPCで使用するような単純にhoverで展開されるタイプのものになります。

  • Tips
Sass(SCSS)のmixinを使って、:nth-child疑似クラスなどを指定しやすくする便利スタイルシート「Family.scss」

Read Article

Sass(SCSS)のmixinを使って、:nth-child疑似クラスなどを指定しやすくする便利スタイルシート「Family.scss」

便利だと思ったので備忘録兼ねてご紹介。CSSでn番目の要素に適用したい時などに利用する`:nth-child`疑似クラスや`:nth-last-child`疑似クラスですが、先頭(または最後)からn番目になどの単純な指定ではなく、ちょっと複雑な指定をする際は指定方法を考える(悩む)ことがあると思います。「Family.scss」はそんな面倒な指定を楽にしてくれるスタイルシートで、利用するためにはS…

  • Tips
新しいInstagramのロゴデザインを再現したデザインリソースやCSSテクニック

Read Article

新しいInstagramのロゴデザインを再現したデザインリソースやCSSテクニック

少し前に新しいInstagramのロゴデザインが発表されましたが、発表直後から様々な人達が各種デザインツールを使ってロゴデザインを再現したり、中にはHTMLとCSSを使って再現する人も出てきました。人によってはそれらを公開するだけでなく配布しているという人もいたので、個人的に目についたロゴデザインを再現したデザインリソースやCSSテクニックをいくつかまとめてみました。もちろんデザインで使用する際な…

  • Material
CSSで実装するボタンホバー時のボーダーアニメーションエフェクト

Read Article

CSSで実装するボタンホバー時のボーダーアニメーションエフェクト

自分用に一覧化したのがほしくて作ったのでシェアします。主にゴーストボタンなどのシンプルなボタンデザインのホバーエフェクトとして使われることが多いと思うボーダーアニメーションのサンプルです。どれも特別派手な動きでもなく同じような感じではありますが全5種類あり、すべてCSSだけで実装しているのでボーダーの太さやカラーなどは簡単に変更可能です。

  • Tips
CSSでコンテンツが少なくてもフッターをウィンドウ下部に表示する方法

Read Article

CSSでコンテンツが少なくてもフッターをウィンドウ下部に表示する方法

特に何も考えず組んでいると、コンテンツの内容が少ない場合に本来ウィンドウ下部に表示されてほしいフッターコンテンツなどが中途半端な位置に表示され、その分フッターとウィンドウ下部の間にある領域に大きな空白ができてしまうことがあります。これをCSSや場合によってはJavaScriptで解決する方法があるのはご存知の方も多いと思いますが、最近では特に古いIEの対応がなくなってわざわざJavaScriptを…

  • Tips
CSSで縦横比を維持しながら横幅いっぱいに背景画像を表示させる方法

Read Article

CSSで縦横比を維持しながら横幅いっぱいに背景画像を表示させる方法

特にレスポンシブやスマホサイトで見かけることが多い、どんなウィンドウサイズでも縦横比を維持しつつ横幅いっぱいに画像を表示している見栄えですが、`img`であれば画像を配置して `width:100%;` と `height:auto;` 辺りを指定しておけば簡単に表示させることができても、その見栄えを背景画像を利用してとなると先述した方法では実装できません。背景画像でも同じように縦横比を維持しつつ…

  • Tips
入力欄フォーカス時のアニメーションをまとめた「Awesome input focus effects」

Read Article

入力欄フォーカス時のアニメーションをまとめた「Awesome input focus effects」

覚えておきたいと思ったので備忘録兼ねて。「Awesome input focus effects」はinputやtextareaといった入力欄へフォーカスした際のアニメーションをまとめているもので、3グループ・全24種類のエフェクトがあります。もちろん人によりますが、個人的にはいずれもシンプルな動き(見た目)に思うので、どのタイプのサイトでも取り入れられるように思います。

  • Tips
CSSで子要素の表示を維持しつつ、要素を回転させる方法

Read Article

CSSで子要素の表示を維持しつつ、要素を回転させる方法

なんとなくやってみて、もしかしたら今後使うことあるかもと思ったので備忘録。CSSの`transform: rotate()`と`animation`を使って要素が常に回転するような動きを実装する際、単純に親要素にそれらを指定するだけだと中にある子要素の見栄えも回転します。それを子要素の見栄えは回転せずにそのままの表示が維持されているように見せる方法です。

  • Tips
CSSで実装できる可愛いデザインに使えそうなボタンデザインやホバーエフェクト 10+

Read Article

CSSで実装できる可愛いデザインに使えそうなボタンデザインやホバーエフェクト 10+

自分用に一覧化したものがほしくて作ったのでシェアします。あくまで個人的に思ったものなので多少合わないと思うものもあるかもしれませんが、可愛らしいデザインや遊び心あるような感じのサイトで使えそう・相性が良さそうだと思ったボタンデザインやホバーエフェクトです。いずれも画像やJavaScriptなどは使用せずに見た目から動きまで全てCSSで表現しており、CSSなのでカラー変更やフォントサイズの変更なども…

  • Tips
カエルを使ってFlexboxを学べる「Flexbox Froggy」の日本語版が公開されてました

Read Article

カエルを使ってFlexboxを学べる「Flexbox Froggy」の日本語版が公開されてました

以前当ブログでも簡単にですが紹介させてもらったことがあり、カエルを移動させることで楽しくFlexboxについて学べるということで見かけた人も多いと思う「Flexbox Froggy」の日本語版が公開されていたのでご紹介します。説明が全て日本語になったことで、英語が苦手という人でもより学習しやすいと思います。

  • Services & Resource
CSSグラデーションを使ったデザインパーツサンプル

Read Article

CSSグラデーションを使ったデザインパーツサンプル

わざわざ画像を使わなくても簡単にグラデーションを表現することができるCSSの`linear-gradient`。未対応ブラウザをサポートすることもまだ完全になくなったとは言えませんが少しずつ減ってきてはいるので、利用頻度が増えたという人も多いと思います。よくある使用方法としては例えばセクションの背景だったりボタンなどのパーツの背景にグラデーションカラーを適用するというのが一般的ですが、他にもいろい…

  • Tips

Close the search window,
please press close button or esc key.