日本語対応！CSS Flexboxのチートシートを作ったので配布します | Webクリエイターボックス
2021年12月18日 CSS, ダウンロード FlexboxとはFlexible Box Layout Moduleのことで、その名の通りフレキシブルで簡単にレイアウトが組めちゃう素敵ボックスです。現在ほとんどすべての最新ブラウザーでFlexboxをサポートしており、Flexboxを使ったレイアウト組みが今後のWebデザインのスタンダードとなるでしょう。Webクリエイターボックスでは以前からFlexboxの使い方について紹介してきたのですが、最近Flexboxが浸透してきたこともあってか各プロパティの使い方について質問される機会が増えてきたので、チートシートとしてまとめてみました。この記事ではなるべく画像メインでプロパティーの使い方を紹介したいと思います！ ↑私が10年以上利用している会計ソフト！ 動画で学ぶCSS Flexbox この記事はYouTube動画でも解説しています。動画派の
SVGクリッピングマスクにチャレンジ！静止画像も動画も、SVGで切り抜こう！
2014年10月8日 SVG Webクリエイターボックスでちょこちょこ取り上げてきたSVG。今回は第四弾！SVGを使ったクリッピングマスクを紹介します。今までは画像に透過PNGを重ねてマスクを表現できましたが、高解像度ディスプレイに対応させたり、マスク自体に効果をつけるならSVGが便利かなーと思います。サムネイル画像にフレームをつけたり、デザインのアクセントとして使えるので、ぜひマスターしてくださいね！ ↑私が10年以上利用している会計ソフト！ SVGのクリッピングマスク基礎 1. 画像を用意 それではさっそく試してみましょう！まずは切り抜かれる画像を用意し、img タグで表示します。この時画像に mask というクラスを与えておきます。 <img class="mask" src="images/rose.jpg" alt="Rose"> 2. マスクの型を用意 Illustratorで
Credit Card Test Numbers and Paypal Test Accounts
2013年8月28日 Webサイト制作 オンラインショップで最も使われている決済方法がクレジットカード決済。しかし、過去にオンラインショップを制作したことのあるWeb屋さんは、決済時の動作テスト方法にとまどった事はありませんか？動作確認に自分のクレジットカードを使っていたという人が多いかと思います。私もそうやってテストしていました…が、実は各種メジャークレジットカードではオンライン決算時用のテスト番号があるのです！便利ですよね！ ↑私が10年以上利用している会計ソフト！ 以下のクレジットカード番号を使えば、実際に決済が完了した時と同じ動作をします。もちろんテスト番号なので実際に入金などはありません。有効期限は現在の年月より先のものならなんでもOKです。 広く使われているこのテスト番号ですが、対応していないサービスもあります。番号自体のチェックは「【PHP】クレジットカードチェックサンプル」
Introduction to Sass and How to Setup with Mac + Coda
2014年7月31日 CSS, 便利ツール 「Sass」って聞いたことありますか？すっごく簡単に言うと、CSSをもっと便利に・効率良く記述するためのものです。とは言え基本的な書き方はCSSと同じなので、「新しいプログラミング言語」というより「CSSの新しい装備品」といったところでしょうか。一見難しく思えるかもしれませんが、慣れると「これなしではいられない！」とまで思えるSassの魅力と、Macでの設定方法はあまり見ないなーという事でMac＋Codaでの設定方法も紹介します。 ↑私が10年以上利用している会計ソフト！ Sassとは 日本語では「サス」と読まれるようです。拡張子は「.scss」。今までのCSSに変数や計算式を使ったプログラミング風の書き方を加えた .scss ファイルを、変換（コンパイル）してCSSファイルを作成します。例えば「style.scss」のSassファイルを変換する
色覚障がいの方が作ったサイト【We are Colorblind】が勉強になる
2013年3月23日 Webサイト制作, アクセシビリティ, 色彩 「We are Colorblind」というサイトをご存知でしょうか？サイト名を訳すと、「我々は色覚障がい者です」。そう、色を識別することが困難なデザイナーさんの作ったサイトです。数々の例とともに、Webサイト制作における改善すべき点を指摘してくれています。とっても勉強になったので、簡単に紹介します！ ↑私が10年以上利用している会計ソフト！ Webクリエイターボックスでは以前「色覚障がい者に配慮したWebサイトの作り方」という記事で色覚障がいとは何か、どのように見えるのか、また、Webサイト制作において注意すべき点をまとめました。読んでいない方は、まずはこちらに目をとおしてみてくださいね ;) Webサイト「We are Colorblind」の中の人はオランダ在住のデザイナー、Tom van Beveren氏。サイト名
How to Learn iPhone App Development for Non-Programmers
2014年8月17日 スマートフォン 「iPhone/iPadアプリを作るのは難しい」。デザイナーの人は特にそう思い込んでいませんか？確かに新しいプログラミング言語を習得するには時間がかかります。しかし、一度「楽しい！」と思えばこっちのものです。その気持ちだけで難しいものも簡単に乗り越えてしまえるもの。そう、もう無敵です！どんなアプリでも作れるようになります！ここではアプリの開発方法よりも、「どうやって楽しく学習できるか」に焦点を当ててみたいと思います。 ↑私が10年以上利用している会計ソフト！ 準備しよう 必要なもの Mac OS Lion iOSアプリの開発は基本的にMac OSですすめることになります。Apple Storeでポチッちゃいましょう :P XCode 4 iPhone/iPadアプリの開発にはXcodeが必要になります。App Storeで最新のXcodeをダウンロード
海外在住Web屋の私のまわりで最近話題の5つのWebサービス
2013年3月23日 Web関連記事, 便利ツール Web業界では次々に新しいサービスが開発され、それをあーだこーだと言い合うのがWeb屋の楽しみってもんです。現在私が住んでいるバンクーバーでも同様、Webサービスの話に花が咲きます。その中でサービス自体は前々からありますが、最近よく話題にでるなーというものを中心に紹介していきます！日本で何かWebサービスを作ろうとしている方のアイデアの種になるかも？ ↑私が10年以上利用している会計ソフト！ 1. Fiverr Fiverrは5ドルで誰かにサービスや商品を提供できるサイトです。誰でも簡単にアカウントを作成でき、5ドルで売りたいもの・5ドルで買いたい物を投稿できます。5ドルのうち1ドルがFiverrの収益になります。支払いはPaypalかクレジットカード。英語のみですが、同じ英語圏でも通貨の価値に差のある国では5ドルでもいい収入になるようで
嫌われまくりのIE6の現状と仲良く付き合う方法
2017年7月14日 Web関連記事, 便利ツール TwitterでWeb屋さんのつぶやきを見ていると「IE6のせいで…」「IE6さえなければ…」なんて声がよく聞こえてきます。産みの親からも見放されつつあるInternet Explorer 6。一体なぜここまで嫌われているのか？どれほどの人が涙を流してきたのか？そんなIE6と付き合っていく方法は？IE6にまつわる情報を簡単にまとめてみました。 ↑私が10年以上利用している会計ソフト！ IE6のシェア 2001年に世にリリースされたInternet Explorer 6。通称IE6。リリースされて10年たった今も色んな意味で話題のこのブラウザーを使っているユーザーは現在どれくらいいるのでしょう？ マイクロソフトが（！）IE6撲滅のため「Internet Explorer 6 Countdown」というサイトで世界中でIE6がどれくらい使われ
【一部閲覧注意】いろんな意味でインパクトありすぎるWebサイト10 | Webクリエイターボックス
2021年12月27日 Webデザイン 衝撃的な配色、心踊りだすgifアニメーション、斬新な背景画像…そんな一度見たら忘れられないくらいインパクトのあるWebサイトをいくつか紹介しようと思います！また、あなたのWebサイトを素敵に変身させてくれるWebサービスも一緒にご紹介します！ ※一部閲覧注意のWebサイトもあるのでお気をつけください。 ↑私が10年以上利用している会計ソフト！ どこか懐かしさも感じるWebサイト 1.【閲覧注意】激安 格安 爆安ホームページ制作屋 WebクリエイターボックスのTwitter 人気のつぶやき 2010年 トップ30で見事3位に輝いたWeb屋さんのサイト。離れて見ても体に悪影響を及ぼしかねません。 » 激安 格安 爆安ホームページ制作屋 2.【閲覧注意】ACCEPT JESUS, FOREVER FORGIVEN! レインボーの背景が横に高速で流れていきま
WordPressの管理ページをより便利にカスタマイズする方法13
2014年8月22日 Wordpress WordPressを使ってWebサイトを作る際、自分のサイトならさほど気にならない管理画面も、クライアントに納品するのであれば少し手を加えて使いやすくしておきたいところ。少しデザインを変えるだけ、機能を追加・削除するだけで「オリジナル感」がでますよね。今回はそんなWordPressの裏側、管理ページのカスタマイズ方法を紹介します。 ↑私が10年以上利用している会計ソフト！ WordPressの管理ページをカスタマイズ 目次 管理バーを消す コメントに「削除」「スパム」ボタンを追加 ログイン画面：ロゴを変更する ログイン画面：CSSを変更する 管理画面左上の「W」ロゴマークを変更 投稿画面の項目を非表示 サイドバーのメニューを非表示に フッターテキストを変更 ユーザープロフィールの項目を追加 ビジュアルリッチエディターを非表示 投稿画面のビジュアルリ
Webサービスの名前をつける時のアイデアいろいろ
2017年6月30日 Web関連記事 新しくWebサービスやアプリを作るとき、悩むポイントのひとつとなる「サービスの名前」。悩めば悩むほどよくわからない名前になってしまったり…。私ははっきり言って結構苦手です…が、しなきゃいけない時があるので、研究＋ない頭振り絞って考えました。名づけのプロの方の助言なんぞあれば嬉しいですｗ ↑私が10年以上利用している会計ソフト！ まず、Webサービスの名前を考えるにあたって、有名なWebサービスをあげてみました。Facebook、Twitter、Flickr…。どれも短く、英語でいう「2音節」です。音節とは母音を中心としたまとまりで、音節が増えるほど長い単語になります（音節について詳しくはこちら）。2音節というのはサービス名としては短く、リズムカルに発音することができます。 それをふまえ、私の考えたWebサービスの名前を考える時のポイントを挙げてみます。
海外Webサイト・海外Web屋の特徴
2013年3月23日 Web関連記事, 海外情報 以前「日本向けのウェブデザインというのはあるのか?」という記事を読み、「逆に海外のサイトは具体的にどう違うかなあ？」と思ったので、私が感じた海外のWeb業界やサイトの違いを並べてみます。海外向けのWebサイト制作を考えている方、海外で働こうと思っている方の参考になればと思います！ ↑私が10年以上利用している会計ソフト！ 追記：ここで紹介する「海外」とは、私が滞在・就労経験のあるカナダとオーストラリアを指しています。 海外Webサイトの特徴 URLを直接入力 日本ではURLバーに直接入力する人は少ないかと思われますが、海外では目的のブランド名がわかっている場合、とりあえず「.com」をつけてWebサイトを開きます。海外で .com が人気な理由はこのへんにありそうです。そのため、新たに会社やサービスを立ち上げるときは、そのブランド名とドメイ
国内Web業界で活躍する方の素敵な名刺デザインいろいろ | Webクリエイターボックス
2017年6月30日 インスピレーション, 名刺 その人、その会社の第一印象でもある名刺デザイン。海外では多くの名刺デザインが紹介されていますが、日本国内だとなかなか見つかりませんよね。という事で、オフ会で直接頂いた名刺の中から素敵なデザインのものを一挙紹介します！シンプル・ポップ・エレガントなど、様々なデザインがあるので、ぜひ参考にしてみてください！ ↑私が10年以上利用している会計ソフト！ オフ会に参加しました ホームページを作る人のネタ帳のYamada氏が東京に遊びに行くという情報をキャッチしたので、それにあわせて私もオーストラリアから帰国！1月29日に「ネタ帳とWebクリエイターボックスの上京を歓迎してくださいの会」と題し、オフ会を開催しました！総勢約80人とあって、めまぐるしく挨拶まわりを…。もしお話できなかった人がいたら本当にごめんなさいです…。 素敵な名刺頂きました そのオフ
少しのコードで実装可能な20のjQuery小技集
2016年6月22日 jQuery 素敵な動きを手軽に実装できるJavaScriptライブラリ「jQuery」。jQueryには多くのプラグインが揃っていますが、以前書いた「少しのコードで実装可能な20のCSS小技集 」に続き、今回はプラグインなしで実装できるjQueryの小技を紹介します！「jQueryってなんだ？」という人もコピペで実装できますよ！サンプルも用意したのでぜひご覧ください！ ↑私が10年以上利用している会計ソフト！ 追記：この記事で紹介されているいくつかの方法が、今ではCSSのみで実装可能です！詳しくは「かつてはJavaScriptを利用していたものの、今ではCSSのみで実装できる10の小技」をご覧ください。 jQueryの基本的な使い方 まずはjQuery本家からjQueryファイルをダウンロードします。<head> 内に下記を記述し、jQueryファイルを読み込みます
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
