コピペでOK！セクション間のおしゃれな仕切りをカスタマイズして実装できる便利なWebサイト3つ | Webクリエイターボックス

2021/09/13 16 users コピペ

2021年9月14日 CSS, SVG, Webサイト制作 上下に並んだセクションの間に、斜めのラインや模様を取り入れると一気に印象が変わります。複雑な図形もSVGを使って実装できますが、一からコーディングするとなるとなかなか手間がかかります。そこで予めいろんな模様が用意されているWebサイトを使って手軽に挿入してみましょ... 続きを読む

ポートフォリオサイトをNuxt + Netlifyに移行しました | Webクリエイターボックス

2021/07/14 14 users ポートフォリオサイト Nuxt Netlify Vue.js

2021年7月14日 Nuxt JS, Vue.js, Webサイト制作 WordPessで作成していた私のポートフォリオサイトをNuxt JSで作り変えてみました。デザインや内容はそのままで、管理体制を変えた感じですね。Nuxtに移行した理由や悩んだところをまとめてみます。 移行を決めた理由 元々私のポートフォリオサイトは、まだ私が学生だった... 続きを読む

デザインカンプからのHTML/CSSコーディングの練習になる学習サイト | Webクリエイターボックス

2021/06/16 41 users デザインカンプ 模写 コーディング CSSコーディング CSS

2021年6月16日 HTML/CSSのコーディングの練習をするときに、既存のWebサイトの模写をする方もいらっしゃるかと思います。模写は模写で勉強になる点もありますが、実務ではデザインカンプと呼ばれるデータファイルを渡され、それを仕様にそってHTML/CSSでコーディングしていきます。実務に近いかたちに慣れるためにも、デ... 続きを読む

【第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ファイルでの単一ファイルコンポーネントが楽だなーと思い、今... 続きを読む

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

2020/12/24 14 users 商用利用 フォント 素敵フォント 無料フォント40 みなさん

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

画像と同じ色のシャドウを加えてくれる【cosha】 | Webクリエイターボックス

2020/09/15 13 users シャドウ 単色 透明感 JavaScript 画面

2020年9月15日 JavaScript 通常 box-shadow などで画像に影をつけると単色になりますが、今回紹介する「cosha」を使えば画像を反射したようなカラフルな影を実装できます。画面に透明感がでて素敵に演出できますよ！ この記事は動画でも紹介しています。動画派の方はぜひどうぞ！ 動作デモ See the Pen JavaScript cosha... 続きを読む

技術を教えるときの7つのポイント | Webクリエイターボックス

2020/08/18 16 users 技術 Tips ポイント 講師 オンラインスクール

2020年8月18日 Tips オンラインスクールの講師として約4年、WebデザインやWebサイト制作を教えていて気づいた、教えるときのポイントをまとめました。 この記事は動画でも紹介しています。動画派の方はぜひどうぞ！ 1. 目的を明確にする 今やってる事は何が目的なのか、なぜ必要なのか？そういったところを明確にしてい... 続きを読む

Googleフォントをサブセット化してページの読み込みをスムーズに | Webクリエイターボックス

2020/07/29 11 users フォント Googleフォント 速度 容量 便利ツール

2020年7月29日 Webサイト制作, 便利ツール おしゃれなフォントが気軽に実装できるGoogleフォント。みなさん使っていますかね？登録やダウンロード不要なので便利ですが、日本語フォントはなかなか容量が大きくてページの読み込み速度に影響が出てしまいます。そこで必要なフォントのみを指定できるサブセット化をしてみ... 続きを読む

Dart Sass、使ってる？Preprosを使えばコンパイルも楽勝！ | Webクリエイターボックス

2020/06/15 21 users コンパイル コンパイラー 楽勝 Sass import

2020年6月15日 CSS, 便利ツール 最近Sass界隈が賑わっているように感じます。おそらく「Sassを@importから@useに置き換えるための手引き」という記事でDart Sassダートサスの存在を知った方も多いでしょう。今回はそんなDart Sassをザックリと、そして便利なコンパイラー「Prepros」について紹介します。 Dart Sassとは ... 続きを読む

CSSファイルを読み込むだけ！クラスなしCSSフレームワークいろいろ | Webクリエイターボックス

2020/05/10 46 users CSSファイル Bootstrap CSSフレームワーク

2020年5月11日 CSS, Webサイト制作 BootstrapでおなじみのCSSフレームワークでは、各要素に決められたクラス名を指定してスタイルを適用していました。ですが最近クラスを指定せず、HTMLを書くだけで整ったスタイルを適用してくれる「クラスなしCSSフレームワーク」が続々と登場しています。headタグ内にCSSファイルを読... 続きを読む

在宅ワークの集中力を高めよう！環境音が聴ける作業BGM用Webサイト | Webクリエイターボックス

2020/04/21 16 users 在宅ワーク ノイズ フリーランス 集中力 環境音

2020年4月22日 フリーランス, 便利ツール このご時世、自宅でお仕事をしている人も多いかと思います。私はもう長い間在宅ワークなので慣れっこですが、在宅ワークを始めたばかりの人だと集中力の維持がひとつの課題になりますね。まったく音がない場所よりも適度にノイズがあったほうが集中しやすい環境なのだとか。そこ... 続きを読む

jQueryを使わずにスライドメニューを実装しよう | Webクリエイターボックス

2020/04/06 22 users jQuery モバイルサイズ スライドメニュー CSS ボタン

2020年4月6日 CSS, JavaScript スマートフォンのアプリやモバイルサイズのWebサイトでよく見かけるスライドメニュー。どうも「jQueryがないと実装できない」と思っている人がちょこちょこいるようなので、簡単なJavaScriptで実装できるんだよーというのを記事にしてみます。 このようにボタンをクリックすると横からひゅ... 続きを読む

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

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

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

CSSとJavaScriptでWebページにローディングアニメーションを表示させる方法 | Webクリエイターボックス

2020/01/23 22 users ローディングアニメーション CSS ユーザー 読込中 画面

2020年1月23日 CSS, JavaScript ページやコンテンツの読込中、何も表示されない真っ白な画面が延々と続くと、なんだか不安になりますよね。本当にこのページであってるのか…今何を待ってたんだっけ…なんて。ユーザーを不安にさせないためにも、読込中だと認識できるローディングアニメーションを取り入れてみるといいで... 続きを読む

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ページ上にアイコンを表示させるためのサービス。汎用性の高いシンプルなアイコンが多数用意されています。アイコンの画像をご自身で用意しても構いません... 続きを読む

CSSとSVGでチェックボックスを装飾しよう！ | Webクリエイターボックス

2019/08/21 44 users SVG CSS 部品 小技 チェックボックス

2019年8月22日 CSS, SVG CSSでフォーム内の部品を装飾するのは、昔から難儀でした。特によく使うチェックボックスは色をつけることすら難しく、様々なCSSの小技やJavaScriptプラグインを使って実装してきました。今回はチェックマークにSVGを使い、なるべくシンプルな書き方でチェックボックスを装飾してみようと思いま... 続きを読む

Affinity Designerで夏っぽいアイコンを作ったので無料配布します。商用利用OK！ | Webクリエイターボックス

2019/07/17 12 users Affinity Designer PNG形式 アイコン

2019年7月17日 Webデザイン, ダウンロード, 便利ツール 今回は巷で話題のグラフィックツール「Affinity Designer」の使用感を確認するために、夏っぽいシンプルなアイコンを作って試してみました。Affinity DesignerはUIが日本語に対応していますし、料金も買い切りの6000円なので気軽に手にできます。訳あってPNG形式の... 続きを読む

夏っぽいデザインに使えるデザインアイデアや素材を集めました | Webクリエイターボックス

2019/06/13 36 users デザインアイデア 素材

2019年6月13日 Webデザイン, インスピレーション まだ6月ですが、暑いですねー！夏本番前に、夏っぽさを表現するデザイン・装飾ってどんなものかなーと調べてみたので、夏テイストのものをまとめました。参考になるデザインのWebサイトもいくつか紹介します！ 一言で「夏」と言ってもどんな印象にしたいかによってデザイ... 続きを読む

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

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

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

2019年4月に読んだWeb・デザイン関連の本 | Webクリエイターボックス

2019/04/30 14 users HTMLコーダー 書籍 Web制作 おすすめ デザイン

Web制作やデザインに関する情報は、インターネット上以外にも書籍を通して体系的に学ぶことができます。今月も様々な本を拝読しました。その中でいいなと思った物、オススメの物をいくつか紹介します！ HTMLコーダー& […] 続きを読む

ブラウザー上でカスタマイズできるSVGアイコン、背景パターン、イラスト | Webクリエイターボックス

2019/04/19 26 users SVGアイコン SVG ブラウザー上 背景パターン イラスト

2019年4月19日 SVG, Webサイト制作 高解像度ディスプレイでもきれに表示できるSVG形式の画像。アイコンの表示などでは一般的に普及してきたかと思います。SVG形式ではカスタマイズがしやすいところもメリットのひとつですね。今回はブラウザー上で簡単に自分好みに変更できるSVGアイコンや背景パターン、イラストを配布... 続きを読む