マネして作ってみよう!(手順解説付き)までは、HTMLの基本部分を作成し、実際にブラウザで文字まで表示できましたね。手始めにはホームページのレイアウトを切り分けていきたいと思います。ホームぺージを作る際に、最初に必ずといっていいほど、ホームページの画面構成を考えていかなければなりません。<img>タグを使った画像の表示方法ヘッダーの作成サンプルサイトのレイアウトをざっくり分けて見てみると赤枠で囲ったような4つの画面構成になっているのがわかります。手順001<p>タグを使った文章の表示方法まずは1番上の部分から作っていきたいと思います。こちらの部分はホームページの1番頭なので『ヘッダー』と呼ばれる部分です。ヘッダー部分を更に細かく見ていくと、3つに分けられると思います。手順002文字列が一行、ロゴは画像になっています。後は、横に並んだリンクが2つありますね。始めに文字列を入力してみましょう。World』を表示させたときは『<p>』と『</p>』はついていませんでした。これは、Pタグと呼ばれているタグです。これからこのタグを使って見たいと思います。P自体は、P要素と呼んでいます。要素とは?HTMLの要素については、この後説明がありますので、読み流して構いません。P要素はParagraphの略で、直訳すると段落ということになります。基本的には文章を書くときは、Pタグを使うと覚えといてよろしいかと思います。言い忘れていましたけど、HTMLはすべてタグと呼ばれる『<』と『>』に囲まれていなければなりません。開始タグと終了タグが一対となることがルールになっています。Pタグの場合は開始タグがで<p>で、終了タグは</p>になります。終了タグには『/』がついていますよね?これが終了タグの意味になります。※ちなみに要素は、半角で記述すること。ゆるらぎは東京都XX区にあるランチとスイーツがおいしいお店です。</p></body></html>Ctrl+sでセーブして、ブラウザを再読み込み(リロード)してみましょう。手順003HTMLコードの構造は、ツリー構造又は、木構造と呼ばれています。これらのHTMLのタグは親子関係が成り立ちます。インデントすることで、どれが親要素で、どれが子要素なのかわかりやすく記述するのが普通です。『インデント』とは、文章の頭に空白またはspaceキーで空白を挿入し、先頭の文字を右にずらす『字下げ』のことです。HTMLコードの親子関係について別で記事にしました。要素の親子関係】をわかりやすく説明するよ!HTMLを理解する上で重要な部分ですのでぜひ目を通しておきましょう。ゆるらぎ』の画像を挿入をしてみましょう。画像を挿入したいときに使う要素はimg要素を使います。要素の説明の前に先に表示させてみましょう。『</p>』の後ろで改行し、こちらのコードを張り付けてみてください。/>ブラウザで表示させてみましょう。表示できましたか?手順004ここでimg要素について説明していきたいと思います。画像を表示できてなくてもこれから説明する内容を読めば表示できなかった原因がわかるかと思います。手順005上記の画像の説明をします。img要素は特別な要素で終了タグがありません。最後に『/』で閉じられなければいけません。img要素以外にも終了タグがないものがありますが、ここでは割愛したいと思います。先ほども軽く要素について説明しましたが、HTMLの要素についてもう少し説明したいと思います。要素は、タグ全体のことを指しています。要素名がimg要素となります。先ほどのPタグもP要素と言い換えることができます。『属性』とは、開始タグの中に書くもので、タグの性質を『値』で表現することです。手順006上記の画像の説明をします。現在作成中のHTMLファイルは『index.html』ファイルでしたね。それはsampleフォルダの中に入っています。『index.html』にロゴ画像を表示させたいのなら『images』フォルダの中にあるファイル名が『logo.gif』の画像を指定してあげる必要があります。手順007『index.html』から辿ると『images→logo.gif』また『→』は『/』(スラッシュ)に置き換えてあげましょう。『/』(スラッシュ)で区切ってあげることがルールとなっていますので。表示できなかった人は、上記のことを参考にしてみるとちゃんと表示できると思います。sampleフォルダのフォルダ構成を変えてしまった人はそのフォルダ構造に合わせて指定してあげてください。基本的にsampleフォルダの構造はそのままの方が後々やりやすいでしょう。ちなみにファイルの場所を単純に『ファイルパス』と呼び、ファイルパスの指定方法には2つの方法があります。今回のファイルパスの指定方法を『相対パス』と言います。1つの方法を『絶対パス』といいます。この辺の話になると長々となってきますので・・・。詳しく知りたいのでしたらこちらscene-live.comさんの説明が非常にわかり易いですので参考にしてみてください。第3回ではPタグとimgタグを使って文章と画像の表示を行いました。Pタグは『ブロック要素』,imgタグは『インライン要素』に切り分けることができます。『ブロック要素』と『インライン要素』については一覧表を記事にしましたのでこちらを参考にしてみてくださいね。マネして作ってみよう!(手順解説付き)ホームページ制作講座この記事が気に入ったらいいねしよう!最新記事をお届けします。管理人があまりに暇人なため、しょうもないwebアプリを作ったりしてます。コメントをキャンセルメールアドレスが公開されることはありません。*ウェブサイト上に表示された文字を入力してください。マネして作ってみよう!(手順解説付き)RECOMMENDこちらの記事も人気です。DBから取得した日付を表示する際に、1日マイナス表示される2019.03.12タイピングでジョジョがふわー2018.03.22WordPressブログの読み込みが重たいから改善してみた2018.03.17俺、社会不適合者なのかも知れない。OKINAWA-HACKこのブログは、ブログで稼いでなるべく組織に属さず、いわゆるフリーランスとして生きていきたいと常日ごろ思いながら、記事を書く管理人が運営しています。プログラミングが好きな管理人です。※ちなみにトップ画像の有刺鉄線は、組織の中から抜け出したい!という願望が表れています。