Web Design Trends

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

Category

Web制作

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

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

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

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

2019年2月:デザインの参考にしたいWebサイト10選

2019年2月に見つけたデザインの優れた魅力的なWebサイトを10個まとめました。 ポップなイメージのWebサイトから、優しい印象のWebサイト、しっかりとした印象のWebサイトなど幅広くご紹介してい...

【2019年版】Webサイトのファビコンや各種アイコンの正しい設定方法

ファビコン(favicon)や、iOSやAndroidでホーム画面に保存した時に表示される画像、Windows8や10でスタート画面にピン留めした時の画像など、Webサイトでは様々なアイコン画像に関す...

【2019年版】おすすめのWebアイコンフォントと使い方まとめ

Webアイコンフォントを使うことによって、Webサイトに簡単にアイコン素材をデザインに取り入れることができ、デザインの幅が広がります。 一度使ってみるとその便利さに気づくのですが、初めて使う場合には使...

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

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

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

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

【2019年最新】おすすめの無料(フリー)画像・写真素材サイト6選【商用利用OK】

著作権の表記不要で商用利用も可能なフリー写真・画像素材を提供するストックフォトサービスの中から、本当に使える6つのサイトに厳選しました。 無料で利用できるフリー写真素材は、Webデザインで気軽に写真素...

【WordPress】おすすめのパーマリンク設定方法【SEO対策にも】

WordPressで投稿ページやカテゴリーページのURLをカスタマイズするには、パーマリンクの設定が必要です。 一見簡単そうに思えるかもしれませんが、SEO最適化や管理を考えると色々なことを考えて設定...

WordPressのサイドバーをカスタマイズして色々なウィジェットを設置する方法

Webサイトやブログを運営する上で、サイドバーに適切に表示を行うことによって訪問者にとって使いやすいサービスを提供することができます。 WordPressには、簡単な設定でサイドバーに様々なカスタマイ...

2019年版!おすすめのリセットCSSまとめ

リセットCSSとは、ブラウザによって異なるデフォルトのCSSを打ち消してブラウザ間の表示を揃えるためのCSSファイルのことを言います。 分かりやすい例だと、inputタグなどはSafariとChrom...

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

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

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

WordPressを使ってWebサイトを作成する時、みなさん最初に悩むのがどのテーマにするかだと思います。どうせWebサイトを作るなら多くの人にアクセスしてもらうために、SEOに強いWebサイトを作り...

CSSで要素を横並びにする方法のメリット・デメリットまとめ

Webコーディングを行う時に、初心者が悩みがちなトピックとして「どうやって要素を横並びにするか」というものがあります。 要素を横並びにするCSSの書き方として、大きく以下の5つが主要な方法ですね。 C...

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

FlexboxはCSSによるレイアウト作成の人気の方法です。 しかし、比較的新しいレイアウト法なので、一部のバージョンが古いブラウザでは正しく表示されないという課題も抱えています。 今回は、2019年...

もう迷わない!CSS Flexboxの使い方を徹底解説

CSS Flexboxは、CSSによるレイアウト作成でよく使われるCSSのレイアウト手法です。 レイアウトを作成する方法は他にもCSS Grid Layoutや、inline-blockを使用する方法...

ブロックを組み合わせてWebサイトを作る?Froala Design Blocksが新バージョンを公開

Froala Design Blocksとは、Webページのパーツとなる「ブロック」を組み合わせていくことで手軽にWebページのベースとなるHTMLファイルを作ることができるサービスです。 そんなFr...

【初心者向け】HTMLとCSSの勉強におすすめの入門書まとめ

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

デザイナーがエンジニアに絶対言ってはいけないNGワード

Webサイトやサービス作りには、デザイナーとエンジニアのどちらもも欠かせません。 Webサイトであれば、デザインからコーディングまで一人で済ませてしまう場合もあるかもしれませんが、大規模なサービスにな...

初心者でも簡単に!おすすめのホームページ作成サービス10選

ホームページを自分で作る場合は、HTMLやCSSを使ってコーディングを行わなければなりません。Web制作に慣れている人であれば、比較的短期間でWebサイトを作れてしまうかもしれませんが、初心者の方がい...

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

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

初心者でもできる!WordPressを使ったWebサイトの作り方

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

metaタグとは?重要なタグ一覧とSEO対策のための書き方

metaタグ(メタタグ)とは、検索エンジンに向けてページの情報を伝えたり、ブラウザに対してページの表示方法を指示したり、SNSでシェアされた時の表示方法をコントロールするなど、とても重要な情報です。 ...

2018年版:パララックスを簡単に実装できるおすすめプラグイン8選

パララックスは、様々なWebサイトで取り入れられているデザイン手法で、ユーザーを楽しませたりサイトを魅力的に見せたりなど様々な効果を発揮します。 Webサイトでパララックスを実装するためのプラグインや...

123

© 2019 Web Design Trends