Web Design Trends

Webに関わるすべての人のためのメディア

Page 2 of 16

YouTube動画埋め込み時にパラメータを指定して表示をカスタマイズする方法

YouTubeの動画をWebサイトに表示したい場合、埋め込みコードを使えば簡単に動画を埋め込むことができます。 今回は、YouTube動画をWebサイトに埋め込む時にパラメータ(オプション)を指定して…

WordPressのブロックエディターを無効化して旧エディターに戻す方法【投稿・ウィジェット】

WordPressの標準機能となっている「ブロックエディター(Gutenberg)」ですが、できることが多い反面、使いづらいという声もよく耳にします。 今回は、WordPressの投稿・固定ページ編集…

2021年10月:デザインの参考にしたい魅力的なWebサイト15選

2021年10月の最近見つけた「デザインの参考にしたい魅力的なWebサイト」をまとめました。 優れたWebデザインに触れることによって、トレンドのデザインを知ることができたり、デザインのヒントを見つか…

WebサイトでYouTube動画をレスポンシブ対応して埋め込む方法【iframe】

今回は、WebサイトにYouTube動画をレスポンシブ対応して埋め込む方法をご紹介します。 なお、この方法はiframeをWebサイトに埋め込む場合に利用可能なので、Vimeoやその他のサービスでも同…

コピペで使えるCSSグラデーションジェネレーター16個まとめ

グラデーションはWebデザインに魅力的な雰囲気を生み出してくれる重要な要素の1つです。慣れてくると自分で思い通りに作れるようになりますが、最初はグラデーションの色使いに苦戦する人も多いのではないでしょ…

HTMLでのvideoタグを使った動画の埋め込み方法を解説!属性の使い方や注意点も

HTMLでは、videoタグを使うことによって動画を埋め込み、ページ上で再生することができます。 videoタグには様々な属性があり、それらを正しく組み合わせて使うことで、自動再生やループ再生などをコ…

ノーコードWordPressページビルダー「Elementor」とは?使い方や基本機能などまとめ

Elementorとは、ノーコードでWordPressのページが構築できるページビルダープラグインです。Elementorによって提供されているウィジェットを組み合わせてページを作ることができるので、…

コピペで作れる!おすすめのCSSジェネレーター・ツールまとめ

CSSがコピペで実装できるおすすめのジェネレーターやツール、サンプルコードなどをまとめました。 CSSに慣れてくるとコードを書くだけでイメージ通りのデザインを作ることができますが、慣れるまではコードだ…

進化が止まらない!Webサイトが簡単に作れるノーコードツールまとめ

近年話題を集めている「ノーコード」ですが、Webサイト制作においてもノーコードでサイトを制作できるツールやサービスが充実してきました。 数年前までは、まだまだノーコードツールの使い勝手もあまり良くなく…

そろそろWebPに切り替えよう。変換方法や対応ブラウザ、使い方を解説!

WebP(ウェッピー)は、Googleが開発している次世代画像フォーマットです。PNGやJPEGと比べてファイルサイズを抑えることができ、トラフィックの削減やページ表示速度の向上を実現することができま…

デザイナー必見!人気のフォントサブスクサービスまとめ【2021年版】

デザインにおいてフォントは欠かせない要素です。フォントの細かな違いによって、デザインのイメージが変化し、大きな影響を与えます。 しかし、デザインを始めたての方はPCにデフォルトで入っているフォントを使…

2021年9月:デザインの参考にしたい魅力的なWebサイト22選

2021年9月に見つけた「デザインの参考にしたい魅力的なWebサイト」をまとめました。 優れたWebデザインに触れることによって、トレンドのデザインを知ることができたり、デザインのヒントを見つかったり…

初心者でも簡単!ConoHa WINGを使ったWordPressの始め方

WordPressでWebサイトやブログを作ろうと思った時に、初心者の方が最もつまづきやすいポイントが「レンタルサーバー」と「ドメイン」です。登録時には聞き慣れない用語も多く、初めてWordPress…

パララックスの実装におすすめのJavaScriptライブラリまとめ【2021年版】

Webデザインにおいて、定番テクニックの1つとして使われるのがパララックスです。パララックスはライブラリを使用することで手軽に導入することができ、Webサイトの印象を大きく変えることができます。 今回…

爆速コーディングを実現!Emmetの使い方とVSCodeのおすすめ設定まとめ

Emmetを使うと、HTMLやCSSを省略記法でコーディングできるようになり、作業効率が大幅に向上します。 VSCodeであれば、デフォルトの状態でEmmetが有効になっていて、特別な設定無しに利用す…

Web制作が捗る!おすすめのChrome拡張機能18選【2021年版】

Web制作や情報収集など、Google Chromeをメインブラウザで使用している方はとても多いと思います。 Chromeの便利な機能の1つが拡張機能ですが、きちんと活用してますか?拡張機能を活用する…

WordPressのおすすめブランクテーマ・スターターテーマまとめ【2021年版】

WordPressの自作テーマを作る場合、0から自分で作る方法でも作ることはできますが、WordPress独自のコードを記述する量が多くなってしまい、かなりの手間がかかってしまいます。 そんな時に使え…

2021年版:Webデザインの参考に!おすすめギャラリーサイト20選

優れたWebデザインに触れることで、新しい発見があったり色々な所から学びを得ることができます。 様々なインスピレーションを与えてくれるWebサイトをチェックするには、国内、海外の最新Webサイトの情報…

Web制作で役立つ!ダミー画像を簡単に表示できるサービスまとめ

Webサイトの制作を行う際に、画像が準備中の場合に仮でダミー画像を表示することがあります。 ダミー画像を表示することによって、画像がない場合と比べて、作業を効率良く行うことができ、より完成形のイメージ…

Web制作者必見!VSCodeのおすすめ拡張機能15個まとめ

VSCodeを使ってHTML/CSS/JavaScriptなどを使ったWeb制作、Webコーディングを行っている人も多いのではないでしょうか。 VSCodeは様々な拡張機能が公開されていて、それらを活…

【2021年版】無料で使える!おすすめのフリーアイコン素材サイト18個【商用利用OK】

アイコン素材はWebデザインのあらゆる場所で活用することができます。ボタンやリストの見出し、ラベルなどにアイコン素材を取り入れれば、より使いやすくデザインも優れたWebサイトを作ることができますね。 …

アニメーションで魅せる!CSSボタンデザインのサンプルコードまとめ

ボタンはユーザーがクリックしたりタップしたり、直接アクションを起こすためのWebサイトには欠かせない要素です。 ボタンにはホバーエフェクトとクリックアクションの2つの重要なアニメーションのタイミングが…

2021年8月:デザインの参考にしたいWebサイト16選

2021年8月に見つけた「デザインの参考にしたい魅力的なWebサイト」をまとめました。 優れたWebデザインに触れることによって、トレンドのデザインを知ることができたり、デザインのヒントを見つかったり…

2021年版:OGPの正しい設定方法まとめ。確認方法や画像サイズも

OGPは、WebサイトのSNSからの流入を増やすためには欠かせない存在ですが、意外とWebサイト公開時に忘れがちになってしまいます。 OGPの設定を正しく行わないと、せっかくSNSでシェアされてもアク…

RECOMMENDED

© 2022 Web Design Trends