Web Design Trends

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

Category

Web制作

【2021】Material Icons(Google Font Icons)の使い方を解説!表示されない時に確認すべきポイントも

Material Icons(マテリアルアイコン)は、マテリアルデザインに合わせて作られたGoogleが提供するフォントサービスです。Webサイトやアプリなど、様々な場面で利用することができます。 W…

【VSCode】Live Serverを使ってWeb制作でライブリロードを活用しよう

Live Serverは、簡易的なローカルサーバーを簡単に立ち上げることができるVSCodeの拡張機能です。 ライブリロードにも対応していて、初心者の方がはじめてローカルサーバーを使った制作に挑戦する…

2021年最新!SEOに強いおすすめWordPressテーマまとめ

WordPressを使ってWebサイトを作成する時、みなさん最初に悩むのがテーマ選びだと思います。 今回は、SEO対策を意識して作られた、SEOに強いおすすめのWordPressテーマをご紹介したいと…

初心者でもOK!WordPressサイトをたった10分で公開する手順まとめ

WordPressはブログやコーポレートサイトなど、様々なサイトに使われている人気のソフトウェアです。 しかし、レンタルサーバーの用意やドメインの取得など、初心者がWordPressサイトを公開する場…

【2021年最新】WordPressの使い方を徹底解説!初心者向けのおすすめ設定も

WordPressは初心者でも簡単にWebサイトを作ることができる人気のソフトウェアです。 しかし、機能がやや複雑で初めてWordPressに挑戦する人には導入時のハードルがやや高く、どのように設定す…

2021年版:WordPressで人気記事を表示する方法【WordPress Popular Posts】

主にブログなどで見かけることの多い「人気記事一覧」ですが、WordPressならプラグインを使って簡単に表示することができます。 今回は、WordPress Popular Postsを使ってサイドバ…

【2021】今さら聞けないFont Awesomeの使い方やカスタマイズ方法

Font Awesomeとは、無料で利用可能なWebアイコンフォントで、アイコンの種類がとても豊富なのでWeb制作の様々な場面で活用することができます。 ただ、CDNを使ったり疑似要素(::befor…

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

2021年版:ファビコン(favicon)の設定方法とおすすめの作成ツール

Webサイトにファビコン(favicon)を設定しておくことで、ブラウザのタブやGoogleの検索結果にアイコンが表示されるようになります。 今回は、2021年現在のファビコン(favicon)の設定…

CSS filterの使い方:画像にフィルタを追加して表現の幅を広げよう

CSS filterを使えば、Webサイト上で画像のぼかしや色の調整、透明度などを変化させることができます。 アニメーションと組み合わせることで、ユーザーのアクションを元に画像を変化させることができ、…

2021年版!おすすめのCSSフレームワーク総まとめ。特徴や比較も!

CSSのコード記述量を減らして、効率的にスピード感を持ってWeb制作を行う助けとなるのがCSSフレームワークです。 現在公開されているCSSフレームワークの種類は非常に多く、それぞれの特徴や目的なども…

© 2021 Web Design Trends