TechAcademy（テックアカデミー） Webデザインコース Webデザイン HTML HTML5でページ内リンクを設定する方法を現役エンジニアが解説【初心者向け】
オーダーメイドコース
icon
icon
HTML

HTML5でページ内リンクを設定する方法を現役エンジニアが解説【初心者向け】

初心者向けにHTML5でページ内リンクを設定する方法について解説しています。ページ内の指定の部分へ遷移させるリンクをページ内リンクといいます。ページ内リンクの記述方法と実際の動作をサンプルコードで見ていきましょう。

テックアカデミーマガジンは受講者数No.1のプログラミングスクール「テックアカデミー」が運営。初心者向けにプロが解説した記事を公開中。現役エンジニアの方はこちらをご覧ください。 ※ アンケートモニター提供元：GMOリサーチ株式会社　調査期間：2021年8月12日～8月16日　 調査対象：2020年8月以降にプログラミングスクールを受講した18～80歳の男女1,000名　 調査手法：インターネット調査

HTML5でページ内リンクを設定する方法について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。

そもそもHTMLの記述方法がわからない場合は、HTMLの書き方について解説した記事を読むとさらに理解が深まります。

 

なお本記事は、TechAcademyのオンラインブートキャンプWebデザイン講座のHTMLカリキュラムをもとに執筆しています。

 

田島悠介

今回は、HTMLに関する内容だね！

大石ゆかり

どういう内容でしょうか？

田島悠介

HTML5でページ内リンクを設定する方法について詳しく説明していくね！

大石ゆかり

お願いします！

目次

 

ページ内リンクとは

ページ内リンクとは、開いているページの中で、別のところへ遷移するリンクのことをいいます。よくブログ記事のページの目次などで見かけます。

 

[PR] Webデザインで副業する方法とは

idタグを使った指定方法

ページ内リンクは、遷移先のHTML要素にidを付与し、リンクにそのidを指定することで設定することができます。

以下のような形です。

<a href="#news">ニュースへ</a>
<h2 id="news">ニュース</h2>

このように設定場合、「ニュースへ」というリンクをクリックすると「ニュース」という見出しへ遷移するページ内リンクが完成します。遷移先のidを指定する場合、「#」を頭につけるというところがポイントです。

 

実際に書いてみよう

それでは「りんご」、「みかん」、「もも」の見出しとテキストを配置し、その見出し部分へのページ内リンクを設定したリンクを設定します。

See the Pen
ページ内リンク by Pei (@Pei-Log)
on CodePen.

リンクをクリックすると適宜、対象のコンテンツ部分へ遷移することが確認いただけるかと思います。

 

まとめ

ページ内リンクは、遷移先のHTML要素にidを付与し、リンクにそのidを指定することで設定することができます。遷移先のidを指定する場合、「#」を頭につけるというところがポイントです。

 

監修してくれたメンター

土田隼平（つちだしゅんぺい)

フリーのWebエンジニアです。
最近までは求人サービスや画像共有システム、ECサービスの開発・運用をやってました。

趣味はラジオ（特にオールナイトニッポンとJUNK）を聞くことや近所の散歩です。
今の最重要ミッションは「運動不足解消」です。

 

大石ゆかり

内容分かりやすくて良かったです！

田島悠介

ゆかりちゃんも分からないことがあったら質問してね！

大石ゆかり

分かりました。ありがとうございます！

 

TechAcademyでは、初心者でもオリジナルWebサイトを公開できるオンラインブートキャンプWebデザイン講座を開催しています。

挫折しない学習方法を知れる説明動画や、現役エンジニアとのビデオ通話とチャットサポート、学習用カリキュラムを体験できる無料体験も実施しているので、ぜひ参加してみてください。

記事を検索

関連するキーワード

関連する記事

HTMLで追加されたfigureを使う方法を現役エンジニアが解説【初心者向け】

HTMLで追加されたfigureを使う方法について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。 &...
HTML

jQueryでHTMLを書き換える方法を現役デザイナーが解説【初心者向け】

jQueryでHTMLを書き換える方法について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。 そもそ...
HTML

HTMLで文字の太さを細字にする方法を現役エンジニアが解説【初心者向け】

HTMLで文字の太さを細字にする方法について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。 そもそも...
HTML

HTMLのinput要素でパスワードの入力欄を作成する方法を現役エンジニアが解説【初心者向け】

HTMLのinput要素でパスワードの入力欄を作成する方法について、テックアカデミーのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。...
HTML

HTMLでspan要素で囲った部分を改行する方法を現役デザイナーが解説【初心者向け】

HTMLでspan要素で囲った部分を改行する方法について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。 ...
HTML

HTMLの書き出しコーディングが不要なデザインツールSTUDIOの使い方を現役エンジニアが解説【初心者向け】

HTMLの書き出しコーディングが不要なデザインツールSTUDIOの使い方について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心...
HTML

あわせてよく読まれている記事

HTMLでページ内リンクがずれる原因を解消する方法を現役エンジニアが解説【初心者向け】

HTMLでページ内リンクがずれる原因を解消する方法について、テックアカデミーのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。 目次ページ内リンクとはidタグを使った指定方法実際に書いてみようまとめ監修してくれたメンター そもそもHTMLの記述方法がわからない場合は、 HTMLの書き方について解説した記事を読むとさらに理解が深まります。   田島悠介 今回は、HTMLに関する内容だね！ 大石ゆかり どういう内容でしょうか？ 田島悠介 ページ内リンクがずれる原因を解消する方法について詳しく説明していくね！ 大石ゆかり お願いします！   ページ内リンクとは ページ内リンクとは、Webサイトの同一ページ内で画面表示を移動させるリンク要素のことを指します。 このリンク要素は各セクションのタイトルなどにひもづけられており、それらにはジャンプ先の目印であるid属性（アンカー）が設定されています。 今ご覧になっているこの記事ページにも目次部分にページ内リンクがあり、各見出しの位置へジャンプできるようになっています。   記述方法 ページ内リンクをHTMLに記述する際は、以下のようにaタグのhref属性にジャンプ先のid名を設定します。 <a href="#section01">ページ内リンク</a>   さらにジャンプ先のセクションタイトルなどには、ページ内リンクとひもづいたid属性（アンカー）を設定します。 <h2 id="section01">セクションタイトル</h2>   以前は空のa要素にname属性で名前をつけることでアンカーとしていたものの、HTML5以降はid属性を使用することで、アンカーとして設定できるようになっています。   ページ内リンクがずれる例 アンカーをつけることで適宜閲覧したい箇所へ移動できるものの、ジャンプ先の位置がずれてしまうケースがあります。 原因の多くは、ヘッダー位置を画面上部に固定しているためです。 ジャンプ先のセクションタイトルなどの要素の上に固定ヘッダーが重なって表示されてしまうため、表示がずれているように見えてしまうわけです。 以下の例では、わかりやすいように固定ヘッダーの背景色を透過させています。 上に固定ヘッダーが重なっているだけで、正確にセクションタイトルの位置にジャンプできていることが確認できます。 See the Pen Untitled by nomallica (@nomallica) on CodePen. [PR] Webデザインで副業する方法とはページ内リンクがずれる原因を解消する方法 では、固定ヘッダーの際の表示ずれを回避するための方法を紹介します。 CSSでアンカーとなるセクションタイトルに対して、ヘッダーの高さ分のpadding-topと、ヘッダーの高さ分のネガティブマージンをmargin-topに設定することで、ページ内リンクのジャンプ先を上にずらせます。   以下の例では、CSSに下記の記述を付け加えています。 .section h2 {     padding-top: 60px;     margin-top:-60px; } See the Pen ページ内リンクがずれる原因を解消する方法 by nomallica (@nomallica) on CodePen.   まとめ 今回は、HTMLでページ内リンクがずれる原因を解消する方法について説明しました。 ページ内リンクのジャンプ先の位置がずれるのは、ヘッダーを固定しているのが原因です。 位置のずれを解消するためには、CSSでアンカーとなる部分に対して、上部にパディングとネガティブマージンを設定する方法を試してみましょう。 jQueryで調整する方法もありますが、今回はCSSで簡単に調整できる方法を紹介しました。   大石ゆかり HTMLでページ内リンクがずれる原因を解消する方法がよく分かったので良かったです！ 田島悠介 ゆかりちゃん、これからも分からないことがあったら質問してね！ 大石ゆかり 分かりました。ありがとうございます！   HTMLを学習中の方へ これで解説は終了です、お疲れさまでした。 つまずかず「効率的に」学びたい 副業や転職後の「現場で使える」知識やスキルを身につけたい HTMLを学習していて、このように思ったことはありませんか？ テックアカデミーのWebデザインコースでは、第一線で活躍する「プロのWebデザイナー」が教えているので、効率的に実践的なスキルを完全オンラインでしっかり習得できます。 合格率10%の選考を通過した、選ばれたWebデザイナーの手厚いサポートを受けながら、オリジナルのWebサイト制作を学べます。 まずは一度、無料体験で学習の悩みや今後のキャリアについて話してみて、「現役Webデザイナーから教わること」を実感してみてください。 時間がない方、深く知ってから体験してみたい方は、今スグ見られる説明動画から先に視聴することをおすすめします！
HTML

CSSでページ内リンクのアンカーをスタイルする方法を現役エンジニアが解説【初心者向け】

CSSでページ内リンクのアンカーをスタイルする方法について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。   CSSについてそもそもよく分からないという方は、CSSの書き方について解説した記事をみてみましょう。   なお本記事は、TechAcademyのオンラインブートキャンプWebデザイン講座のCSSカリキュラムをもとに執筆しています。   田島悠介 今回は、CSSに関する内容だね！ 大石ゆかり どういう内容でしょうか？ 田島悠介 ページ内リンクのアンカーをスタイルする方法について詳しく説明していくね！ 大石ゆかり お願いします！   目次 CSSのページ内リンクとアンカーについて CSSでアンカーをスタイルできること アンカーをスタイルする時の注意点 アンカーをスタイルしてみよう まとめ   CSSのページ内リンクとアンカーについて <a>要素のことをアンカータグと呼びます。 <a>要素でページ内リンクを作成するには、リンク先の要素にidを指定し、<a>要素のhref属性でそのidを指定しましょう。 なおアンカーとは「錨」や「しっかり固定する」という意味です。 <a href="#sec1">リンク</a> <h1 id="sec1">見出し</h1>   ページトップに移動したい時は以下のように「#」または「#top」をhref属性に指定しましょう。 <a href="#">リンク</a>     [PR] Webデザインで副業する方法とはCSSでアンカーをスタイルできること アンカーは通常青字で下線を引いたスタイルで表示されます。 また、遷移したことのあるアンカーは紫色で表示されます。 これらはCSSで色や下線の表示を変更することが可能です。   アンカーをスタイルする時の注意点 アンカーをスタイルする際は、文字の見た目やカーソルなどがアンカー要素であることが分かるように注意しましょう。 意図しない動作はユーザーに分かりづらく、再度ページを訪れてくれる可能性も少なくなります。   アンカーをスタイルしてみよう 今回のサンプルプログラムでは、ページ内リンクのアンカー要素のスタイルを変更する方法について確認しましょう。 index.html <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Sample</title> <style> h1 { display: inline-block; } a { text-decoration: none; color:
CSS

HTMLで複数のアンカーリンクが使えない理由を現役エンジニアが解説【初心者向け】

HTMLで複数のアンカーリンクが使えない理由について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。   そもそも、HTMLの記述方法がわからない場合は、 HTMLの書き方について解説した記事を読むとさらに理解が深まるでしょう。   なお本記事は、TechAcademyのオンラインブートキャンプWebデザイン講座のHTMLカリキュラムをもとに執筆しています。   田島悠介 今回は、HTMLに関する内容だね！ 大石ゆかり どういう内容でしょうか？ 田島悠介 複数のアンカーリンクが使えない理由について詳しく説明していくね！ 大石ゆかり お願いします！   目次 アンカーとは アンカーリンクの設定方法と注意点 アンカーリンクを使ってみよう   アンカーとは アンカーとは、ページ内のリンクのことをいいます。 ページが縦に長い場合にその「ページ内リンク」を押すことで、同じページ内の表示位置を変えること可能です。 ブログなどのテキスト量の多い場合には、目次を用意することで、すぐに見たいところに飛ぶことができます。 また、ランディングページではヘッダー内にページ内リンクを作成したり、お問い合わせボタンをページ内に複数配置しておくことでユーザーが見たい情報を見やすくなり、使いやすいページとすることが可能です。   [PR] Webデザインで副業する方法とはアンカーリンクの設定方法と注意点 アンカーリンクはidタグを使用して、アンカーとしたい目印の位置にid名を付けていきます。 このときにidタグを複数作成する場合には、名前が重複しないように別のid名を付けなければなりません。 hタグなどの見出しにid名を付ける場合にはcssで装飾するための記述の方法と同様です。 h2 id=”test1″のように記述していきましょう。   次に、リンクを作成します。 aタグを使用することになるものの、リンク自体は「文字」や「画像」でも構いません。 外部のページを表示するリンクと同様にa href=”（移動先のid名）”として、閉じタグとの間にはリンクとして選択される文字などを記述することになります。 注意点としては、HTML５の前のHTML４まではname属性でアンカーを記述しいているコードもあり、a name=”test1″となっている古いコードで記述してあるwebサイトの修正の場合はidに書き直さなければなりません。 また、その他の注意点としてはid名を単純な名前にしている場合はid値が重複し、正しく表示されない可能性があります。 通常、一つのページ内では同じid名を使うことはありません。   しかし、複数のページで同じid名を使っている場合は注意が必要です。 カテゴリページなどで複数のページを表示できるようしている場合や別のページの引用文の中にid名が入っている場合はid名が重複します。 このような事態を想定される場合は、aタグをページ内相対値とするのではなく、絶対値としてwebページのアドレスから記述することで回避することが可能です。 a href=”（表示するwebページのアドレス/移動先のid名）”とすることで重複しなくなります。   アンカーリンクを使ってみよう 通常では、webサイトは上から下へ読まれていきます。 そのため、サイトの上部にリンク先のボタンや文字など用意することになります。 このリンクは画像などでも構いません。 そして、任意の位置にidを付けることでアンカーリンクを作成することが可能です。 (htmlファイル) <a href="#test1">ページ内リンクへ移動</a> <a href="#test2">ページ内リンクへ移動</a> <div> <p>テキスト</p> <p>テキスト</p> <p>テキスト</p> <p>テキスト</p> <p>テキスト</p> <p>テキスト</p> <p id="test1">ページ内リンク</p> <p>テキスト</p> <p>テキスト</p> <p>テキスト</p> <p>テキスト</p> <p>テキスト</p> <h2 id="test2">見出し</h2> <p>テキスト</p> <p>テキスト</p> <p>テキスト</p> <p>テキスト</p> <p>テキスト</p> <p>テキスト</p> <p>テキスト</p> </div>   執筆してくれたメンター 木村勇土 TechAcademyの現役メンター。 現在は行政書士事務所を運営しており、お客様にはプログラマーやフリーランサーも多い。 WordPressを中心とした自社のWebサイトの修正などを行なっている。   大石ゆかり HTMLで複数のアンカーリンクが使えない理由がよく分かったので良かったです！ 田島悠介 ゆかりちゃん、これからも分からないことがあったら質問してね！ 大石ゆかり 分かりました。ありがとうございます！ TechAcademyでは初心者でも、オリジナルWebサイトを公開できるオンラインブートキャンプを開催しています。 また、現役エンジニアから学べる無料体験も実施しているので、ぜひ参加してみてください。
HTML

JavaScriptでページ遷移する方法を現役エンジニアが解説【初心者向け】

JavaScriptでページ遷移する方法について、テックアカデミーのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。 実際のコードをもとに解説していきますので、理解を深めていきましょう。 JavaScriptでページ遷移することで、JavaScriptの処理に応じたページ遷移が可能になります。 実務でも、JavaScriptでページ遷移することで、クリックされた場合などに操作に応じたページ遷移を行うため、ぜひ学習してみてください。 また、入門向けのJavaSriptを学習できるサイトも紹介しているので、あわせてご覧ください。 目次ページ内リンクとはidタグを使った指定方法実際に書いてみようまとめ監修してくれたメンター そもそもJavaScriptについてよく分からないという方は、JavaScriptとは何なのかについて解説した記事を読むとさらに理解が深まります。   田島悠介 今回は、JavaScriptに関する内容だね！ 大石ゆかり どういう内容でしょうか？ 田島悠介 JavaScriptでページ遷移する方法について詳しく説明していくね！ 大石ゆかり お願いします！   JavaScriptでページ遷移する方法 JavaScriptでページを遷移する方法です。 利用シーンとして2つの方法を紹介します。 自身のページを別のページへ遷移する方法 別画面を起動し、別画面でページ遷移する方法   1.自身のページを別のページへ遷移する方法 自身のページを別のページへ遷移する指定の仕方は、次のようにlocation.hrefに対してURLを代入します。 location.href = "URL" 利用するのは、”location.href”を利用します。 このプロパティは、現在のページのパス情報を含んでいます。 値を変更すれば、ページ遷移ができます。   2.別画面を起動し、別画面でページ遷移する方法 別画面を起動し、別画面でページ遷移するには、”open”メソッドを利用して新しい画面を開くと同時にページ遷移を行います。 open( "URL","_blank") ; “open”メソッドは新しい画面を開くメソッドです。 第1引数に遷移したいURL(パス)を指定します。 第2引数には、何も指定しなくても良いのですが、新しい画面を開く場合は”_blank”を指定します。   実際に書いてみよう ここでは、実際にJavaScriptで遷移する方法を書いてみましょう。   サンプルコード // 1.自身のページを別のページへ遷移する方法 location.href = "http://techacademy.jp/"; // 2.別画面を起動し、そちらでページ遷移する方法 open( "http://techacademy.jp/", "_blank") ; 解説 location.href = “https://www.google.com”;では、この行が読み込まれたときに、開いているページがテックアカデミーのページに遷移します。 open( “https://www.google.com”, “_blank”) ;では、この行が読み込まれたときに、新しいページが開きテックアカデミーのページに遷移します。   [PR] Webデザインで副業する方法とはまとめ 今回は、JavaScriptのコードを利用したページ遷移処理を解説しました。 location.hrefを利用すると、同じ画面でページ遷移が可能になります。 openメソッドの第2引数に”_blank”を指定することで、新しいウィンドウが開き、指定ページへ遷移します HTMLでJavaScriptを読み込む（呼び出す）方法についても参考にしてみてください。   大石ゆかり 内容が分かりやすくて良かったです！ 田島悠介 ゆかりちゃんも分からないことがあったら質問してね！ 大石ゆかり 分かりました。ありがとうございます！   JavaScriptを学習中の方へ これで解説は終了です、お疲れさまでした。 つまずかず「効率的に」学びたい 副業や転職後の「現場で使える」知識やスキルを身につけたい プログラミングを学習していて、このように思ったことはありませんか？ テックアカデミーのフロントエンドコースでは、第一線で活躍する「プロのエンジニア」が教えているので、効率的に実践的なスキルを完全オンラインでしっかり習得できます。 合格率10%の選考を通過した、選ばれたエンジニアの手厚いサポートを受けながら、JavaScript・jQueryを使ったWebサービス開発を学べます。 まずは一度、無料体験で学習の悩みや今後のキャリアについて話してみて、「現役エンジニアから教わること」を実感してみてください。 時間がない方、深く知ってから体験してみたい方は、今スグ見られる説明動画から先に視聴することをおすすめします！
JavaScript

HTMLでhref属性の使い方を現役エンジニアが解説【初心者向け】

HTMLでhref属性の使い方について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。 そもそも、HTMLの記述方法がわからない場合は、 HTMLの書き方について解説した記事を読むとさらに理解が深まります。   なお本記事は、TechAcademyのオンラインブートキャンプ、Webデザイン講座のHTMLカリキュラムをもとに執筆しています。   田島悠介 今回は、HTMLに関する内容だね！ 大石ゆかり どういう内容でしょうか？ 田島悠介 href属性の使い方について詳しく説明していくね！ 大石ゆかり お願いします！   HTMLでhref属性の使い方について サイト作成では必ず登場する、aタグとそれに紐づくhref属性の使い方について解説してみます。 aタグとは。リンク＝次のページ・コンテンツへつながるドアのようなもの。と理解しておくと良いでしょう。ドアの先には行き先が必ずあるものです。行き先がhref属性と覚えておきましょう。 これらはセットです。hrefの中が空白であると構文エラーになり、表示動作も不安定になります。注意しておきましょう。 <a href="https://techacademy.jp/">テックアカデミー</a> これを和訳すると、「テックアカデミー」と書かれた箇所をクリックすると、実際のテックアカデミーのサイトに遷移する。となります。   hrefのよくある「行き先」5種 リンクの行き先は、内部と外部のどちらも設定することができます。主に以下の5つになるでしょう。 サイト内の別のページへ遷移する 同じページ内の違う位置へ遷移する（ページ内リンク） 外部サイトへ遷移する サイト内のファイルに直接遷移する（例えばPDFなど） サイト内のファイルに直接遷移、そしてダウンロードする（例えばzipファイルなど） 以下がそれぞれのリンクの書き方です。　※４、5番目は実際のリンクではありません。 <a href="https://techacademy.jp/webdesign-wordpress-set">テックアカデミー　※講座のページへ遷移する</a> <a href="https://techacademy.jp/#training-top">テックアカデミー　※トップページの「トレーニング」部分へ遷移する</a> <a href="https://www.kiramex.com/">テックアカデミー　※運営会社のキラメックス株式会社へ遷移する</a> <a href="https://techacademy.jp/download/design.pdf">pdfファイルを表示させる。　※サンプルなので表示しません</a> <a href="pdf/design.pdf">pdfファイルをダウンロードさせる。　※サンプルなので動作しません</a>   [PR] Webデザインで副業する方法とはhrefの指定方法 指定をするには、合わせてパスの構造を理解しておきましょう。 絶対パス 絶対パスは呼び出したいファイルが同じディレクトリ内になく、外部で公開されている場合などに使います。世界中の誰が見ても参照できる位置を示します。 東京都港区南青山1-2-3建物名・号室〜といったような住所と同じような、ものです。 <a href="https://techacademy.jp/">テックアカデミー</a> 相対パス 基本となるパスの書き方です。「パスを書くそのファイルから見た、呼び出すファイルの位置」になります。 <a href="index.html">テックアカデミー</a> ルートパス サイトのルートから（今回の例であれば「demo」フォルダがルート）見たパスになります。最初につける/がルートを意味します。サイトルートから見た位置関係になるのですべて/からはじめます。WordPressなどや、.htaccessで指定している場合のみ利用できます。 <a href="/webdesign/training/">テックアカデミー</a>   hrefの指定方法その２ 同じページ内での位置指定をする事もできます。これは、html構文内で、#（id）を記述している場合に指定できます。 <a href="https://techacademy.jp/#training-top">テックアカデミー　※トップページの「トレーニング」部分へ遷移する</a>   hrefと、そのターゲット属性 リンクの行き先は、同じページタブで開くこともできますし、別のウィンドウにて遷移させる。という方法があります。 それが、「target属性」です。4種類ありますが、_blankが頻度が高く、それ以外は近年はあまり使用されていません。 _self／通常パターン。現在のウィンドウで開く指定。 _blank／別のウィンドウで開く指定。 _top／フレームセットは解除、単一のページのみが表示される指定。 _parent／リンク先のページは親フレームに表示される指定。   実際に書いてみよう <a href="https://techacademy.jp/webdesign-wordpress-set">テックアカデミーのウェブデザイン・WordPress講座</a> <a href="https://techacademy.jp/#training-top">テックアカデミー「トレーニング」へ</a> <a href="https://www.kiramex.com/" target="_blank" rel="noopener">キラメックス株式会社（外部サイト）</a> <a href="https://techacademy.jp/download/design.pdf">pdfファイル(XXXkb)。　※サンプルです</a> <a href="pdf/design.pdf">pdfファイルのダウンロードはこちら　※サンプルです</a> 今回は、リンク指定をするaタグを解説してみました。使い方を覚え、ページを作成してみましょう！！   監修してくれたメンター ゆかちん先生 フリーランスのクリエイティブディレクター。 制作会社、インハウス、スタートアップ企業などで、グラフィックデザイン・ウェブデザイン・アプリデザイン、ウェブディレクションなどに携わってきました。TechAcademyではWeb Designコース・ウェブディレクションコース・WordPressコースを担当しています。   大石ゆかり 内容分かりやすくて良かったです！ 田島悠介 ゆかりちゃんも分からないことがあったら質問してね！ 大石ゆかり 分かりました。ありがとうございます！ TechAcademyでは初心者でも、オリジナルWebサイトを公開できる、オンラインブートキャンプを開催しています。 また、現役エンジニアから学べる無料体験も実施しているので、ぜひ参加してみてください。
HTML

Web制作の仕事をするうえでの心構え【初心者必見】

Web制作の仕事をするうえでの心構えについて解説します。 最近、在宅でできる副業としてWeb制作の仕事を目指す人が増えています。 ここでは一例として、実際にホームページを制作して顧客へ納品する前にどのようなポイントを確認するのかを説明します。 また、納品後のサイト運用の際にも活用できる内容ですのでしっかりと確認して、サイトの品質向上に役立てましょう。 目次ページ内リンクとはidタグを使った指定方法実際に書いてみようまとめ監修してくれたメンター   1 制作前と制作中の注意点 1.1 ヒアリングの際に注意すべき事 在宅でできる副業としてWeb制作の仕事をする場合、Webディレクションからデザイン、コーディングまでの一連の作業を一人で行なうことがあり、効率よく進めることが納期を達成する鍵になります。 顧客からヒアリングを行ない、仕様をまとめワイヤーフレーム、デザインカンプを作成し、コーディングを行なって、公開となります。その際、制作の根底にある、以下のようなサイト制作の目的を顧客と共有します。 なんのためにサイトを作るのか サイトを作ったことで何を達成したいのか その目的にあったデザイン・システムの提案と設計、導線設計、SNSやWeb広告などの戦略やユーザビリティも加味した仕様書・ワイヤーフレーム・デザインカンプの作成を進めていきましょう。 顧客ともワンチームということで認識を合わせ、同業他社のページや実際にあるサイトのページを見ながら打ち合わせを行なうなど、イメージを共有しながら進めるとズレがなくスムーズに進行します。 あとになって、大幅な仕様追加などの要求が出ないように小まめに情報や目的を共有するためにコミュニケーションを取りましょう。 1.2 制作中に注意すべき事 いざ、仕様が決まりワイヤーフレーム、デザインカンプ作成からコーディングを行なう際の注意点として、顧客とFIXした仕様書のとおりにデザインを作成し、コーディングを行なっているかが大前提となります。 以下のようなエラーがあるままで納品してしまうと信用を損なってしまい、次の仕事につながらなくなります。 デザインが崩れている プログラムが動作しない フォントの種類がデザインカンプと異なる 異なるブラウザやデバイスによる見え方の調整を行なっていない etc… また、無事納品は終えたとしても、目標達成のためのデータ解析や分析タグの設定などの対策を怠ると、せっかく受注して仕事をしても今回きりで後々のお付き合いにはつながらない可能性があります。 ページ管理やリニューアル等でも末長いお付き合いを続けるためには、目的を達成するためのツールとしてお金をいただいてホームページを作成するという意識を忘れず、ユーザや顧客に自分を置き換えて、他者目線も意識した、快適に目的を達することができるサイト作成をしましょう。   2 制作後、納品前の注意点 2.1 デザイン関連のチェック項目 2.1.1 表記チェック デザインカンプと仕様書の条件を確認し、顧客の指定の表記方法に基づいているか、スペルミスや表記ゆれも同時にチェックします。 ページ内のテキストチェックツール　difff(デュフフ) https://difff.jp/ 2.1.2 デザインチェック デザインカンプと比較し、レイアウト配置や色、余白、文字（フォントの種類、サイズ・太さ・文字間隔・ジャンプ率）などデザインを忠実に再現しているか確認します。 2.1.3 ダミーチェック 提案時にダミーで入れたテキストや画像をそのままにしていないか、画像・動画の表示有無やサイズ、容量が適切かも最終チェックします。 2.1.4 faviconの設定 Webページに設置するシンボルマークのことです。設定は必須ではありませんが、タブ内にページの象徴するアイコン（例：会社ロゴ等）があることにより、ユーザはサイトを認識しやすくなりリピートに繋げることができる重要なアイコンです。 WebブラウザではURLの左横またはタブに表示され、お気に入りに登録するとブックマークアイコンとして表示されます。 ファビコン favicon.icoを作ろう！ https://ao-system.net/favicon/ 設定した後は、しっかり表示されるかどうかを必ず確認しましょう。 2.1.5 著作物、使用写真等流用掲載についての確認 一般的に、写真や音源、動画などには著作権が設定されており、他者の著作物をWebページで掲載する場合は、権利元が設定している利用規約を確認する必要があります。著作物によっては、権利元に承諾を得てから掲載することが求められます。 著作物をダウンロードするときだけでなく、Webページの公開前にも再度、利用規約を確認しましょう。 2.2 コーディング関連のチェック項目 2.2.1 ブラウザチェック レスポンシブサイトの場合は、Google Chromeのデベロッパーツールに付属のエミュレーターでのチェックの他、WindowsやMacといったPCでFirefox・Safari・Edgeでのブラウザチェック、スマートフォン（iPhone/Android）の実機を使ったチェックを行ないます。 各種ブラウザでチェックを行ない、レイアウトの崩れがないか確認しましょう。 2.2.2 HTML/CSS記述チェック 制作したホームページのHTMLやCSSが要求仕様に即した正しい記述をしているかを以下のチェックツールで確認し、エラーがあれば修正しましょう。 The W3C Markup Validation Service https://validator.w3.org/ Another HTML-lint gateway http://openlab.ring.gr.jp/k16/htmllint/htmllint.html 2.2.3 jQuery・JavaScript・PHP等で作成したコンテンツ jQuery・JavaScript・PHPなどのコンテンツについて、以下のような内容の動作チェックを行ないます。 正常に動作するかどうか 読み込み速度は遅くないか 画像容量は重くないか 各種ブラウザに対応しているか etc… また、商用利用や改変は可能か、使用可能であっても著作権の表示などの条件はないか、などを公開前にあらためて確認しておきましょう。 海外のサイトからのオープンソースを流用した場合は、翻訳機能を使用するなどして、しっかりと確認してから使用しましょう。 PageSpeed Insights https://pagespeed.web.dev/?utm_source=psi&utm_medium=redirect&hl=ja たくさんあるオープンソースライセンスのそれぞれの特徴のまとめ https://qiita.com/tukiyo3/items/58b8b3f51e9dc8e96886 2.2.4 リンクチェック リンク切れしていないかをチェックします。パンくずリストのリンクもチェックします。ヘッダーやフッターなどの共通部分についても、リンク切れがないか確認しましょう。 リンク切れチェックツール　Dead-link-checker.com http://dead-link-checker.com/ja/ 2.2.5 404ページ サーバに接続できたものの、該当するページが移動または削除されたことでページがない場合に表示させるページを「404ページ」といいます。 サイトの品質維持のためにも、あらかじめオリジナルページとして作成しておきます。このページが正しく表示されるか確認しましょう。 2.2.6 301リダイレクト設定 あるページへのアクセスを別のページに転送させることを「301リダイレクト」といいます。 たとえばサイトをリニューアルしてURLが変わった場合は、301リダイレクトの設定に漏れがないか、新旧サイトの各コンテンツ（ページ）の設定が1対1になっているか確認しましょう。 301リダイレクトは、ドメインやサーバに変更がある場合、必須となる設定です。301リダイレクトの設定をすることにより、検索順位が下がるリスクを軽減します。 2.3フォーム関連のチェック 2.3.1 入力された内容のチェックに関する動作確認 フォームの各項目の入力内容に対し、「必須項目なのに入力されていない」「半角英数のみ受けつけるルールなのに全角文字が入力されている」などがあった場合にエラーメッセージを返しているか確認しましょう。 2.3.2 ページ遷移の確認 入力画面→確認画面→完了画面にページが正しく遷移するかどうかを確認しましょう。 2.3.3 自動返信メールの確認 送信完了の画面が表示された際、ユーザのアドレスと管理者のアドレスにそれぞれメールが届いているかを確認します。 サンクスメールの文面やアクセスページなどへのリンクを設けた場合は、リンク切れのチェックも行いましょう。 2.4 タグ関連のチェック（SEO関連設定チェックも含む） Googleの検索エンジンのロボット（クローラー）のページ理解を上げる対策が、ページの管理や整理にもなり、結果としてサイトの検索順位の向上やページの質の向上につながります。そのため、作成後のチェックだけで終わらせず、ページを運用する際にもこれらの作業は日々継続して行なうとよいでしょう。 2.4.1 metaタグの設定チェック Googleの検索エンジンの進化とともに、以下のようなWebページが検索上位に表示される傾向となってきました。 – コンテンツとページ内容をしっかりと作成している – 内容に準じた適切なmetaタグを設定している 各ページに適したタイトル・ディスクリプションが、適正な文字数で、なおかつページに即した内容で設定されているかを確認しましょう。 また、キーワードは重要視されなくなりましたが、ページ内容に準じて設定しているかどうかも、合わせて確認しておきましょう。 META SEO inspector サイト作成後のチェックだけでなく、運用の際のサイトメンテナンスとしてGoogle Chromeのアプリとして設定して使用できる便利なツールです。 https://chrome.google.com/webstore/detail/meta-seo-inspector/ibkclpciafdglkjkcibmohobjkcfkaef WordPressでページを作成した場合は、プラグインを使います。 All in One SEO metaタグ作成の他、後述の「サイトマップXML」の作成もできます。 https://ja.wordpress.org/plugins/all-in-one-seo-pack/ 2.5 OGPの設定 OGP（Open Graph Protocol）は、SNSでシェアされた際に、そのページのタイトルや概要・URL・アイキャッチ画像を表示させるためのhtml要素です。 OGPを設定しておくと、ユーザに対してページの内容を正しく伝えることができます。設定していない場合、SNS側で勝手に説明文や画像を抽出して表示してしまい、サイトオーナーの意図していない内容がSNSに表示されてしまいます。 また、Facebookでは、OGPを設定することにより、分析や解析ツールである「ページインサイト」の機能を利用できます。 以下のサイトで、設定したOGPがSNSでシェアされた際にどのような見え方なのかを確認できます。 OGP確認 https://rakko.tools/tools/9/ 2.6 hタグ（見出し）の設定 h1からh6の見出しタグが適切に設定されているかどうかを確認します。数字が小さいほど重要度は上がります。クローラーがページを理解するための大切な要素です。 hタグの使用には順番のルールがあります。数字が小さい順（重要度の大きい順）に並べます。マトリョーシカ人形と同じイメージで、たとえば、h3より重要度の大きなh2をh3の中に入れるような並べ方は推奨されません。 クローラーにコンテンツの構造を正確に伝えるためには順番を守って使用するようにしましょう。 2.7 alt属性 alt属性には、各画像の説明を入力します。alt属性を設定することで、万が一、画像が表示されていない場合に、画像の説明が表示されるようになります。 入力内容については、SEO対策にもなるように、画像の内容に即した内容を入力します。検索順位向上のためには、画像の内容説明はページ内容をクローラーに認識させる大事な要素ですので、漏れがないように登録しましょう。 2.8 サイトマップXML クローラーにページの構造を理解してもらうために使います。以下のようなツールを使って簡単に作成できます。作成後は、サーバに設定することでクローラーがサイトを認識します。 サイトマップを作成-自動生成ツール sitemap.xml Editor 1,000ページまでのサイトであれば無料で作成できます。 http://www.sitemapxml.jp/ ページの新規追加やリニューアル等でページ構成が変わった際には、サイトマップも合わせて同期しておきましょう。 新ページだけでなく旧ページもアップしておく場合など、内容の重複するページが存在する場合は、「悪質なコピーコンテンツではない」ということや、「重要なページである」ということをクローラーに知らせる必要があります。本記事では説明を省略しますが、「canonical」の設定や、「.htaccess」によるURLの正規化設定も、必要に応じて行なうようにしましょう。 また、サイトのリニューアルの場合は、ページの統合やURLの変更が多々ありますので、古いURLから新しいURLに自動的にページを転送する「リダイレクト」の設定も合わせて行ないましょう。 2.9 Web解析、計測タグ　チェック 2.9.1 解析ツールタグ・コンバージョン計測タグ・リマーケティングタグの設定 顧客とFIXしたサイト仕様書に応じて、GoogleAnalyticsやGoogle Adwords、Yahoo!プロモーション広告、タグマネージャーの設定内容と設置場所を確認します。 申し込み数・資料請求数などをコンバージョンとして設定し、計測する場合は、行動につながる導線設計が適切か正しく設定されていて、データが計測されているかも確認しましょう。   [PR] Webデザインで副業する方法とは3.まとめ Web制作の仕事は、Webサイトなどの成果物に対して対価をいただく仕事です。 完成した成果物をチェックしてエラーや不具合がないことが必須となります。上記のチェック事項を参考にして、作業の区切りで確認、修正を経て品質の高いサイトを作成して納品するようにしましょう。 ひとつひとつの正確で丁寧な作業が、信頼を築き、新たな受注につながります。トライ＆エラーを繰り返しながら技術を身につけ、サイト制作を重ねていくことにより成長していきましょう。 Web業界でキャリアを重ねていくには、継続的な技術習得と努力と柔軟な対応力が必要です。習得した技術を活かせる制作業務を楽しみととらえ、日々前進しましょう。   Web制作の仕事を確実にしたいなら Web制作はスキル習得の難易度が低いため、競合となる働き手が多いです。 もちろん、企業で実務経験を積んだハイレベル人材とも案件を取り合うことになります。 そのため、未経験からだとなかなか案件を獲得できないことも。 テックアカデミーのはじめての副業コースでは、Web制作の案件紹介をしているので、確実に仕事を受けられます。 ※フリーランスを目指す方にもおすすめです。 ※コース終了後の審査に合格し、案件に応募された方には1ヶ月以内の案件紹介を確約しています。 その他、案件サポート対象コースはこちら Webデザインコース フロントエンドコース フロントエンド副業コース（審査の合格までサポート） また、このようなお悩みを持ったことはありませんか？ 「スキルは習得したけど、自分の実力でこなせる自信がなく、案件への応募に躊躇してしまった」 このあるあるを解決すべく、現役エンジニア/Webデザイナー講師が案件の進行や、技術的なわからない点のサポートを無料で行います。 お仕事紹介 プロのサポート この2つのサービスがあるので、安心してお仕事に取り組めます。 Web制作に必要なスキルを体系的に学んで、確実にお仕事を手にしませんか？ まずは無料体験からお試しください。
Webデザイン

あなたの目的に合わせて学べるコース

副業したい方

Web制作の力を身につけ
副業までサポート

はじめての副業コース

転職したい方

未経験から
Webエンジニアに

Webエンジニア転職保証コース

スキルアップしたい方

AIも統計解析もできる
Pythonを学ぶ

Pythonコース

※ 経済産業省の行うリスキリングを通じたキャリアアップ支援事業の補助金対象コースです。条件を満たすことで支払った受講料の最大70％がキャッシュバックされます。詳しくは こちら のページをご確認ください。

TechAcademyから
現役エンジニアの方へ
お知らせ

オーダーメイドコース
TechAcademy（テックアカデミー） Webデザインコース Webデザイン HTML HTML5でページ内リンクを設定する方法を現役エンジニアが解説【初心者向け】