HTML&CSSでWebサイトを作ってみよう!

画像を配置する

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
Webサイトの世界観を伝えるためには、画像が欠かせません。画像の配置と、注意すべき点を学びましょう。
講師:
05:24

字幕

このレッスンではイメージタグによる画像の配置を学びます。それではレッスンフォルダのsite フォルダの中にあるindex.html をブラウザで開きましょう。ブラウザで開きますと、サイトの完成予想図が出ますが、実はこのサイトにはイメージタグによる画像の配置が二つだけです。まずはこのロゴ部分、Chrome でドラッグしてみると、ちょっと、このようにうっすら動きます。これが実は画像タグ、イメージタグで作られている証だったりします。またこの「あなたの旅にアイデアを」というのもドラッグで動かせます。実際に動かせるわけではないのですが、イメージタグを判別するときに役立ちます。他の車の写真であったり、企業情報の上にあるこの画像は実はドラッグしても動きません。このイメージとして使われている画像は CSS による背景として使っています。同じ画像なのですが、HTML で画像を貼るときはその HTML 上で意味として置き換えられる、できればテキスト情報として置き換えられる画像をHTML 上で置いてあげるのが望ましいと思っています。HTML は情報設計ですので、雰囲気や飾りつけの画像はできるだけ CSS で配置できたらと思います。 なのでこの更新情報の鳥の画像もCSS で設定していますし、このフッターの画像も実は CSS で設定されています。それではフォルダに戻って、begin のフォルダをSublime Text にドラッグ&ドロップします。そして index.html をダブルクリックで開き、ロゴの画像を入れたいと思います。このフォルダのimages フォルダの中に既に二つ画像が入っています。それでは h1 の a の中の、文字情報を切り取って、そしてイメージタグを入れたいと思います。img と入れたら Enter を押して保管を入力してもらいます。そしてイメージのソース属性の中には画像のパスが入ります。画像のパスとは画像までの道順です。なのでこの index.html から見てimages という引き出しの中に入っているこのファイル名、という指定の仕方をしたいので、まず images/ でフォルダ名を指定したら、logo-header.pngと打ち込みます。そして画像にはできるだけalt 属性をつけておきましょう。alt 、そして = 、ダブルクォーテーション(”) でここに先ほど切り取ったテキストをペーストしておきます。 これでもしも何らかの理由で画像が読み込まれなかった、もしくは画像ではなくて音声ベースでウェブをブラウジングしている方にはこの文字情報が読み上げられるということになります。では上書き保存をして右クリックから、Open in Browser を選びましょう。そうしますと先ほどまで文字情報だったところが、このように画像として置き換わったと思います。もう一か所画像として置き換えたいのが、「あなたの旅にアイデアを」というところですので、また Sublime Text に切り替えます。「あなたの旅にアイデアを」の部分を切り取ります。そして先ほどと同様に、まず img タグで Enter 。そしてソース属性にはまずフォルダ名そして h2-copy.png と入力して、alt 属性で 今切り取ったテキストをペーストしておきます。そして上書き保存をして、ブラウザにフォーカスして更新してみましょう。ここが広がったのですが、画像は見えていません。実はこの画像、ドラッグすると分かるのですが、白い画像なので、ほぼ見えない状況になっていますが、とりあえずは画像としてドラッグができるような感じであれば、見えていますので、大丈夫です。 ということでまずは画像をHTML で配置するときは文字としても置き換えられるようなものとしてイメージタグを使うという風に覚えておきましょう。このレッスンでは画像タグについて学びました。

HTML&CSSでWebサイトを作ってみよう!

HTMLとCSSについての断片的な知識だけではウェブサイトを構築することはなかなか難しいでしょう。そこでこのコースでは、架空のサイトを実際に構築しながら、シチュエーションに合わせたHTMLとCSSの使い方について学んでいきます。実際のWeb制作の現場でどのようにHTMLとCSSが使われているかを確認しながら、実践的なスキルを習得しましょう。

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

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

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

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