はじめてのHTML&CSS入門

画像を配置する(img)

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
HTMLに画像を配置する方法と、画像に必要な情報を記述しましょう。
講師:
04:07

字幕

このレッスンでは画像を表示させるイメージタグについて学びます。それでは、チャプター2レッスン9のファイルを開いてみましょう。画面ではファイナルの完成のファイルを開いています。これは写真が入っていますね。この写真を表示するためにビギンのファイルを開いて編集をしていきましょう。サブライムテキストでビギンのファイルを開くと既に観光名所の情報が入っています。この dt タグで囲まれたこの「伊勢神宮」というエリアに画像を置いていきます。イメージタグを打つ前にフォルダを確認しておきましょう。フォルダでチャプター2のフォルダを開くとindex.html とimages フォルダがあります。index は編集をする HTML ファイルimages は画像を格納するためのフォルダです。名前はなんでも良いのですがimages という名前が一般的ですのでこのように記述をしています。そして、images フォルダを開くとjingu という jpg が入っています。jpg は画像の形式です。この画像ファイルを呼びだすためにHTML のタグを記述していきます。それではサブライムテキストに戻り「伊勢神宮」というワードをCommand+X もしくはWindows で Ctrl+X で切り取ります。 切り取りましたらイメージタグを記入します。img 半角スペース、そしてsrc そして =ダブルクォテーション2つ "" そして一旦 としておきます。これで画像を入れる準備ができたのですがやはり画像も参照先を設定してあげなくてはなりません。ですので、この src はsource の略です。この src 属性にはimages フォルダのimages/ ですね、/ はディレクトリを表します。images フォルダの中のjingu.jpg という風にファイル名を正確に記述します。そして、イメージタグはもう1つ src 属性の他に必要な属性があります。その属性は altalternative テキスト代替テキストです。そして、属性は = そして、"" でその内容を記述しますけどオルタナティブテキスト、代替テキストは画像が表示できない場合に表示されるメッセージであったり音声の読み上げブラウザーなどでブラウジングをしている方にその情報を知らせてあげる為のテキストになっています。ここに先程切り取っておいた「伊勢神宮」というテキストをCommand+V Windows では Ctrl+V でペーストしておきます。 完了しましたらCommand+S 上書き保存ですね。Windows では Ctrl+Sそして、右クリックのコンテキストメニューを開き「Open in Browser」を押してブラウザ上で表示します。無事に画像が表示できました。ですので、画像1個に対してイメージタグが1つずつ必要になるということになります。このレッスンではイメージタグについて学びました。

はじめてのHTML&CSS入門

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

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

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

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

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