少しのコードで実装可能な20のjQuery小技集 | Webクリエイターボックス

2011/01/24 2967 users 実装 jQuery小技集 コード jQuery 少し

素敵な動きを手軽に実装できるJavaScriptライブラリ「jQuery」。jQueryには多くのプラグインが揃っていますが、以前書いた「少しのコードで実装可能な20のCSS小技集 」に続き、今回はプラグインなしで実装できるjQueryの小技を紹介します！「jQueryってなんだ？」という人もコピペで実装できますよ！サンプルも用意したのでぜひご覧ください！ jQueryの基本的な使い方 まずはjQ... 続きを読む

Web屋の私がブックマークしているサイト65 | Webクリエイターボックス

2011/06/29 2874 users フック Ｗｅｂ屋 チュートリアルサイト フォント 目次

久しぶりに自分がブックマークしているサイトを整理してみました。昔から変わらず愛し続けているWebサービスやチュートリアルサイトなど多数あったので一挙にご紹介します！有名どころからあまり知られていないけど便利なサイトまで、多数あるので時間のある時にじっくり見てみてください！ ブックマークしているサイト 目次 Webサービス デザイン関連 画像関連 CSS jQuery WordPress フォント ... 続きを読む

配色パターンからWebデザインを考える | Webクリエイターボックス

2010/03/23 2556 users 配色パターン webデザイン 色相 彩度 明度

ページを開いた瞬間にそのWebサイトのイメージを左右するほど重要な要素「色」。しかし色の組み合わせ、配色には無限のパターンがあり、正しい配色を見つけるのは簡単なことではありません。ここでは色彩の基礎と配色パターンの見つけ方の一例を紹介します。 まずは色彩の三属性について 色は彩度・明度・色相の三属性（三要素とも呼ぶ）から成り立っています。 彩度 色の鮮やかさの度合いを表します。彩度の高い色は派手・... 続きを読む

カテゴリー別配色アイデア100 | Webクリエイターボックス

2011/04/26 2459 users カテゴリー別配色アイデア100

配色によってそのデザインの印象は大きく変わると思います。色は大切な要素のひとつですね！ということで、色の持つ印象別に配色アイデアをずらりと並べてみます。配色はおなじみ（？）のCOLOURloversから、「これは！」と思うものを選ばせて頂きました。素敵な配色がいっぱいのこのサイト、ぜひ覗いてみてください！また、今回紹介するのはあくまで一例ですので、自分なりにアレンジしてみるのも楽しいと思います。サ... 続きを読む

生活をもっと便利に・楽しくしてくれる無料Webサービスいろいろ | Webクリエイターボックス

2011/04/05 2371 users ファイル web URL ファイル送信サービス WEBサービス

「こんな事がネットでできると便利なのになあ」と思った事はありませんか？生活に「便利」「楽しみ」をくれるサービスが無料であれば嬉しいですよね！ということで、今回はWebに詳しくない人でも簡単にはじめられるWebサービスを紹介します。中には会員登録も不要なものも！今直ぐ試してみてください！ファイルシェアSendoidSendoid会員登録不要のファイル送信サービス。ファイルをアップロード後にURLが生... 続きを読む

人生をより楽しくさせる100の方法 | Webクリエイターボックス

2010/11/29 2286 users SEO フレーズ スレ 人生 納期

今、あなたは自分の人生に満足していますか？もしそうでないなら、今回の記事が役に立つかもしれません。より素敵な人生を送るためのライフハックです。SEOに疲れたとき、1pxのズレで残業したとき、納期から逃げたくなったとき（※どっかで聞いたなそのフレーズ）に、ぜひ読んでみてください！ Webクリエイターボックスを始めた理由 実は約一年前、毎日なんだか退屈だな…と思っていたときに、今回紹介する「100 W... 続きを読む

少しのコードで実装可能な15のスマートフォンサイト用小技集 | Webクリエイターボックス

2012/02/22 2032 users 実装 コード 少し

スマートフォンが普及してきて、Webサイトを作る時、スマートフォンサイトも一緒に制作している方も多くなってきていると思います。私もスマホサイトを制作する機会が増え、だんだんEvernoteに保存していたスマートフォンサイトを作る時の小技がたまってきたので、iPhoneで使える小技を中心にまとめて記事にしてみます。いくつかサンプルも作っているので、スマートフォンからあわせてご覧下さい！ スマートフォ... 続きを読む

少しのコードで実装可能な20のCSS小技集 | Webクリエイターボックス

2010/04/14 2024 users 実装 CSS小技集 コード 少し margin

CSSハックに続き、このCSS小技集も私のブックマークにずらりと並んでいたので、整理も兼ねて記事にしてみました。CSSのお勉強を始めたばかりの頃にブックマークしておいたものも多数。。ということで初心者さんからベテランさんまで参考にしてみてください！ サンプル まずはCSS基礎編 1. divを中央揃えにする ほとんどのサイトが基準となるdivを画面の中央揃えに設定しています。左右のmarginをa... 続きを読む

Web系の人へ！絶対にチェックしておくべきおすすめテック系ブログ20選

2013/02/28 1916 users WEB系 Manaさん Webデザイナー web Web制作

こんにちは！ Web業界の人、もしくはWebに興味のある人なら、日々の情報収集は欠かせません。 しかし、世の中に情報はあふれており、また一日に情報収集できる時間も限られています。 そこで、今回は、「これだけチェックしておけば間違いない！」ブログをまとめてみました！ Web制作 Webクリエイターボックス Webクリエイターボックス 有名なブログですね。 WebデザイナーのManaさんが運営していま... 続きを読む

ECサイトの動作テストに使える、クレジットカードのテスト番号一覧 | Webクリエイターボックス

2012/09/10 1916 users 動作テスト ECサイト クレジットカード デス 動作確認

2012年09月10日 Webサイト制作 オンラインショップで最も使われている決済方法がクレジットカード決済。しかし、過去にオンラインショップを制作したことのあるWeb屋さんは、決済時の動作テスト方法にとまどった事はありませんか？動作確認に自分のクレジットカードを使っていたという人が多いかと思います。私もそうやってテストしていました…が、実は各種メジャークレジットカードではオンライン決算時用のテス... 続きを読む

かつてはJavaScriptを利用していたものの、今ではCSSのみで実装できる10の小技 | Webクリエイターボックス

2017/07/07 1897 users CSS div全体 目次 実装 jQuery小技集

2015年3月17日 CSS 2011年に「 少しのコードで実装可能な20のjQuery小技集 」という記事で数々の便利な制作技を紹介したのですが、時は流れ、今ではCSSのみで表現できるものが多くなってきました。という事で今回はその記事内で紹介した技を中心に、かつてはJavaScriptを利用していたものの、今ではCSSのみで実装できる小技を紹介します。 目次 Div全体をクリックできるようにする... 続きを読む

かつてはJavaScriptを利用していたものの、今ではCSSのみで実装できる10の小技 | Webクリエイターボックス

2015/03/17 1897 users CSS 偶数 div全体 奇数 目次

2011年に「少しのコードで実装可能な20のjQuery小技集」という記事で数々の便利な制作技を紹介したのですが、時は流れ、今ではCSSのみで表現できるものが多くなってきました。という事で今回はその記事内で紹介した技を中心に、かつてはJavaScriptを利用していたものの、今ではCSSのみで実装できる小技を紹介します。 目次 Div全体をクリックできるようにする テーブルの偶数・奇数の行の色を変... 続きを読む

ノンプログラマーのためのiPhoneアプリ開発学習ガイド | Webクリエイターボックス

2012/05/15 1883 users ノンプログラマー

「iPhone/iPadアプリを作るのは難しい」。デザイナーの人は特にそう思い込んでいませんか？確かに新しいプログラミング言語を習得するには時間がかかります。しかし、一度「楽しい！」と思えばこっちのものです。その気持ちだけで難しいものも簡単に乗り越えてしまえるもの。そう、もう無敵です！どんなアプリでも作れるようになります！ここではアプリの開発方法よりも、「どうやって楽しく学習できるか」に焦点を当て... 続きを読む

コーディングのスピードを上げる為の6つの方法 | Webクリエイターボックス

2010/11/01 1802 users コーディング コーディング手順 コーディング能力 簡略化 手順

今より少しでもコーディングを早くできれば、細かいデザインや機能にも時間をかけて取り組めそう…という事で今回はコーディングのスピードを上げるためにできる事を紹介します。便利なツールを使ったり、ちょっとやり方を変えるだけでより早くコーディングができるようになると思います！ 1. コーディング手順を簡略化する これは自分のコーディング能力を高めて手順を省く、便利なツールを使って手間を省くという事です。例... 続きを読む

初心者さんのためのWebサイト制作に役立つリンク集 | Webクリエイターボックス

2010/05/25 1776 users Webサイト制作 リンク集 初心者さん コメント欄 日本

「Webサイト勉強するのにおすすめのサイトを教えてください！」との声が多いのですが、日本のWeb関連チュートリアルサイトをあまり見たことがなかったので、今までおすすめできませんでした…。ということでちょっとググって初心者さんによさそうなサイトをいくつか紹介します。小難しい単語が並んであるようなサイトは避けているつもりですが、わかりにくかったらすみません。他にもおすすめサイトがあればぜひコメント欄に... 続きを読む

空いた時間でお小遣い稼ぎ！フリーランスWeb屋さんにおすすめのサブプロジェクト | Webクリエイターボックス

2011/05/11 1676 users サブプロジェクト フリーランサー フリーランス スキル 収入

フリーランスWeb屋さんの皆さん、フリーランスの仕事はどうやって探していますか？また、依頼がない時のサブプロジェクトは持っていますか？会社をやめ、フリーランサーとして仕事を始めたばかりの頃は、多くの人が「依頼のない、空白の時間」を体験してしまいがちです。そんな期間を有効活用すれば、フリーランスとしての収入も増えると同時に自分のスキルを磨く事もできます。今回はフリーランサーさんの「サブプロジェクト」... 続きを読む

WordPressでどんなサイトでも作れちゃう気になれる無料プラグイン9個 | Webクリエイターボックス

2011/11/29 1659 users WordPress プラグイン マルチサイト機能 機能 少し

WordPressのプラグインってすごいですよね。少しカスタマイズするだけで思い通りの機能のついたWebサイトを作ることができます。今回は「えっ、こんなことまでできちゃうの？」と思わせてくれるような高性能プラグインをいくつか紹介します。WordPress 3.0から追加されたマルチサイト機能を使えばWebサービスとして運営することもできそうなもの多め。どんな風に使おうかわくわくしちゃいますよ！ 1... 続きを読む

時間の節約になるWeb制作関連ツール 12+1 | Webクリエイターボックス

2010/07/12 1604 users 節約 グリッド Photoshopテンプレート 短縮 時間

Webサイトを作る際に、じっくり時間をかけたい作業とそうでないものがあると思います。細かい作業は便利なツールで作業時間の短縮をして効率よくすすめましょう！今回は私がいつも使っているものとSMASHING MAGAZINEで紹介されていて「おぉっ！」と思ったWeb制作に関する便利ツールを紹介します。 Photoshopテンプレート まずは私Mana作のPhotoshop用テンプレート。グリッドなんぞ... 続きを読む

Firefoxで使用していた＆Chromeで使用中の拡張機能 計36個 | Webクリエイターボックス

2011/02/17 1549 users Firefox エクステンション アドオン Chrome 機能

以前「ChromeからFirefoxに戻した6つのくだらない理由」という記事を書いてから約８ヶ月。久しぶりにChromeをいじってみると、エクステンションの数も増え、いろいろと進化しているようです。「Firefoxにあるこの機能がChromeであれば移行するのに…」と思っていた事がだいぶ解消されたので再びChromeに復帰しました！そこでFirefoxに入れていたアドオンと、Chromeで使用し始... 続きを読む

Wordpress オリジナルテーマの作り方 3.0+ | Webクリエイターボックス

2010/11/15 1408 users WordPress カスタムデザイン スタティック コード

Wordpressのオリジナルテーマの作り方について説明していきます。2010年1月に書いた記事とはバージョンが違い、コードも変更されたため、新たに記事にしてみました。慣れると簡単なのですが、初心者には少し難しいWordpressのカスタムデザイン。Wordpressのテーマがどのように動くのか、スタティックのHTMLテンプレートにどうやってWordpressの機能をつけるのかを説明していきます。... 続きを読む

日本語対応！CSS Flexboxのチートシートを作ったので配布します | Webクリエイターボックス

2017/03/30 1264 users チートシート CSS flexbox Flexbox 通り

FlexboxとはFlexible Box Layout Moduleのことで、その名の通りフレキシブルで簡単にレイアウトが組めちゃう素敵ボックスです。現在ほとんどすべての最新ブラウザーでFlexboxをサポートしており、Flexboxを使ったレイアウト組みが今後のWebデザインのスタンダードとなるでしょう。Webクリエイターボックスでは 以前からFlexboxの使い方について紹介してきた のです... 続きを読む

少しの手間で大きく変わる、細部にこだわったWebデザインを | Webクリエイターボックス

2011/08/02 1264 users 細部 手間 webデザイン 少し

「デザインしてみたけどなんだか物足りない…」そんな経験ありませんか？私はよくあります。それで色を変えてみたり、形を変えてみたりと色々試してみるのですが、結局どれもしっくりこなかったり。そんな時は元のデザインにほんの少し手を加えるだけで納得のいくデザインに変わることが多いんです。わずかな装飾で大きく印象を変える。そんな「ひと手間」に注目してみましょう！ グラデーションを加える 「デザインしてみたけど... 続きを読む

これからのCSSレイアウトはFlexboxで決まり！ | Webクリエイターボックス

2015/02/24 1232 users Fle Flexbox ブラウザー 前々 モダンブラウザー

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

画像のノイズをきれいに簡単に軽減する方法 | Webクリエイターボックス

2012/07/03 1222 users ノイズ Photoshop ビフォー・アフター 軽減 暗い場所

2012年07月03日 Photoshop 暗い場所や室内で取った写真はノイズが入りやすいですよね。画像を補正する際、意外とやっかいだったりします。Photoshopには「ノイズを軽減」機能もありますが、なんだかあまり変化がなかったり…。そんなノイズを簡単に軽減する方法をいくつか紹介します。ビフォー・アフターの差にびっくりしちゃうと思いますよ！ Neat Image Neat Imageは画像のノ... 続きを読む

特殊な用紙・加工でかっこいい名刺が作れる印刷会社いろいろ | Webクリエイターボックス

2011/08/17 1220 users 用紙 かっこいい名刺 木目 和紙 加工

以前も「印象に残る名刺の作り方」などで名刺デザインについて触れたのですが、「こんな名刺はどこで印刷してもらえるの？」という質問をいくつか頂いたので、今さらながらまとめてみました。和紙や木目の素材、透明な名刺や型押し加工など、思い通りのデザインが実現できるかも！オンラインで注文できるので、気軽に利用してみてください！ データ入稿ガイド 今回紹介する印刷会社さんはすべてデータ入稿可能です。どの会社もデ... 続きを読む