【HTML】Webサイトの基本のHTMLを学ぼう!「HTMLの基本」【入門編】 投稿者:Ka-Chan 投稿公開日:2020年4月23日 投稿カテゴリー:HTML 投稿コメント:0件のコメント こんにちは、Ka-Chanです。こちらの記事は、私のメモのようなものです。HTMLを取得するにつれて学んだことを記事にしてまとめています。参考になったらと思います。下記のような手順で学んでいきました。それでは、今回は「HTMLの基本」についてです!これから紹介するタグについては今後詳しく説明していくよていです。なので、「このようなものがあるんだぁ~」という風に考えていただければと思います。 HTMLの開発環境を用意しよう! HTMLとは? HTMLの基本 HTMLの要素 HTMLの属性 HTMLの見出し HTMLの段落 HTMLのスタイル HTMLの書式 HTMLの引用 HTMLのコメント HTMLの色 HTMLの基本 HTMLドキュメントについて すべてのHTMLドキュメントは、<!DOCTYPE html>のドキュメントタイプ宣言で始まる必要があります。HTMLドキュメント自体は<html>で始まり</html>で終わります。HTMLのコードが可視化される部分は<body>と</body>間にあるコード内容です。例は下記の通りです。body内にある見出しと文章の部分が表示されています。 See the Pen ExVgBzo by Nakashima (@ka-chan) on CodePen. HTML見出し HTMLの見出しタグは、<h1>~<h6>のタグがあります。使い方はそれぞれですが、基本的にこのように考えて使えばよいかと思います。<h1>タグは最も重要な見出しにつかいます。<h6>タグは最も重要でない見出しにつかいます。それから下記のように大きさが変わっていきます。<h1>タグが一番大きく<h6>タグが一番小さいです。 See the Pen wvKoOXZ by Nakashima (@ka-chan) on CodePen. HTML段落 HTMLの段落は、<p>タグで表すことができます。例は下記のようになります。 See the Pen zYvobXw by Nakashima (@ka-chan) on CodePen. HTMLリンクは<a>タグで表すことができます。例は下記のようになります。 See the Pen xxwgrjg by Nakashima (@ka-chan) on CodePen. リンクの宛先はhref属性で指定することができます。属性は、HMTL要素に関する追加情報を提供するために使用されます。属性については、また違う記事で詳しく説明できたらと思います。 HTML画像 HTMLで画像を表示するときに使うタグは<img>タグです。画像を表示させるために必要なフォルダーの場所を指定するのはsrcです。代替テキストはaltで、幅と高さを指定するのはwidthとheightです。例は下記のようになります。※下記のようにインターネット上にある画像を表示させることができます。 See the Pen vYNgZzR by Nakashima (@ka-chan) on CodePen. HTMLボタン HTMLボタンは<button>タグで表すことができます。例は下記のようになります。 See the Pen bGVgRmJ by Nakashima (@ka-chan) on CodePen. HTMLリスト HTMLリストは、<ul>タグ(順序なし・箇条書き)または<ol>(順序付き・番号付きリスト)表で表すことができます。その後<li>タグ(リストアイテム)で表示させるアイテムを指定することができます。例は下記のようになります。 See the Pen pojRwGv by Nakashima (@ka-chan) on CodePen. それでは、こちらの記事はこれで終わりです。ザックリとHTMLの基本なものを説明していきましたが、また違う記事で一つ一つ説明できたらと思います。次の記事はこちらです。 タグ: HTML Please Share This Share this content Opens in a new window Opens in a new window Opens in a new window Opens in a new window Opens in a new window Opens in a new window Opens in a new window Opens in a new window Opens in a new window Opens in a new window Opens in a new window その他の記事を読む 前の投稿【HTML】Webサイトの基本のHTMLを学ぼう!「HTMLとは?」【入門編】 次の投稿【HTML】Webサイトの基本のHTMLを学ぼう!「HTMLの要素」【入門編】 おすすめ 【HTML】Webサイトの基本のHTMLを学ぼう!「コメント」について【入門編】 2021年2月20日 【HTML】Webサイトの基本のHTMLを学ぼう!「HTMLとは?」【入門編】 2020年4月22日 【HTML】Webサイトの基本のHTMLを学ぼう!「HTMLの引用」【入門編】 2021年2月20日 コメントを残す コメントをキャンセルコメントコメントする名前またはユーザー名を入力してください メールアドレスを入力してコメント Web サイトの URL を入力してください。(任意) 次回のコメントで使用するためブラウザーに自分の名前、メールアドレス、サイトを保存する。