レスポン支部

スポンサーリンク

スキンをレスポンシブデザインにしてみました。
HTML5での自作です。

実はレスポンシブデザインというものをよく勉強していないのですが、
多分こんな感じのことを言うんじゃないかということでやってみました。

スマホで見ると専用レイアウトで表示されている予定。

細かい修正は残っていますが、見やすくなったと自画自賛！
新しいデザインに関するコメントはここにお願いします。

TODO
ヘッダのlinkタグ、rev=”made” が適当に書いた[email protected]のままだ。

関連コンテンツ

スポンサーリンク

「レスポン支部」への42件のフィードバック

  1. WindowsのFFで見てます。おおっ、横幅縮めると、変わるねー。
    すごーい！こんなの作ってたんだー

    あれ？でも840pxより縮めると、うまく縮まない？

    返信

  2. レポートありがとう。
    スマホでなくパソコンで見るときには、横幅が８００ピクセル以下にはならないようにしてある。

    狭すぎると見づらいと思うから

    返信

  3. なるほどなるほど。PCだとそうなのね。
    あとね、昨日見たときは、編集中っていうか、工事中？
    CSSがうまく適用できてない時みたいな印象があったの。
    たぶん、文字が黒くて、本文背景が白だったから？

    今、本文に背景色がついてよくなったね

    返信

  5. 背景色はきのうからついてたけどな
    TOPページもそんなに重くないと思うけど、どうかな？

    返信

  6. カテゴリTOPにも一覧があるんだ。
    文字色が真っ黒じゃない方が、印象がいいかも？ちょっとグレーとか。

    返信

  7. うちの高性能パソコンではどのページ見てもぜんぜん重くはないけど。
    そっか、リンクの文字色のスタンダードな青と本文の黒の文字色が、工事中っぽさを見せてるのかも？

    返信

  8. 昨日、っていうか今朝、早朝起きて、ここ見てたら、
    すぐちびこが泣いて起きてきたから、よく見られなかったんだよね。
    スマホのシミュレートしてみた？

    返信

  9. なるほど。意見を参考に色などは検討しよう。
    ところでIE９で見るとどう？ちゃんと動く？

    返信

  10. ページのソースコードをコピペして、
    <body>を<body id=”sp”>と書き直して開けばスマホ表示になる。

    返信

  12. ありがとう。
    では基本動作はOK

    あとは、デザインの調整とサイドバーだな。
    コメントプレビュー欄の改行も1個余計についてるぽい。

    返信

  13. ＞ページのソースコードをコピペして、
    ＞<body>を<body id=”sp”>と書き直して開けばスマホ表示になる。

    間違えた。スクリプトをコメントアウトしないとダメだ。
    グーグルでスマホプレビュー出来るサービスがあったよな。
    URLわかる？

    返信

  14. 今はじめて起きた現象だけどスタイルシートを読み込めなかった。
    ファンブログから送出されなかった模様。

    ＞あとね、昨日見たときは、編集中っていうか、工事中？
    ＞CSSがうまく適用できてない時みたいな印象があったの。

    これは多分その現象が起きたから。
    頻繁に起こるなら対策を考える。

    返信

  15. 今ね。人のスマホ奪ってみてみたら、全画面横幅の三分の一で、小さく見えてたよ。
    意図としては、横幅いっぱいに見えたいんだよね。

    前にinaliちゃんが言ってたシミュレーター？
    私も、どれだっけ？って探してみたんだけど、よく分からない。どれだ？

    返信

  18. ＞iPod touchでみたらこんな感じに…。

    うおおおー。こんなんか？
    でも横幅だけ調整すればいいっぽい。

    ありがとう。

    返信

  21. シミュレーターはiOS5までのものしか付いてないけど、場所はGoogle Chromeの右端の上にある三をクリック、
    ツール→デベロッパーツール→インスペクタが開くので、そこで右下端のギヤのマークををクリックして
    まん中のタブ、Overrideを選んで、User Agent のチェックボタンを入れて、iPhone-iOS5とか選んぶとできるよ

    返信

  24. お付き合いいただいている中、恐縮ですが
    空腹のため、昼食後の作業とさせていただきます。

    Thank You.

    返信

  25. 食事を終えました。
    スタイルシートを直したので、今度は横幅いっぱいに表示されていることを期待します。

    問題はフォントサイズです。
    読める大きさなのかわかりません。
    スマホやipodではストレスなく読めますか？

    返信

  26. 本物では見てないですけど、Override には Fits in Window って項目があって
    そこにチェックを入れると、本物サイズで見えるみたいですよ。
    たぶん、上手くできてる。

    inaliちゃんは、傷心で寝るって言ってたから、しばらく起きないかもね。
    グレーなんだけど「技術のタマゴ」、ぐー活では
    http://pc.cocorodesign.net/
    本文には＃654,他には#876,＃A98を使ってみてます。

    返信

  27. 今、本物アンドロイドスマホで見てみました。
    縦にしても横にしても、幅いっぱいにきれいに見えるよ。おめでとう。

    縦だと、やっぱり文字小さいなーって思うけど
    横にすると、読みやすいと思う。

    返信

  29. でもスマホって、画面一部分の拡大ができるから、
    縦はこのフォントサイズで全体が見わたせればいいのかなー？

    スマホユーザーじゃないから、よく分かんないや。

    返信

  33. ありがとう。じゃあ文字サイズはこれで決める。
    スーパーに失恋したのか かわいそうに。

    返信

  35. こんばんは。

    すごく変わりましたね。
    別サイトかと思いました。

    スマホだと違うのですね。
    私は持ってないので、確認できないです。
    すみません。

    返信

  37. inaliさん。ありがとう。
    画像まで送ってくれたのに、返事もしていなかった。
    今日、これからいろいろいじってみます。

    返信

  38. こんばんは

    ランスロットさんのブログからアクセスさせていただきました。
    記事も拝見させていただきました。
    ファンブログの状況や、コピペ紹介ブログの件は耳に痛いところです。
    アフィリエイトをしてみようと始めましたが、難しい世界である事を
    実感しています。コマーシャル番組がテレビ番組に近いブログに
    なってしまうのは避けようと思っても、それに近い様な状況ですね。
    お二人のお考え、ごもっともです。
    心機一転どうあるべきかを考えていたところでした。
    参考にさせていただきます。
    有難うございました。

    返信

  39. iPadのSafariでみてみたら、TOPページが、記事ごとで枠の大きさが違って
    段が大きくずれてみえるよ。
    CromeのシミュレーターでiPadを指定したら状態がわかるよー。

    返信

  40. ありがとう。実はそれはもう直してあるんだけど、他の部分を合わせて変えてアップする予定。

    返信

  41. こんにちは。

    最新記事の
    「Google Analyticsのイベント トラッキングはaddEventListenerやattachEventでは計測されない」
    では、タイトルが長くて、下の「カテゴリー」などの文字とかぶって見づらかったです。
    分かっていることかもしれませんけど、一応報告しておきます。

    返信

コメントを残す

メールアドレスが公開されることはありません。 ※ が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください。