画像を貼るにはimgタグを使います。htmlの画像の貼り付け方について、画像の準備の仕方も含めて解説します。この記事を読むホームページを作る前の形はほぼ決まっています。htmlテンプレートをコピペしてサクッとスタートしましょう。type="text/css"><body></body>htmlファイルを保存するブラウザで開いて確認するエディタを開くエディタを開きましょう。まっさらな状態で用意します。無料で使える高機能エディタを紹介しています。Webサイト制作のおすすめ高機能無料エディタ【Brackets】Web制作ができる最強の無料ソフトBracketsのメリット、Dreamweaverとの比較を紹介します。Dreamweaverの代わりになる無料エディタないかなぁという方にもおすすめしますし、ちょっとWeb制作始めてみたいという初心者の方にも超絶オススメです。この記事を読むCSSやhtmlの基本をしっかり理解すると、この記事の内容もより理解できるようになりますよ。↓CSSやhtmlを楽しく学べるようにマンガを描きましたのでゼヒご覧ください↓htmlやCSSをマンガで楽しく学ぼう【180ページ単行本1冊相当量】htmlから収益化までホームページ作成の基本をひととおり、マンガでクスっと笑いながら学べます。9年間ホームページを作ってきた作者の実績に基づき作られた確かな内容です。この記事を読むhtmlテンプレートまずはさくっと下記htmlテンプレートをコピーしてエディタに貼り付けましょう。type="text/css"></head><body></body></html>どんなサイトを作るにしても必ず必要になるhtmlです。html>「これからhtml5のルールに基づいてhtmlを記述します。html5は最新のhtmlの記述方式です。それより前のhtml方式は覚えなくていいです。html5をざっくり説明すると、htmlタグを必要なのものだけに絞り、属性も減らし、現代のhtmlの使い方に最適化したような形式です。覚えることが少なくなり、楽ちんになりました。lang="ja"></html>すべてのhtmlタグを囲う要素です。「lang="ja"」は「日本語のサイトです」という意味です。なくてもいいっちゃいいです。<head></head>ページの関連情報を記載する箇所です。ブラウザ上には表示されません。metaタグ、CSS・javascriptのリンク、titleタグなどを記載します。charset="utf-8">「UTF-8」という文字コードで記載します、というものです。文字コードとは何かというのは今は覚えなくていいです。/>ざっくりいうと「スマホ対応(レスポンシブ対応)」するためのコードです。これだけ書けばどんなサイトでもスマホ対応されるわけではありません。CSSの記述とセットで使います。<title></title>超重要タグです。ページのタイトルをつけます。Google検索ではこのタイトルが表示され、SEO上最も重要とされる部分です。SEOについて詳しくはこちら↓SEOの基礎【アクセスを増やすために】アクセスを増やす方法を調べると必ずと言っていいほど「SEO」という言葉に出くわします。このSEOについて、基礎的な知識と具体的な方法を解説します。content=""/>ディスクリプションと読みます。contentの中にページの説明を記載します。こちらもGoogle検索でタイトルの下に表示される部分であり、SEO上非常に重視される部分です。type="text/css">指定したスタイルシートを呼び出します。href属性の値には階層に気を付けてCSSファイルを指定します。内部リンクなどファイルの場所を指定するとき、パスを指定することになります。パスを理解しないとリンク切れや画像が表示されないということになりかねません。そんな相対パスと絶対パスについて説明します。この記事を読む<body></body>ブラウザ上に表示される部分を記述する箇所です。基本的にはこの子孫要素にhtmlを記述して、CSSでデザインを整えていきます。htmlファイルを保存するいったんここでファイルを保存しましょう。「ファイル」>「名前をつけて保存」を選択します。任意のフォルダに保存します。デスクトップに「ホームページ」というフォルダを作っておきましょう。ファイル名は拡張子が「.html」であればなんでもいいですが、とりあえず「index.html」としましょう。フォルダを開き、先ほどのファイルが保存されていることを確認しましょう。htmlにおいて名前を付けるときは半角英数をつけましょう。全角だとサーバーによっては不具合が起きたり、URLがやたら長いでたらめな記号の並びになることがあるためです。htmlだけでなく、フォルダ、CSS、画像ファイルなど、サーバーへアップするデータはすべて半角英数で名前を付けましょう。ブラウザで開いて確認する先ほどのindex.html内、<body></body>のあいだに文字を打ち込んでみましょう。type="text/css"></head><body>あああ</body></html>打ち込んだら「Ctrl+S」で保存します。次にブラウザを開きましょう。ブラウザとはあなたが普段インターネットをするときに開く以下のようなソフトのことです。Edgeブラウザを開いたら「ホームページ」フォルダの「index.html」をマウスでひっぱってブラウザに放します。ブラウザで先ほど入力した文字が表示されたらOKです。この先「index.html」を更新したら「Ctrl+S」キーで保存、ブラウザ側を「F5」キーで更新すると反映されます。※Bracketsの場合ソフト右上の雷のようなマークをクリックすると「ライブプレビュー」ができます。これを利用するといちいち保存したり更新したりする手間が省け効率的にWebサイトが作れます。次の記事>【html】画像(img)の貼り付け方この記事を読む「この記事の内容がよくわからなかった...」「なんかうまくいかなかった...」というかたは下記記事↓でhtmlとCSSの基本を学びましょう。わからないまま突き進むより基本を学ぶのが結局近道です。htmlやCSSをマンガで楽しく学ぼう【180ページ単行本1冊相当量】htmlから収益化までホームページ作成の基本をひととおり、マンガでクスっと笑いながら学べます。9年間ホームページを作ってきた作者の実績に基づき作られた確かな内容です。マンガでわかるホームページ。