00 レスポンシブホームページ基本講座

Webサイト制作

レスポンシブホームページ制作講座の初回講座です。

レスポンシブとは、スマートフォン・タブレット・パソコン画面をHTMLはひとつで、CSSで見た目を可変するデザインのことです。

今回のレスポンシブホームページ基礎講座は、その概念と考え方を行います。

そこで、まず最初に使い方を覚えておく必要がある、google クロムの検証ツール「chromeデベロッパーツール」の使い方を行います。レスポンシブ講座では必須なので、ここでしっかりと使いかたを覚えていきます。

chrome 検証 デベロッパーツールを覚える

はてな?
はてな?

デベロッパーツールって何ですか?

yoshiko先生
yoshiko先生

デベロッパーツール=開発者ツールですよ。もともとは、firefox のFirebug というプラグインが最初で、このツールが発展しました。
https://developer.mozilla.org/ja/docs/Tools/Migrating_from_Firebug

便利なツールで、コードの検証ができます。

はてな?
はてな?

コードの検証とは?プログラムの変なところを探すのですが?

yoshiko先生
yoshiko先生

このデザインはどのようなCSSが設定されているか? ユーザーエージェントスタイルシートを確認しつつ、適用させるCSSを書いていきます。

デベロッパーツールには、デバイスを確認するボタンもついており、このボタンを使って、画面をPC・ipad・スマートフォンの画面でみた時の切り替えが可能です。

レスポンシブホームページ基本講座 動画

00 レスポンシブホームページ基本講座 chrome 検証 デベロッパーツールを覚える

コメント

タイトルとURLをコピーしました