レスポンシブ対応のおすすめCSSフレームワーク5選【2020年版】
こんにちは、開発チームの宇都宮です。 普段はレスポンシブと同様のマルチデバイス対応を実現する「GeneCode」に携わっています。 レスポンシブデザインを実現したい場合、CSSフレームワークを使用することでデザインのレイアウトやUIを簡単に作ることができます。CSSフレームワークでは、よく使われるレ …
レスポンシブWebデザイン、CSSフレームワークなど、Webフロントエンド開発に関するBLOGです。
※SYMMETRIC公式BLOGと統合し、ブログ名称を変更しました
※SYMMETRIC公式BLOGと統合し、ブログ名称を変更しました
レスポンシブ
1/2ページ
レスポンシブデザインのレイアウトパターンと実装方法
こんにちは、レスポンシブデザインに代わる開発手法を提供する「GeneCode」開発チームの田中です。 Webサイトをレスポンシブで制作する際に参考になるレイアウトの考え方や参考サイトをまとめました。 レスポンシブデザインについてあまり知らない方やレスポンシブの実装パターンを増やしたい方は是非参考にし …
レスポンシブ対応するためのCSSの書き方
こんにちは、開発チームの宇都宮です。普段はレスポンシブと同様のマルチデバイス対応を実現する「GeneCode」に携わっています。 今回はレスポンシブデザインでWebページを作る際の基本テクニックをご紹介したいと思います。レスポンシブデザインというのは、スマートフォンやPC、タブレットといった異なる画 …
レスポンシブサイト用ブレイクポイント考察！時代に適するサイズとは？
こんにちは、開発チームの青木です。普段はレスポンシブと同様のマルチデバイス対応を実現する「GeneCode（ジーンコード）」に携わっています。今回は、レスポンシブサイト用のブレイクポイントについてお話していきます。 2019年発売のスマホ端末の状況も鑑みて、今年の適切なブレイクポイントは480px/ …
レスポンシブデザインの確認が簡単に出来るChromeのデベロッパーツールの使い方
こんにちは、開発チームの田中です。普段はレスポンシブと同様のマルチデバイス対応を実現する「GeneCode（ジーンコード）」に携わっています。 今回は、レスポンシブデザインの確認が簡単に出来る、Chromeのデベロッパーツールの使い方についてお話していきます。 レスポンシブデザインでWebサイトを制 …
レスポンシブ対応ページの簡単な作り方！導入部分を解説します。
こんにちは、開発チームの青木です。普段はレスポンシブと同様のマルチデバイス対応を実現する「GeneCode（ジーンコード）」に携わっています。 今回は、レスポンシブ対応ページの簡単な作り方についてお話していきます。 ウェブページをどう手を加えればレスポンシブ対応したことになるのでしょうか。これにはい …
レスポンシブ対応のためのJavaScriptによる2つの切替手法
- 2019.07.17
- JavaScript
- レスポンシブ
こんにちは、開発チームの青木です。普段はレスポンシブと同様のマルチデバイス対応を実現する「GeneCode（ジーンコード）」に携わっています。 今回は、レスポンシブ対応のためのJavaScriptによる2つの切替手法についてお話していきます。 レスポンシブウェブデザインのページで、CSSではメディア …
レスポンシブデザイン対応のテンプレートサイト10選
こんにちは、開発チームの宇都宮です。普段はレスポンシブと同様のマルチデバイス対応を実現する「GeneCode（ジーンコード）」に携わっています。 今回はレスポンシブデザインに対応しているHTMLテンプレートをダウンロードできるサイトを調査してみました。数千種類を超えるテンプレートを保持しているサイト …
レスポンシブの画像切り替えができるsrcset属性
こんにちは、開発チームの青木です。普段はレスポンシブと同様のマルチデバイス対応を実現する「GeneCode（ジーンコード）」に携わっています。 今回は、レスポンシブの画像出し分けを適切に行うことができるsrcset属性についてお話していきます。 レスポンシブデザインのウェブサイトで使用される画像につ …
サイト制作者が語るレスポンシブWebデザインのメリット
こんにちは、開発チームの田中です。普段はレスポンシブと同様のマルチデバイス対応を実現する「GeneCode（ジーンコード）」に携わっています。 今回は、レスポンシブWebデザインのメリット、デメリットについてお話していきます。 Webサイトをマルチデバイス対応するにあたってよく使われる手法としてレス …