Webサイト制作において面倒で時間のかかる作業を効率化したい方へ。 この記事は、CSSコードを手軽に生成できる便利ツールをまとめた最新版リストで、Web制作を快適、楽にしてくれるツール68個が揃っています。 以前CSS便利ツールを集めた厳選リストの公開が2021年。あれからおよそ3年のあいだに話題となったツールを中心に紹介しています。 日頃のワークフローに活用して、ストレスのないクリエイティブな制作ライフを実現しましょう。
少しマニアックな知識、QRコードの仕組みを紹介します。 QRコード決済、リンクをQRコードで提供するなど、日常的に使用されているQRコードにあるそれぞれのパターンがどのように機能しているか、どういう役割をしているのか、なぜ上下逆さにしても読み取れるのか、なぜ一部が隠されても読み取れるのかなどが分かります。 QR codes by Dan Hollick (@DanHollick) 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに QRコードの仕組み 終わりに はじめに QRコードがどのように機能しているのか、疑問に思ったことはありませんか? 控えめに言って、実に、おもしろい! 注意: この記事⬇では非常にマニアックな内容が含まれています。 QRコードの仕組み QRコード(Quick Response code)は自動車部
WebサイトやスマホアプリのUIデザイン、イラストなどにもぴったりな背景、テクスチャ、パターン、シェイプ、グラデーション、装飾グラフィック、カラーパレットなどのSVGを生成するオンラインツールを紹介します。 ネオンカラーや美しいグラデーションをはじめ、アイソメトリックやスパイラルなどの幾何学形状、波線や等高線やねじれ線、ぼかしやノイズなど、いざという時にブックマークしておくと便利です。 fffuel -free SVG makers fffuelでは背景やテクスチャをはじめ、パターン、シェイプ、グラデーション、装飾グラフィックなどを生成するSVGツールがたくさんリリースされています。生成されるフォーマットはすべてSVGで、PNGに変換したい場合は変換ツールをご利用ください。 生成した素材は、個人でも商用プロジェクトでも無料で利用できます。 ツールはかなりたくさんあり、その中からいくつか紹介
日本の美しい伝統文様、四季の風物詩をテーマにした現代風の和柄をロイヤリティフリーで使用できるパターン素材を紹介します。 ここで紹介しているパターン素材はすべて無料! 個人でも商用デザインでも安心して使用できます。 ダウンロードできる和柄のパターン素材 素材のダウンロード方法 ダウンロードできる和柄のパターン素材 今回紹介するパターン素材は当ブログでは久々の登場「Japanese Mon」様。以前紹介した「基本の和柄無料素材」に加えて、四季の風物詩をテーマにした「和柄の厳選パターン素材10アイテム」の2種類あります。 素材のフォーマットは.eps, .jpg, 透過pngの3種類が揃っています。 ライセンスは独自で、個人でも法人でも無料、Webサイトやアプリや動画、ポスターや同人誌などの紙デザインで利用できます。詳しくは、よくある質問をご覧ください。
この記事では、Adobe Illustratorの使い方や新しいテクニックが充実の最新チュートリアルやつくり方をまとめてご紹介します。 手順通りすすめるだけで、基本的なツールの使い方から知らなかった「やり方」を発見できるなど、手を動かしながら実用的なイラレの使い方を覚えることができます。 2021年ベスト・オブ・イラレのつくり方と一緒に確認してみましょう。 【総まとめ】2021年公開のすごいIllustratorチュートリアル、作り方厳選まとめ これどうやる?手を動かして学ぶIllustrator最新チュートリアル20選 スクリーンプリント風エフェクトのつくり方 デザインのずれ感やラフさ楽しむことができ、リソグラフスタイルとして世界でも人気のプリント技法をイラレで再現できる、レトロやヴィンテージ系チュートリアル。 塗りブラシツールの基本的な使い方 ブラシツールを長押しすると選択できる「塗り
「準備はまだできていないけど、仮のダミー画像を入れておきたい」ウェブ制作中にそんな場面に遭遇することもあるでしょう。 この記事では、ダミー画像を手軽に生成できるジェネレーター、オンラインツールをまとめてご紹介します。 そもそもダミー画像とは? ウェブ制作中に、「画像の準備はできていないけど、とりあえずレイアウトの確認だけでもしたい」、というときに利用する仮の画像、これが「ダミー画像」です。 画像のサイズはもちろん、スタイルなどもimgタグに直接記述するだけで、ダミー画像を表示できます。 試しに以下のようにimgタグを記述してみると、 <img src="https://placehold.jp/272343/ffd803/640x400.png"> ほんの少しの指定を行うだけで、サイトの雰囲気にあった色合いのダミー画像を用意することができます。サイズ指定も手軽なので、お気に入りのダミー画像
Welcome to Animated Backgrounds! Are you tired of boring, static backgrounds on your website or presentation? Our animated backgrounds will bring your content to life and make it stand out from the crowd. With a wide range of styles and colors to choose from, you'll find the perfect background to match your brand and message. Add a touch of creativity and visual interest to your website or blog. W
この記事では、基本操作から制作時間を短縮するテクニックまで、Illustratorを実践的に学ぶ最新デザインチュートリアル、つくり方レシピをまとめてご紹介します。 実際に手を動かし、手順どおり進めることで、Illustratorのツールや機能の実践的な使い方が、自然と身につきます。 Illustratorを本気でモノにする最新デザインレシピ、つくり方まとめ 美しいグラデーションをつかったロゴアイコンのつくり方 シェイプツールを使って基本的なデザインを作成し、トレンディーで鮮やかなグラデーションをつかって立体的なロゴに仕上げます。 モコモコとした毛皮をつかったテキストエフェクトの作り方 手描きしたパスに沿って立体感のある3Dスタイルを表現し、さらに「ラフ」効果をつかってモコモコ感のあるデザインに仕上げます。 カラフルなカスタムグラデーションの作り方 フリーフォームグラデーションとメッシュグラ
この記事では、フォトショップのパターンプレビュー機能をつかった継ぎ目のないパターンテクスチャを素早く作成する方法をご紹介します。 パターンプレビューを使用することで、シームレスに繰り返されるパターンをリアルタイムで視覚化し、作成を手助けしてくれます。 ここでは、パターンプレビュー機能の使い方を詳しくみていきましょう。 パターンプレビューによる継ぎ目のないパターンの作り方 まずはフォトショップを開き、新しいドキュメントを作成しましょう。今回は、1000x1000pxの正方形としていますが、縦横の長さが異なる長方形でも問題ありません。 パターンプレビューを有効にするには、メインメニューより「表示」>「パターンプレビュー」にチェックを入れるだけ。ポップアップが表示されますが、OKで進みましょう。 すると青い枠が表示され、ドキュメント全体がカンバス同様、白に塗りつぶされた状態となりました。 メイン
以下は、Beatriz Fialho が書いた WordPress.org 公式ブログの記事「So you want to make block patterns?」を訳したものです。 誤字脱字誤訳などありましたらフォーラムまでお知らせください。 テーマやプラグインなど、WordPress のブロックエディターで何かを作ったことがある人は、ブロックパターンについても聞いたことがあるかもしれません。 WordPress に同梱されているパターンを眺めていて、これについて短い記事を書くのも良いかなと思いました。パターンは知っているととても便利なショートカットなのですが、一体何なのかとか、使う場面を知らない方も多いと思います。 ブロックパターンとは パターンはあらかじめ配置されたブロックの集まりで、多様に組み合わせたり配置を変えることができるので、美しいコンテンツをもっと簡単に作れるようになりま
ジグザグ、波状、罫線、アイソメトリックスなど、CSSで実装されたさまざまな背景用パターンをコピペで簡単に利用できるオンラインツールを紹介します。 カスタマイズにも対応しており、前景と背景のカラー、不透明度、サイズを簡単に変更できます。
CSS Background Patterns is fun little free tool that lets you create cool CSS patterns for your website background. We've curated and parameterized this collection of pure CSS patterns to help you generate & customize the most cool CSS seamless patterns around the web. The collection is being updated regurarly! Patterns are everywhere! From your website to your favorite book cover. There're severa
現在、オンラインで開催中のAdobe MAX 2020ですが、これに合わせてPhotoshopの最新アップデートがリリースされました。 Adobe SenseiのAIおよび機械学習に基づく機能がパワーアップ、「ニューラルフィルター」など新しい機能が追加されており、どれも驚くほどのPhotoshopエフェクトを数クリックで実現できるようになりました。 今回は、新しくなったPhotoshop CC 20201を実際に使いながら、チェックしておきたい便利な新機能をまとめてご紹介します。 1. 空を置き換え 今回のアップデートでも特に話題となっている、写真の空を自由に置き換える機能が新しく追加されました。 使い方はとても簡単で、メインメニューより「編集」>「空を置き換え」を選択します。あとは、お好みの空模様をサムネイルから選択すれば完了。手持ちの空テクスチャを独自に読み込みことも可能です。
画像やデザインに素早くディテールを追加したいときは、テクスチャ素材を追加すること以上に良い方法はありません。 テクスチャを利用することで、平面的で平凡なデザインも、画面から飛び出すほど魅力的にガラリと一新させることができます。 この記事では、無料ダウンロードできて実用性の高い最新テクスチャ素材のみを厳選してご紹介します。 手描きのアナログ感を表現できるものから、上品で高級感が出るもの、普段使いで利用できる紙やグランジ、ウッドテクスチャなど、合計600枚以上の幅広いセレクションが揃います。もちろん、どれも無料でダウンロードが可能です。 カテゴリ分けされた、良質な無料テクスチャも利用しよう これまでにカテゴリ、テーマ別に選別、集められた無料テクスチャ素材も一緒に活用してみると良いでしょう。どれも高品質な素材のみを集めています。 あらゆる紙の風合いをそのまま再現したいときはこちら。 リアルな紙の
こんにちは。koyaです。 テレワークを機に自宅を引っ越しました。 自宅にいる時間が長くなると広い部屋が欲しくなりますよね。通勤時間を気にしなくていいので物件探しも幅が広くてよかったです。 OculusQuestやSwitchを所持していても狭い部屋だとやれることが限られていたのでとても快適です。 今回はWordPress5.5で追加された「ブロックパターン」を使う上で外せないと思っているプラグインの紹介をします。 そもそも「ブロックパターン」とは? カスタムフィールドで言う繰り返しフィールドのようなもので、事前に設定した複数のブロックを一括で呼び出すことができます。 似たようなページを複数作る際に、同じブロックを何度も組む必要性が無くなるので非常に便利です。 ブロックパターンのオススメプラグイン Custom Block Patterns こちらのプラグインを使用することで、記事作成と同
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く