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

CSS

レスポンシブ対応のおすすめCSSフレームワーク5選【2020年版】

 こんにちは、開発チームの宇都宮です。 普段はレスポンシブと同様のマルチデバイス対応を実現する「GeneCode」に携わっています。 レスポンシブデザインを実現したい場合、CSSフレームワークを使用することでデザインのレイアウトやUIを簡単に作ることができます。CSSフレームワークでは、よく使われるレ …

レスポンシブ対応するためのCSSの書き方

NO IMAGE

 こんにちは、開発チームの宇都宮です。普段はレスポンシブと同様のマルチデバイス対応を実現する「GeneCode」に携わっています。 今回はレスポンシブデザインでWebページを作る際の基本テクニックをご紹介したいと思います。レスポンシブデザインというのは、スマートフォンやPC、タブレットといった異なる画 …

レスポンシブサイト用ブレイクポイント考察!時代に適するサイズとは?

NO IMAGE

 こんにちは、開発チームの青木です。普段はレスポンシブと同様のマルチデバイス対応を実現する「GeneCode(ジーンコード)」に携わっています。今回は、レスポンシブサイト用のブレイクポイントについてお話していきます。 2019年発売のスマホ端末の状況も鑑みて、今年の適切なブレイクポイントは480px/ …

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

NO IMAGE

 こんにちは、開発チームの宇都宮です。 普段はレスポンシブと同様のマルチデバイス対応を実現する「GeneCode(ジーンコード)」に携わっています。今回は、レスポンシブ対応のフォントサイズで使用できる単位についてお話していきます。 レスポンシブデザインを実現したい場合、フォントサイズをどの様に指定する …

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

ナビゲーションPC

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

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

CSS Grid Layout 例

 こんにちは、開発チームの青木です。 普段はレスポンシブと同様のマルチデバイス対応を実現する「GeneCode(ジーンコード)」に携わっています。 本記事は比較的新しい機能であるCSS Grid Layoutのご紹介をいたします。 CSS Grid Layoutとは、floatやflexboxと異なり …

SVGで作るスマホ用チェックボックスの基本

  • 2016.09.05
  • CSS

 前回はCSSだけで作る角丸ボタンの基本を紹介しました。 今回はSVGを使ってきれいに チェックボックス を作る作り方を紹介します。 チェックボックスもスマホサイトではよく見かけると思います。 同意を求めるときや、最終確認の際に チェックボックス は必需品だと思います。 目立たせたい場合もあると思うの …

CSS だけで作る角丸ボタンの基本

  • 2016.06.29
  • CSS

 CSS だけで角丸ボタンを作る作り方 こんにちは! 我々は弊社の製品ジーンコードを使って日々PCサイトのスマホ最適化に向けて変換を行っています。 実際に仕事の中で使ったマルチデバイス対応におけるちょっとした技術を、このブログに書き留めておきます。 今回はCSSだけで角丸ボタンを作る作り方です。 スマ …

Page Top