Serviceの使い方】2020年07月11日スマホ対応・レシポンシブデザインとはスマホ対応とはスマホでも利用しやすいようにWebサイトを調整することです。この記事を読むホームページが崩れたけど原因がわからないと直しようがないですよね。原因の切り分けと特定が重要です。ホームページが崩れたときはhtmlかCSSあるいはjavascriptなど原因が考えられます。全部一気に確認はできないのでまずここではhtmlに問題がないか確認・原因特定する方法を説明します。Service(マークアップバリデーションサービス)を使うこのサイトはW3Cが運営しています。W3C(ダブリュースリーシー)とはざっくり言うとホームページの規格を標準化する団体です。Serviceがあるわけです。Service英語はわからん!パス!というあなた、ちゃんと説明するのでまだひるまないでください。使い方1.chromeを用意まずIE、Edgeなどのブラウザをお使いのみなさん、chromeを使いましょう。簡単に日本語化できるからです。Serviceへアクセスしましょう。チェックは3通り方法があります。※オプションは特に気にしなくてOKです。URI」の「Address」にURLを入力します。Upload」からファイルをアップロードしましょう。input」にチェックしたいhtmlを貼り付けましょう。使う機能だと思います。結果が表示されたかと思いますが、全部英語です。英語が得意な方ならそのままでももちろんいいですが、多くのあまり得意でない方は日本語化しちゃいましょう。ここでchromeが生きてきます。chromeで右クリックから日本語に翻訳を選択します。これだと一部見えなくなっています。白い文字になっているようです。Ctrl+Aで全選択すれば見えます。「警告」は「崩れはしないが直した方がいいよ」という箇所です。html5になって書き方が変わっている場合があるのでそのあたりで突っこまれます。「エラー」はhtmlの崩れの原因になりうる箇所です。ここを確認して修正しましょう。エラーが特定できたとき直しましょう。エラーが特定できなかったときおそらくhtmlに問題はありません。CSSやその他のファイルを疑いましょう。CSSが効かない原因と回避方法【よくあるケアレスミス】CSS効かない、htmlが崩れたときは以下に当てはまらないかチェックしてみてください。この記事を読むCSSが効かないときの原因特定方法【DevToolsの使い方】CSSの一部が効かない!何が悪いのかわからない!という方へCSSが効かないの原因特定方法を説明します。この記事を読む次の記事>スマホ対応・レシポンシブデザインとはこの記事を読む「この記事の内容がよくわからなかった...」「なんかうまくいかなかった...」というかたは下記記事↓でhtmlとCSSの基本を学びましょう。わからないまま突き進むより基本を学ぶのが結局近道です。htmlやCSSをマンガで楽しく学ぼう【180ページ単行本1冊相当量】htmlから収益化までホームページ作成の基本をひととおり、マンガでクスっと笑いながら学べます。9年間ホームページを作ってきた作者の実績に基づき作られた確かな内容です。マンガでわかるホームページ。