【jQuery】テーブルのデータを棒グラフにしてくれるプラグイン「TableBarChart」
「TableBarChart」は、テーブルの数値をアニメーション付きで棒グラフとして見せてくれるプラグイン。
使い方もカスタマイズも ...
【jQuery】飛び出して弾む！アニメーションがキュートなツールチップStackbox.js
飛び出したり、ひっくり返ったり、ぶら下がったり、多彩なアニメーションで楽しませてくれるツールチップ「Stackbox.js」。遊び心満載で、軽 ...
【Photoshop】デザイン作業を効率化！いろんな形のカスタムシェイプ素材
ハートや矢印など、複雑な形状をドラッグで簡単に描画できるカスタムシェイプ。拡大縮小やスタイル変更も自在で、イラストを描く時間がない！という忙しいデザイナーさん ...
コピペで５秒！CSS3で背景画像を画面いっぱいに表示する
背景画像をブラウザいっぱいに表示するテクニックを、シンプルかつ簡単に叶えるスタールシートをご紹介します。もちろん、レスポンシブ対応です。
元のサイトはこちら。
【SEO】Googleからペナルティーを受けないプレスリリースの発信方法
プレスリリースとは、企業などから、テレビ・ラジオ・新聞・雑誌・ニュースサイト等、各報道メディア向けに発表される声明のことで、新製品のPRなどに効果的なプ
簡単に素敵なオリジナルロゴを作れるウェブツール「Squarespace Logo」
デザインができなくても、簡単にかっこいいロゴを作れる「Squarespace Logo」。
ロゴテキストを打ち込んで、アイコンを一つ ...
顔写真をキレイに加工するためのウルテク！photshop
今や顔写真を使う上で、肌のレタッチは当然のものとなっています。けれどやり過ぎは禁物。「本人と雰囲気が違う」どころか、アンドロイドのような顔になってしまう ...
アニメーションしながら切り替わるスイッチをCSSのみで作るチュートリアル
クリックするとオンとオフが切り替わるスイッチを、CSSのみで実装するチュートリアルがBLOOM WEB DESIGN（）で紹介されていました。クリック ...
知っていれば便利な「ＣＳＳ18選」
普段あまり使わないCSSセレクタを使いたい時、どんな書式だったっけ？とその都度調べていませんか？また、CSSのチュートリアルなどを見ていて、この記号は何だろう・・・ということはありませ ...
【CSS】JS不要！SVGとCSSでアニメーションするクールなマウスオーバーエフェクト
マウスオーバーした時に、ボックスの周りをラインがキラッと走るエフェクトがcodropsで紹介されていました。これまでにはなかった新感覚の動きがとても ...
Webデザイナー人気の「無料写真素材サイト8選！」
国内外に数多く存在する写真素材サイト。無料でも、有料素材とひけを取らない優れた写真がたくさん公開されており、Webデザイナーにとっては強い味方です。今回はその中 ...
【CSS】何度も試したくなる！印象的なCSS（+JavaScript）アニメーション８選
（+JavaScript）アニメーション８選
クリックやマウスオーバー時のアニメーションが美しいと、何度でも繰り返し動作を見たくなりますよね。今回は、ユーザーがついつい試し ...
【Webライティング】集客できるコピーライティング ３つの法則
リンクテキストの文字を見る時間はほんの１～２秒程度、さらにページを見る時間は５秒とも言われるスピーディーなWebで、一瞬で注目を集めて最後まで読ませる文章を書くにはどうすれ ...
【photoshop】テキストを１クリックで３Dに！無料アクション
photoshopの３D機能はとても優秀ですが、細かな設定は初心者にはとっつきにくいもの。そこで今回は、数パターンの３D風エフェクトを、１クリックで適用できる無料アクシ ...
【wordpress】プラグインありorなし？好みの方法でパンくずリストを表示させよう
Wordpressでパンくずリストを作る方法は、プラグインあり、なしのいずれでも可能。どちらが良いとは一概に言えず、管理方法などによってもメリット・ ...
【デザイン】Illustratorの「合成フォント」で作業効率をアップする
文字組みで、和文と欧文でフォントを使い分けることはよくあると思います。一部だけなら文字ごとに選択、フォントを変更しベースラインをそろえる・・・という作業を個々に ...
画像・イメージ検索のSEO対策についてまとめました
Webでは、SEOを意識したコーディングやライティングが求められますが、ついつい忘れがちなのが画像関係のSEO。しかし画像がメインのサイトでは、画像周りのSEO対策も重要です。上手に最適化 ...
【CSS】SCSSのコーディングを劇的に便利にするツール「Compass」を使おう
以前、基礎編、導入編、実践編の３回にわたってご紹介した【CSS】コーディングが超絶早くなる！Sass（SCSS）を使ってみよう！では、Sassを活用して ...
無料で使える！サイトマップ作成に便利なオンライン作図ツール
サイト制作をする上で重要な基礎作りの部分にあたるサイトマップ作成。しっかりと作り込み、方向性がぶれないようチームで認識を共有しておく必要があります。そこで今回は、サイトマップ作 ...
【CSS】コーディングが超絶早くなる！Sass（SCSS）を使ってみよう！実践編
Sassの魅力、そして導入手順と２回にわたってご紹介してきましたが、今回はいよいよ実践編。Sassの一番大きなメリットと言えるMixinを中心に、効率的な ...
【CSS】コーディングが超絶早くなる！Sass（SCSS）を使ってみよう 導入編
基礎編では、Sassのメリットと、SCSSという文法での基本的なコードの書き方をご紹介しました。ではさっそくSassを使う環境を整えていきましょう。複雑な ...
【CSS】コーディングが超絶早くなる！Sass（SCSS）を使ってみよう！基礎編
「便利らしいのは知っているけど、導入に踏み切れずにいる」
「最初の準備が大変そうで面倒」
そんな理由でSassを使うのをためらっている方も ...
Photoshopでテキストをカッコよくデザイン！圧巻のテキストエフェクトチュートリアル８選
photoshopの機能が進化するにつれ、ダイナミックにデザインされたテキストロゴを多く見られるようになりました。一度は ...
CSS3ベースの美しすぎるナビゲーションメニュー8選
アニメーションや3D効果など、CSS3の進化が止まりません。今回は、美しい質感や動きを実現した、ナビゲーションメニューをご紹介します。
1.A Little Men ...【デザイン】配色に困ったら迷わずコレを使おう！便利ツール２つ
困った時に使える配色ツールはたくさんありますが、ソフトを起動することなく、すぐに使えるとなおさらうれしいですね。今回は、ブラウザ上で手軽に使える、直感的で便利なツールを２つご ...
SVGとは？HTML５時代に注目を集めるSVGの基本を理解する
HTML５時代のデザインパーツとして注目を集めているSVG。Flashとは異なり、iOS環境下でも利用でき、Internet Explorer9が正式対応したことも相まって ...
【Photoshop】写真をあっという間にミニチュアぽくしてしまうチュートリアル
Visual Photo Guideで、どんな写真でもミニチュアの模型のようなイメージに変えてしまうチュートリアルが紹介されていました。
（）
【jQuery】カレンダーから日付を選択させる「Datepicker」をサクッと実装
入力フォームで日付を選択する際、ドロップダウンよりもカレンダー表示のほうが見やすく、誤入力を防ぐことができます。そんなユーザビリティに配慮したカレンダ ...
【Photoshopお役立ち機能】大量の画像に同じアクションを適用できる機能二つ
画像に同じ処理を行うときに便利なアクション機能。複数画像を開いてアクションを再生する、という作業を繰り返し行ってもよいのですが、画像の枚数が20枚、30枚 ...
【ホームページデザインのコツ】ワンパターンから抜け出す！テーブルデザインの参考サイト６選
価格やスペック表としてよく用いられるテーブル。どんなデザインにしようか迷って、結局いつも通り・・・ということはありませんか？
今回は、 ...