HTML&CSS

CSSだけでレスポンシブで画像ナビゲーションをテキストに切り替える

グローバルナビゲーションはPCだと画像で作る場合が多いですが、スマホだとCSS3がフルに使えたりフォントが綺麗だったりするので、画像ではなくテキストで表示したいことがあります。
そこでレスポンシブで画像をテキストを切り替える方法をご紹介します。

  • 投稿日
  • 更新日

LESSをはじめようと思ったらとりあえずBootstrapのmixinsを入れておくと便利

LESSにはMixinという複数のプロパティをまとめる機能があります。
例えばcss3のベンダープレフィックスなど設定しておけば、あとで１行で呼び出すことができます。
で、実際作成するにあたり一から作るより Twitter Bootstrap を利用すれば、よく使いそうな機能があらかじめまとまってるのでいいかもしれないです。

  • 投稿日
  • 更新日

CSS+jQueryで左右別々の背景にする

センターのコンテンツを固定幅にして、その左右の背景を別の画像にしたいときtableを使用すれば簡単ですが、今の時代tableで囲んでしまうのはあれですね。
そこでcss+jQueryでなんとかしてみます。

  • 投稿日
  • 更新日

CSS3だけでクリックでアニメーションさせる

CSS3でアニメーションが使えるようになり「hover」と組み合わせればマウスオーバーアニメーションならJSを使わなくても余裕な感じですが、クリックでアニメーションしたいときはそれらしいセレクターがないのでできないかなと思ってましたが、頑張ればできるらしいです。

  • 投稿日
  • 更新日

CSSをシンプルに書くことができるLESS使ってみた

CSSはシンプルなのでとてもわかりやすい言語ではありますが、その分サイトが肥大化していくとメンテナンス性が悪くなりますね。
LESSを使えばプログラム的な書き方ができるので、ムダなく効率的に管理できるみたいです。

  • 投稿日
  • 更新日