スポンサードリンク

突然こんなタイトルのメールがGoogleから届きました。

 

「Search Consoleを使用してモバイルユーザビリティ件の問題を修正」ボタンをクリックして原因を見てみました。

 

すると以下4件の問題がありました。
とりあえず1つずつ確認していきます。
-----------------------------------
・クリック可能な要素同士が近すぎます
・テキストが小さすぎて読めません
・ビューポートが設定されていません
・コンテンツの幅が画面の幅を超えています
-----------------------------------

 

「コンテンツの幅が画面の幅を超えています」

 

調べてみましたがイマイチわかりません。
表示を全て消してみるとOKになりましたので、少しずつ表示を戻してみたのですが、全て戻してもOKになりました??
ちょっとわからないのでここはそのままにして再度エラーが出るか待ってみます。

 

「ビューポートが設定されていません」
「テキストが小さすぎて読めません」
「クリック可能な要素同士が近すぎます」

 

この3つですが、エラーになっているURLを見ると画像の入っているフォルダでした。
どうやらindex.htmlが無いフォルダにアクセスして「Index of」でファイル一覧が表示されるhtmlが引っ掛かったみたいです。
これがダメだと他のindex.htmlが無いフォルダも同じことになるとまずいので、
とりあえず「.htaccess」に「Options -Indexes」を追加して403になるようにしてみました。
これで再度エラーが出るか待ってみます。

iframeでvideoタグを表示させたらフルスクリーンボタンが消えた。

 

 

上がiframeで表示させた場合。

右端のフルスクリーンボタンが出ない…

 

下がiframeを使わないでhtml内にそのまま記述した場合。

ちゃんとフルスクリーンボタンが出ます。

※ブラウザはChromeです。

 

ちょっと調べたら「allowfullscreen」ってのがすぐ出てきた。

 

<iframe src="xxx.html" allowfullscreen></iframe>

 

でフルスクリーンボタンが無事表示されました!!

きっと基本的なことだと思いますがちょっとあせりました。

よかった

レスポンシブ・ウェブ・デザインについて参考になるサイトをメモ。

ここを読んで勉強しないと・・・



今作成中のサイトで、html5で「colorbox」を使用しようとして、
W3CのValidationしたら、「rel」が引っかかったのでメモ。

調べてみたら、以下で回避できました。
 $(document).ready(function(){

  $('a').each(function(){
    $(this).colorbox({rel:$(this).attr('data-colorbox')});
  });
});


難しいね・・・
以前にもDreamweaver CS3が起動しなくなった記事を書いたことがあったけど、今回は特定のファイルを開こうとすると強制終了してしまう。
以前とは違うエラーのようです。

いろいろ調べてみたら、どうやら「全てのファイルに共通するCSSファイルにエラーが含まれていたようです。」と書いてあるサイトを発見。

早速cssファイルを1ファイルずつ消して試したら、エラーのファイルを発見。
そのファイルの中からエラーになってしまうcssを削除したら、強制終了しなくなりました。

しかし、原因はわからずじまい・・・
とりあえず起動できたからよかった。

こちらの記事を参考にさせて頂きました。
dreamweaver msvcr80.dll のエラー

エレメントのデザインを集めたサイトのリンクをメモ。

検索フォームや見出しなどエレメントのデザインを集めたサイト -Elements of Design | コリス

いろいろありますね。

web safe area一覧を掲載しているサイトがあったのでメモ。

Designers Toolbox

他にも色々掲載されていて、非常に便利でした。

■web safe area一覧
http://www.designerstoolbox.com/designresources/safearea/compare/


h:1/f:0

html5でW3Cのバリデートチェックしてみたら、エラーがでたのでメモ。

HTML5では、meta要素の「Content-Style-Type」「Content-Script-Type 」指定は不要になったみたい。

<meta http-equiv="content-style-type" content="text/css">
<meta http-equiv="content-script-type" content="text/javascript">
上記を消したらエラーが出なくなりました。

知りませんでした・・・


h:1/f:1
簡単にfaviconを作ってくれるジェネレーターがあったのでメモ。

ICON GENERRATOR

あっという間にこんな感じのアイコンがつくれます。


書き出しサイズは
16px
32px
48px
128px
256px
512px

使い方はこんな感じで簡単です。


ありがたいですね〜



html5で組むときに便利なoutlineチェックツールがあったのでメモ。

HTML 5 outliner tool

チェックしたら結構ひどいことに・・・

sectionとarticleがいまだに悩みます・・・

「追記」
セクションとアウトラインについてわかりやすく書いてあるサイトのメモ。
HTML5のセクションとアウトラインに注意!

・XHTML
<body>
  <h1>h1の見出し</h1>
  <div id="article">
    <div class="section">
      <h2>h2の見出し</h2>
    </div>
    <div class="section">
      <h2>h2の見出し</h2>
    </div>
  </div>
  <div id="nav">
    <div class="section">
      <h2>h2の見出し</h2>
    </div>
    <div class="section">
      <h2>h2の見出し</h2>
    </div>
  </div>
</body>


・html5
<body>
  <h1>h1の見出し</h1>
  <article>
    <h2>記述されていないh2の見出し</h2>
    <section>
      <h3>h2の見出し(誤)</h3>
    </section>
    <section>
      <h3>h2の見出し(誤)</h3>
    </section>
  </article>
  <nav>
    <h2>記述されていないh2の見出し</h2>
    <section>
      <h3>h2の見出し(誤)</h3>
    </section>
    <section>
      <h3>h2の見出し(誤)</h3>
    </section>
  </nav>
</body>


やっと使い方がみえてきた気がします。



スポンサードリンク