2018年4月18日 JavaScript, Vue.js Vue.jsはサクッと小さく始められるJavaScriptのフレームワークです。「びゅー」と読みます ;) これまでWebデザイナーがjQueryで作成したような動きもVue.jsでも加えられるのですが、jQueryとは違ってHTMLに条件文を加えたり、アニメーションをCSSで設定することで、JavaScript自体のコードをあまり書かなくても実装できちゃいます。jQueryからの乗り換えを考えている方はぜひ検討してみてくださいね！ ↑私が10年以上利用している会計ソフト！ Vue.jsの使い方 Vue.jsは公式のドキュメントが日本語に対応しており、こちらを読むだけで基本的な使い方は理解できるはず。じっくり読んで、ご自身でもコードを書いて動作を確認し、身につけていくといいでしょう。 最初の一歩目の例として「JavaScriptで

2018年1月16日 Webサイト制作, 便利ツール 普段使っているChromeをより便利にしてくれる拡張機能。私も様々なものを入れていますが、その中でもWeb制作時に使える便利拡張をいくつか紹介します。Firefoxに対応しているものもありますよ！ ↑私が10年以上利用している会計ソフト！ Web Developer Chrome拡張｜Firefox Add-on｜GitHub｜公式サイト Webに携わる人は入れておいて損はない拡張のひとつ！長年利用させていただいてます。1クリックでCSSやJavaScriptを無効化したり、画像の非表示、様々なデバイスサイズでの表示、クラスやID名の表示、定規やカラーピッカーまで揃っています！カラーピッカーはCSSで定義されたものだけでなく、画像からも抽出できるのがすごい。日本語版もあるので試してみてくださいね。 CSS Peeper Chrome拡張

2017年10月11日 CSS, Webデザイン Webデザイン・制作を教えている時に、担当していた生徒さんからこんな悲痛なメッセージをいただきました。「Webサイトのデザインを出してみたものの、本気を出して作ってくださいと言われてしまいました…」。デザインを見てみると、とても美しく整ったものだったのですが、「テンプレートとしてありがち」なレイアウトに見えました。この辺を指摘されたのかな、と。自分でコーディングをすることを考えると、どうしても自分の力で実現できそうなデザインにしてしまうんですね。私も駆け出しの頃はよくありました。そこで今回はちょっとした工夫で少し差がつくCSSの小技をいくつか紹介します。簡単にできるとわかれば、デザインに反映できそうですね！ ↑私が10年以上利用している会計ソフト！ 1. 要素を斜めに配置 通常CSSでレイアウトを組んでいくと、垂直平行のボックスが並んでいく

2017年7月20日 Webデザイン, お知らせ 以前から作ろう作ろうと思って早数年…w ようやく作りました、WebクリエイターボックスのWebデザインギャラリー！作るのに精一杯でまだまだコンテンツは少ないのですが、これから少しずつ増やしていきます！ ↑私が10年以上利用している会計ソフト！ 国内外の素敵なWebデザインをまとめていきます。元々「WebデザイナーにおすすめのEvernote活用術」でも書いたように6，7年前からEvernoteにていいなと思ったWebサイトのスクリーンショット画像を撮りためていました。しかし、自分用においておくだけじゃなくて共有しちゃおう！と思ったのがきっかけです。アウトプットすることでよりそのWebサイトの細かいところまで鑑賞しようとするので、私にとってもメリットでした。 また、ファーストビューのスクリーンショット画像のみではなく、見どころである下層ページ

2015年3月18日 CSS 2011年に「少しのコードで実装可能な20のjQuery小技集」という記事で数々の便利な制作技を紹介したのですが、時は流れ、今ではCSSのみで表現できるものが多くなってきました。という事で今回はその記事内で紹介した技を中心に、かつてはJavaScriptを利用していたものの、今ではCSSのみで実装できる小技を紹介します。 ↑私が10年以上利用している会計ソフト！ 目次 Div全体をクリックできるようにする テーブルの偶数・奇数の行の色を変える フォームにテキストを入れておき、フォーカスで消す（文字色も変更） ラジオボタンとチェックボックスを装飾する スライドパネル アコーディオン ツールチップ 言語によってスタイルを変更 横並びのdivの高さ揃える ボックスを上下左右中央に配置する それでは実際にどんな事ができるのか見てみましょう！サンプルも作ったのでコードと

2017年6月17日 Webデザイン, 便利ツール, 色彩 配色って奥が深いです。「この色いいな！」と思っても、実際にデザインに適用してみるとなんだかイメージと違ったり。このブログでも過去に「カテゴリー別配色アイデア100」という記事で配色例を紹介しましたが、その配色を見たときと使ってみたときとではまた異なる印象になるかもしれません。そこで今回はプレビュー画面で確認しながら配色を作成できるツールを集めてみました！ ↑私が10年以上利用している会計ソフト！ Color Tool – Material Design Color ToolはGoogleのマテリアルデザインの公式配色ツール。右側のパレットからPrimary（メインカラー）とSecondary（サブカラー）を選択すると、左側でプレビューできます。文字色も選べますよ。プレビュー画面は全部で6つ。 このWebサイトの面白いところは、作成

2019年2月3日 CSS 要素の四隅の角を丸めるためのCSSプロパティー「border-radius」。ボックスや画像などの要素に対して適応でき、角丸にしたりまん丸にしたりと、様々な表現が可能です。このプロパティーが使えるようになってから、どれだけコーディングが楽になったか…！今回はそんなborder-radiusの基本的な使い方と、応用表現を紹介します！ ↑私が10年以上利用している会計ソフト！ 無難で王道！正円の円弧を使った角丸 border-radius は「border」とついているものの、border プロパティーの指定がなくても大丈夫。background によって与えられた背景や、img 要素で指定された画像の四隅も丸まめられます。 四隅に同じ値の丸みを与えるなら border-radius: 10px; と記述すればOK。半径10pxの正円の円弧をベースにした角丸を実装で

2021年12月28日 CSS 大きさの異なる複数のボックスを隙間なく並べてタイル状に表示したい！そんな時もありますよね。モザイクレイアウト、Masonryレイアウト、Windows 8 Metroスタイルレイアウト…などなど、さまざまな呼び方のあるこのレイアウト。今回は display: grid という新しい配置方法を使ってレイアウトを組んでみますよ！もちろんレスポンシブにも対応させたいと思います！ ↑私が10年以上利用している会計ソフト！ CSSグリッドの基本の書き方は動画で確認！ 基本的な記述方法は動画でも紹介しています。初めてCSSグリッドに挑戦するよという方はまずはこちらで基礎を覚えておきましょう！ 1. どんなレイアウトにするか書き出す グリッドレイアウトは少し複雑で、何も考えず組んでいくとどこの要素がどうなっているのか…こんがらがってきちゃいます。ご利用は計画的に！慣れるま

2021年12月18日 CSS, ダウンロード FlexboxとはFlexible Box Layout Moduleのことで、その名の通りフレキシブルで簡単にレイアウトが組めちゃう素敵ボックスです。現在ほとんどすべての最新ブラウザーでFlexboxをサポートしており、Flexboxを使ったレイアウト組みが今後のWebデザインのスタンダードとなるでしょう。Webクリエイターボックスでは以前からFlexboxの使い方について紹介してきたのですが、最近Flexboxが浸透してきたこともあってか各プロパティの使い方について質問される機会が増えてきたので、チートシートとしてまとめてみました。この記事ではなるべく画像メインでプロパティーの使い方を紹介したいと思います！ ↑私が10年以上利用している会計ソフト！ 動画で学ぶCSS Flexbox この記事はYouTube動画でも解説しています。動画派の

2018年4月5日 CSS 画像の一覧を表示する時などは、画像のサイズが統一されていると並べて表示させてもすっきりキレイに整って見えますが、必ずしもサイズが同じとは限りません。かといってPhotoshopを使ってすべての画像をリサイズできない…ということもあるでしょう。そんな時はCSSでトリミングすると楽です！今回は「object-fit」というプロパティーを使って、画像の縦横比を保ちつつトリミングする方法を紹介します。 ↑私が10年以上利用している会計ソフト！ 画像を中央の位置でトリミングする まずはこの縦長の画像、横長の画像を並べ、縦横250pxの正方形の形で表示させてみましょう。 img { width: 250px; height: 250px; } CSSでこのように画像に対してサイズを指定すると… こんな感じでグチャッとつぶれて表示されちゃいます…。 そこで画像に対して obj

2016年10月4日 インスピレーション 使ってますか？Instagram。友人の写真を見るのも楽しいですが、美しいデザイン、作品を眺めるのもワクワクしちゃいますよね。そこで今回は、デザイナーやイラストレーター、アーティストなど、多分野で活躍中の方のInstagramアカウントの中から、プライベートの写真少なめで、作品の写真をメインに投稿しているアカウントをいくつか紹介します。 ↑私が10年以上利用している会計ソフト！ Seb Lester

2013年3月25日 インスピレーション, フォント 先日同僚と日本語の文字についておしゃべりしていると、「日本語はまるで絵や記号みたいだ！」と言われました。確かに私達日本人から見るとアラビック文字やハングル文字が記号を並べているように見えるのと同じで、英語圏の人からすると不思議な記号に見えるんでしょうね！ということで探してみるといくつか見つかった素敵フォント。パッと見日本語に見えたり、日本をイメージした英字フォントをいくつか紹介します。なんだかジワジワきますw ↑私が10年以上利用している会計ソフト！ 「日本語風」の英字フォント 1. TokyoSoft ダウンロード（商用利用可） カタカナ風の英字フォント。日本人が見たら間違ったカタカナの羅列ですが、よーく見るとアルファベットになっています。このフォントで「MANA」と書くと、「ポタカタ」になるようです…！ 2. Kaneiwa ダウン

2014年7月23日 Webサイト制作, フリーランス Webサイト制作の依頼を受ける上で、クライアントの中には相場が分からず、必要最低額を遥かに下回る予算を提示する方もいます。多くの場合は必要な作業内容やかかる時間を説明すれば納得して頂けますが、時々「タダでできて当たり前」を前提とする方もいます…。うむむ。タダ…はちょっと行き過ぎですが、なるべく低予算のクライアントにも満足してもらいたいですよね。予算にあわせてできることがないか、考えてみました。 ↑私が10年以上利用している会計ソフト！ 1. 実装する機能を絞る 「必ず取り入れたい機能」「できれば取り入れたい機能」「取り入れられたら嬉しい機能」と、要望の優先順位を話し合い、予算に応じてできないものは思い切って削除したり、違う方法を考えて予算内に収まるように検討します。「時間 vs お金 vs クオリティ」でも書いたように、取り入れたい要

2013年3月25日 Web Design Web design gallery websites are very useful to get inspiration. When you had created great works, show off your creative design which you are really proud of! All of the ones featured in this post are free to submit to. I will share some Japanese web design galleries as well. [adA-en] You can submit your website from “Submit” page. People who are managing those gallery websit

2014年8月17日 Webサイト制作 8回に渡り連載した「実践で学ぶWebサイト制作ガイド」がついに終わったので、ここで簡単にまとめておきます。この記事では基本的な流れを説明していますが、リンクをクリックでより詳しい説明記事を読むことができます。これからWebサイトを作ってみたい！という人のお役に立てればいいなあと思います :) サンプルファイルもあるので、ご自由にダウンロードしてくださいね！ ↑私が10年以上利用している会計ソフト！ サンプルファイル 今回作成したファイルをサンプルとして配布します。参考になれば幸いです。説明するために制作したものなので、学習目的以外でのご利用はご遠慮ください。Google Chrome, Safari, Firefox, IE8・9で動作確認済み。 デモ ダウンロード 1. プランニング 誰のため？何のため？Webサイトを作り始める前に。 突然Phot

2014年8月17日 Photoshop, Webサイト制作, Webデザイン 「連載！実践で学ぶWebサイト制作ガイド」第四弾はAdobe Photoshopというツールを使って実寸のサイトデザインを作成します。Photoshopで説明していきますが、同様のグラフィックツールでもOK。Photoshopは体験版もあるのでぜひご利用ください。説明しやすいよう、簡単なデザインにしたつもりですが、すごく長くなってしまったような…。わかりにくくてすみません X( ↑私が10年以上利用している会計ソフト！ 実践で学ぶWebサイト制作ガイド：その4 目標：実際の幅にあったサイトデザインが作れる・Photoshopの基本的なツールを使った装飾ができる 必要なもの：Adobe Photoshop 対象レベル：Photoshopの基本的なツールの使い方がわかる 事前知識は以下の記事でおさらい！ これからP

2014年8月17日 HTML, Webサイト制作 連載企画「実践で学ぶWebサイト制作ガイド」も佳境を迎え、今回いよいよHTMLマークアップの段階に突入します！「デザインは好きだけど、コーディングは苦手…」という人も、焦らず少しずつ記述していけばちゃんと形になります！お手持ちの「TextEdit」や「メモ帳」などのテキストエディタツールを開いて、さっそく始めましょう！ ↑私が10年以上利用している会計ソフト！ 実践で学ぶWebサイト制作ガイド：その6 目標：正しいページ構造のHTMLが書ける 必要なもの：Windows メモ帳 や、Mac OS Text Editなどの文章エディタツール。もちろんAdobe DreamweaverなどのWeb系オーサリングソフトがあるならそれでOK 対象レベル：HTMLの基礎知識がある・基本的なHTMLタグが手打ちで書ける 目次 誰のため？何のため？We

2014年8月17日 Webサイト制作, 便利ツール WebクリエイターボックスではWeb制作の応用技術をよく紹介していますが、基本の流れはちゃんと説明していないな…ということで、「連載！実践で学ぶWebサイト制作ガイド」として、実際に1つのサイトを作りながらWeb制作の流れと方法をまとめて書いてみることにしました。この連載企画はブログ開始当初に考えていましたが、2年半ほど忘れてました…。今回は「ワイヤーフレームの作り方」です。これも過去に「Webサイトの骨組み: ワイヤーフレームを素早く・手軽に・美しく制作する」という記事を書いていたのですが、私の使用するツールも変わったので、改めて記事にすることに。 ↑私が10年以上利用している会計ソフト！ 実践で学ぶWebサイト制作ガイド：その3 目標：わかりやすいワイヤーフレームを作成することができる 必要なもの：紙とペン 対象レベル：超初心者OK

2014年7月23日 便利ツール 以前、元お隣さんが「非WEB屋でもサイトが作れる驚異的サービス／『サイトを作る』という敷居がどんどん低くなっていると実感する物色々」という記事でWeb制作の知識がなくても簡単にWebサイトを作れるサービスを紹介してくれていました。HTMLやデザインの知識がなくても、テーマを選んでコンテンツを入力すればサイトが作れるサービスがどんどん増えていますね。今回は同様のサービスですが、より多機能な「Edicy」を紹介しようと思います。 ↑私が10年以上利用している会計ソフト！ Edicyの特徴 動画を見てもわかる通り、Edicyは簡単にブラウザー上でWebサイトが作れるサービスです。 とにかく試してみましょう！ホームの「Try for Free」ボタンからアカウントを作成します。「.edicy.co」のドメインが取得できます。