モバイルフレンドリー化チェック

  1. 現在掲載中の土手の野の花は約660ピクセル

  2. 同じくテストしている612ピクセルの高山植物

  3. これは">土手の野の花をテストしている未掲載の大きなサイズ

  4. 横にスクロール出なく縦に伸びる作成事例

  5. 横にスクロール出なく縦に伸びる作成事例2

    • pcで開いた場合(横800pxで固定)



    • スマホで開いた場合



    • PCのブラウザを最小表示にした場合
      (横はスマホあるいはブラウザの横幅に一致 ⇒ 横スクロールバーが出ない)





  6. 横にスクロール出なく縦に伸びる作成事例2

    • スマホで開いた場合



  7. 横にスクロール出なく縦に伸びる作成事例3

    いただいた見本 widthを%で書いた見本

    文字が横に隠れて見えません。
    スマホで横スクロールさせるサイトは滅多にありませんので多分読んでもらえないと思います

    横幅を%で書いたソース


    • データベースにjavascriptを使うと綺麗にそろう
    • 写真をクリックしてもリンクできるとよい
    • ボタンはスマホの幅によって改行表示できるように<td></td><td></td>のように区切らない、


  8. 土手の野の花トップ・ページの改良事例

  9. 狛犬を訪ねて№35の改良事例
    50%で作ったつもり
    改良したつもり
    すべて%で作った見本
    問題点
    ソースの問題点は
     <table width="100%"><tr><td colspan=2>
     という記述が各所にあります。
     colspan=2とは横2マスの表だが、この行は結合して1マスにする
     という意味です
     
     複雑な指定をするとタグの構成が壊れて行ってしまいます
     
     表は1項目ずつ区切って
     
     <table width="100%"> <tr> <td>
      <img src="***.gif" width="50%" align="left">
     説明文
     </td> </tr> </table>
     
     <table width="100%"> <tr> <td>
      <img src="***.gif" width="50%" align="left">
     説明文
      </td> </tr> </table>
     
     のように書いていくと分りやすいと思います
     
     つぎに<iframe>も <iframe src="***" width="50%" align="left" >
     にしてください
     
     フッダーの記述は
      <td></td><td></td>
     で区切らないでください
     
     また<p>~~~ </p>
     <div>~~~~ </div>
     
     等で必要以上に段落を作らないでください
     表内のセンターリングは#60td align="center">でOKです
    


  10. テーブルを使わずに作る見本
    <div width="650">
    
        < img src="***.jpg" width="50%" align="left">
        文章~~~~~~~~~~~~~~~~~~~~~<br clear="left">
       <img src="***.jpg" width="50%" align="left">
        文章~~~~~~~~~~~~~~~~~~~~~<br clear="left">
        <table bgcolor="#88cc88" width="100%" border="1">
                <tr><td>見出し</td></tr>
       </table>
        <img src="***.jpg" width="50%" align="left">
        文章~~~~~~~~~~~~~~~~~~~~~<br clear="left">
        <img src="***.jpg" width="50%" align="left">
        文章~~~~~~~~~~~~~~~~~~~~~<br clear="left">
    
    </div>
    


  11. モバイルフレンドリーテスト(Google)

  12. パソコンでスマホの疑似体験
    • GoogleCrome
      「f12」キーを押し、左上の縦長の四角形の重なったマークをクリックし、タイトルバーから機種を選んで、倍率を100%にすると、それぞれのスマホやタブレットの見え方が確認できます。
    • IE11
      ブラウザ画面の横幅を細くしてから、再読み込みをしたうえで横幅を変更していくと、機種による画面の変化が体験できます。