初心者にもおすすめ！無料で簡単にホームページを作成できるソフト

無料のホームページ作成ソフトは日々進化しており、最近ではプロが作ったようなデザインのホームページを簡単に作ることができるものが増えています。無料だからといって侮れません。商 ...

マテリアルデザインとは？　フラットデザインとの違いは？

マテリアルデザインは、Googleによって提唱されたデザインのガイドラインです。
ユーザーが使いやすいように感覚的に操作できることを目的として作成されました。

...

CodePenには毎日、クールなアニメーションやエフェクトを実現する面白いコードがたくさん公開されています。新しいアイデアを試す実験的なコードもあり、目が離せません。今回はその中でも、CSSだけで実現するエフェクトをいくつかご紹介します。コ ...

デバイスごとにcssを変えなければいけないナビゲーションメニューですが、Bootstrapを使えば簡単にコーディングができます。しかも、ドロップダウンメニューなどの面倒な小技も一瞬で作れてしまう手軽さ。今回は、Bootstrapで作るいろい ...

Flexboxの便利さは分かったけど、実際にどんな場面で、どのプロパティを使えばいいのか分からない・・・という方にオススメの体験デモをご紹介します。Flexboxでメニューを作るときの参考にしてみてはいかがでしょうか。

今回はFlexboxの使い方について、詳しくみていきたいと思います。まず、flexboxを利用する上で、最初に覚えておきたい用語がいくつかあります。ここでご紹介した以外にも細かい指定もできます。これからのレスポンシブWebに必須のFlexb ...

これまで頭を悩ませて来たfloat問題やclearfixでの回り込み解除の問題を一気に解決してしまうFlexbox。古いブラウザではサポートされていないので注意が必要ですが、これから先、レスポンシブレイアウトを作る上で主要なモジュールになる ...

「Pizza Amore」は、数値を指定するだけで、チャートを作成できるjQueryプラグイン。煩雑な数字を視覚的に表すことでユーザーに分かりやすく説明することができます。特にこのPizza Amoreはとても使いやすく、機能も十分に揃って ...

ページの隅にあるボタンをタップorクリックすると、ナビゲーションがスライドしながら出てくるoff-canvasメニュー。Facebookでもおなじみのメニューですね。レスポンシブ対応で、画面の小さなスマホでもコンテンツを邪魔せず、必要な時に ...

CSSだけで簡単実装！入力フォームのエフェクトをデザインする「Text Input Effect」に新バージョン追加

以前、「CSSだけで簡単実装！入力フォームの新しいエフェクト（149.docx）」で、入力フォームにフォーカスした時の ...

インターネットで商品の購入や問い合わせをしようとして入力フォームに進んだものの、途中で面倒になってやめてしまった…という経験をしたことのある方は多いのではないでしょうか。せっかくコンバージョンまであと一歩、というところで、「エラー表示される ...

画面いっぱいの動画を背景にして、ライブ感を演出しているサイトが増えています。今回は、YOUTUBEの動画を背景にするjQueryプラグインをご紹介。レスポンシブ対応もされていて、画面サイズを動かすと動画サイズもスムーズに切り替わります。

クリックした時やマウスをのせた時のアニメーションがかっこいいと、それだけでもサイトの印象がぐっと引き締まります。今回は、秀逸なアイデアで気持ちの良い動きを実現するCSS3のエフェクトを集めました。

ブラウザに合わせてレイアウトを変化させるレスポンシブウェブデザイン。複数のデバイスでレイアウトを崩さず、ユーザビリティも高いページを作るのは手間がかかるもの。コーディング時には、レスポンシブWebデザインのならではの問題がたくさん出てきます ...

お問い合わせフォームなどをつくる時に気をつけたいのがスマートフォンでの入力。PCと同じフォームではユーザービリティが低く、せっかくフォームを表示させるところまで行っても、入力が面倒で離脱してしまうこともあります。そこで今回は、フォームを作る ...

CSSだけで簡単実装！入力フォームの新しいエフェクト

Codropsで、入力フォームにフォーカスした時の、面白いエフェクトが紹介されていました。CSSトランジションやアニメーションを使い、様々なエフェクトを実現しています。

INS ...

CSS3でサクッと実装！かっこいいナビメニュー「Fixed Nav Hover Effect」

CodePenにCSSのみで実装できる、ホバーエフェクトがかっこいいナビメニューが紹介されていました。マウスを置くと左からカーテンを引くよう ...

コーディングに便利！使用中のCSSプロパティを簡単にチェックできるchromeの拡張機能「CSS Dig」

Webサイト内で使用しているCSSを解析してくれるChormeの拡張機能「CSS Dig」。コーディングがうまく行かない時のCS ...

【css3】レスポンシブレイアウトに使いこなしたい！CSS3の単位指定「vw」「vh」「vmin」「vmax」

これまで、CSSでのサイズ指定にはpxや%を用いることが多かったのですが、CSS3では新しい単位の指定が可能になりました。そ ...

【CSS】 すぐに使える！デザイン・アニメーションともに洗練されたツールチップ９種

デザイン性にも優れ、きれいにアニメーションするツールチップがCODROPSで公開されていたので、ご紹介します。
まずはデモ

【jQuery】かっこよくて実用的！レスポンシブ対応のLightbox風ギャラリー

画像をかっこよくギャラリー化してくれるjQueryプラグイン「Strip」。レスポンシブで、しかも、IE7以上の主要なブラウザに対応。動画にも対応してい ...

【CSS】スクリプトを使わず、CSSだけで手軽に連番を振る方法

表やリストに順番に連番を振りたいとき、Javascriptでも実装することができますが、もっと手軽な方法があります。
CSSの「counter-reset」と「co ...

【CSS】@font-faceでのWebフォント指定方法と気をつけるべきこと

以前、「今さら聞けない「Google Web fonts」の使い方」という記事で、Webフォントについてご紹介しました。この時はGoogleが提供するサービス ...

ページのロード中に表示されるローディング画像。ユーザーにストレスを感じさせないよう、ローディング状況をアニメーションや数値で表示させるもので、読み込み時間がかかりそうなページには必須の仕掛けです。今回ご紹介するのは、CSSオンリーで実装でき ...

【CSS3】CSSだけで実現！背景画像を固定＆スクロールで切り替えるパララックス風効果

背景画像を画面いっぱいに表示し、パララックス効果のようにスクロールで画像を切り替えるCSSをご紹介します。スクリプトを使用していないので動作が軽く、 ...

【CSS3】CSSだけで実現！背景画像を固定＆スクロールで切り替えるパララックス風効果

背景画像を画面いっぱいに表示し、パララックス効果のようにスクロールで画像を切り替えるCSSをご紹介します。スクリプトを使用していないので動作が軽く、 ...

デスクトップでもモバイルでも、CSSフィルタが標準で使えるブラウザが増えてきており、活用の範囲が大きくひろがっています。そこで今回は、CSSフィルタの主な種類とコードについてサンプルを交えてご紹介します

【CSS】CSSで簡単カスタマイズ！きれい、かわいい、軽いSVGアイコン28個がおすすめ！

美しいグラッフィクが魅力のSVGアイコン28個がセットになった「Optimized Inline SVG Icons」。JPEGやGIFなどの画 ...

【CSS】楽しすぎるアンカーテキストのホバー効果「Inspiration for Inline Anchor Styles」

ホバー効果は画像やボックスだけではありません。CSS3を使えば、アンカーテキストにも、遊び心たっぷりのホバー効 ...

【Javascript】CSS3に自動で、必要最低限のベンダープレフィックスを付けてくれるプラグイン「cssFX」

ベンダープレフィックス対応が面倒なcss3のgradientsやbox-shadowなど、どのように記述していますか？