同じものが二回繰り返されていますので注意。HTMLはこうなります。テキストテキストテキストテキストテキストテキストimgには必ずつく属性srcがあります。中身はまだ決まってないのでダブルクオーテーション連続にしています。画像が決まった段階でいれれるようにですね。仮にapple.jpgという名前の画像ファイルを表示しようとなるとこんなかんじに。alt属性はなくても支障はないですが、SEO的に画像の説明文として入れておいたほうがいいので、セットにしておくと後がラク。メインエリアはこんなかんじですね。バナーや下層ページへのリンク、新着情報表示として使ったりします。asideh4pulliaimgasideまた見慣れないタグが出てきました。asideタグは、サイドバーに使うのに相応しいタグ。スマホ表示のときはフッターの上に移動したりさせたりします。id=”main”と同じですね。見慣れないタグでも、使い方は全く一緒なんです。p先ほどメインエリアで出てきたのと一緒ですね。小見出しテキストテキストテキストテキストテキスト見出し+本文というシンプルな構造。ul>li>a>img入れ子要素きました。headerエリアにでてきたメニューとほぼ一緒ですね。テキストが画像に変わっただけです。バナーなので、imgが出てくるのは当然ですね。小見出しテキストテキストテキストテキストテキスト※ちなみに上記の書き方で余白が空いているのは見やすいからそうしているだけであってタブキーで余白を作っています。これは改行しようが余白を開けようが表示には関係ありません。下の要素、footerエリア最後に締めくくりのフッターエリアです。footerこれも新しいタグです。最初に似ているタグが出てきたのを覚えていますか?一番最初に書いた、headerタグの対に位置するタグです。言葉の意味から推測できそうですが、フッター要素全体を囲うタグとして使用します。footerulliaHTMLはこうですね。h5今回の中で一番弱い見出し、h5です。h系のタグは6までなのでこの下にあとひとつという具合です。「メニュー」を見出しにしたいのでHTMLはメニューこうなりますね。ul>li>a対に最後のタグです!これも今まで出てきたのと同じ、簡単ですね。メニューという見出しの下に表すフッターメニュー用のリストです。クリックすると別のページに飛ぶ...という風にしたいので、HTMLは以下。menu04テキストリンクなので、全体をulで囲み、テキストリンクをliとaで囲ってあげればOK。これが3セットあるので、単純に3つ複製してあげればOKですね。menu04完成!はい、これでHTMLのコーディングが出来ました!作ったファイルを「sample.html」等の名前で保存して、ダブルクリックしてブラウザで表示させてみましょう。見た目は簡素ですがhtmlタグが打てていると思います。bodyタグも追加した完成形は以下。今回作ったサンプルファイルはこちら。ご自分のと見比べてみてください。ダウンロードは開いたあと、右クリックから「名前をつけて保存」。いかがでしたか?意外と簡単、やっぱり難しい...色々あると思いますが、流れが掴めたのではないかと思います。次はCSSを学び装飾をしていきましょう。プロモーション業務などを行う。2012年にハイファイブクリエイトを創業し、現在はディレクションや開発業務などを担当している。