カテゴリー: 制作お役立ち

CSSファイルを読み込むだけ!クラスなしCSSフレームワークいろいろ

BootstrapでおなじみのCSSフレームワークでは、各要素に決められたクラス名を指定してスタイルを適用していました。ですが最近クラスを指定せず、HTMLを書くだけで整ったスタイルを適用してくれる「クラスなしCSSフレームワーク」が続々と登場しています。headタグ内にCSSファイルを読み込む記述を追加するだけでOK!学習コストもかからずとっても便利です。日本語版のデモも用意したので、どんな表示になるか確認してみてください。
続きを読む

在宅ワークの集中力を高めよう!環境音が聴ける作業BGM用Webサイト

このご時世、自宅でお仕事をしている人も多いかと思います。私はもう長い間在宅ワークなので慣れっこですが、在宅ワークを始めたばかりの人だと集中力の維持がひとつの課題になりますね。まったく音がない場所よりも適度にノイズがあったほうが集中しやすい環境なのだとか。そこで今回は自然の音や街の環境音、生活音などをまとめたWebサイトをいくつか紹介します。
続きを読む

拙著「1冊ですべて身につくHTML & CSSとWebデザイン入門講座」 の韓国語版が出版されました!

私の書いた書籍「1冊ですべて身につくHTML & CSSとWebデザイン入門講座」の韓国語版が発売開始されました!翻訳にはノータッチですし、私自身韓国語はまったく読めないのですが、時々韓国の読者から連絡をもらったりもするのでお知らせします!
続きを読む

Illustratorで手描き風イラストを描く方法や無料ブラシいろいろ

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

Webアイコンフォントの【Font Awesome】がアカウント登録必須になったので、使い方をおさらいしました

Font AwesomeはWebページ上にアイコンを表示させるためのサービス。汎用性の高いシンプルなアイコンが多数用意されています。アイコンの画像をご自身で用意しても構いませんが、このようなサービスを使うと手軽に実装でき、管理もしやすくなるでしょう。昔から愛されてきたこのFont Awesomeですが、少し前からアカウント登録が必要になりました。今回はアカウント登録の手順から基本的な使い方を紹介します。
続きを読む

Affinity Designerで夏っぽいアイコンを作ったので無料配布します。商用利用OK!

今回は巷で話題のグラフィックツール「Affinity Designer」の使用感を確認するために、夏っぽいシンプルなアイコンを作って試してみました。Affinity DesignerはUIが日本語に対応していますし、料金も買い切りの6000円なので気軽に手にできます。訳あってPNG形式のみですが、商用利用もできるのでお気軽にダウンロードしてくださいね!Affinity Designerの使い方も簡単に紹介します!
続きを読む

ブラウザー上でカスタマイズできるSVGアイコン、背景パターン、イラスト

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

Webフォントとして日本語も使える!Adobe Fontsの使い方

Webフォントとしておしゃれなフォントが使えるサービスで人気なのがGoogle Fontsですね。無料で手軽に使える便利サービスです。しかし、Webフォントを提供しているのはGoogleだけではありません。デザイナー御用達のAdobeも「Adobe Fonts」を提供しています。今回はこのAdobe Fontsの使い方を紹介します。
続きを読む

書籍執筆しました!「1冊ですべて身につくHTML & CSSとWebデザイン入門講座」

昨年からコツコツ執筆していた書籍「1冊ですべて身につくHTML & CSSとWebデザイン入門講座」がついに完成しました!初心者向けにWebサイト制作を教えている経験をもとに、なるべくわかりやすく書いたつもりです。多くの方に読んでいただけますと幸いです!
続きを読む