HTML/CSS

HTMLのhead要素を理解して記述できるようになろう

2020年12月27日

HTMLのhead要素を理解して記述できるようになろうと書かれた画像

 

あなた
大体HTMLとCSSの関係やWEBサイトの仕組みがわかってきたのでこんどは具体的なコードの意味が知りたいです。

 

前回はHTML要素を指定してCSSでデザインする方法を学びました。

前回:CSSでHTML要素を指定してデザインする方法

 

今回からはついにWEBページを作る流れに入っていきます。

上記のような「具体的なコードの意味を知りたい」という要望に答えていきます。

まず今回は「headタグ内のコードの意味」について解説していきますね。

 

※補足

この記事は連載の1つです。

以下の学習ステップを歩んできていることを想定しています。

>>【完全無料】HTMLとCSSの学習ステップ一覧

 

HTMLとCSSの学習ステップ一覧と書かれた画像
【完全無料】HTMLとCSSの学習ステップ一覧

  てんし君こちらはプログラミング初心者の方向けのHTMLとCSSの基本的な学習用ページです。   ここで紹介している学習カリキュラムをやりきれば、最終的にこちらのようなWebサイトを作成可能です。 ...

続きを見る

 

ではさっそく見ていきましょう。

 

HTMLのhead要素の解説

 

今回解説するコードは以下の記事で使ったものと同じです。

html css javascript
HTMLとCSSとWEBページの関係性【理解できます】

  あなたHTMLとCSSとWEBページってどんな関係性なんでしょうか?   HTMLとCSSの勉強を始めるとHTMLとCSSを使ってWEBページをつくることができるというような言葉をよく見ますよね。 ...

続きを見る

※まだHTMLファイルのコードを持っていない方は、この記事内にコードを載せているので用意してください。

 

今回はそのHTMLファイルのhead部分を解説します。

 

head部分の意味を解説

 

以下はコードの1部です。

この<head>から</head>に囲まれているのがhead要素です。

 

<head>
    <title>テストサイト</title>
    <metacharset="utf-8">
        <linkhref="css /style.css"rel="stylesheet" type="text/css" media="all">
</head>

 

こちらがタイトル部分になります。

 

 <title>テストサイト</title>

 

こちらがメタタグです。終了タグは有りません。

 

<metacharset="utf-8">

 

ちなみにタグの意味についてはHTMLで表示するための決り文句のタグの意味を理解しようを参考に学習をどうぞ。

そして最後。

以下の部分ではcssを読み込んでいます。

もうあなたならすぐにわかりますよね?

 

 <linkhref="css /style.css"rel="stylesheet" type="text/css" media="all">

 

 

以上でheadタグ内の記述の説明は終わりです。

 

次回はいよいよHTMLのメイン部分であるbodyの中身を解説していきます。

>>次の回:HTMLのbody要素とは?【メイン部分を実装していこう】

 

今回はここまでです。

ありがとうございました。

 

\ HTMLとCSSについて最初から学びたい方はこちら /

HTMLとCSSの学習ステップ一覧と書かれた画像
【完全無料】HTMLとCSSの学習ステップ一覧

  てんし君こちらはプログラミング初心者の方向けのHTMLとCSSの基本的な学習用ページです。   ここで紹介している学習カリキュラムをやりきれば、最終的にこちらのようなWebサイトを作成可能です。 ...

続きを見る

 

\ Web制作の副業で今すぐ稼ぎたい方はこちら /

wordpress
【無料あり】WEB制作を学べるオンラインスクールランキング【副業で稼ぎたい方向け】

  あなたWeb制作の副業で稼ぎたいけど、どのスクールで学ぶのが良いの? スクール選びで失敗はしたくないです。   ↑このような疑問や不安を解決するべく、現役のWebエンジニアがWEB制作を学べるスク ...

続きを見る

 

プログラミングスクールに関する情報

【無料あり】プログラミングスクールおすすめランキング【WEBエンジニアになりたい方向け】と書かれた画像
【無料あり】プログラミングスクールおすすめランキング【WEBエンジニアになりたい方向け】

  あなたプログラミングスクールに通いたいけどたくさんありすぎてどこがいいのかわかりません。   最近はエンジニアブームということもありプログラミングスクールが増えました。 一方でたくさんありすぎてど ...

続きを見る

返金保証ありのプログラミングスクールランキング【エンジニアが選びました】と表示されたパソコンの画面
【転職保証つき】返金保証ありのプログラミングスクールランキング【エンジニアが選びました】

  あなた返金保証がついているオススメのプログラミングスクールってありますか?   結論から話すと、返金保証つきのプログラミングスクールランキングは次の通りです。   1位:DMMWEBキャンプ  【 ...

続きを見る

wordpress
【無料あり】WEB制作を学べるオンラインスクールランキング【副業で稼ぎたい方向け】

  あなたWeb制作の副業で稼ぎたいけど、どのスクールで学ぶのが良いの? スクール選びで失敗はしたくないです。   ↑このような疑問や不安を解決するべく、現役のWebエンジニアがWEB制作を学べるスク ...

続きを見る

フリーランス
無料あり:フリーランスを目指せるプログラミングスクールランキング【体験をもとに徹底分析しました】

  あなたフリーランスエンジニアを目指すことができるプログラミングスクールってありますか?   最近では、高年収や働きやすさの魅力からフリーランスエンジニアを目指す方も増えてきました。 結論から話すと ...

続きを見る

WEB系自社開発企業にいけるプログラミングスクールランキング【現役エンジニアおすすめ】と書かれた画像
WEB系自社開発企業にいけるプログラミングスクールランキング【現役エンジニアおすすめ】

  あなたWEB系の自社開発企業に就職したいです。 オススメのスクールを教えて下さい。   結論から話すと、WEB系自社開発に行きやすいスクールのランキングは以下の通り。   第1位:テックアカデミー ...

続きを見る

-HTML/CSS

© 2022 エンジニアてんし君ブログ