背景と実施したこと TailwindCSSを使用してPCレイアウトのWebサイトのレスポンシブ対応を実装しました。 今回は静的コンテンツの配置を横並びから縦並びに変えるという内容のみ実施しています。 CSSは少し苦手意識があったのですが、TailwindCSSを使うとかなりローコストかつシンプルに記述できたので そのノウハウを主に初心者の方向けに記述していきたいと思います。 目次 概要 前提とやりたいことの整理 考え方の整理 実際のコード例 補足とまとめ 概要 TailwindCSSを使ったレスポンシブ対応の実際のコード例と考え方を初心者向けに記載するよ。 画面表示上、横並びだったものをスマホレイアウトにすると縦並びにする、という例で説明するよ。 メディアクエリの使い方とはもちろんだけど、HTMLタグの記載の順番を意識することがポイントだよ。 前提とやりたいことの整理 【前提】 + Tai
デジタルプロダクション「factory4」でアプリやさまざまなIoTプロジェクトのUIUXデザインを手がける新谷友樹さんが、UIやUXにまつわるトピックについて解説する本連載。今回は、「レスポンシブデザインとブレイクポイント」についてです。 こんにちは！株式会社Cosmowayが組織するデジタルプロダクション「factory4」のUIUXデザイナー新谷です。 今回はウェブサイトのレスポンシブデザインと、そのうえで重要なブレイクポイントについてです。レスポンシブやブレイクポイントは、デザイナーやエンジニアの皆さんにとっては当たり前の手法として用いていると思いますが、PCやタブレット、スマホなどさまざまなデバイスが登場し、多種多様な閲覧・活用方法があるため、改めて整理してみたいと思います。 各デバイスは解像度が大きくなり数年前とはサイズが大小さまざま違います。そんな中で現在の主流となったデバイ
ステマ対策の文言を入れるためにヘッダの画像に文字を書き込んでみた。レスポンシブデザイン対応していないのでスマホはどうするのが正解なのか。 - 自己満足な日記or備忘録 akayamaqueen
また変わった？って数日の間にコロコロと ブログのデザイン迷走してました・・・。 デザインテーマを変えたけど、どうも気にくわなくて 全く愛着がわかず、なんかイヤー。 デザインなんかどうでもいいじゃん、 とは思えなくてね。 こだわりが強いみたい。 アップデート なんでこうなったか 紆余曲折 さいごに スマホ表示のヘッダ画像変更～スマホでやる アップデート もうもとに戻すぞ！！！ 実は、いろいろ変えているうちに もともとのデザインってどれだった？ってわからなくなっちゃったの。 おバカよね。 たぶん、コレだった？？か分からないけど 覚えてる人もいないよね。 一応、元に戻したつ・も・り。笑。 ていうか、アップデートしたんだよ。 デザインは元に戻して（たぶん） 背景とヘッダ画像を変更して終了 なんでこうなったか ステマ規制対策のためにデザインをかえたという 数日前のブログがこちら ⇩ fatbotto
【はてなブログ】スマホから見た時のデザインを変更する方法（レスポンシブデザインの設定） - yunico's fluffy life
はてなブログをスマホから利用されている方も多いと思いますが、デフォルトデザインのままではブログオーナーさんの個性や好みを反映させることができません。 そこで、この記事でははてなブログのスマホ版デザインをカスタマイズする方法を詳しく解説します。 【比較】デフォルトとカスタマイズ 見た目 特徴 スマホ版デザインの変更方法 パソコンから変更する スマホから変更する レスポンシブデザインについて はてなブログでの注意点 【比較】デフォルトとカスタマイズ 見た目 まずは、はてなブログのデフォルトデザインと、カスタマイズした状態を比較してみます。クリック・タップで画像を拡大できます。 デフォルトカスタマイズ印象がガラリと変わりますね。 特徴 デフォルト カスタマイズ シンプルで基本的なレイアウトがあらかじめ設定されている。 独自のレイアウトやデザインを設定できる。 カスタマイズは制限されているが何かを
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
TailwindCSSのレスポンシブデザイン - Qiita
レスポンシブデザインとブレイクポイントについて改めて整理してみた