タグ検索の該当結果が少ないため、タイトル検索結果を表示しています。
2021年のミニマリズムを中心としたトレンドが注目されていましたが、2022年は鮮やかで、奇抜で、記憶に強く残るようなデザインを中心としたトレンドが注目されています。 今回は、2022年に流行するWebデザインの10個の最新トレンド予測をご紹介したいと思います。1つ1つのトレンドごとに実際のWebサイトの事例を掲載しているので、ぜひご自身で体験してみてください。 1. 3Dイラスト 3Dのイラストを使ったデザインは、2021年の大きなトレンドの1つとなりましたが、2022年はさらに注目すべきトレンドの1つとなるでしょう。特に2Dのフラットなイラストを3Dに変化させたような、2Dと3Dを組み合わせたスタイルは要チェックです。 リアルで魅力的な楽しいイラストに、柔らかなキャンディーカラーと組み合わせたようなスタイルは、特にアプリのデザインなどでトップトレンドになると考えています。 Dribbb
Webサイト上の要素に背景を表示したい場合、シンプルに画像で表示する形が一般的ですが、CSSを使って背景パターンを表示するという方法もあります。 ドット柄やチェック模様、ストライプなど色々な種類の背景パターンをCSSだけで作ることができ、使い方を覚えておくとWebデザインに色々と活用することができます。 今回は、CSSだけで背景パターンや模様を表示するメリットや、様々なサンプルコードが掲載されているおすすめのサイトをご紹介したいと想います。 CSSで背景パターンを作るメリット Webページ上の要素に背景を適用する場合、一般的には画像ファイルを用意してbackground-imageプロパティに指定することが多いですが、CSSだけでも様々な背景パターンや模様を作ることができます。 画像ではなくCSSで背景パターンを作った場合のメリットとして、例えば次のようなものが挙げられます。 背景画像を書
そろそろWebPに切り替えよう。変換方法や対応ブラウザ、使い方を解説！ | Web Design Trends
WebP（ウェッピー）は、Googleが開発している次世代画像フォーマットです。PNGやJPEGと比べてファイルサイズを抑えることができ、トラフィックの削減やページ表示速度の向上を実現することができます。 今回は、WebP（ウェッピー）の基本と、メリットやデメリット、変換方法、対応ブラウザなどをご紹介したいと思います。 WebP（ウェッピー）とは？ WebP（ウェッピー）は、Googleが開発している次世代画像フォーマットで、拡張子は「.webp」です。 WebPは、JPEGやPNGと比べ、同程度の画質の画像をより小さなファイルサイズで保存することができます。Googleの発表では、PNGよりも26%、JPEGよりも25%〜34％程度ファイルサイズを抑えることができると言われています。 また、WebPは背景透過（アルファチャンネル）や、アニメーションにも対応しています。つまり、JPEGのよ
2022年1月：デザインの参考にしたい魅力的なWebサイト14選 | Web Design Trends
2022年1月の最近見つけた「デザインの参考にしたい魅力的なWebサイト」をまとめました。 優れたWebデザインに触れることによって、トレンドのデザインを知ることができたり、デザインのヒントを見つかったりするなど、様々なメリットがあります。ぜひ自身の好みに合うような素晴らしいWebサイトを探してみてください。 Webデザインのおすすめギャラリーサイト23個まとめ【2022年最新】 様々なインスピレーションを与えてくれるデザインの優れたWebサイトをチェックするには、国内、海外の最新Webサイトの情報が日々更新されているWebデザインのギャラリーサイトがおすすめです。 ギャラリー... Web Design Trends 2022年に流行するWebデザインの最新トレンド10個まとめ 2021年のミニマリズムを中心としたトレンドが注目されていましたが、2022年は鮮やかで、奇抜で、記憶に強く残
FigmaでWebサイトのデザインから公開まで完結するプラグイン「Makers」が登場！ | Web Design Trends
先日、「Makers」というFigmaでWebサイトのデザイン制作から公開まで完結することができるプラグインが発表されました。 ノーコードでのWeb制作は非常に注目を集めている分野であり、実際にノーコードでのWeb制作も広まってきています。そんな中登場するMakersはどのようなツールなのでしょうか。 今回は、Makersというプラグインの概要と、機能や料金についてご紹介したいと思います。 進化が止まらない！Webサイトが簡単に作れるノーコードツールまとめ 近年話題を集めている「ノーコード」ですが、Webサイト制作においてもノーコードでサイトを制作できるツールやサービスが充実してきました。 数年前までは、まだまだノーコードツールの使い勝手もあまり良くなく... Web Design Trends Makersは、Figmaで制作したデザインをそのままWebサイトとして公開することができるプ
about project かつてWebに“動き”と“驚き”をもたらした「Flash」。その自由な表現力は、多くのクリエイターを魅了し、日本でも中村勇吾氏の「MONO*crafts（1999年）」に代表される革新的なサイトが次々と誕生しました。しかし一方で、動作の重さ、セキュリティリスク、スマートフォン時代への対応が難しいといった弱点も抱え、2020年に公式サポートは終了。これらの作品はすでに「ロストテクノロジー」となっています。 このアーカイブは、そんなFlash時代に生まれた日本のWebデザインの“片鱗”を後世に残す試みです。2007年から運営していたWebデザインギャラリーで紹介したサイトを中心に、当時のスクリーンショットとInternet Archiveのリンクを掲載しています。アーカイブにデータが残っている作品群は、当時のままのサイトを実際にご覧いただけます。 なお、2007年以
VSCodeを使ってHTML/CSS/JavaScriptなどを使ったWeb制作、Webコーディングを行っている人も多いのではないでしょうか。 VSCodeは様々な拡張機能が公開されていて、それらを活用するとさらにWeb制作の作業効率が向上したり、使い勝手が良くなったりします。 今回は、Web制作者、WebコーダーにおすすめのVSCode拡張機能をご紹介したいと思います。 VSCodeとは VSCodeとは、Microsoftが提供するテキストエディタ「Visual Studio Code」のことです。つい数年前までは、人によって使っているテキストエディタが違うことも多かったのですが、最近ではVSCodeを使ってコーディングやプログラミングを行っている人がかなり多くなってきました。 VSCodeは、設定や拡張機能の追加など、マウス操作で行うことができ、初めてコーディングやプログラミングをす
2022年版：OGPの正しい設定方法まとめ。確認方法や画像サイズも | Web Design Trends
OGPは、WebサイトのSNSからの流入を増やすためには欠かせない存在ですが、意外とWebサイト公開時に忘れがちになってしまいます。 ただしくOGPが設定されていないと、せっかくSNSでURLがシェアされてもアクセス数が伸びず、大きな機会損失に繋がってしまう可能性があります。 今回は、WebサイトにおけるOGPの正しい設定方法や、適切な画像サイズ、OGPが正しく設定されているかの確認方法をご紹介したいと思います。 OGPとは？ OGPとは、「Open Graph Protcol（オープングラフプロトコル）」の略称で、TwitterやFacebook、LINEやSlackなどでWebサイトをシェアした時に表示されるタイトルや画像を設定するためのものです。 例えば、TwitterでWebサイトをシェアすると上記の画像のようにリンクがカードで表示されますね。 このように、OGPが正しく設定されて
Hello Web Design
Read it now on the O’Reilly learning platform with a 10-day free trial. O’Reilly members get unlimited access to books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers. Hello Web Design teaches design principles, handy shortcuts, and quick solutions to common problems, so you can learn the fundamentals of design and get ahead in your career. Using rea
WordPressのおすすめブランクテーマ・スターターテーマまとめ【2021年版】 | Web Design Trends
WordPressの自作テーマを作る場合、0から自分で作る方法でも作ることはできますが、WordPress独自のコードを記述する量が多くなってしまい、かなりの手間がかかってしまいます。 そんな時に使えるのが「ブランクテーマ」「スターターテーマ」と呼ばれるテーマです。ブランクテーマやスターターテーマを使うと、基本機能が備えられたコードを元にテーマを作ることができるので、効率的にテーマ制作を行うことができます。 今回は、ブランクテーマの基本と2021年最新のおすすめブランクテーマをご紹介したいと思います。 【2024年最新】WordPressの使い方を徹底解説！初心者向けのおすすめ設定も WordPressは初心者でも簡単にWebサイトを作ることができる人気のソフトウェアです。 しかし、機能がやや複雑で初めてWordPressに挑戦する人には導入時のハードルがやや高く、どのように設定す...
2021年に流行するグラフィックデザインの最新トレンド12個まとめ | Web Design Trends
2020年はコロナウイルスの影響で、これまでに経験したことの無い1年になりました。その一方で、オンラインの世界ではその影響で急速に様々な変化が生まれています。オンライン教育、オンラインショッピング、リモートワーク、娯楽など様々な分野で大きな成長を遂げることとなりました。 多くの人々、そして企業はこの変化に迅速に適応する必要があり、顧客のニーズに合わせ、テクノロジーやトレンドと共に変化しなければなりません。 トレンドやテクノロジーは成長し続けているため、第一線に居続けるためには水面下で何が起こっているのかを知っておく必要があります。 Webサイトのデザインにおいては、高速化、ユーザビリティ、セキュリティ対策、バッテリーへの配慮、ダークモードの台頭など、著しい変化がありますが、それと同様にグラフィックデザインのトレンドも大きく変化しています。 上記のような項目はWebデザインだけに当てはまるこ
ついに2021年がやってきました。Webデザインのトレンドの移り変わりはとても早く、数年でトレンドがガラッと変わることもしばしばあります。必ずしもトレンドに合わせたデザインを制作する必要はありませんが、知識として押さえておくことによって、選択肢が増え、デザインの幅を広げるためのヒントとなります。 2020年はコロナウイルスの影響もあり、様々なものがオンラインに移行されたり、リモートワークが一般化するなど大きな変化の年となりました。それに合わせて、Webサイト、Webデザインの重要性も高まってきているのではないでしょうか。ぜひトレンド情報をチェックして、ご自身のWebデザイン制作に活用してみてください。 では、2021年に流行する最新のWebデザインのトレンドをご紹介していきます。 【 NEW：2022年版を公開しました 】 2022年に流行するWebデザインの最新トレンド10個まとめ 20
アニメーションで魅せる！CSSボタンデザインのサンプルコードまとめ | Web Design Trends
ボタンはユーザーがクリックしたりタップしたり、直接アクションを起こすためのWebサイトには欠かせない要素です。 ボタンにはホバーエフェクトとクリックアクションの2つの重要なアニメーションのタイミングがあり、それぞれ適切にデザインすることによって使いやすさの向上にも繋がります。 今回は、アニメーションが美しいCSSによるボタンデザインのサンプルコードをご紹介したいと思います。 ホバーエフェクト ビット調のホバーエフェクトアニメーション ホバーに合わせて楽しいビット調のアニメーションが現れます。 0 6つのボタンデザイン ユニークな6つのボタンのCSSアニメーションのサンプル。 0 矢印が現れるボタン カーソルを合わせると左側から矢印が登場するボタン。 0 テキストが変化するボタン カーソルを合わせると、ボタンのテキストがアニメーションを伴って変化します。 0 ポップで楽しいボタン カーソルを
CSSがコピペで実装できるおすすめのジェネレーターやツール、サンプルコードなどをまとめました。 CSSに慣れてくるとコードを書くだけでイメージ通りのデザインを作ることができますが、慣れるまではコードだけでなく、プレビューを見ながらツールを使って微調整する方が効率がいい場合があります。 また、知らないと実装できないようなテクニックが使われていたり、作業量を大きく削減できるようなジェネレーター・ツールもたくさんあるので、ぜひチェックしてみてください。なお、一部SVGなどCSS以外のジェネレーターも掲載しています。 多機能ジェネレーター The Ultimate CSS Generator | Web Code Tools アニメーションやFilter、レイアウト、テキストなど様々なCSSを生成できるジェネレーターです。初心者の方がCSSのプロパティや値を覚える際にも使ってみると良さそうです。
Web Design System: Migrating Web Components To React | Mercari Engineering
This post is for Day 8 of Mercari Advent Calendar 2022, brought to you by Williams Kwan from Mercari Core team and Faisal Rahman from the Mercari Architect team. Intro Mercari internal design systems power the UI in Mercari web apps. It allows Frontend engineers to implement UI changes quickly by providing UI building blocks. The design system is currently built using Web Components but we are in
2023年9月：デザインの参考にしたい魅力的なWebサイト12選 | Web Design Trends
2023年9月に見つけた「デザインの参考にしたい魅力的なWebサイト」をまとめました。 優れたWebデザインに触れることによって、トレンドのデザインを知ることができたり、デザインのヒントを見つかったりするなど、得られるものがたくさんあります。ぜひ自身のデザインの参考になるような素晴らしいWebサイトを探してみてください。 Webデザインのおすすめギャラリーサイト23個まとめ【2022年最新】 様々なインスピレーションを与えてくれるデザインの優れたWebサイトをチェックするには、国内、海外の最新Webサイトの情報が日々更新されているWebデザインのギャラリーサイトがおすすめです。 ギャラリー... Web Design Trends
the peculiar case of japanese web design a project that should not have taken 8 weeks how is japanese web design different? in this 2013 Randomwire blog post, the author (David) highlighted an intriguing discrepancy in Japanese design. While the nation is known abroad for minimalist lifestyles, their websites are oddly maximalist. The pages feature a variety of bright colours (breaking the 3 colou
Webサイトの制作を行う際に、画像が準備中の場合に仮でダミー画像を表示することがあります。 ダミー画像を表示することによって、画像がない場合と比べて、作業を効率良く行うことができ、より完成形のイメージがしやすくなります。 今回は、Webサイトでダミー画像を簡単に表示できるサービスをご紹介したいと思います。 【2024年版】無料で商用利用可能！フリー画像・写真素材サイトのおすすめ12選 デザイン制作や記事の制作、資料作成など画像素材を利用するシーンは様々ですが、そんな時に役立つのがフリー画像・素材サイトです。 フリー画像やフリー写真を配布しているサイトはたくさんありますが、数が多くて... Web Design Trends 【2024】ほんとに無料？フリーイラスト素材サイト40個まとめ【商用利用OK】 デザイン制作や資料作成など、イラストを取り入れることで印象がガラッと変わったり、より分か
2021年のトレンドカラーは2色の組み合わせ！カラーパレットのサンプルも | Web Design Trends
毎年12月ごろにPantoneから発表されているカラーオブザイヤーですが、2021年は、イエローとグレーの2種類がトレンドカラーとして選ばれました。 今回は、それぞれの色に関する情報や、トレンドカラーを使ったカラーパレットなどをご紹介したいと思います。 2021年のトレンドカラーは2つの色の組み合わせ PANTONEから発表された2021年のカラーオブザイヤーはグレーとイエローの組み合わせとなっていて、5年ぶりに2色が選ばれることとなりました。 それぞれの色の名称は「Illuminating（イルミネイティング）」と、「Ultimate Gray（アルティメットグレイ）」です。 この2色が選ばれた理由には、下記のようなメッセージが込められています。 異なる要素が一緒になりどのように互いを支え合うかに目を向けさせる 実用的で揺るぎないが、同時に暖かく楽観的 強さと前向きさが一つになっている
fffuel is a collection of color tools and free SVG generators for gradients, patterns, textures, shapes & backgrounds 🚀 On fffuel you'll find a collection of free SVG makers to create cool backgrounds, seamless patterns, gradients, textures, shapes and blobs. Use the generated vector patterns directly on the web or in your favorite design app. 🤹♂️ The SVG and graphic creation tools on fffuel al
Ready-to-useYou can use the icons as HTML images, embed them in your HTML code, create an SVG sprite or render them in React. Multiple formatsIcons can be used in Sketch, Illustrator, XD and Figma - choose the tool you feel the most comfortable working with. CustomizableEvery icon is designed on a 24x24 grid and a 2px stroke. You can easily customize them, changing the size, stroke or color.
【WordPress】カスタム投稿タイプの基本と使い方を徹底解説！パーマリンクのカスタマイズ方法も | Web Design Trends
WordPressの便利な機能の1つが、カスタム投稿タイプです。これによって、1つのサイトの中で複数のタイプの投稿を管理することができます。 ただ、設定項目が少し多く、パーマリンクの設定なども少し複雑になってしまっています。 今回は、カスタム投稿タイプの使い方や、パーマリンクのカスタマイズ方法などを分かりやすくご紹介していきます。 【2024年最新】WordPressの使い方を徹底解説！初心者向けのおすすめ設定も WordPressは初心者でも簡単にWebサイトを作ることができる人気のソフトウェアです。 しかし、機能がやや複雑で初めてWordPressに挑戦する人には導入時のハードルがやや高く、どのように設定す... Web Design Trends カスタム投稿タイプとは カスタム投稿タイプとは、通常の「投稿」とは別に、投稿のタイプを作ることができる機能です。 例えば、コーポレートサイ
Top Website Accessibility Testing Tools For Inclusive Web Design
Top Website Accessibility Testing Tools for Inclusive Web Design In an increasingly digital age, the internet serves as a vital resource for information, communication, commerce, and entertainment. However, for the millions of people living with disabilities, navigating the web can present significant challenges. Web accessibility addresses these challenges by ensuring that websites, tools, and te
YouTube動画埋め込み時にパラメータを指定して表示をカスタマイズする方法 | Web Design Trends
YouTube動画埋め込みのパラメータ（オプション）の指定方法 YouTubeの動画埋め込みコードは、下記のようなiframeタグによって記述されています。 <iframe width="560" height="315" src="https://www.youtube.com/embed/VIDEO_ID" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen ></iframe>
Material Icons（Google Font Icons）の使い方を解説！表示されない時に確認すべきポイントも | Web Design Trends
TOP > Web制作 > Material Icons（Google Font Icons）の使い方を解説！表示されない時に確認すべきポイントも Material Icons（マテリアルアイコン）は、マテリアルデザインに合わせて作られたGoogleが提供するフォントサービスです。Webサイトやアプリなど、様々な場面で利用することができます。 Webサイトで利用する場合には、Google Fontsと同様にスタイルシートを読み込むだけで、簡単にアイコンフォントを表示することができます。 今回は、WebサイトでのMaterial Iconsの使い方と、アイコンが表示されない場合の解決策などをご紹介していきます。 2022年版：おすすめのWebアイコンフォントサービス10選 Webアイコンフォントを利用することで、数千種類のアイコン素材をWebサイト上で簡単に表示することができます。 Webサ
ノーコードWordPressページビルダー「Elementor」とは？使い方や基本機能などまとめ | Web Design Trends
Elementorとは、ノーコードでWordPressのページが構築できるページビルダープラグインです。Elementorによって提供されているウィジェットを組み合わせてページを作ることができるので、HTMLやCSSの知識が無くてもページを作ることができます。 今回は、Elementorの使い方や基本機能、料金プラン、Elementorの利用におすすめのテーマなどをご紹介したいと思います Elementorとは Elementorとは、コードを書かずにブロックを組み合わせてWordPressのページが構築できるプラグインです。 通常、HTMLやCSS、PHPなどの知識が無ければWordPressのページをカスタマイズすることはできませんが、Elementorを使えば誰でも簡単にドラッグ＆ドロップでWordPressのページを作ることができます。 Elementorが注目される理由には、下記
object-fitはCSSだけで画像をコンテナーにフィットさせてトリミングもできるとっても素晴らしいプロパティー | Web Design DAY
CSSプロパティーの「object-fit」を使えば、簡単にCSSだけで画像を指定したサイズ（コンテナー）にフィットさせて、かつ、はみ出すの部分はトリミングができてしまいます。要は画像として配置しているのに、「background-size」と同じことができてしまいます。 そこで今日は、素晴らしいCSSプロパティー「object-fit」を色々とサンプルで詳しく紹介していきたいと思います。 なぜ画像フィット・トリミングが必要なのか？ 例えば、記事一覧ページでサムネイル画像が並ぶページの場合、全ての画像が同じサイズ、もしくは縦横比でないと並びが崩れてしまいます。 横幅はCSSで揃えられるけど縦幅はバラバラで崩れている じゃ、全部同じサイズでアップすれば良いじゃん！と思いますが、CMSでユーザーが任意の画像をアップする場合などはそうはいきません。 ですので、どのようなサイズの画像が配置されても
Experience a seamless design process from concept to production with responsive CSS powered by smooth drag & drop.
フォントワークスの8書体がGoogle Fontsにて無料で利用可能に！ | Web Design Trends
筑紫書体やロダンなどの有名フォントを提供する「フォントワークス」が2021年1月にGoogle Fontsで8つの書体の提供を開始しました。 これにより、Google Fontsで利用できる日本語フォントの種類が増え、無料で利用できる日本語Webフォントの選択肢が広がりました。 8つの日本語フォントがGoogle Fontsに登場 今回フォントワークスより提供開始されたフォントは、下記の8つの書体です。 すべて「SILオープンフォントライセンス」で提供されていて、商用利用可能で、Webフォントはもちろん、ゲームやアプリへの組み込みが認められています。 クレー One Regular / Semibold 手で書いたような優しい印象の楷書体フォントです。ミニマルデザインとの相性が良さそうで、Webフォントとして見かける機会も多くなるのではないでしょうか。レギュラーとセミボールドの2種類が提供
Best selection of Winning websites. Web Design Inspiration for your inspiration... Read more Discover the best website designs of the world. Awwwards recognizes the talent and effort of the best designers, web developers and digital agencies.
Responsive Design Today Today, when using the term: "responsive design", you are most likely thinking about using media queries to change layout when resizing a design from mobile size, to tablet size, through to desktop size. But soon, this perception of responsive design may be considered as outdated as using tables for page layout. Viewport-based media queries give you some powerful tools, but
簡単！WordPressサイトにSNSシェアボタンを追加する方法 | Web Design Trends
WebサイトはSEO対策も重要ですが、SNSを活用したマーケティングも非常に重要です。 特にメディアやブログなどは、投稿にSNSシェアボタンを設置することにより、SNSからのアクセスアップを増やすことが期待できます。 今回は、WordPressサイトにSNSシェアボタンを追加する方法をご紹介したいと思います。 【2024年最新】WordPressの使い方を徹底解説！初心者向けのおすすめ設定も WordPressは初心者でも簡単にWebサイトを作ることができる人気のソフトウェアです。 しかし、機能がやや複雑で初めてWordPressに挑戦する人には導入時のハードルがやや高く、どのように設定す... Web Design Trends
【VSCode】Live Serverを使ってWeb制作でライブリロードを活用しよう | Web Design Trends
Live Serverは、簡易的なローカルサーバーを簡単に立ち上げることができるVSCodeの拡張機能です。 ライブリロードにも対応していて、初心者の方がはじめてローカルサーバーを使った制作に挑戦する際はとてもおすすめです。 今回は、Live Serverの使い方と設定方法などをご紹介したいと思います。 Web制作者必見！VSCodeのおすすめ拡張機能15個まとめ VSCodeを使ってHTML/CSS/JavaScriptなどを使ったWeb制作、Webコーディングを行っている人も多いのではないでしょうか。 VSCodeは様々な拡張機能が公開されていて、それらを活... Web Design Trends Live Serverは、ローカルサーバーをワンクリックで立ち上げることができるVSCodeの拡張機能です。 Web制作時にページを確認する際、HTMLであればファイルパスを指定してブラウ
2022年11月の最近見つけた「デザインの参考にしたい魅力的なWebサイト」をまとめました。 優れたWebデザインに触れることによって、トレンドのデザインを知ることができたり、デザインのヒントを見つかったりするなど、様々なメリットがあります。ぜひ自身の好みに合うような素晴らしいWebサイトを探してみてください。 Webデザインのおすすめギャラリーサイト23個まとめ【2022年最新】 様々なインスピレーションを与えてくれるデザインの優れたWebサイトをチェックするには、国内、海外の最新Webサイトの情報が日々更新されているWebデザインのギャラリーサイトがおすすめです。 ギャラリー... Web Design Trends 2022年に流行するWebデザインの最新トレンド10個まとめ 2021年のミニマリズムを中心としたトレンドが注目されていましたが、2022年は鮮やかで、奇抜で、記憶に強く
クリッカブルマップのレスポンシブ対応はjQuery非依存の「image-map-resizer」が良い感じだった | ma-ya's CREATE / WEB DESIGN
こんにちは、ma-ya’s CREATE［まーやずくりえいと］です。 たまーに実装するクリッカブルマップ。 もう枯れた技術になりつつあるのか、レスポンシブ対応するとなるとプラグイン選びが意外と悩まかったりします。 定番の「jQuery RWD Image Maps」が正直微妙 長く定番だった「jQuery RWD Image Maps」ですが、時代は脱jQuery。 案件によってはパフォーマンスなどの観点から、jQuery非依存でレスポンシブなクリッカブルマップを実装したいんじゃ！ というシーンも少なからずあるんじゃないかと思います。 ただこのプラグインにはそれ以外にも（個人的に）致命的に使いづらい点があります。 jQueryのバージョンに依存する 「jQuery RWD Image Maps」は古いプラグインのため、jQueryのバージョンが新しいと動作しないケースがあります。 ※jQu
ARCH. | Leading Influencer Marketing Agency for Games and Apps
ヘッドレスCMSって何？メリット・デメリットや人気のサービスまとめ | Web Design Trends
これまではコーポレートサイト、メディアなど動的なコンテンツを伴うWebサイトの制作にはWordPress、もしくは独自のCMSを使うというケースがほとんどでした。 最近では、ヘッドレスCMSが注目を集めており、実際にヘッドレスCMSを使って運用されているWebサイトの数も増えており、今後もその数は増えていくと見られています。 今回は、ヘッドレスCMSの基本とメリット・デメリット、人気のサービスなどをご紹介していきます。 【2024年最新】WordPressの使い方を徹底解説！初心者向けのおすすめ設定も WordPressは初心者でも簡単にWebサイトを作ることができる人気のソフトウェアです。 しかし、機能がやや複雑で初めてWordPressに挑戦する人には導入時のハードルがやや高く、どのように設定す... Web Design Trends ヘッドレスCMSとは ヘッドレスCMSとは、コン
FLOCSSとは？CSS設計手法を活用して保守性の高いコードを書こう | Web Design Trends
FLOCSS（フロックス）は、人気の高いCSS設計手法の1つです。 CSSは複数人で作業したり、大規模なWebサイトになるとコード量が増えてしまい、途中で整合性が取れなくなったり、破綻してしまう場合があります。それを防ぐために必要なのがCSS設計手法で、しっかりとルールを定めてコードを書くことにより、管理しやすく、破綻しづらいCSSを記述することができます。 今回は、FLOCSSの基本や特徴をご紹介したいと思います。 【CSS設計手法】BEM、OOCSS、SMACSSの違いと特徴のまとめ CSSの設計手法とは、CSSのメンテナンス性や作業効率を向上させるためのHTMLのクラス名の付け方と、CSSのコードの管理方法の考え方のことを言います。命名規則などとも呼ばれたりしますね。 ページ数が... Web Design Trends
HTMLでのvideoタグを使った動画の埋め込み方法を解説！属性の使い方や注意点も | Web Design Trends
動画配信サービスには、例えばYouTubeやVimeoなどがあります。Webサイト上でそれらのサービスを使って動画を埋め込んでいるケースはよく見かけますね。単にWebページの中で動画を紹介したい場合は、外部サービスを使って埋め込んだ方が手軽に利用することができます。 一方、自分でサーバーに動画ファイルをアップロードしてvideoタグを使って埋め込む方法もあります。ファイル形式はMP4（.mp4）で用意しておけば基本的に問題ありません。 videoタグを使う場合は、YouTubeなどの動画埋め込みで表示されてしまうサービスのロゴや、固定表示されてしまう要素などを気にする必要がありません。背景動画として埋め込む場合などはvideoタグを使う方法がおすすめです。 ただし、サーバーに動画ファイルをアップロードして読み込みを行うと、サーバーの転送量が増えたり負荷が高くなったりする可能性もあるので、注
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
2022年に流行するWebデザインの最新トレンド10個まとめ | Web Design Trends
コピペでOK！CSSで作る背景パターンのサンプルコードまとめ | Web Design Trends
Japanese Flash Web Design Archives
Web制作者必見！VSCodeのおすすめ拡張機能15個まとめ | Web Design Trends
2021年に流行するWebデザインの最新トレンド12個まとめ | Web Design Trends
コピペで作れる！おすすめのCSSジェネレーター・ツールまとめ | Web Design Trends
「Gmail」が誕生から20周年！ 当時の姿、覚えていますか？／Webサイトの古いデザインを収集する「Web Design Museum」で当時を偲ぶ【やじうまの杜】
the peculiar case of japanese web design - sabrinas.space
Web制作で役立つ！ダミー画像を簡単に表示できるサービスまとめ | Web Design Trends
Free SVG generators, color tools & web design tools
Tabler Icons: 5850+ free vector icons for web design
Responsive Web Design | Website Creation | Editor X
Winning websites. Web Design Inspiration - Awwwards
The new responsive: Web design in a component-driven world | Articles | web.dev
2022年11月：デザインの参考にしたい魅力的なWebサイト14選 | Web Design Trends
Web Design Garden | 毎日更新！Webデザイン参考ギャラリーサイト
dengekionline.com
www.gizmodo.jp
tabelog.com
premium.kai-you.net
go-to-k.hatenablog.com
ameblo.jp/ishiitoshihiro