Tag : CSS

- 115 Articles -

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
CSS:角丸のテーブルを作成する方法

Read Article

CSS:角丸のテーブルを作成する方法

テーブルをCSSを使って角丸にする方法です。以前は角丸部分に特定のクラスをそれぞれ記述して、場合によってはJavaScriptと併用して実装していたり、特定のブラウザの為に画像を使うとか親要素に`div`要素を幾つか記述するとかいろいろ面倒なことしてたのですが、最近はそれらをしないでも実現できる機会も増え、使用頻度も割と高いので備忘録として残しておきます。

  • Tips
Flexboxの具体的な使用例がまとめられた「Flexbox Patterns」

Read Article

Flexboxの具体的な使用例がまとめられた「Flexbox Patterns」

数は少ないですが、今後増えるの期待しつつ覚えておきたかったので備忘録。「Flexbox Patterns」はタブ・フッター・リストなどサイトでよく使われるレイアウトやパーツを、CSSのFlexboxを使った実装例としてまとめているサイトです。Flexboxが便利なのはわかるけど具体的にどんなところに使うのかまだピンとこない人や勉強したい人には便利そうです。

  • Services & Resource
data属性を利用したナビゲーションの実装サンプル

Read Article

data属性を利用したナビゲーションの実装サンプル

テキストのみで作られたようなシンプルなナビゲーションに`data`属性を利用したカスタマイズを施した実装サンプルです。いずれもカスタマイズといっても簡易的なものばかりで、ほぼホバー時の動きにはなりますが、紹介しているような方法を使うことでHTMLに記述する要素を少し減らすことができたり、ちょっとしたアニメーションを加えたりすることもできます。また、あまり`data`属性を使ったことがないという人は…

  • Tips
CSSで実装するハンバーガーメニューアイコンの見栄えやクリック・ホバー時のエフェクト 10

Read Article

CSSで実装するハンバーガーメニューアイコンの見栄えやクリック・ホバー時のエフェクト 10

画像は使用せずにCSSのみを使って実装したハンバーガーメニューアイコンの見栄えやクリック・ホバー時のエフェクトサンプルなど全10種類です。以前にもハンバーガーメニューをクリックした時のエフェクトを紹介しましたが、あれからまた備忘録として残しておきたいものが幾つか出てきたのでシェアします。

  • Tips
CSSの:nth-childと:nth-last-child擬似クラスの使用例

Read Article

CSSの:nth-childと:nth-last-child擬似クラスの使用例

今更な内容になりますが、未対応だったIEのサポート終了によって今後ますます使う場面は増えるでしょうし、恥ずかしながら指定方法によっては一瞬どう記述するかど忘れしちゃうことがたまにあるので備忘録も兼ねて。CSSの擬似クラスにある`:nth-child`と`:nth-last-child`の使用例を自分が見たい時にすぐ確認できるようひと通りまとめました。

  • Tips

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