Web制作

ポートフォリオ制作 【Head編】

皆さんこんばんにちは、ユウです。

今回は、ポートフォリオの<head>部分について紹介していこうかと思います。

<head>部分には、<meta>タグなどを多く含む要素です。

少し覚えていない機能などがあるかもしれないので、<head>の書き方を確認するようにして下さい。

ポートフォリオにあんまりhead内は関係ないと感じるかもしれませんが、ゆくゆくは使う技術となってくるので、覚えるようにしましょう。

以前の記事で、ポートフォリオ制作の下準備としてどのようなポートフォリオを制作していくか紹介しているので、そちらから見ていただけるとスムーズに進められるかと思います。

ポートフォリオ制作 【準備編】皆さんこんばんにちは、ユウです。 今回は、ポートフォリオ制作について紹介していきたいと思います。 実際に私が過去に作ったもの...

それでは、早速初めて行きたいと思います。

<head> コード

私が制作したポートフォリオの<head>内容はこんな感じですね。

ポートフォリオ自体は、HPやプロフィール欄に置いておくものなので検索向きではありません。

ポートフォリオは検索エンジンにあまりかからなくても良いので、今回の<head>内についてはあまり詳しくはしなくても大丈夫です。

ですが、通常のWebサイトを作るときに必要となっていく知識なので、何を行っているコードなのかは見ておいた方が良いかと思います。

meta charset

metaの中にcharsetを書くと言語の指定ができるようになります。

この指定を行うことで、HTMLの記述方式(文字コード)を設定できるようになります。

言語の指定をすることで、文字化けを防ぐことができ、日本サーバーではUTF-8等を指定することで文字化けを起こさなくなります。

日本で使用される主な文字コードは、4種類ほどあるので他のも調べて、利用してみてはどうでしょうか。

詳しい情報はタグについての記事で紹介しているので、見てみてはどうでしょうか。

【metaタグ攻略】HTMLのタグまとめてみた【No.2】今回はmetaタグについて簡単に紹介してみました。Web制作初心者の方はmetaタグってよく見るけど一体何なの?と思う方もいるかもしれませんね。そんな方に向けて,name属性,http-equiv,charsetなどを比較的わかりやすく書いているので足を運んでみて下さい。 ...

link shortcut icon

linkタグの中にshortcut iconを入れると、ブラウザのアドレスバーに表示される小さいアイコンを表示することができます。

赤枠で囲んだ部分などの表示をしていきます。

ここに画像を表示しておくと、オリジナル性があり、かなり良い雰囲気になるのでなるべくやっておいた方が良いかと思います。

指定する画像はpngやgif、iconの拡張子を使えます。

meta name description

name属性の値をdescriptionにすると、そのサイトに関する説明を表示することができます。

赤枠で囲んでいるような、感じで表示されます。

この文字数は大体160字以内にすることが推奨されています。

meta name keyword

name属性の値をkeywordにすると、その記事に関する情報を結びつけることができます。

これを書いても、Googleの検索エンジン(SEO)にかかりやすくはならないので特に力を入れる必要はありません。

このタグが発揮されるのは、beingという検索エンジンとなります。

もし、Googleの検索エンジンで検索されるようにしたいのならば、descriptionの方に力を入れるのが良いかと思います。

過去にも紹介しているタグなのでリンクを張っておきます。

【metaタグ攻略】HTMLのタグまとめてみた【No.2】今回はmetaタグについて簡単に紹介してみました。Web制作初心者の方はmetaタグってよく見るけど一体何なの?と思う方もいるかもしれませんね。そんな方に向けて,name属性,http-equiv,charsetなどを比較的わかりやすく書いているので足を運んでみて下さい。 ...

meta name viewport

name属性の値をviewportにすると、スマホやタブレットのモバイル端末で最適にWeb表示させることができます。

Googleで推奨されている書き方は私が書いているような書き方となっています。

他の書き方で、widthを指定したり等できるので興味がある方は調べてみてはどうでしょうか。

面倒くさいという方は、このままでも大丈夫です。

meta name author

name属性の値をauthorとすると、そのHTMLを作成した作者情報を記入できます。

このauthorを書いておくと何の効果があるの?といわれても実際のところあまり効果は無いです。

今後検索エンジンが賢くなると、authorが意味を成すようになるのではないでしょうか。

もし、手間にならないという方は、誰が制作したのかは分かるので書いておいても良いのではないでしょうか。

【metaタグ攻略】HTMLのタグまとめてみた【No.2】今回はmetaタグについて簡単に紹介してみました。Web制作初心者の方はmetaタグってよく見るけど一体何なの?と思う方もいるかもしれませんね。そんな方に向けて,name属性,http-equiv,charsetなどを比較的わかりやすく書いているので足を運んでみて下さい。 ...

link

linkタグで様々な外部ファイルを読み込むことができます。

今回はrelの属性値をstylesheetにしCSSを読み込むようにしていますが、linkタグは様々な外部ファイルを読み込むことができ、頻繁に使うので良く覚えておくようにして下さい。

特にCSSで使用する機会が多いかと思いますので、CSSが適用されないなと感じる場合は、初歩的なミスではありますがlinkタグで記述していないことを考慮してみてはどうでしょうか。

https://cupuasu.club/html-tag-no1/#ltlinkgt

title

titleタグではその記事の題名を表示する事ができます。

titleタグはそのサイトの目印となるので、このタグは必ず書くようにしましょう。

このタグは検索エンジンにも関係しているのでよく考えて決めるようにして下さい。

https://cupuasu.club/html-tag-no1/#lttitlegt

最後に

今回は<head>について紹介してきました。

<head>は閲覧者に対しては見えないのですが、かなり重要な役割を持っている部分です。

HTMLの様々な情報を設定できる箇所であり、SEOにもかなり関わってくるので良く理解しながら作成していくようにして下さい。

そうすることで、内面からも良いサイトが作成できるようになります。

今回はこれで以上となります。

最後まで読んでいただきありがとうございました。

ユウ
ユウ
この記事の続きは以下のリンクから見られるよ!
ポートフォリオ制作 【ヘッダー編 1】今回はポートフォリオ制作のヘッダー編の前半となります。Bootstrapでヘッダーを制作すると簡単にナビゲーションバーができレスポンシブも簡単なのでぜひポートフォリオ制作をする際はBootstrapを使用してヘッダーを制作してみてはどうでしょうか。今回はそんな方に向けた記事となります。...
ABOUT ME
ユウ
ユウ
プログラミング担当です。夜行性大学生やってます。 メンバーの中で一番プログラミングが得意で、将来はBMIという研究をしてALSの患者さんへの医療機器の開発を目標にしています。(すごそう) 無線LAN有線LANより便利。