要素ブログ運営ブログやWEBデザインを始めるにあたってHTMLは欠かせない言語ですねそこで今回は初学者向けにHTMLの基本的な内容を解説していきます。違いは?HTMLを勉強する方法は?などを知りたい方向けの記事です。まとめそもそもHTMLとは?HTMLはWEBサイトを作るための言語マークアップ言語と言われるWEBサイトを作るにはCSSやJavaScriptも勉強しようインターネットでWebサイトを見るときGoogleChromeやIE(InternetExplorer)、FireFoxなどを使います。iPhoneならSafariを使いますね。これらのインターネットを見るためのソフトをブラウザと言います。このブラウザに表示されているWebサイトはすべてHTMLというマークアップ言語で書かれているわけです。HTMLはWebサイトを作るためのマークアップ言語といわれます。当サイトもHTMLで書かれています。現代のWebサイトはカラフルだったりアニメーションがついていたりと多機能なので、HTMLだけではなくCSSやJavaScriptという言語も使われています。ブログの始め方を5ステップで解説!(初期費用はいくらかかるの?)今回の内容はブログを開設するための5ステップです。私がブログを開設したときの経験や後悔をもとに解説していきます。確認方法は2通りあります。パソコンでHTMLを確認するには【F12】を押すサイト上のどこでもいいので右クリックをして出てくるメニューの「検証」をクリックするすると、画面右にずらっと文字が出てきますが、これがHTMLです。以下でHTMLの説明をしていますが、その都度見比べながら読み進めてください。再度【F12】を推すと非表示になります。タグと要素HTMLのタグと要素HTMLのタグとはHTMLを確認すると”<p>”や”<body>”のように不等号(’<’と’>’)で囲まれた記号があります。このように不等号で囲まれたかたまりを「タグ」や「HTMLタグ」といいます。先ほどの<p>は「pタグ」、<body>は「bodyタグ」と言います。タグにはたくさん種類がありそれぞれに役割があります。今回は、タグの役割を確認するのでその種類については別記事で紹介します。タグには開始タグと終了タグがあります。pタグはHTMLで文章を書くときに使います。どこからどこまでが1つの段落なのかを示すために開始タグと終了タグをつけるわけです。XHTML<p>ここに文章を書きます。</P>1<p>ここに文章を書きます。</P>上に示すように<p>が開始タグ、</p>が終了タグです。終了タグはバックスラッシュ(/)をつけで書きます。pタグだけでなくほかのタグもバックスラッシュで終了タグを表します。HTML上でひとまとまりの役割を表すものをタグと言う開始タグと終了タグで囲む終了タグを必要としないものがある要素とは次に、タグで囲まれたすべての部分を「要素」と言います。pタグの例で言うとXHTML<p>ここに文章を書きます。</P>1<p>ここに文章を書きます。</P>pタグの開始タグ(<p>)から終了タグ(</p>)までのすべてを要素と言い。今は「pタグで囲まれた要素」なので「p要素」と言います。属性とは先ほど、タグにはたくさん種類があると書きました。その一例としてpタグを見てきたわけですが、次に属性を説明するためにaタグを例に見ていきましょう。aタグとはリンクを書くときに使うタグです。以下のように青字になっているのがリンクと言われるものです。とことん独学ブログTOPへHTMLの書き方はaタグで以下のように書きます。aタグで囲まれているのでこの全体を「a要素」と言います。noopener">とことん独学ブログTOPへ</a>だいぶ長いですが、「a」と書かれているのが分かりますね。aタグであるということです。注目してもらいたいのは開始タグ内に書かれている「href=」や「target=」、「rel=」です。これらはaタグに機能を追加しています。「href=」の続きにリンク先のURLを書くことでクリックしたときにリンク先のWebサイトにアクセスできるようになります。このように、タグに機能を追加するものを「属性」と言い、属性は開始タグ内に書きます。属性は複数追加することが可能です。上の例も「href=」「target=」「rel=」のように3つの属性を持っています。それぞれ「href属性」「target属性」「rel属性」と呼ばれます。ここでは、簡単のため「target属性」「rel属性」の解説は省きます。属性値とは属性に指定されている値を属性値と言います。noopener">とことん独学ブログTOPへ</a>href属性に注目するとhref=”https://www.self-study-blog.com/”と書かれています。このイコール(’=’)の右辺を属性値と言います。「target属性」「rel属性」に関しても同様にイコールの右辺が属性値です。属性によってとれる属性値は決まっています。href属性ならリンク先URLを属性値にとるなどです。本で勉強するオンラインで勉強するスクールに通う本で勉強するブログやWEBデザインではHTMLだけでなくCSSやJavaScriptも使います。全部勉強するのは負担が大きいと思いますので、まずはHTMLとCSSから始めることをおすすめします。WordPressを使ったブログの場合はHTMLとCSSだけでも十分だと思います。JavaScriptを使うとコチラのようなページを作ることができます。RinkerKindleで探すAmazonで探す楽天市場で探すYahooで探すオンラインで勉強するPaizaやprogateのようなサイトで学習する方法もあります。月々の料金はかかりますが、環境構築の手間もなく動画で進められるのでおススメです。私が実際にpaizaを使ったときの感想は以下の記事にまとめています。(2020年時点)関連記事paizaラーニング有料会員が語るメリット・デメリットこの度、paiza(プログラミング学習サイト)で有料会員として受講してみたのでそのとき感じたメリット・デメリットを紹介します。無料会員に関係する話も出てきます。この記事の情報は2020年6月のものです。[...]スクールに通うWebデザインを本業にしたい人や独学で挑戦したけど挫折した人はスクールに通った方が勉強を進めやすいかもしれません。心が折れそうなときにはサポートしてくれる人がいるのは心強いですし、実際に現役エンジニアから話を聞く機会を得られるのはスクールならではですね。それぞれが何を表すのかを正確に覚えておきましょう。HMTLの学習を進めるうえで今回紹介た単語はたくさん出てきます。その時に各用語の意味が分からないと、その都度勉強がストップしてしまいます。用語の定義を正確に覚えることは学習をスムーズに進めるうえで重要です。困ったら何度でも戻ってきて確認してくださいね。関連する記事ブログ運営2020年9月4日2021年6月30日10記事でGoogleアドセンスに一発合格できた話。コメントをキャンセルメールアドレスが公開されることはありません。※サイト次回のコメントで使用するためブラウザーに自分の名前、メールアドレス、サイトを保存する。ABOUT独学で学んだことをアウトプットしているブログです。Highlighterの改行が崩れる原因と解決法10記事でGoogleアドセンスに一発合格できた話。とことん独学ブログ.。