TechAcademy（テックアカデミー） Webデザインコース Webデザイン HTML HTMLでhref属性の使い方を現役エンジニアが解説【初心者向け】
オーダーメイドコース
icon
icon
HTML

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

初心者向けにHTMLでhref属性の使い方について解説しています。hrefを使った絶対パス、相対パス、ルートパスといったページ遷移の種類それぞれの指定方法を説明します。重要な属性となるのでしっかりと頭に入れておきましょう。

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

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つになるでしょう。

  1. サイト内の別のページへ遷移する
  2. 同じページ内の違う位置へ遷移する（ページ内リンク）
  3. 外部サイトへ遷移する
  4. サイト内のファイルに直接遷移する（例えばPDFなど）
  5. サイト内のファイルに直接遷移、そしてダウンロードする（例えば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が頻度が高く、それ以外は近年はあまり使用されていません。

  1. _self／通常パターン。現在のウィンドウで開く指定。
  2. _blank／別のウィンドウで開く指定。
  3. _top／フレームセットは解除、単一のページのみが表示される指定。
  4. _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でinput要素の入力位置がずれる原因と対処法を現役デザイナーが解説【初心者向け】

HTMLでinput要素の入力位置がずれる原因と対処法について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します...
HTML

HTMLの要素ハイパーリンクを現役デザイナーが解説【初心者向け】

HTMLの要素ハイパーリンクについて、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。 そもそも、HTM...
HTML

HTMLでbodyタグにonLoad属性を使う方法を現役エンジニアが解説【初心者向け】

HTMLでbodyタグにonLoad属性を使う方法について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。 ...
HTML

3種類の書き方を覚える！HTMLで空白を作る方法【初心者向け】

HTMLを書いていて、文字と文字の間を少し離したいことがたびたびあります。 しかし、HTMLに慣れないうちは思ったように空けたくても空けられないこともしば...
HTML

HTMLの基本構造を現役デザイナーが解説【初心者向け】

HTMLの基本構造について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。 そもそも、HTMLの記述方...
HTML

コーディングの基礎！HTMLでdivタグを使う方法【初心者向け】

HTMLで書くdivタグの使い方を解説しています。 コーディングする上で基礎の基礎にあたるので、HTMLを身につけようと思っている人は必須で覚えておきまし...
HTML

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

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

JavaScriptでページ遷移する方法について、テックアカデミーのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。 実際のコードをもとに解説していきますので、理解を深めていきましょう。 JavaScriptでページ遷移することで、JavaScriptの処理に応じたページ遷移が可能になります。 実務でも、JavaScriptでページ遷移することで、クリックされた場合などに操作に応じたページ遷移を行うため、ぜひ学習してみてください。 また、入門向けのJavaSriptを学習できるサイトも紹介しているので、あわせてご覧ください。 目次HTMLでhref属性の使い方についてhrefのよくある「行き先」5種hrefの指定方法hrefの指定方法その２hrefと、そのターゲット属性実際に書いてみよう監修してくれたメンター そもそも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

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

JavaScriptでページ遷移する方法について解説します。 実際のコードをもとに解説していきますので、理解を深めていきましょう。 また、入門向けのJavaScriptを学習できるサイトも紹介しているので、合わせてご覧ください。   そもそもJavaScriptについてよく分からないという方は、JavaScriptとは何なのかについて解説した記事を読むとさらに理解が深まります。 なお本記事は、TechAcademyのオンラインブートキャンプJavaScript/jQuery講座の内容をもとにしています。     田島悠介 今回は、JavaScriptに関する内容だね！ 大石ゆかり どういう内容でしょうか？ 田島悠介 JavaScriptでページ遷移する方法について詳しく説明していくね！ 大石ゆかり お願いします！   ページ遷移とは ブラウザで現在表示しているページから別のページへと移動することを**ページ遷移**と呼びます。 例えばTechAcademyのページ(https://techacademy.jp/)から、TechAcademyのTwitterアカウントページ(https://twitter.com/techacademy)に移動することもページ遷移です。 JavaScriptでページ遷移する方法 JavaScriptでページ遷移するにはlocation.hrefプロパティを使用します。 ChromeでDeveloper toolsを開いてConsoleタブでlocation.hrefを打ち込んだ結果がこちらです。 現在見ているページのURLである「https://techacademy.jp/」が返ってきます。 location.hrefに移動したいページのURLを入力することで、ページ遷移することができます。 location.href = "移動したいページの URL";   [PR] Webデザインで副業する方法とはjQueryでページ遷移する方法 jQueryでページ遷移する場合でもlocationオブジェクトのhrefプロパティを使います。 タイプ数も増えるので location.href = urlで直接設定する方が良いと思いますが、jQueryでページ遷移する場合はattrメソッドを使って以下のように書きます $(location).attr("href", "移動したいページの URL");   実際に書いてみよう ChromeのDeveloper Toolsを開いて確認していきましょう。 この記事ページで試すと、別ページに移動してしまうため新しくタブかウィンドウを開いてそこで試すのが良いでしょう。 Developer Toolsの開き方はWindowsだと[F12] キー、Macだと[Command] + [Shift] + [I]になります。開いたら「Console」タブを選択します。 デフォルト設定だとページ遷移でコンソールの内容もクリアされてしまうため、実行結果を残したい場合には右上の歯車アイコンから「Preserve log」にチェックを入れましょう。 まずはGoogleのトップページに移動してみましょう。コンソールに以下の内容を打ち込んでみてください。 location.href = "https://google.co.jp"   ページ遷移が確認できたら、次はjQueryのページに移動してみましょう。 location.href = "https://jquery.com/"   最後にjQueryを使ったページ遷移を試してみましょう。TechAcademy ページに移動してみます。   $(location).attr("href", "https://techacademy.jp/")   各ページに遷移できることが確認できたのではないでしょうか。なお、当然ではありますがjQueryを使ったページ遷移は、jQueryを読み込んでいないと使用できませんのでご注意ください。 筆者プロフィール メンター稲員さん フリーランスエンジニア。大手SEからフリーランスのWeb系エンジニアにジョブチェンジ。 経験言語：Ruby、Rails、Python、C/C++、Java、Perl、HTML/CSS3、JavaScript、CoffeeScript,Node.js。 おうち大好きマンです。   大石ゆかり 内容分かりやすくて良かったです！ 田島悠介 ゆかりちゃんも分からないことがあったら質問してね！ 大石ゆかり 分かりました。ありがとうございます！   TechAcademyでは、初心者でもJavaScript・jQueryを使ったWebサービス公開を習得できるオンラインブートキャンプJavaScript/jQuery講座を開催しています。 挫折しない学習方法を知れる説明動画や、現役エンジニアとのビデオ通話とチャットサポート、学習用カリキュラムを体験できる無料体験も実施しているので、ぜひ参加してみてください。
JavaScript

jQueryでスムーススクロールを実装する方法【初心者向け】現役エンジニアが解説

JavaScriptのライブラリであるjQueryでスムーススクロールを実装する方法を紹介します。 ボタンを押したら特定の場所にスクロールさせるといった機能を簡単に実装できるので、ぜひ参考にしてみてください。 目次 スムーススクロールとは スムーススクロールの書き方 実際に書いてみよう   スムーススクロールとは スムーススクロールとは、ページ内をスクロールする挙動を指します。 Webページでよく、「Topに戻る」などのボタンを見ることが多いと思います。 それが、スムーススクロールという機能を使っているものです。 Webを閲覧している人を上手にWebページ内に誘導できるので、設置しておいた方が良いでしょう。   大石ゆかり 田島メンター！Topに戻るボタンだったり、ページ内の目次をクリックすると、ゆっくりとスクロールするサイトがあったのですが、jQueryを使用しているのでしょうか？ 田島悠介 animateメソッドを工夫して使用しているんだ。 大石ゆかり でも、位置とかどうやって取得しているんでしょうか？ 田島悠介 位置を取得する書き方っていうのがあるので大丈夫だよ。さっそくスムーススクロールを実現してみよう！   [PR] Webデザインで副業する方法とはスムーススクロールの書き方 スムーススクロールの書き方について紹介していきます。 JavaScriptのコード $(function(){ $('a[href^="#"]').click(function(){ let speed = 500; let href= $(this).attr("href"); let target = $(href == "#" || href == "" ? 'html' : href); let position = target.offset().top; $("html, body").animate({scrollTop:position}, speed, "swing"); return false; }); });   解説 1行目の、$(function(){では、jQueryの無名関数を宣言しています。 ※無名関数についてはこちらの記事を参考にしていただくと良いですよ。 JavaScriptの無名関数について現役エンジニアが解説【初心者向け】
JavaScript

サイズ指定に役立つ！CSSでcalc( )を使う方法【初心者向け】

CSSで書くcalcファンクションの使い方について、テックアカデミーのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。 要素の水平や垂直のセンタリング、可変的な幅の指定や均等に要素を配置したい場合にもcalcファンクションを使えます。 異なる単位で複雑な計算も簡単に指定できます。 レイアウトやサイズ指定を楽に行うことができるので、少し応用的な使い方ですが、覚えておくと便利でしょう。 目次HTMLでhref属性の使い方についてhrefのよくある「行き先」5種hrefの指定方法hrefの指定方法その２hrefと、そのターゲット属性実際に書いてみよう監修してくれたメンター そもそもCSSの記述方法がわからない場合は、 CSSの書き方について解説した記事を読むとさらに理解が深まります。   大石ゆかり CSSで3等分にした要素の幅を設定するにはどうしたらいいですか？ 田島悠介 いろいろ方法があるけどcalcファンクションを使えば簡単だよ。 大石ゆかり calc？CSSで計算ができるんですか？ 田島悠介 その通り！たとえば全体の幅から3等分した要素を作りたいならwidth: calc(100% / 3)のように指定できるよ。 大石ゆかり へぇー。わかりやすいですね。 田島悠介 そうなんだ。まずはどういった記述の仕方をするか見てみよう。 大石ゆかり はい！   calcファンクションとは CSSのcalcファンクションとは、レイアウトやサイズ指定に計算式を使えるようにしてくれるファンクションです。 通常だと100pxや3emのようにレイアウトやサイズを指定しますが、calcファンクションを用いることで、100px + 50pxや、3em – 1em のように四則演算を使えるようになります。 たとえば、縦横150pxの要素をブラウザの表示領域で中央に配置するには以下のように記述できます。 width: calc(100vw / 2 - 150px / 2); height: calc(100vh / 2 - 150px / 2); このように指定すれば、中央位置（50vw, 50vh）から150pxの要素の端から中心までの距離（150px / 2）だけずらした位置を求めて中央にセンタリングできます。   calcファンクションを使うメリット 異なる単位で計算することができる 計算が明白になる calc()は結果の値ではない 異なる単位で計算することができる CSSのcalcファンクションは、異なる単位の値で計算式を作成できます。 異なる単位で計算できれば、相対的な長さの単位（%、em、vwなど）と絶対的な長さの単位（pxやptなど）を組み合わせて、要素をセンタリングするなどの指定が簡単に記述できます。 %、em、pxなどいろいろな単位を組み合わせた計算が可能です。 たとえば、表示領域全体から固定幅 80pxの要素の残りの幅を calc(100% – 80px) のように計算式で求められます。 このように、固定幅の要素と幅が可変する要素を並べたいときに便利です。 計算が明白になる calcファンクションを使うと、値が何を意味しているかが分かりやすくなります。 たとえば3等分の幅にしたい場合、「width: 33.333333333%;」と指定するよりも「width: calc(100% / 3);」としたほうが、3等分の幅にしたいことが明白にわかります。 固定された値を指定するよりもわかりやすく、3分割や7分割などの割り切れない値も設定できます。 calc()は結果の値ではない calcファンクションの計算結果は固定されているわけではなく、ブラウザの幅などに合わせてリアルタイムに計算されます。 たとえば「height: calc(100vh – 50px);」と指定すれば、ブラウザの表示領域に合わせて常に高さが表示領域の半分より50pxだけ少なくなるように調整されます。   [PR] Webデザインで副業する方法とはcalcファンクションの書き方 calcファンクションはCSSで値の代わりとして計算式を指定できます。 widthやheight、font-sizeなど値が指定できるところなら使えます。 構文 プロパティ（widthなど）: calc(式) 四則演算が使用できる 指定する式では四則演算の演算子（+、-、*、/）が使えます。 前後に空白が必要 加算（+）と減算（-）では演算子の前後に半角スペースを空ける必要があります。 除算（/）や乗算（*）では演算子の前後に半角スペースを入れなくても計算式が認識されますが、慣習として四則演算の演算子の前後には半角スペースを入れます。 ※演算子の前後に半角スペースを入れないと、加算や減算ではなく正の値や負の値として認識されます。詳しくは公式ドキュメント「calc() – CSS: カスケーディングスタイルシート | MDN」をご覧ください。 calcが利用できる場所 calcファンクションは、長さ（<length>）、周波数（<frequency>）、角度（<angle>）、時間（<time>）、数量（<number>）、整数値（<integer>）の値を設定する場所に対して使用できます。 入れ子が可能 calcファンクションは入れ子にできます。 入れ子にすると計算式の優先順位を決める、単なる括弧( )として扱われます。   calcファンクションの実装例 実際にcalcファンクションを使った実装例を見てみましょう。 ルートに基づいたサイズ指定 要素を3等分の幅にする 左右のセンタリング 上下の中央配置 ヒーローヘッダーの高さ調整 ルートに基づいたサイズ指定 calcファンクションを使えば、フォントのサイズを相対的に指定できます。 たとえば、calcファンクションでルート（最上位の要素。html要素）のフォントサイズより5px大きいサイズを指定しておけば、ルートのフォントサイズが変更されたら一緒に変わるようにできます。 スマートフォンとPCなどでフォントサイズを一括して変更したいときに便利です。 ソースコード 「text_plus」クラスの要素のフォントサイズをルートのフォントサイズの1.5倍になるようにcalcファンクションで計算します。 ルート（html要素）のフォントサイズが変更されたら、「text_plus」クラスの要素のサイズも変更されます。 <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8">
CSS

CSSでページネーション（ページ送り）をデザインする方法を現役デザイナーが解説【初心者向け】

CSSでページネーション（ページ送り）をデザインする方法について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。 これが使えるようになると、ページ数が一目でわかり、今何ページ目を見ているのかが把握しやすく好きなページに移動できるメリットがあります。ぜひ参考にしてみてください。 CSSについてそもそもよく分からないという方は、CSSの書き方について解説した記事をまずご覧ください。   なお本記事は、TechAcademyのオンラインブートキャンプ、Webデザイン講座のCSSカリキュラムをもとに執筆しています。   田島悠介 今回は、CSSに関する内容だね！ 大石ゆかり どういう内容でしょうか？ 田島悠介 ページネーション（ページ送り）をデザインする方法について詳しく説明していくね！ 大石ゆかり お願いします！   ページネーション（ページ送り）とは ページネーションとは、1ページに表示しきれない内容を複数ページにわたって掲載する場合に、ページ番号のリンクを並べたものです。 検索サイトや、ブログサイトなどでよく見かけますね。コーポレートサイトなどでも、お知らせの一覧ページに設置されていることがあります。 前のページ、次のページのリンクだけの場合に比べて、ページ数がどのくらいあるのか、今何ページ目を見ているのかが把握しやすく、好きなページに移動できるメリットがあります。 Googleの検索結果一覧に表示されているページネーション Yahooの検索結果一覧に表示されているページネーション TechAcademy Magazineのページネーション   ページネーション（ページ送り）をデザインする方法 ページネーション(ページ送り)では、基本的にはページ番号のリンクを並べれば良いですが ページ番号をいくつ並べるか(省略するか) 次のページへのリンク 前のページへのリンク 一番最初のページへのリンク 一番最後のページへのリンク などを表示するかどうかについては、サイトの規模や、ページネーションが使用されているページの内容、サイト全体の体裁に合わせて検討しましょう。 また、ページネーションが必要になるようなサイトはWordPressをはじめとするCMS(コンテンツマネジメントシステム)などを使用し、既定の関数など使ってページネーションを配置することになるでしょう。 それぞれのCMSなどでは、決まったフォーマットのHTMLで出力されるので、どのようなHTMLで構成されているかを分析して、CSSでデザインしていけば良いでしょう。 今回はTechAcacdemy MagazineのページネーションのHTMLを検証してみましょう。 HTML： <div class="nav-links"> <a class="prev page-numbers" href="https://techacademy.jp/magazine/category/webdesign/">«</a><!-- 現在の前のページへのリンク -->   <a class="page-numbers" href="https://techacademy.jp/magazine/category/webdesign/">1</a><!-- 1ページ目へのリンク -->   <span class="page-numbers current">2</span><!-- 現在閲覧しているページ(2ページ) -->   <a class="page-numbers" href="https://techacademy.jp/magazine/category/webdesign/page/3">3</a><!-- 3ページ目へのリンク --> <span class="page-numbers dots">…</span><!-- ...の部分 --> <a class="page-numbers" href="https://techacademy.jp/magazine/category/webdesign/page/27">27</a><!-- 27ページ目(最後のページ)へのリンク --> <a class="next page-numbers" href="https://techacademy.jp/magazine/category/webdesign/page/3">»</a><!-- 現在の次のページへのリンク --> </div> HTMLだけだと、上記のような表示になります。 ページのリンクや現在のページに割り振られたクラス名や要素を分析して、ユーザーが操作しやすいようにCSSでデザインしていきましょう。   [PR] Webデザインで副業する方法とはデザイン例 ページネーション(ページ送り)は、サイト全体のデザインや構成に合わせてさまざまなデザインがあります。先述したように、現在のページがわかりやすくて、リンクをクリックしやすければ決まりはありませんので、いろんなサイトを参考に、自由にデザインしてみましょう。 Responsive web design jpのページネーション Responsive web design jp Web Design Clipのページネーション Web Design
CSS

特定の場所に移動したい！HTMLでジャンプする方法【初心者向け】

今回はHTMLでジャンプする方法を説明していきます。 HTMLでジャンプするというのは、今見ているページから別の情報が掲載されているページに移動するという意味です。 リンクが指定されている部分をクリックすることで、別のページに移動させる必要があるときに利用します。 実務でもホームページを制作するWeb制作では、正しいページに正しいリンクを設定することが求められるため、ぜひ一緒に勉強しましょう。 目次 他ページにジャンプする方法 同一ページの特定の場所にジャンプする方法 実際に書いてみよう aタグ以外でページ移動をする方法 aタグを利用してボタンのような表示にする   他のページにジャンプする方法 他のページにジャンプするにはリンクを貼る必要があります。 リンクの貼り方は以下の通りです。 <a href="#">ここをクリックすると飛びます。</a> 上記のような記述で他のページへのジャンプが可能です。 「#」の部分に飛ぶ先のページを記述します。 そのようにすることでジャンプを実現できます。   大石ゆかり aタグ(アンカータグ)によって、別のページに移動できるんですね～。 田島悠介 そうだよ。 自分のサイトの違うページや外部のサイトへ移動できるんだよ。 また、そのページの特定の位置にも移動できるんだ。 大石ゆかり 同じページの中でも移動できるんですか？ 田島悠介 できるよ。 では、実際に見てみよう！   [PR] Webデザインで副業する方法とは同一ページの特定の場所にジャンプする方法 同一ページにジャンプする先を「アンカー」と言います。 アンカーの貼り方ですが、以下のようにします。 コード <a href="#index">テックアカデミー</a> <a id="index">ここはindexというidがついた場所です</a>   解説 <a href=”#index”>テックアカデミー</a>をクリックすると、<a id=”index”>ここはindexというidがついた場所です</a>の場所にジャンプします。 アンカー元を「#アンカー名」で設定し、アンカー先を「アンカー名」を設定しましょう。   大石ゆかり hrefは飛び先のURLですよね？ #(シャープ)がついていてlinkって名前が書いてあるだけですね。 田島悠介 ほとんど全てのタグにid属性をつけることができるんだ。 そのidにつけた値を指しているんだよ。 大石ゆかり 同じページ内で移動しなきゃいけないなんて、どんな時ですか？ 田島悠介 内容が長いとページの長さも長くなるので、そういう時にページ内ジャンプがあると便利かな。   実際に書いてみよう 実際に書いてみてWebブラウザーで見てください。 今回は異なるページへのリンクがあるので、HTMLは2つ作成します。 HTML -sample.html- <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>sample</title> </head> <body> <h1>別pageジャンプ</h1> <p> <a href="sample2.html">sample2へ</a> </p> <h1>page内ジャンプ</h1> <p>
HTML

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

副業したい方

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

はじめての副業コース

転職したい方

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

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

スキルアップしたい方

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

Pythonコース

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

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

オーダーメイドコース
TechAcademy（テックアカデミー） Webデザインコース Webデザイン HTML HTMLでhref属性の使い方を現役エンジニアが解説【初心者向け】