はじめてのHTML&CSS入門

インターフェイス

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
Developer Toolは複雑なインターフェイスになっていますが、Webデザイナーがよく使用するパネルなどをご紹介します。
講師:
03:38

字幕

このレッスンではデベロッパーツールの使い方そしてデベロッパーツールでよく使うボタンやウィンドウの紹介をします。まず Chapter05 lesson02 のファイルをブラウザで開きましょう。そして開発ツールを表示させます。「表示」>「開発」>「デベロッパーツール」を選びます。また、右クリックからデベロッパーツールを開くこともできます。例えば、「このサイトについて」という所で右クリック「要素の検証」というのを押すと「このサイトについて」という所がデベロッパーツール上でもフォーカスされた状態で開くことができます。また、このデベロッパーツールの虫眼鏡ボタン、これをクリックすると自分が見たい要素の場所をこのように表示してくれます。そしてその場所でクリックすればそのエリアがフォーカスされます。また、ウィンドウが狭くてこの下部分の半分を、切り離したいという時は右上のこのボタンこの状態になった時もこの右上のこのボタンを押すことで切り離したり下にくっつけたりというのを選ぶことができます。次に、このバッテンマークこれは何がしかのエラーがあった時に表示される画面です。ここを押してみましょう。そうすると、このようにFailed そして load resourceつまり何かが読み込まれなかったというエラーを表しています。 ブラウザ上ではスクロールするとどうやらヴェネツィアの写真が読み込まれていないようです。そうすると、ここのファイルを見てみますとVenice の thum.jpgこれはスペルが間違っています。thumbnail の thumb なのでb が抜けていますね。なので、画像がもし出なかったときはこのようにデベロッパーツールが教えてくれたりもします。次に Resources のタブをクリックするとこの Web サイトで使われているフォルダーの構成や画像などがすべて見ることができます。ここで赤くなっているのはやはりスペルが間違っているからです。また、この歯車のアイコンを押すと様々な設定を変えることができます。例えば CSS を使わない設定がどうであるとかユーザーエージェントと呼ばれるモバイル端末でエミュレーションする機能であるとかそういった様々な設定をこちらで変えることもできます。デベロッパーツールは非常に有用な機能がたくさん詰まっていますがまずは HTML と CSS を表示させるElements タブから覚えていくようにしましょう。このレッスンではデベロッパーツールのご紹介をしました。

はじめてのHTML&CSS入門

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

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

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

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

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