無料ホームページテンプレート Template Party

初心者向けマニュアル公開中。完全無料でホームページを公開しよう!動画マニュアルつき。

Google Chrome(グーグルクローム)を使ってhtmlを編集してみよう

レスポンシブの動作確認

レスポンシブデザインとは、パソコン、タブレット、スマートフォン、などの様々な端末サイズに柔軟に対応する為のレイアウトです。
そのレイアウトが切り替わる際の確認と変更を行ってみます。

レスポンシブの動作確認方法

Chromeのデベロッパーツール には、レスポンシブ専用ツールもあるので使ってみましょう。
(※画像内の再生ボタンを押すと動画が再生されます。約1分57秒。)

続きの動画です。
(※画像内の再生ボタンを押すと動画が再生されます。約2分51秒。)

作ったページをスマートフォンサイズで確認してみましょう

今回はiPhoneでのプレビュー確認ですが、時間がある限り様々な端末サイズでのプレビュー確認をお勧めします。
(※画像内の再生ボタンを押すと動画が再生されます。約42秒。)

2017/01/29まで上記の動画のように、トップページのお知らせ欄に「+」アイコンが出る不具合が残っていました。
初心者向けテンプレートの場合、このアイコンは出ないのが正常な動作です。
もしすでに利用中の場合は、cssフォルダのstyle.cssの下の方にある、
/*トップページ内「更新情報・お知らせ」ブロック
・・・

からのブロック(20行ほど)を削除して下さい。

<< 「初心者向け講座」メニュー一覧に戻る