タグ: CSS

これからのCSSレイアウトはFlexboxで決まり!

FlexboxとはFlexible Box Layout Moduleのことで、その名の通りフレキシブルで簡単にレイアウトが組めちゃう素敵ボックスです。前々からあった技術ですが、ブラウザーによって書き方が違ったり、仕様がころころ変わったりと、イマイチ一歩踏み出せない感があったFlexbox。しかしようやくモダンブラウザーでの利用に難がなくなり、実務にも充分使えるようになりました。今回はそんなFlexboxの魅力と使いドコロを、デモ付きで紹介していこうと思います!
続きを読む

かわいい系デザインに使えるCSSいろいろ

過去に書いた「かわいい系デザインに使えるフォントや素材、デザインアイデアを集めました」という記事でかわいい系デザインの作り方を紹介しました。今回はかわいい系第二弾!CSSだけでできるかわいい小技をいくつか紹介します。すべてデモ付きなのでイメージしやすいかな?と思います。デモ画面内にある「HTML」「CSS」タブでコードが表示されるので、コピペして使ってくださいね!
続きを読む

CSS3アニメーションに挑戦!色が移り変わる背景を実装しよう

フラットデザインが流行ってからは、背景を一色で塗りつぶしたデザインのサイトが多くなりました。しかしそれだけではなんだか味気ない!という事で、CSS3のアニメーションを使って、徐々に色を変化させてみましょう!色の組み合わせや順番を調整して、パッと目を引くデザインに!
続きを読む

経歴や会社の沿革ページに!簡単なCSSで実装するタイムライン

ちょうど今作っているサイトで、経歴をタイムラインで表現するページがあったのでコードを紹介。コード自体はとってもシンプルなので、カスタマイズ次第でどんなデザインのサイトにもあわせられると思います。文章にするとゴチャゴチャしがちな経歴・沿革をスッキリと表示しましょう!
続きを読む

テキスト周りで使えるCSSの小技いろいろ

モバイルファーストの概念が広まり、コンテンツ主体の「読ませる」サイトが増えてきた昨今。テキスト周りをより便利に、より素敵に表示できるようなCSSをいくつか集めました。ユーザビリティの向上も図れるようなものもあるので要チェック!基本的なテクニックが中心なので、初心者さん〜中級者さんの参考になればと思います。
続きを読む

IE8以下を切り捨てれば使える便利なCSSプロパティー&セレクター

Webサイトを制作するにあたって、Internet Explorerのどのバージョンに対応させるかは、制作を始める前に話し合っておいた方がいい問題点のひとつです。私の場合2013年に入ってからはIE6やIE7に対応させる機会は皆無となり、IE8・IE9に対応させるかを議論しているところですが、皆さんはいかがでしょうか?今回はもしIE8を切り捨てる(IE9〜のサポート)なら使える便利なプロパティーやセレクターを紹介します。-ms-filter で対応できるものもありますが、filter の説明は割愛します :P
続きを読む

より素早くCSSコーディングするための、Sass(SCSS)のmixinスニペット集

以前「効率良くCSSコーディングできるSassを使ってみよう!Mac+Codaなら設定も簡単!」という記事で紹介したSass/SCSS。皆さん使ってますか?今回はそのSassの @mixin という機能に注目してみようと思います。中には後述する「Compass」というフレームワークを使えば同様のコードが記述できるものもありますが、お勉強も兼ねてあえて使わず自分で書いてみました。カスタマイズしやすそうなものを中心に紹介するので、自分の使いやすいオリジナル mixin を作ってみてくださいね!
続きを読む

コピペでできる!CSS3の素敵効果でテキストリンクを装飾する小技あれこれ

どのサイトでも見かけるテキストリンク。リンクのついたテキストにマウスオーバーすると文字色を変更する、というシンプルかつわかりやすい効果を実装しているWebサイトが多いかと思います。この装飾をもう少し変更できないかな?と思いCSSのみでプラスすることができるエフェクトをいくつか紹介します。
続きを読む