知っておくと便利！表現が広がる最新CSSテクニックや書き方30選
知っておくと便利！表現が広がる最新CSSテクニックや書き方30選 これまでの苦労が嘘のよう。新テクニックでデザインに差をつけよう 2022年は、CSSにとって過去最高の年になりました。 安定版ブラウザで、多くの新しいCSSプロパティやセレクタなどが対応となり、これまでは実装にJavaScriptなどが必要だったものも、CSSのみで表現できるようになっています。 ここでは、知っておくと便利な最新CSSテクニックや書き方をまとめてご紹介します。 「CSSって、こんなこともできるの?!」と思わず納得してしまう、驚きテクニックを習得して、ウェブデザインでできる表現の幅をぐっと広げましょう。 コンテンツ目次 1. コンテナクエリ @container が全ブラウザ対応 2. CSSスタイルクエリの基本と具体サンプル例 3. グラデーション付き影のつくり方 4. どんな背景でも美しい影のつくり方 5.
本当は教えたくないWebデザイン参考ギャラリーサイト37選
ウェブサイト制作には、常に新しいアイデアやインスピレーションが必要ですが、決まらずに悩んでしまうことも。 そんな状況を打開するには、たくさんの優れたデザインの実例を見ることで、次のアイデアを生み出してみましょう。 ここでは、最新ウェブデザインをいち早くチェックできるオススメWebギャラリーサイトを厳選してご紹介。 インスピレーションとしてはもちろん、クライアントの打ち合わせやイメージの共有にも活用できます。 積極的にインプットを増やし、デザインの引き出しを増やしてみましょう。 このリストは2年ぶりにまとめ直したアップグレード版となります。 コンテンツ目次 【2024追加分】最新Webギャラリーサイト landing.love Design Spells Godly BentoGrids 404s Footer Navbar Gallery 国内Webギャラリーサイト SANKOU! URA
サンプル付コピペOK！すごいCSSアニメーションライブラリ30選【2022年版】
ウェブサイトの印象を大きく左右する「動き」。 現役Webデザイナーがこれは外せない！というCSSアニメーションライブラリをまとめてご紹介。 任意の要素にクラスを付与するだけで、用途に応じたアニメーションを実装できる便利なライブラリを整理しています。 フワフワやユラユラ、ポヨンといった弾む系の動きから、背景アニメーションなどWebサイトの印象づくりに欠かせない動きが揃います。GitHubレポジトリのスター数が多いものを中心にセレクト。 コンテンツ目次 1. 万能CSSアニメーション 2. 文字エフェクト向け 3. ホバーエフェクト向け 4. 画像、背景向け 5. ふわふわ、ゆらゆら、面白系 6. ハンバーガーメニュー向け 7. クリエイティブなアニメーション 8. よりなめらかな動きを表現するには 9. アニメーションの参考リソース一覧 万能CSSアニメーション Animista 基本となる
2021年にCodepenで話題！コピペ可なHTMLスニペット ベスト100発表
HTMLなどのコードをブラウザ上で確認ができ、公開や共有もできるなど、世界中のデベロッパーが愛用するCodepen。 この記事は、2021年に特に人気の高かったHTMLスニペットをランキング形式でまとめた The Most Hearted of 2021 が発表されていたので、その中でも実用性の高いHTMLスニペットを中心にまとめて紹介しています。 CSSのみで表現されたお手軽なHTMLスニペットから、Three.jsをつかったインタラクティブな動きやアニメーションにも注目が集まっています。 HTML/CSSやJSなどのコードの確認や編集を行うことができるので、今後のデザイン制作に活用してみてはいかがでしょう。 2021年にCodepenで話題！コピペ可なHTMLスニペット ベスト100発表 97位 Metallic Bordered Text with CSS Photoshopで作成し
Webデザインの種明かし、コピペできる最新HTML／CSSスニペット30個まとめ
この記事では、Webデザインの引き出しを増やす、コピペで使える最新HTML／CSSスニペットをまとめてご紹介します。 Codepenで話題となっているものを中心に、今後のデザイン制作に活用したいアイデアがずらり揃った今回。新しいウェブデザインの可能性を感じるものばかりとなっています。 Webの進化が止まらない、コピペ可な最新HTMLスニペット40個まとめ CSSコピペで完成！押したくなるWebボタンデザインまとめ Webデザインの引き出しを増やす、コピペできる最新HTMl／CSSスニペットまとめ 「Run Pen」をクリックすることで読み込みが開始されます。右下に表示された「Return」で再読み込みし、左上のHTML/CSS/JSタブを切り替えることで、それぞれのスタイリングを確認できます。実際にカスタマイズしたいときは、右上の「Edit on Codepen」をクリックしましょう。 画
【フォトショップ】パターンプレビューで繰り返しパターンを一瞬で作成する方法
この記事では、フォトショップのパターンプレビュー機能をつかった継ぎ目のないパターンテクスチャを素早く作成する方法をご紹介します。 パターンプレビューを使用することで、シームレスに繰り返されるパターンをリアルタイムで視覚化し、作成を手助けしてくれます。 ここでは、パターンプレビュー機能の使い方を詳しくみていきましょう。 パターンプレビューによる継ぎ目のないパターンの作り方 まずはフォトショップを開き、新しいドキュメントを作成しましょう。今回は、1000x1000pxの正方形としていますが、縦横の長さが異なる長方形でも問題ありません。 パターンプレビューを有効にするには、メインメニューより「表示」>「パターンプレビュー」にチェックを入れるだけ。ポップアップが表示されますが、OKで進みましょう。 すると青い枠が表示され、ドキュメント全体がカンバス同様、白に塗りつぶされた状態となりました。 メイン
【フォトショップ】ワンランク上のネオンサインエフェクトのつくり方
この記事では、フォトショップを使った超リアルなネオンサインエフェクトのつくり方をご紹介します。 レイヤースタイルで表現できるお手軽なエフェクトで、ワンスパイス加えることで、本物そっくりなリアル感とライティングエフェクトを演出できるチュートリアルとなっています。
Web制作の時短に！2020年の便利オンラインツール・ベスト100選
この記事では、2020年に公開された便利なWebオンラインツール・ベスト100個をまとめてご紹介します。 定期的にリストアップしている最新オンラインツールまとめ記事では、2020年にかけて合計306個の新しいツールやサービスが登場しました。 その中でも、特にWebデザイン制作に便利なツールを選りすぐったコレクションで、「無料で利用できるツール」を揃えています。 これらのツールやサービスを活用すれば、Webデザイン制作をより快適に進めることができるでしょう。 カテゴリごとに整理しているので、目的にあったお気に入りツールを探してみましょう。 コンテンツ目次 1. CSSツール（14個） 2. パターンツール（7個） 3. イラスト系ツール（3個） 4. デザインツール（10個） 5. 配色カラーツール（6個） 6. グラデーションツール（3個） 7. SVGツール（8個） 8. スクリーンショ
カーニングのプロ技を学ぶ！文字組みに必要な9つのテクニックまとめ
海外デザインブログCanva Design School Blogで公開された「A Beginner’s Guide to Kerning Like A Designer」より許可をもらい、日本語抄訳しています。 単語やフレーズなどの文字デザインを組むときに、なにか見た目がおかしいと思ったことありませんか。 それはきっと、カーニング（英: Kerning）の問題かもしれません。2つの文字（数字や句読点なども含む）間のすき間をカーニングと呼び、見た目のおかしいスペースを調整し、読みやすさを改善するプロセスのことを指します。 特定の文字の組み合わせでは、通常カーニング設定があまり理想的とは言えず、見た目を統一するために文字スペースを調整する必要があるでしょう。カーニング作業は、ビジュアルによる練習（英: Visual Excercise）であることを覚えておきましょう。カーニングは、均一に空け
たった1行のCSS！よく見かけるWebレイアウトを実現する凄技テクニック10個
モダンなCSSレイアウトでは、ほんのわずかなコードを書くだけで、実用的なスタイリングを実現できます。 この記事では、たった1行でよく見かけるWebレイアウトを表現できるテクニック10個をご紹介します。 上下中央揃え: place-items: center まずCSSでもっとも頭を悩ませる、上下中央揃えを詳しくみてみましょう。ここでは、plae-items: centerを使えば、思ったよりに簡単に実現できます。 まず、display: gridを記述したら、一緒にplace-items: centerを同じ要素に追加します。place-itemsは、align-itemsとjustify-itemsを同時にスタイリングできる簡略化表記、ショートハンドです。centerに設定することで、align-itemsとjustify-itemsの両方がcenterとして設定されます。 .paren
Web制作の常識が変わる、便利な最新オンラインツール48個まとめ
この記事では、Webデザインやグラフィックデザインの制作スピードを短縮し、生産性をアップする、便利な最新オンラインツールをまとめてご紹介します。 「もっと早く知りたかった」と思わせる、面倒な作業をサクサクこなす時短ツールが勢揃いです。カテゴリごとに整理しているので、目的にあったお気に入りツールを探してみましょう。 コンテンツ目次 1. Web制作便利ツール 2. デザインコレクション 3. イラスト系ライブラリ 4. 配色ツール 5. プロトタイプツール 6. コラボ、リモートワークツール 7. 面白、クリエイティブツール Web制作の常識が変わる、便利な最新オンラインツールまとめ Web制作便利ツール The Hero Generator ウェブサイトの魅力的なヒーローイメージを作成できるオンラインツール。グラデーションオーバーレイやボタンスタイル、見出しタイトルの余白など細かい部分も手
フォトショップで樹木の背景を透明に切り抜く方法3つまとめ
この記事では、フォトショップで樹木の背景を透明に切り抜く方法4つをご紹介します。 青空を背景にしたシンプルなものから、夕日が当たり複雑なものまで、葉っぱ一枚まで正確にできるだけ素早く行うことができる、はじめてのひとでも簡単なテクニックをまとめています。 髪の毛などその他の切り抜きテクニックは、以下の記事を参考にしてみると良いでしょう。 Photoshop切り抜きをマスターする、12個の鉄板テクニック 完全ガイド Photoshop切り抜き新定番！髪の毛など複雑な範囲も数分で完成するテクニック 1. レイヤースタイル「ブレンド条件」 青空をバックに、木と背景がくっきりしたときに便利な切り抜きテクニック。今回は、こちらの写真で試してみます。あらかじめレイヤーパネル上でダブルクリックで、ロックを解除しておきます。 まず、チャンネルパネルを開き（表示されていないときはメインメニューより「ウィンドウ
フォトショップがより簡単に！注目の新機能5個まとめ【被写体の選択、Camera Rawフィルタ、マッチフォント】
この記事では、今週行われたAdobeアップデートでPhotoshopに新しく追加された注目の新機能や機能強化5つをまとめてご紹介します。 髪の毛など複雑な切り抜きがより正確で高速になったり、一新されたCamera Rawフィルタ機能、フォント選びに便利なマッチフォントの強化など、どれもデザイン制作が捗る便利な機能ばかりです。 1. ポートレイト人物写真の切り抜き、選択精度が大幅アップ 写真より被写体のみを切り抜き、自動で選択する「被写体の選択」機能が、人物写真用に最適化され、より複雑な髪の毛もクリックひとつで選択できるようになりました。2018年の登場からますます精度が上がり、処理速度もより高速に。 以下は実際に「被写体の選択」を試してみたところ。「オブジェクト選択ツール」または「クイック選択ツール」の使用中に、オプションバーに表示されます。 切り抜いた様子が分かりやすいように、背景をベタ
ウェブサイト作成のよくある間違いと解決テクニックまとめ【保存版】
この記事では、ウェブサイトを作成するときによくある間違いを、具体的なサンプル例と解決テクニックと一緒にまとめています。 一般的なランディングページでありがちな間違い 1. コンテンツがブロックに分割されていない 論理的なブロッグにグループ化することで、ユーザーが情報を理解しやすくなります。パディングを120〜180pxに設定し、背景色を活用して文字テキストだけのコンテンツを分割することができます。 コンテンツ間のパディングはほとんどなく、コンテンツを分割するために背景色の利用が必要。結果として情報を要約するのがむずかしく、どこに何が書かれているのかわかりにくい（上） パディングを十分に確保し、ブロックごとに色で区切られており、どこまでがコンテンツに含まれるのかすぐ分かります（下） 2.Webページのアイテム間の余白スペース幅が不揃い 論理的に分割されたブロックの周りには、同じサイズのパディ
ジブリやマリオも！Zoom、Web会議に便利なおすすめ「バーチャル背景」画像まとめ
新型コロナウイルスの感染が拡大拡大により、全国に発表された緊急事態宣言。これまで以上に在宅テレワークによる仕事を行う企業が増えることが予想されます。 それにともなって、これまで行っていた会議や取引も、オンラインミーティングで済ませるひとも急激に増えています。しかし、「背景に生活感が出ててしまうのが嫌だ」というひとも少なくないはず。 この記事では、ZoomなどのWebミーティングに役立つ無料「バーチャル背景」画像をまとめています。また、この記事は随時更新となります。 Zoom、Web会議に便利なおすすめ「バーチャル背景」画像まとめ ■ スタジオジブリ 「風の谷のナウシカ」や「もののけ姫」、「千と千尋の神隠し」、「ハウルの動く城」などのスタジオジブリ作品を堪能できる背景画像。 スタジオジブリ公式サイトにて、Web会議などで使えるジブリ作品の壁紙をアップしました。ご利用いただければ嬉しいです。今
ウェブ制作がサクサク捗る！便利な最新オンラインツール37個まとめ
この記事では、日常行っているWebデザインやグラフィックデザインの制作が捗る、便利な最新オンラインツールをまとめてご紹介しています。 これらの新しいツールやサービスを利用すれば、これまで後回しにしていた面倒な作業も自動化し、生産性アップ、円滑なプロジェクト進行を実現できるでしょう。「もっと早く知っておけばよかった」と思わせてくれる便利ツールが揃います。 ここでは、カテゴリー別に分けて新しいオンラインツールをまとめています。 コンテンツ目次 1. デザインコレクション 2. イラスト系ライブラリ 3. デザインからコードへの変換ツール 4. Web制作お役立ちツール 5. プロトタイプツール 6. コラボレーションツール 7. アイコン素材パック 8. 面白ツール 新型コロナの影響で無料提供中のオンラインツール、サービスまとめ 現在新型コロナウイルスの世界的流行の拡大によって、無料提供されて
新型コロナの影響で無料提供中！クリエイティブなオンラインツール、サービスまとめ
新型コロナウイルスの急速な拡大によって、他人と距離を1メートル、できれば2メートルのソーシャルディスタンスをとりましょう、という考え方から、不要不急の外出を控えて、自宅にこもりがちになっています。 そんなストレスのたまりそうな環境でも、クリエイティブな分野で活躍するデザイナー個人、グループ、企業などが数え切れないほどの無料サービスを提供してくれています。 この記事では、現在新型コロナウイルスの世界的流行によって、無料提供されているオンラインツールやサービスをまとめてご紹介します。 デザイナーやアーティストを支援するものが中心で、学校休校で暇をしている子供たちにもオススメしたい塗り絵などもコレクションしています。このリストは、随時アップデート予定となります。 新型コロナの影響で無料提供されているオンラインツール、サービスまとめ ■ Adobe CCが2ヶ月の無料利用期間を提供 アドビは、先日
いま確認しておきたいレスポンシブWebサイトの最新デザイントレンド、テクニック6個まとめ
Webデザインのトレンドには、流行り廃りがあります。いくつかのトレンドは流行遅れになりつつあり、利用を避けておくのが一般的です。いつの時代にも対応したウェブサイトの持続力は、時間や労力を割く価値があるでしょう。 この記事では、いま確認しておきたいレスポンシブ・ウェブサイトのデザイントレンド、テクニックをまとめています。多くのユーザーは、興味のあるサイトをスマートフォンなどのモバイル端末で閲覧、表示するのが当たり前となり、デザイナーにとっての課題となっています。 これから紹介するサンプル例のように、すべてのブラウザとすべての端末からWebサイトを 魅力的に見せるにはどのようにすればよいでしょう。 これからのWeb制作でうまく活用したい、そして活用すべきウェブデザインのトレンドをいくつかご紹介します。 制作に役立つレスポンシブWebデザインテクニック Webサイトがすべてのブラウザまたはデスク
新型コロナウイルス感染予防の無料イラストアイコン、ピクトグラム素材200個（SVG・PNG）
世界的な広がりをみせつつある新型コロナウイルス。ウイルスからの感染予防や衛生について分かりやすく図解したイラストアイコン、ピクトグラム200�種類セット Coronavirus Awareness Iconsがリリースされました。 イラストアイコン素材の中には、手洗いの手順や衛生上の推奨事項、またウイルスの広がりと戦う取り組みなどあらゆるシーンで利用できます。 公開されている素材は、Illustratorなどをつかって自由に拡大縮小できるSVGベクターファイルとPNGファイルがそれぞれ用意されており、個人および商用利用に対応のCC BY_SA 3.0ライセンスとなっています。 では、収録されているイラストアイコン、ピクトグラムの詳細をみてみましょう。 Stop Virus Outline Icon Set（44個 | SVG & PNG） 新型コロナウイルスの感染予防対策に関する事項を、線
新mac OS Catalinaのアップグレードに待った！PhotoshopとLightroom互換性に問題か？
ついに正式リリースとなった新しいmac OS 10.15 (Catalina)。 iPadのセカンドディスプレイ化など気になる注目の新機能もありますが、Adobe PhotoshopとLightroom Classic CCを普段使いしているMacユーザーは、すぐにアップグレードするのは少し待ったほうが良いかもしれません。 この新しいオペレーティングシステムは、β版として数ヶ月前からリリースされていましたが、今回のOSアップグレードで、Adobeが解決するのを待ちたい互換性に関するいくつかの問題がすでに報告されています。 Adobeはmac OS Catalina�の互換性についてPhotoshopとLightroomの各サポートページで公開しており、この記事執筆時点では、最新版アプリは「macOS 10.15 (Catalina)で動作しますが、互換性の問題が報告されています」となってい
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
