Hatena Blog Tags
はてなブログ トップ
レスポンシブ
このタグでブログを書く
言葉の解説
ネットで話題
関連ブログ

レスポンシブ

このタグの解説についてこの解説文は、すでに終了したサービス「はてなキーワード」内で有志のユーザーが作成・編集した内容に基づいています。その正確性や網羅性をはてなが保証するものではありません。問題のある記述を発見した場合には、お問い合わせフォームよりご連絡ください。
新潟と紫とプロレス•9日前

【はてなブログ】新ブログデザイン完成！のハナシ【リニューアル】

ウス。 以前から変えると宣言していた当ブログのデザイン。 今年4月まで「カタノトモコさんデザイン」を愛用していましたが・・・ 皆さん見えてますか～ ↑この吹き出しがスマホ版に表示されないことが判明し、デザインの変更を余儀なくされることに・・・（ちなみにこの吹き出しを使う予定はまだ未定） PCとスマホ両方で同じデザイン（レスポンシブデザイン）で表示されるようにデザインを練り直すことに。 そしてゴールデンウィークから試行錯誤を繰り返し・・・ ようやく完成しました！なんとか5月中に完成。 シンプルながらもこだわりは残しました。 PC版のタイトル表示 スマホ版のタイトル表示 新日本プロレス5.29上越…

#ブログデザイン#リニューアル#レスポンシブ#吹き出し#文字色

関連ブログ

じゅんむし日記•16日前

はてなブログにお引越しして良かったこと（注意点とまとめ）

gooブログサービスが2025年9月末で終了するため、はてなブログへお引越ししました。 まず初めにテーマ（デザイン）を選ばなくてはいけないのですが、レスポンシブになってないテーマもあるので注意が必要です。 「テーマの説明」の中にレスポンシブに対応しているかしていないか書かれているので確認しましょう。 ※レスポンシブは画面サイズに合わせて自動でサイトを構築してくれるので、スマホ画面などがとても見やすくなります。ぜったいおススメです。 私が選んだテーマ（デザイン）は「Reach」です。 ＜よかったこと＞・デザインをある程度カスタマイズできる →メイン画像が入る（入ってなくてもデザイン的に良い） →…

#はてなブログ#レスポンシブ#特長#編集
マーケティングのススメ•9ヶ月前

押さえておきたいWebデザインの基礎知識・チェックポイント・おすすめ情報

こちらの記事で押さえておきたいWebデザインの基礎知識・チェックポイント・おすすめ情報などをご紹介します。ぜひ、ご活用ください。 執筆者の紹介 Webデザインの基礎知識 Webサイトの事業上の役割やその優先順位を明確にする Webサイトのコンセプトメイク Webサイトの集客（ターゲティング） Webサイトに必要なデザイン機能 Webサイトのマーケティング戦略（ロードマップ） WebサイトのPDCA Webデザインのチェックポイント Webサイトにおける視線の流れの法則性を利用する 余白を意識的に活用する レイアウト・カラーリング・フォントなどのデザインルールを決める 「近接」「整列」「反復」「…

#Webデザイン#レスポンシブ#CVR
TECHSCORE BLOG•10ヶ月前

どんなスマートフォンでも画面崩れを起こさないために

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

#フロントエンド#CSS#レスポンシブ
Askthewind’s diary•1年前

iPhoneで見ると横揺れするはてなブログの公式テーマSmoothをCSSで直してみた。

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

#CSS#レスポンシブデザイン対応#レスポンシブ#レスポンシブ対応#はてなブログカスタマイズ#テーマ#公式テーマ#レスポンシブデザイン
Askthewind’s diary•1年前

はてなブログの公式テーマEpicをレスポンシブデザインにしてみた

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

#CSS#レスポンシブ#レスポンシブデザイン対応#レスポンシブ対応#テーマ#公式テーマ#はてなブログカスタマイズ#レスポンシブデザイン
Web開発における知見共有系ページ•1年前

CSSのclampについてと実装例

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

#CSS#レスポンシブ
親バカエンジニアのナレッジ帳•1年前

CSSで設定するclampとはどのような場面で使用するのか

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

#HTML#CSS#レスポンシブ
【非公式】はてなブログの手引き•1年前

【はてなブログ】デザインテーマは「Minimalism」に限る！

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

#はてなブログの手引き#はてなブログ#デザインテーマ#Minimalism#レスポンシブ#レスポンシブデザイン対応#レスポンシブウェブデザイン
キカガク プラットフォームブログ•1年前

【CSS】もう悩まない！レスポンシブ対応

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

#CSS#レスポンシブ