前回は作ったファイルをデスクトップに保存していたが、実際はサイトごとにフォルダを作って管理するのが一般的だ。
Lesson4フォルダを作ってその中にcss,js,imagesフォルダを作成しよう。
次に、以下の画像を右クリックからダウンロードしてimagesフォルダに格納する。
準備ができたら以下のソースを打ち込む
[画像の埋め込み]
●lesson4.html
<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>画像の設置</title> </head> <body> <img src="images/nightImage.jpg" alt="幻想的な夜のイメージ" /> </body> </html>
[ソースコード解説]
8:imgタグ。画像の設置にはimgタグを使う。src属性で画像のパスを記す。alt属性は本来画像を非表示設定している人や視覚障害者のユーザビリティを向上させるものだが、SEO的にも重要なポイントだ。手抜きをせずしっかりその画像が意味する文言を記載したい。
[youtube埋め込み]
最近はyoutubeを埋め込むことも多い。簡単なので覚えてしまおう。
1.埋め込みたい動画の共有をクリック
2.埋め込みコードをクリック
3.下図ソースコードを全部コピー
4.表示したい場所に貼る(下図9行目)
●lesson4.html（変更)
<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>画像の設置</title> </head> <body> <img src="images/nightImage.jpg" alt="幻想的な夜のイメージ" /> <iframe width="560" height="315" src="https://www.youtube.com/embed/1Yq_AvGael4" frameborder="0" allowfullscreen></iframe> </body> </html>
ブラウザで表示して以下のようになれば成功だ！（表示しているブラウザ幅によっては縦に並ぶときあり）
[インライン要素、ブロック要素]
画像と動画が横にならんだのは少々意外だったかもしれない。これはimg要素もiframe要素もインライン要素だからだ。インライン要素は前後に改行が入らず横に並ぶ。
一方ブロック要素は前後に改行が入る。
今回はifame要素をdivタグで囲ってあげよう。
●lesson4.html（9行目と11行目にdivタグ挿入)
<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>画像の設置</title> </head> <body> <img src="images/nightImage.jpg" alt="幻想的な夜のイメージ" /> <div> <iframe width="560" height="315" src="https://www.youtube.com/embed/1Yq_AvGael4" frameborder="0" allowfullscreen></iframe> </div> </body> </html>
divタグは汎用ブロック要素タグで今回みたいにブロック要素として括り出したい場合やコンテンツのグループを作りたい時に使われる使用頻度の高いタグだ。これによってiframe要素が改行されたのがわかる。
[ダミーテキスト]
開発の段階では文言が定まらずとりあえずダミーテキストを配置しておくことが多い。
●代表的なダミーテキスト(Lorem ipsum)
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
今回はこれを画像の下に配置してみよう。(pタグで囲う)
●lesson4.html（変更)
<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>画像の設置</title> </head> <body> <img src="images/nightImage.jpg" alt="幻想的な夜のイメージ" /> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </p> <div> <iframe width="560" height="315" src="https://www.youtube.com/embed/1Yq_AvGael4" frameborder="0" allowfullscreen></iframe> </div> </body> </html>
ブラウザで見てみよう。以下のように表示されれば成功だ。
pタグもブロック要素だが、これからもわかるようにブロック要素は自分に許されている幅をフルに使おうとする,今はブラウザ幅いっぱいだ。試しに、ブラウザ幅を縮めてみよう、pタグの幅が縮まり、折り返されるのがわかる。
コメント