【第4弾】少しのコードで実装可能な10のCSS小技集 | Webクリエイターボックス

2021/03/04 212 users 実装 目次 CSS小技集 言語 配置

2021年3月4日 CSS CSS小技集シリーズの第4弾！「【第3弾】少しのコードで実装可能な15のCSS小技集」から約2年。またまた便利でサクッと使えるコードが続々登場しています！初心者さんからベテランさんまで要チェック！ 目次 要素の上下左右中央配置 画面幅いっぱいに画像を配置 リストマーカーの色を変える 言語にあわせ... 続きを読む

Vue.js、Nuxt JSを学習するときにやったこと | Webクリエイターボックス

2021/01/21 165 users Vue.js GATSBY 単一ファイルコンポーネント 手順

2021年1月21日 JavaScript, Vue.js 以前「WebデザイナーのためのVue.js事始め」という記事でVue.jsについて触れたのですが、それから今まで、どんな手順で勉強してきたのかを紹介してみます。途中ReactやGatsbyを取り入れたりもしていたのですが、結局 .vueファイルでの単一ファイルコンポーネントが楽だなーと思い、今... 続きを読む

SVG形式のファビコンを設置しよう | Webクリエイターボックス

2020/02/12 137 users ファビコン SVG PNG SVG形式 画質

2020年2月13日 SVG, Webサイト制作 つ・い・に！ファビコンもSVG形式が対応されるようになりました！SVGを使えばこれまで使われてきたPNGなどのビットマップ形式とは違い、拡大縮小しても画質が劣化しません。つまり、過去記事「クリエイティブなファビコンを設置しよう」で紹介したように多くのサイズを用意する必要は... 続きを読む

Illustratorで手描き風イラストを描く方法や無料ブラシいろいろ | Webクリエイターボックス

2019/11/15 50 users Illustrator ベクター形式 ちん イラスト 拡大

2019年11月15日 Illustrator ベクター形式で描かれたイラストは、拡大・縮小しても画像が劣化せず、編集もらくちん。なので多くのイラストはベクター形式を採用しています。Illustratorではベクター形式のイラストを手描き風タッチにすることも可能ですよ。久しぶりにIllustratorでがっつりイラストを描く機会があったの... 続きを読む

CSSで見出し固定＋レスポンシブ対応の表を作成 | Webクリエイターボックス

2019/10/16 345 users CSS 作成 レスポンシブ対応 タイムテーブル 制限

2019年10月17日 CSS, HTML5, Webサイト制作 料金表やサービスプランの比較、タイムテーブルなどなど、使う場面が多い割には制限も多く、初心者には少しとっつきにくいと思われがちな表。今回はあると便利な表の見出し固定やレスポンシブ対応の方法を紹介します。 見出しの行を固定する 表の中の行が増えてくると、スクロ... 続きを読む

Webサイトをダークモードに対応させよう | Webクリエイターボックス

2019/09/26 228 users ダークモード CSS 普及 モニター Webサイト

2019年9月27日 CSS, JavaScript ダークモードとは画面の背景を黒基調にしたデザインのこと。OS側での設定の他、人気アプリやWebサイトで続々対応されています。これまでは明るい部屋でモニターを眺めることが多かったのですが、スマートフォンの普及で暗い場所でも画面を見る機会が増え、夜間目に優しいダークモードが増... 続きを読む

Webアイコンフォントの【Font Awesome】がアカウント登録必須になったので、使い方をおさらいしました | Webクリエイターボックス

2019/09/04 64 users Font Awesome アイコン 汎用性 多数 画像

Webアイコンフォントの【Font Awesome】がアカウント登録必須になったので、使い方をおさらいしました 2019年9月5日 Webサイト制作, 便利ツール Font AwesomeはWebページ上にアイコンを表示させるためのサービス。汎用性の高いシンプルなアイコンが多数用意されています。アイコンの画像をご自身で用意しても構いません... 続きを読む

【第3弾】少しのコードで実装可能な15のCSS小技集 | Webクリエイターボックス

2019/05/16 591 users 実装 CSS CSS小技集 コード 進化

2019年5月17日 CSS CSS小技集シリーズの第3弾！「【第2弾】少しのコードで実装可能な20のCSS小技集」から3年が経ち、さらに便利でサクッと使えるコードが続々登場！特にこれまではJavaScriptで実装していたものがCSSだけで実現できるようになったりと、進化が凄まじいです。初心者さんからベテランさんまで要チェック！ ... 続きを読む

Adobe XDでアニメーションのあるプロトタイプをデザインしよう | Webクリエイターボックス

2019/02/07 51 users プロトタイプ アニメーション デザインカンプ アプリ 作成

2019年2月7日 Webデザイン, XD Webサイトのデザインカンプを画像として作成…というのはもう昔の話。最近ではアニメーションの伴ったWebサイトやアプリばかりで、それを画像で説明するのはなかなか困難です。Adobe XDを使えばアニメーションを含めたプロトタイプが作成できますよ！ 作成するもの 今回はAdobe XDを使って... 続きを読む

表示領域にピタッと移動！CSSでスクロールスナップを実装しよう | Webクリエイターボックス

2019/01/11 76 users CSS スクロールスナップ スクロール位置 近年 画面

2019年1月11日 CSS 画面領域いっぱいに広がるフルスクリーンレイアウト。近年ではよく目にしますね。スクロールした時に画面にピタッと各エリアを表示させたい時に使えるのが「CSSスクロールスナップ」です。JavaScriptなしでスクロール位置を調整してくれますよ！ スクロールスナップの基本 See the Pen scroll-snap ba... 続きを読む

商用利用OK！2018年にリリースされた無料フォント40 | Webクリエイターボックス

2018/12/19 67 users 商用利用OK フォント 素敵フォント 無料フォント40 過去

2018年12月19日 フォント 2018年もあとわずか！今年も数多くの素敵フォントがリリースされました！この一年を振り返って、「これは！」と思ったフォントをいくつか紹介します。どれも無料でダウンロードでき、商用利用可能なものです。みなさんのお気に入りが見つかると幸いです。 過去の年末フォント紹介記事 2017年に... 続きを読む

CSSすら不要！detailsとsummaryタグで作る簡単アコーディオン | Webクリエイターボックス

2018/11/14 207 users details アコーディオン CSS 補足説明 長い文章

2018年11月14日 CSS, HTML5 長い文章や補足説明をアコーディオン（折りたたみ）にしたい時ってありますよね。そんな時に使える details と summary タグを紹介します。CSSなしでも実装できますが、CSSを加えてより素敵な表現をする方法も挑戦しましょう！ detailsとsummaryタグの基本的な使い方 details タグで囲んだ部... 続きを読む

Googleドキュメントでブログを生成できるサービス「You Don’t Need WordPress」 | Webクリエイターボックス

2018/10/09 55 users Googleドキュメント CMS ネーミング 角度 サービス

2018年10月9日 便利ツール 手軽にWebサイトを作成するサービスは多々ありますが、「You Don’t Need WordPress」というWebサービスはGoogleドキュメントと連携させるという、今まであまり見なかった角度から発足したCMS。「WordPressは必要ないよ」という挑戦的なネーミングも気になったので、さっそく試してみました！ ... 続きを読む

Web業界で活躍する日本人の素敵な名刺デザイン 2018年版 | Webクリエイターボックス

2018/08/28 52 users 名刺デザイン WEB業界 2018年版 日本人

2018年8月28日 インスピレーション, 名刺 今年はYATのblogのYAT氏と一緒に「デザインシンキングセミナー」を各地で行っています。そこで多くの方とお話する機会があり、たくさんの名刺をたくさんいただけました！ありがとうございます！今回は直接頂いた名刺の中から素敵なデザインのものを一挙紹介します！名刺を作成す... 続きを読む

JavaScriptで水や波、パーティクル等、ふわふわゆらゆら系の動きを表現 | Webクリエイターボックス

2018/08/07 409 users アクセント プラグイン サンプル パーティクル デザイン

2018年8月7日 JavaScript, jQuery Webサイトのアクセントに、ちょっとした動きをつけたい時ってありますよね。一から作り込むのは大変ですが、プラグインを使えば意外と簡単に実装できますよ。夏らしい涼し気なデザインになりそうです。サンプルがうまく動かない時はデモ画面右上の「EDIT ON CODEPEN」をクリックして別... 続きを読む

Adobe XDでシンプルなワイヤーフレームを作ろう！便利なUIキットいろいろ | Webクリエイターボックス

2018/07/02 124 users ワイヤーフレーム デザインテンプレート UIキット 前段階

2018年7月2日 Webサイト制作, XD 新たなデザインツールとして浸透してきているAdobe XD。Webクリエイターボックスでも何度か紹介してきました。Adobe XDはデザインを作り込むだけではなく、その前段階であるワイヤーフレーム制作にもおすすめです。様々なUIキットと呼ばれるデザインテンプレートが配布されていますが、... 続きを読む

Webデザイナーの私はこんな風に情報収集しています | Webクリエイターボックス

2018/05/24 97 users Webデザイナー 情報収集 パネルディスカッション ルール

2018年5月24日 Web関連記事 先日 CSS Nite in KOBE, Vol.34 にて登壇させていただきました！ご参加くださった皆さん、ありがとうございました！その中でデザイナーとしての情報収集・情報発信についてパネルディスカッションもあったのですが、時間の関係であまり多くを語れませんでしたので、今回改めてまとめてみようと思います！ 情報収集する時のルール ただやみくもに、なんとなーく... 続きを読む

WebデザイナーのためのVue.js事始め | Webクリエイターボックス

2018/04/18 419 users Webデザイナー jQuery CSS アニメーション コード

2018年4月18日 JavaScript , Vue.js Vue.js はサクッと小さく始められるJavaScriptのフレームワークです。「びゅー」と読みます ;) これまでWebデザイナーがjQueryで作成したような動きもVue.jsでも加えられるのですが、jQueryとは違ってHTMLに条件文を加えたり、アニメーションをCSSで設定することで、JavaScript自体のコードをあまり書... 続きを読む

CSS Gridを使ったレスポンシブ対応の基本レイアウト | Webクリエイターボックス

2018/04/04 112 users CSS Grid レスポンシブ対応

2018年4月4日 CSS 以前「 CSSグリッドレイアウトで、サイズが違う複数のボックスをタイル状に配置する 」という記事で紹介したCSSグリッドレイアウト。皆さん使っていますか？前回はちょっと複雑なレイアウトに挑戦しましたが、今回はCSSグリッドを使った基本的な2カラム・3カラム・カードスタイルのマルチカラムレイアウトの作り方を紹介します！ 2カラム まずは基本の2カラム。CSS Gridのい... 続きを読む

Adobe XDでWebデザインをしよう！画面作成からページ推移までの手順を紹介 | Webクリエイターボックス

2018/03/15 122 users Adobe XD 手順 ページ推移 webデザイン 画面作成

2018年3月15日 Webデザイン , XD デザインやプロトタイプを作成できる Adobe XD 。みなさん使っていますか？ 先日アップデート もされ、Photoshopとの連携がより簡単になったり、 Sketch ファイルも扱えるようになるなど、進化が進んでいますね。これまではWebサイトのデザインにはPhotoshopが多く使われてきましたが、これからはXDが主力となっていきそうな予感。と... 続きを読む

初心者向け！HTML/CSSのコーディング手順をイチからしっかりと。 | Webクリエイターボックス

2018/03/02 90 users CSS コーディング コーディング手順 イチ HTML

2018年3月2日 CSS , HTML5 , Webサイト制作 HTMLやCSSの書き方を勉強してみたという初心者さんから、いざ自分でWebページを作っていくとなると、何から始めればいいのやら…？という声をよく耳にします。きちんと構成を考えてコーディングを始めないとレイアウト崩壊の危機…！今回は完成したデザインをHTML/CSSでコーディングしていく第一歩目の手順を紹介します。 今回作るWebサ... 続きを読む

CSSで変数（カスタムプロパティ）を使ってみよう | Webクリエイターボックス

2018/02/07 137 users less Sass CSSプリプロセッサー CSS変数 変数

2018年2月7日 CSS プログラミングではおなじみの変数。SassやLESSといったCSSプリプロセッサーをお使いの方もよく使うものですね。この一度定義しておけば繰り返し利用できる便利な変数が、CSSでも使えるようになりました！今回はCSS変数の使い方と注意点をまとめていきます！ CSS変数とは？ 公式では「カスケード変数のためのCSSカスタムプロパティ（CSS custom properti... 続きを読む

Web制作者のためのおすすめChrome拡張15 | Webクリエイターボックス

2018/01/16 388 users WEB制作者

2018年1月16日 Webサイト制作 , 便利ツール 普段使っているChromeをより便利にしてくれる拡張機能。私も様々なものを入れていますが、その中でもWeb制作時に使える便利拡張をいくつか紹介します。Firefoxに対応しているものもありますよ！ Web Developer Chrome拡張 ｜ Firefox Add-on ｜ GitHub ｜ 公式サイト Webに携わる人は入れておいて損... 続きを読む

商用利用OK！2017年にリリースされた無料フォント40 | Webクリエイターボックス

2017/12/26 72 users 商用利用OK フォント 素敵フォント 無料フォント40 過去

2017年12月26日 フォント 2017年もあとわずか！今年も数多くの素敵フォントがリリースされました！この一年を振り返って、「これは！」と思ったフォントをいくつか紹介します。どれも無料でダウンロードでき、商用利用可能なものです。みなさんのお気に入りが見つかると幸いです。 過去の年末フォント紹介記事 2015年にリリースされた無料フォント35 2016年にリリースされた無料フォント30 日本語フ... 続きを読む

レスポンシブ対応！Webサイトにグラフを表示できるJavaScriptライブラリー3つ | Webクリエイターボックス

2017/11/17 71 users グラフ ドキュメント Chart.js レスポンシブ対応

2017年11月17日 JavaScript グラフを必要とするWebサイトは限られるかもしれませんが、いざという時に知っておくと便利なグラフ作成用JavaScriptライブラリー。意外とレスポンシブ対応のものが少なかったので、対応しているものを集めてみました。 1. Chart.js 公式サイト ｜ サンプル ｜ ドキュメント ｜ GitHub Chart.js はグラフ作成用JavaScrip... 続きを読む