レスポンシブデザイン対応のテンプレートサイト10選
こんにちは、開発チームの宇都宮です。普段はレスポンシブと同様のマルチデバイス対応を実現する「GeneCode（ジーンコード）」に携わっています。 今回はレスポンシブデザインに対応しているHTMLテンプレートをダウンロードできるサイトを調査してみました。数千種類を超えるテンプレートを保持しているサイト …
レスポンシブWebデザイン、CSSフレームワークなど、Webフロントエンド開発に関するBLOGです。
※SYMMETRIC公式BLOGと統合し、ブログ名称を変更しました
※SYMMETRIC公式BLOGと統合し、ブログ名称を変更しました
レスポンシブの画像切り替えができるsrcset属性
こんにちは、開発チームの青木です。普段はレスポンシブと同様のマルチデバイス対応を実現する「GeneCode（ジーンコード）」に携わっています。 今回は、レスポンシブの画像出し分けを適切に行うことができるsrcset属性についてお話していきます。 レスポンシブデザインのウェブサイトで使用される画像につ …
サイト制作者が語るレスポンシブWebデザインのメリット
こんにちは、開発チームの田中です。普段はレスポンシブと同様のマルチデバイス対応を実現する「GeneCode（ジーンコード）」に携わっています。 今回は、レスポンシブWebデザインのメリット、デメリットについてお話していきます。 Webサイトをマルチデバイス対応するにあたってよく使われる手法としてレス …
レスポンシブ対応のフォントサイズで使用できる単位
こんにちは、開発チームの宇都宮です。 普段はレスポンシブと同様のマルチデバイス対応を実現する「GeneCode（ジーンコード）」に携わっています。今回は、レスポンシブ対応のフォントサイズで使用できる単位についてお話していきます。 レスポンシブデザインを実現したい場合、フォントサイズをどの様に指定する …
レスポンシブ対応メニューを作るための簡単なCSSライブラリ Bulma
こんにちは、開発チームの青木です。普段はレスポンシブと同様のマルチデバイス対応を実現する「GeneCode（ジーンコード）」に携わっています。 本記事はBulmaを用いたナビゲーションメニューバーの作成方法についてのご紹介となります。 もちろんPC表示、スマホ表示で見た目が変わるレスポンシブデザイン …
CSS グリッドレイアウトでレスポンシブ対応
こんにちは、開発チームの青木です。 普段はレスポンシブと同様のマルチデバイス対応を実現する「GeneCode（ジーンコード）」に携わっています。 本記事は比較的新しい機能であるCSS Grid Layoutのご紹介をいたします。 CSS Grid Layoutとは、floatやflexboxと異なり …
レスポンシブの費用問題
前回は、PCサイトをスマホ対応する際の問題について論じました。 今回はレスポンシブのコスト問題についてフォーカスします。 スマホサイトにコストを重点配分すべき レスポンシブ制作における、最終的な問題はコストです。レスポンシブの初期の頃に比べ、多くのツールやライブラリ、cssフレームワークが出てきて開 …
PCサイトをスマホ対応する際の問題
前回は、レスポンシブの問題について論じました。 今回はPCサイトをスマホ対応する際の問題についてフォーカスします。 レスポンシブではPCコンテンツの影響が大きい 一般的にレスポンシブでのWeb制作はPCサイトをデザインすることから始まります。今でも多くのWeb制作ガイドの書籍はPCデザインをベースに …
レスポンシブの視点別デメリット
レスポンシブは、コスト/複雑性/画面変化が問題 現在のWebサイトでは、PCでもスマホでも快適なUIが求められています。その際に用いられる方式がレスポンシブ（デザイン）です。１つのhtmlソースで画面サイズの違うデバイスにフィットするUIを提供できるデファクトスタンダードな方式として広く普及していま …
【D3.js講座】D3.jsで折れ線グラフを描画する（後編）
- 2017.01.06
- JavaScript
- D3.js
前回はd3.scaleLinear(), d3.line()を使用し、折れ線グラフの描画を行いました。 今回は前回作成した折れ線グラフをもとに、x軸、y軸、目盛りの追加をご紹介します。