はじめてのHTML&CSS入門

HTMLのシミュレーション

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
HTMLをリアルタイムに書き換え、プレビューする方法を学びます。
講師:
02:23

字幕

このレッスンではデベロッパーツールを使ってHTML を書き換えるシミュレーションを学びましょう。それでは chapter05 lesson03 のファイルを開いてブラウザ上でこの「ヴェネツィア」の下にある画像が出ていないという所で右クリックをします。右クリックをしたら「要素の検証」というメニューを選びましょう。そうしますと、このようにデベロッパーツールが下に立ち上がると思います。そして、カーソルを HTML の要素に重ねるとそれぞれがハイライトされます。例えば、この section image-box にマウスカーソルを合わせると青い部分がコンテンツの領域緑色の部分がパディングオレンジの部分がマージンになっています。今回はこの img の画像がどうやら間違っているようなのでこのデベロッパーツール上で少し書き換えてみましょう。この img タグ src 属性の上にカーソルを置いてダブルクリックをします。そうすると、ここが書き換えられる状態になったのでthumb の b を補完してあげましょう。そして一度マウスを放して何も無い所をシングルクリックします。そうすると、無事に画像が出ました。つまりこれがスペルミスであることがこのデベロッパーツールの検証で分かりました。 また、この「ヴェネツィアは・・・」の場所をダブルクリックするとやはりここも書き換えることができます。なので、ここの箱にあとどれ位テキストが入るかを検証する、といったことも可能です。これは実際に HTML を上書きしているのではなくあくまでもブラウザ上でカスタマイズシミュレーションしているだけにすぎません。このレッスンではデベロッパーツールを使ってHTML をシミュレーションする方法を学びました。

はじめてのHTML&CSS入門

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

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

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

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

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