6 返信 最新の回答 日時: Aug 29, 2014 6:12 AM ユーザー:buchi555

    Muse CC モバイル表示で文字がずれる

    buchi555

      パブリッシュしてパソコン、スマートフォン(専用サイト)、タブレット(デスクトップ用でみる)で確認したとき、

      タブレット(今のところタブレットだけ)によっては文字が二行になってたり、

      変に1文字だけ改行されていることがあります。文字が左に寄ってたり。

      文字レイアウトを固定することはできないのでしょうか?

       

      ちなみに大きくずれていたのは

      祖母から借りた文字が大きめにみれる設定?のタブレットでした。

       

      私のタブレットも少しですがずれていました。

      すべての端末やパソコンで同じように見ることができる、というのは

      難しいのでしょうか?

        • 1. Re: 文字がずれる
          scape goat Level 4

          すべての端末やパソコンで同じように見ることができる、というのは

          難しいのでしょうか?

          無理ですね。

          だって根本的に画面サイズが違いますもの。

          紙とは違います。

          • 2. Re: 文字がずれる
            buchi555 Level 1

            ありがとうございます。そうですよね。

            祖母のタブレットと私のタブレットは同じ大きさなのですが、

            表示の仕方がそれぞれ違うから、そう見えたのだと思いました。

            同じようにというのは画像にするしかないかと

            考えています。

            ヤフーやグーグル、もちろんAdobeさんなどでずれたり改行がおかしい

            のを見た事がないのですが、どうやっているのか知りたいです。

            • 3. Re: 文字がずれる
              kazuma.m Level 4

              お二人のタブレットで表示が変わるのは文字サイズや表示倍率の差かと。

              Webページでは改行の位置を指定する事が出来るので、指定した位置ではかならず改行されるのですが、

              文章の途中でタブレットの横幅をこえてしまう位置でも自動的に改行されます。

               

              文字も画像にしてしまえば確かにデザインを通す事は出来るのですが、

              文字サイズが大きくして閲覧されたい方がブラウザの文字サイズの変更機能を利用できなくなる弊害もあります。

              全体を拡大表示にする事である程度対処も出来ますが、

              画像で横幅をこえた場合は横にスクロールしなければならないため、使いやすさを考えると好ましくない方法かと思います。

              • 4. Re: 文字がずれる
                scape goat Level 4

                改行がおかしくないように見せたいのなら、<br>等の手段で改行するのではなく

                文字を表示する部分の幅を%表示で設定してあげると変な部分で改行されることはないですね。

                 

                ただ私はサイトを作る際にMuseを使わないので どんな方法でそれを設定するのかはわからないのですが

                この流れからするとkazuma.mさんの方が詳しいそうだ・・・

                • 5. Re: 文字がずれる
                  Kanianthi

                  MuseはHTMLのコーディングなしにwebサイトのデザインができる代償に、DreamweaverなどのHTML編集ツールに比較して、細かい指定や、いわゆるレスポンシブデザインなど はできないツールであることが、まず最初の前提になります。

                   

                  これを踏まえた上で、PC用サイトをタブレットでもうまく表示できるように考慮してデザインする場合、まず、サイトのレイアウトの大枠を横幅いくつの縦幅いくつ(ピクセル数)でデザインするか ?という話から入り、フォントおよびフォントサイズの指定、各テキストボックスの大きさと余白(スペース)や、行送りの指定はどうすると、完全ではないにしろ、各デバイスで破綻しにくくなる方 法は?という試行錯誤が見えてくるか、と思います。

                   

                  たとえばiPad2をターゲットにするのであれば、基本768px幅でスクロールバー分のマージンをどうするか?という考えになるでしょうし、それ以外の端末をターゲットにする場合でも同様で す。また、PC版であっても、フルHD表示(1920*1024)だけを考えるのか、それ以外の解像度でも問題なくすべての領域を表示させるのか?という考察が最初に必要ですし、Retina などの高解像度モニタを前提にするならば、さらに考慮すべきレイアウト上の「計画」が必要になります。

                   

                  タブレットといっても、iOSとアンドロイドでは解像度が共通ではありませんので、どのOSのどの解像度を基準にサイトをデザインするか?という具体性がないと、それらで最適な表示、あるいは 、ある程度デバイスをまたいだとしても破綻しにくい「妥協案」が見えてこない、というわけです。

                   

                  質問者様の問題点は、おそらく各デバイス(ブラウザ)で、文字(フォント)の表示倍率を変更させているから起きている問題のように見受けられますが、逆に、最初からどのデバイスでも十分読める 大きさのフォントサイズ指定を行ってデザインすれば、各ブラウザで表示倍率を動かす必要がなくなり、文字の拡大問題(あるいは縮小問題)を解決できるかも知れません。

                  また、あくまでも文字の拡大に対処するのであれば、タブレットAとタブレットBでの破綻をよく見比べ、それらを収拾可能なレイアウトを「探す」という試行錯誤が必要になるでしょうし、Muse で実現できないことではない、と考えます。

                   

                  ただ、現状、問題がやや具体性に欠けておりますので、これ以上のお話はしにくい、というのが正直な感想です。

                  • 6. Re: 文字がずれる
                    buchi555 Level 1

                    kazuma.mさん、ありがとうございます。

                    使いやすさをも考えてデザインできるようにがんばります。

                     

                    kitasekkaさん、

                    初心者なのでなんとなくしかわかりませんが、いろいろ方法があるのですね。

                    気にかけてくださってありがとうございます。

                     

                    Kanianthiさん、

                    詳しいお話ありがとうございます。勉強になります。

                    どのデバイスでも破錠しにくい「妥協案」ですね。

                    よくわかりました。余白に余裕のあるように、と

                    理解しました。

                     

                    みなさん、助かりました!本当にありがとうございます!!!