SYMMETRIC Web開発ブログ
レスポンシブWebデザイン、CSSフレームワークなど、Webフロントエンド開発に関するBLOGです。
※SYMMETRIC公式BLOGと統合し、ブログ名称を変更しました

レスポンシブデザイン対応のテンプレートサイト10選

 こんにちは、開発チームの宇都宮です。普段はレスポンシブと同様のマルチデバイス対応を実現する「スマホのサイト制作。PCは自動変換 | alter.js」に携わっています。 今回はレスポンシブデザインに対応しているHTMLテンプレートをダウンロードできるサイトを調査してみました。数千種類を超えるテンプレ …

レスポンシブの画像切り替えができるsrcset属性

NO IMAGE

 こんにちは、開発チームの青木です。普段はレスポンシブと同様のマルチデバイス対応を実現する「スマホのサイト制作。PCは自動変換 | alter.js」に携わっています。 今回は、レスポンシブの画像出し分けを適切に行うことができるsrcset属性についてお話していきます。 レスポンシブデザインのウェブサ …

サイト制作者が語るレスポンシブWebデザインのメリット

 こんにちは、開発チームの田中です。普段はレスポンシブと同様のマルチデバイス対応を実現する「スマホのサイト制作。PCは自動変換 | alter.js」に携わっています。 今回は、レスポンシブWebデザインのメリット、デメリットについてお話していきます。 Webサイトをマルチデバイス対応するにあたってよ …

レスポンシブ対応のフォントサイズで使用できる単位

NO IMAGE

 こんにちは、開発チームの宇都宮です。 普段はレスポンシブと同様のマルチデバイス対応を実現する「スマホのサイト制作。PCは自動変換 | alter.js」に携わっています。 今回は、レスポンシブ対応のフォントサイズで使用できる単位についてお話していきます。 レスポンシブデザインを実現したい場合、フォン …

レスポンシブ対応メニューを作るための簡単なCSSライブラリ Bulma

ナビゲーションPC

 こんにちは、開発チームの青木です。普段はレスポンシブと同様のマルチデバイス対応を実現する「スマホのサイト制作。PCは自動変換 | alter.js」に携わっています。 本記事はBulmaを用いたナビゲーションメニューバーの作成方法についてのご紹介となります。 もちろんPC表示、スマホ表示で見た目が変 …

CSS グリッドレイアウトでレスポンシブ対応

CSS Grid Layout 例

 こんにちは、開発チームの青木です。 普段はレスポンシブと同様のマルチデバイス対応を実現する「スマホのサイト制作。PCは自動変換 | alter.js」に携わっています。 本記事は比較的新しい機能であるCSS Grid Layoutのご紹介をいたします。 CSS Grid Layoutとは、float …

レスポンシブの費用問題

NO IMAGE

 前回は、PCサイトをスマホ対応する際の問題について論じました。 今回はレスポンシブのコスト問題についてフォーカスします。 スマホサイトにコストを重点配分すべき レスポンシブ制作における、最終的な問題はコストです。レスポンシブの初期の頃に比べ、多くのツールやライブラリ、cssフレームワークが出てきて開 …

PCサイトをスマホ対応する際の問題

NO IMAGE

 前回は、レスポンシブの問題について論じました。 今回はPCサイトをスマホ対応する際の問題についてフォーカスします。 レスポンシブではPCコンテンツの影響が大きい 一般的にレスポンシブでのWeb制作はPCサイトをデザインすることから始まります。今でも多くのWeb制作ガイドの書籍はPCデザインをベースに …

レスポンシブの視点別デメリット

NO IMAGE

 レスポンシブは、コスト/複雑性/画面変化が問題 現在のWebサイトでは、PCでもスマホでも快適なUIが求められています。その際に用いられる方式がレスポンシブ（デザイン）です。１つのhtmlソースで画面サイズの違うデバイスにフィットするUIを提供できるデファクトスタンダードな方式として広く普及していま …

1 2 3 4 5 6

シンメトリックのブログ

Page Top