閉じる

レスポンシブレイアウト

レスポンシブデザインに対応しているナビゲーションメニューの作り方

Pocket
LINEで送る

スマートフォンやタブレットなどに対応するレスポンシブデザインを考える上で重要な「ナビゲーション」の表示について解説しています。ナビゲーションのレスポンシブデザインを考える上で抑えておきたい5つのナビゲーションの作り方をご紹介します。

レスポンシブデザインをタブレットに適用する方法

Pocket
LINEで送る

レスポンシブデザインを導入する上では必須とも言っていい、「タブレット」の表示について解説しています。タブレットのレスポンシブデザインを実装するなら抑えておきたい、各タブレットのサイズや考え方、表示崩れがしにくいメディアクエリなどをご紹介します。

レスポンシブレイアウトに欠かせない「viewport」の指定方法

Pocket
LINEで送る

レスポンシブデザインの基盤となる「viewport」のこと、良く分からないまま制作していませんか?本記事ではそんな方に向けてviewportについて徹底解説しています。本記事を読むことで、viewportの知識や以外と知らなかったWebサイトのズーム許可などについても知ることが出来ます。

レスポンシブでヘッダーをデザインするメリットデメリットと方法

Pocket
LINEで送る

スマートフォンやタブレットなどのデバイスで表示が切り替わるレスポンシブなヘッダーメニューのポイント、実装方法を解説いたします。本記事でレスポンシブなヘッダーメニューについての理解を深め、各サイトに合ったヘッダーメニューを実装できるようになりましょう!

レスポンシブデザインを作るときに便利なテンプレート集

Pocket
LINEで送る

Web制作の工数を減らすことができるHTMLテンプレートをご存知でしょうか?本記事ではより効率的に制作ができるHTMLテンプレートを使うメリット、おすすめのHTMLテンプレート配布サイトをご紹介します。

レスポンシブデザインを確認する方法とツールを使った方法

Pocket
LINEで送る

各デバイスサイズによるデザイン崩れを確認するのはもちろん、各OSやブラウザでの表示も確認するのがレスポンシブ対応です。今回は各デバイスサイズやOS、ブラウザなどのテスト環境をPCから確認できる方法を3つご紹介します。

レスポンシブレイアウトにするためのHTMLの設定方法

Pocket
LINEで送る

HTMLであってもWordPressのようなPHPで構築するWebサイトであっても、共通するのは「レスポンシブデザイン」が必須に近いということです。本記事では初心者こそ抑えておきたいレスポンシブデザインについての基礎と、HTMLファイル内で実装できるレスポンシブ対応を解説します。

デバイスによって変わるレスポンシブメニューの作り方

Pocket
LINEで送る

さまざまなデバイスが普及している現在では、画面幅に合わせてデザインが変化するレスポンシブ対応が必須です。Webサイトを製作する上で、ユーザーが目的のページに辿り着くために設置されるメニューもレスポンシブ対応が求められます。今回はメニューをレスポンシブ対応することのメリットと、3種類のレスポンシブメニューの実装方法を解説します。

レスポンシブデザインを制作するためのCSSサンプルコード集

Pocket
LINEで送る

レスポンシブデザインを実装する際に知っておいて損がないCSSの基礎知識を解説します。 筆者が実務で使用したことがあるCSSサンプルコードやCSSフレームワークもあわせて紹介している、レスポンシブデザイン初心者必見の記事です。

レスポンシブに対応した画像調整・サイズ切り替えの実装方法

Pocket
LINEで送る

画像をレスポンシブ対応させる方法を3つ紹介します。最も一般的であるメディアクエリを使った方法に加え、scrset属性、picture属性を使って画像サイズの調整を行う方法についても解説。方法を覚えればそこまで難しくありませんので、よろしければこちらの記事を参考に実装してみて下さい。