PAGETOP

CSSについて, SEO対策・アクセスアップ, WEBデザイン

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

jQueryについて, WEBデザイン

フォームによくある、郵便番号を入力するだけで、住所が自動補完されるシステムをカンタンに実装できる国産のjQueryプラグイン「jQuery.jpostal.js」をご紹介します

jQueryについて, WEBデザイン

CSS3のアニメーションを利用したホバー効果やツールチップ表示が増えてきていますが、今回はモーダルウィンドウをアニメーションで表示させるスクリプト「animatedModal.js」をご紹介します。横からのスライド、バウンド、フェードと多彩 ...

jQueryについて, WEBデザイン, 便利なサイトの紹介

レスポンシブ、フリック対応のコンテンツスライドショー「Flickity」を使い方・設定方法ご紹介します。jQueryに依存せず、単体で動き、スマホでの動作もスムーズ。実装したい機能はほぼオプションで対応してくれているので、カスタマイズも非常 ...

CSSについて, WEBデザイン

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

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

INS ...

jQueryについて, SEO対策・アクセスアップ, WEBデザイン

jQuery不要!レスポンシブのグリッドレイアウトを作ってくれるスクリプト「Masonry」

複数のボックスをタイル状に並べるグリッドレイアウト。これを、簡単に実装できるスクリプト「Masonry」をご紹介します。
サイズの異な ...

CSSについて, WEBデザイン参考

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

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

CSSについて, WEBデザイン, 便利なサイトの紹介

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

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

CSSについて, WEBデザイン

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

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

jQueryについて, WEBデザイン

【jQuery】ブランドサイトにも最適!ゴムのように弾むコンテンツスライダーで魅せる「WOBBLY SLIDESHOW EFFECT

限られたスペースの中で、効果的にコンテンツを見せていくスライダーは訴求力が高く、ブランドサイトなどにも ...

CSSについて, WEBデザイン

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

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

jQueryについて, WEBデザイン

【Javascript】alert(アラート)をスタイリッシュにデザインするスクリプト「Sweet Alert」

Webサイトで警告メッセージを出すとき、Javascriptのalert(アラート)を使用しますが、ブラウザ独自のものをそ ...

CSSについて, jQueryについて, WEBデザイン

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

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

CSSについて, jQueryについて, WEBデザイン

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

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

CSSについて, jQueryについて, WEBデザイン

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

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

jQueryについて, WEBデザイン

【javascript】レスポンシブなタブメニューをサクッと実装できる「Responsive Full Width Tabs」

PCサイトをレスポンシブ化する上で悩むのが、メニューのあしらい。
特にタブメニューとなると、スマホサ ...

CSSについて, WEBデザイン

No Image

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

CSSについて, WEBデザイン

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

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

CSSについて, WEBデザイン

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

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

jQueryについて, WEBデザイン

【Javascript】3Dアニメーションで切り替わるレスポンシブのコンテンツスライダー

奥行きのある3D効果で画像を配置し、アニメーションをしながら切り替わる「Tilted Content Slideshow」。Janvascript ...

CSSについて, WEBデザイン, 写真撮影・カメラ

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

CSSについて, WEBデザイン, 便利なサイトの紹介

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

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

HTMLについて, WEBデザイン

【HTML5】もう入力でうんざりされない!一問一答、全画面のフォームアイデア

商品の注文やアンケートの入力フォームというと、一画面の中に名前やアドレスなどの記入必須事項が縦にいくつも並んでいるものがほとんどです。
ですが、今回紹 ...

jQueryについて, WEBデザイン

【jQuery】テーブルの見出しがスクロールに付いてくる「jquery.stickyheader.js」

テーブルで大量のデータを見せたい時におすすめなjQueryプラグイン「Sticky Table Headers」をご紹介します。縦 ...

CSSについて, jQueryについて, WEBデザイン

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

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

CSSについて, jQueryについて, WEBデザイン

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

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

CSSについて, WEBデザイン, 便利なサイトの紹介

【便利ツール】CSS3のグラデーションをあっという間に作ってくれるジェネレーター2つ

css3のコーディングの中でも、特に記述が煩雑なのがグラデーション。いちいちカラーコードで指定せず、ジェネレータを使って視覚的に、サクッと実装してしま ...

jQueryについて, WEBデザイン

【jQuery】テーブルのデータを棒グラフにしてくれるプラグイン「TableBarChart」

「TableBarChart」は、テーブルの数値をアニメーション付きで棒グラフとして見せてくれるプラグイン。
使い方もカスタマイズも ...

jQueryについて, WEBデザイン

【jQuery】飛び出して弾む!アニメーションがキュートなツールチップStackbox.js

飛び出したり、ひっくり返ったり、ぶら下がったり、多彩なアニメーションで楽しませてくれるツールチップ「Stackbox.js」。遊び心満載で、軽 ...

CSSについて, WEBデザイン

【CSS3】コピペで5秒!背景画像を画面いっぱいに表示する

背景画像をブラウザいっぱいに表示するテクニックを、シンプルかつ簡単に叶えるスタールシートをご紹介します。もちろん、レスポンシブ対応です。

元のサイトはこちら。