Web Design Trends

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

Category

Web制作

WordPressに一番おすすめのレンタルサーバーとは?

WordPressでWebサイトを作ろう!と思った時、最初に悩むのが「レンタルサーバー」です。 色々なサービスがあって、さらに難しい説明も多いため、どれを選べばいいのか分からないという方も多いのではな...

【2020年最新】Flexboxの対応ブラウザとベンダープレフィックスまとめ

CSS FlexboxはCSSでレイアウトを組む時に使われる主要な手法の1つです。 しかし、比較的新しいレイアウト法なので、一部のバージョンが古いブラウザでは正しく表示されないという課題も抱えています...

高クオリティで魅力的な有料写真素材・ストックフォトサービスまとめ

有料写真素材サイトとは、Webサイトや制作物で利用する写真素材を有料で手に入れることができるサービスです。 無料で素材を手に入れることができるフリー写真素材サービスも多く公開されていますが、有料素材の...

Web上でアニメーションを表示するなら「Lottie」がおすすめ!特徴や使い方など

Web上でアニメーションを表示するなら「Lottie」がおすすめ!特徴と使い方など Webサイト上でアニメーションを実装する場合、簡易なアニメーションはCSSやJavaScriptで手軽に作ることがで...

デザインにおけるフォントの選び方と「絶対フォント感」を身に付けるための方法

あなたはどのくらいのフォントの使い分けができていますか? 一般的に、デザインスキルに合わせて使い分けができるフォントの種類が増えていきます。ただし、意識してフォントに触れていかなければフォントを見分け...

ベンダープレフィックスってなに?自動で付与する方法とは?

普段Webサイトのコーディングを行う時にベンダープレフィックスは当たり前のように使っていると思いますが、きちんと理解して使えていますか? また、基本的にベンダープレフィックスは自動で出力するのが制作の...

いくつ知ってる?HTML/CSSの便利な小技・テクニックまとめ

HTMLやCSSはブラウザのアップデートによって使えるものが増えたり、より簡単に機能を実装できるようになることがあります。 少し前まではJavaScriptで行わなければならなかったことが、HTMLと...

Firebase Hostingを使ってポートフォリオサイトを無料で公開する方法

HTMLとCSSでWebサイトを作って、「さあ公開しよう!」と思った時にレンタルサーバーの登録だったり、ドメインの取得だったり面倒な作業がたくさん発生すると嫌になってしまいますよね。 すでにレンタルサ...

Webサイトを作る4種類のおすすめ方法の比較!

いざWebサイトを作ろうと思っても、どうやって作ればいいのか分からないという方が多いと思います。 Webサイトを作成する際は、目的やスキルに見合った方法を選ばなければ途中で挫折してしまったり、完成した...

初心者でも大丈夫!WordPressを使ったWebサイトの作り方

Webサイト制作と言えばWordPressと言われるほど、WordPressはWebサイトを作るための人気ツールです。 一見難しく見えるかもしれませんが、大変なのは初期設定が大半で、一度サイトを作って...

HTMLとCSSの勉強におすすめの入門書まとめ

HTMLとCSSはWeb制作を行うための基本中の基本です。どんなWebサイトを作るにしても、HTMLとCSSを使わずに作ることはできません。 今回は、初めてHTMLとCSSを勉強する人におすすめの入門...

WordPressの投稿ページに目次を配置してデザインを変更する方法

メディアやブログのコンテンツページに目次を設置することで、ユーザーにそのページに書かれている内容を最初に伝えることができるので、ユーザビリティの向上に繋がります。 WordPressを使っている場合は...

初心者向け!HTMLとCSSを独学で勉強するおすすめの方法

HTMLとCSSは、Webサイトを作るためには欠かせない言語です。HTMLとCSSが扱えるようになれば、一人でWebサイトのコーディングが行えるようになります。 Webサイトのコーディングができれば、...

子テーマを作って安全にWordPressのテーマをカスタマイズする方法

WordPressにある程度慣れてくると、テーマを編集して色々なカスタマイズを行いたくなると思います。しかし、テーマの編集は注意しなければならないポイントがたくさんあるため、慎重に行わなければなりませ...

デザイン制作を効率良く行うために必要な習慣とは

UX Planetに「How to Work Smarter as a Product Designer(訳:プロダクトデザイナーとしてよりスマートに働く方法)」という記事が投稿されました。 プロダク...

grid-templateを使えばCSS Gridが簡単に扱える

CSS Gridの使い方はよく分からないけど、Flexboxの方が簡単そうだからFlexboxを使っているという方も多いのではないでしょうか。 確かに、CSS GridはFlexboxと比べると少し扱...

【応用編】Sassを使いこなすためのテクニックまとめ

前回はネストや変数などSassの基本機能をご紹介しましたが、今回はもっと便利にスタイルシートを記述するためのSassの機能をご紹介したいと思います。 前回の記事はこちら↓ インポート(@import)...

【2019年版】WordPressのセキュリティを強化するための10個のチェックポイント

WordPressはブラウザ上で簡単にWebサイトを管理することができ、多くのWebサイトがWordPressを使って公開されていますが、一方でアカウントが他の人に知られてしまうと誰でも簡単にアクセス...

【初心者向け】ここから始める「Sass」の使い方まとめ

CSSの記述を効率化し、メンテナンス性も向上するSassの導入から基本的な使い方までまとめました。 対象の方は下記のとおりです。 Sassで書きたいけどコンパイルがよく分からない Sassをコンパイル...

VS CodeでScssを書くための環境構築方法

Webのコーディングを行うテキストエディタの中でも、多くの人に使われている人気のエディタがMicrosoftが提供する「Visual Studio Code(VS Code)」です。 他にもAtomや...

【CSS設計手法】BEM、OOCSS、SMACSSの違いと特徴のまとめ

CSSの設計手法とは、CSSのメンテナンス性や作業効率を向上させるためのHTMLのクラス名の付け方と、CSSのコードの管理方法の考え方のことを言います。命名規則などとも呼ばれたりしますね。 ページ数が...

Flexboxで左寄せ・中央寄せ・右寄せを指定する方法

CSS FlexboxはWebコーディングのレイアウトを柔軟に作成できるため、様々な場面で使われています。 今回は、CSS Flexboxを使って要素の左寄せ・中央寄せ・右寄せするための指定方法とTi...

Font Awesome 5の使い方とカスタマイズ方法を徹底解説!

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

Flexboxが使えるおすすめのCSSフレームワークまとめ

CSS Flexboxとは、CSSによるレイアウトの代表的な手法の1つで、CSS Flexboxを使用することによって、完結なコードで柔軟にレイアウトを組むことができるようになります。 普段CSSフレ...

1234

© 2021 Web Design Trends