レスポンシブ

こんにちは。Synergy Marketing の西岡壮太郎です。 FAVTOWN というサービスの開発を担っています。 今回は BtoB サービスを作ってきた開発者が、BtoC サービスを作って知ったスマートフォン対応についてお話します。 FAVTOWN について FAVTOWN とは 「ふるさと（生まれ育った地元や、住んだことのある愛着のある場所）を離れてがんばるひとを応援したい」 というサービスです。 「ふるさとを離れた個人」が利用する BtoC サービスであるため、利用者は主にスマートフォンで訪問します。実際に FAVTOWN wakayama に利用いただいているユーザーの 90%超…

⬆️画像だよ クリックで拡大⬆️レスポンシブデザインに対応しているはてなブログのデフォルトの公式テーマ「Smooth」を使ったブログの表示がiPhoneで見ると横揺れがするのでCSSを見てみたら、犯人がちゃんといるじゃあ、ありませんか笑。 entry-footer-adというclassの左右のマージンがネイティブマージンになっていたのだ。⬇️画像だよ 横揺れの根本的な原因はこれ⬇️ なんでネイティブマージンでデザインをととのえたのか理由はわからないけど、とりあえずCSSを修正。 (max-width: 767px) { .entry-footer-ad { margin-left: 0; ma…

↑上の画像が表示結果だよ↑ ベーシックなデザインで最も利用者の多いオフィシャルテーマ「Epic」。 レスポンシブデザインに対応してないのでレスポンシブデザインにするCSSの追加コードを作りました。 公式テーマ「Epic」専用のCSSになります。 他のレスポンシブデザインに対応してない公式テーマでは使えません。 自分用の備忘録としてCSSのソースコードを残しておく。 ↓使う方はデザイン→カスタマイズ→デザインCSSに以下のコードをコピペでどうぞ↓ /* EpicをレスポンシブデザインにするCSSコード */ /* Add Responsive design CSS for Theme Epic …

CSSのclampとは？ clampを使った実装例 clampのメリットとデメリット CSSのclampとは？ CSSのclamp()関数は、指定された値の範囲内で値を制限するために使用されます。 この関数は、3つのパラメータを受け取ります：最小値、希望する値、最大値。 ブラウザは、指定された値がこの範囲内にある場合はそのまま表示し、範囲外の場合は最小値または最大値にクランプします。 これは、レスポンシブデザインやレイアウトの調整に便利です。 clampを使った実装例 以下は、clamp()関数を使用して、要素の幅をレスポンシブに調整する例です。 .container { width: cla…

新たにブログを作ると、全体のデザインや構成をどうするか悩むと思います。はてなブログでは、デフォルトでたくさんのテーマが用意されていますが「Minimalism」を選択しましょう。 ちなみに、今ご覧になっている当ブログも「Minimalism」です。どうです、このシンプルさ。素晴らしい！使ってみたい！と思いませんか。 理由はたくさんあるので一つ一つは挙げませんが、しいて言うなら、無料で、シンプルで無駄がない、レスポンシブ対応である、この３点です。（※レスポンシブ対応とは、スマホで閲覧した時に、自動的にスマホ用のレイアウトにしてくれるということです。） 特に、デザインをどれにすればいいかわからない…

こんにちは、キカガク ソフトウェアエンジニアの平田です。 CSS のレスポンシブ対応って、大変ですよね。 調べても、こうすれば良い！の指針が意外と出てこない、経験値でカバーすることが求められる領域だと感じています。 PC オンリーの想定で実装を進めて、後からスマホ対応が必要になって泣く…みたいなケースもたまにあります。 そんな時でも、これさえ守って実装していれば苦しまずに済むのでは！という最低限の考え方だけ、書いてみたいと思います。あくまで一意見として、ご参考にして頂けると嬉しいです。 このお話の想定読者 これまで CSS をごりごり書いてこなかったけど、 CSS が必要になったエンジニアの方…

レスポンシブWebデザインとは、マルチデバイスに対応するWebサイトの実装手法です。Ethan Marcotte氏が提唱したもので、次の技術（テクニック）を使ってWebサイトを実装していきます。 Fluid Grids Flexible Images CSS3 Media Queries この３つの技術について、具体例をあげて記述していきます。 1. Fluid Grids Webページの横幅を100%として、いくつかのグリッドに分けてレイアウトする手法です。例えば、グリッドの横幅を「%」や「em」などの相対値で指定します。 .col-1 { width: 25%; float: left; …