はじめてのHTML&CSS入門

ブラウザ別、開発ツール

全333コースを10日間無料で

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
Google Chrome以外でも開発者向けのツールが用意されています。ブラウザ別にどのように導入するかをご紹介します。
講師:
03:58

字幕

このレッスンではデベロッパーツールについてご紹介します。では chapter05 lesson01 のファイルをブラウザで開いておきましょう。今は Chrome で開いています。それぞれのブラウザにおいてどのように開発ツールを使うことができるかをご紹介します。まず Chrome です。Chrome では「表示」>「開発管理」という中にある「デベロッパーツール」というものを選んでみます。ショートカットは Mac ではCommand+Option+I でWindows では Ctrl+Shift+I でデベロッパーツールを開きます。開きますとこのように下にウィンドウが登場しました。実はこのデベロッパーツールは今ブラウザで表示されているソースコードを直接見たり書き換えたりシミュレーションすることができます。今 div id wrapper という所にマウスカーソルを当てています。当てると左右がオレンジ真ん中が青になっているのは左右に margin が指定されているからということが分かります。右側にも Styles というタブがあってwrapper にはこのようなスタイルシートが入っています。しかも、スタイルシートの23行目です。 ということまで教えてくれます。ただ、このような機能はChrome だけでなくFirefox、Safari にもありますので見ていきましょう。次は Firefox の方を開きます。Firefox はアドオンというものをダウンロードするのが一番便利です。検索バーに「firebug」と打ち込んでEnter で検索をして一番に出てきたこのサイトに飛びます。そしてこのアドオン Firebug というものを追加というものを押してあげるとインストールの窓が出ますのでインストール。そうしますと右上にこの虫のアイコンが登場します。この虫のアイコンをクリックすると同じように色んなサイトのソースを見たりすることができる開発ツールがインストールされます。今度は Safari の方を見てみましょう。Safari は標準で開発ツールが備わっているのですが初期設定ではメニューに出ていません。ですので、Safari は「Safari 」>「環境設定」>「詳細」メニューの中の一番下「メニューバーに " 開発 " メニューを表示」をクリックするとメニューバーに「開発」というメニューが登場します。この画面はもう閉じて大丈夫です。 そして「開発」>「Web インスペクタを表示」というものをクリックするとやはり下の半分にこのようなエリアが出てきます。このように三種類のブラウザでそれぞれ開発ツールを運用できますので覚えておきましょう。このレッスンではデベロッパーツールの導入をご紹介しました。

はじめてのHTML&CSS入門

Webデザインの基本はHTMLとCSSにあると言っても過言ではありません。ブラウザにそのページの論理構造を正しく伝えるためのHTMLと、そのページをいかに見せるかを設定するCSSの二本柱をきちんと理解する必要があります。このコースでは前半でHTMLとCSSの基本を学んだのち、後半ではCSSの実際の応用の仕方や各種ツールの使い方などについて学びます。

3時間35分 (38 ビデオ)
現在、カスタマーレビューはありません…
 
ソフトウェア・トピック
価格: 2,990
発売日:2014年03月26日

このコースは、「オンデマンド」でご利用可能であり、ダウンロードすることもオンラインで見ることもできます。

ダウンロードすると、オフラインでコースを使用し、豊富なインターフェースをフルに活用できます。複数のデバイスを使用したり、 一度に全コースをダウンロードしたくない場合は、アカントにログインして、ストリーミング・ビデオとしてコースのレッスンを視聴してください。

ビデオトレーニングをお楽しみいただけますように! お問い合わせは、cs-jp@lynda.com宛までご連絡ください。