htmlでページ遷移するには？リンクの使い方を解説！
HTMLで日記や小説などでページ遷移をしたいとき、過去記事を毎回編集して新しい記事のリンクを張り付けるのは面倒です。そのような時は、次のページへのリンクを入れておけば、スムーズに読み進めることができるようになります。この記事では、次のページに移動するだけでなく、誰でもすぐに実践することができるようHTMLの基礎からしっかり解説します。
HTMLとは何か
「HTML」とは、ハイパー・テキスト・マークアップ・ランゲージの略でWebページの表現に用いられる、基本のマークアップ言語で、スタイルを表現するCSSとセットで使います。Webページには、ユーザーが閲覧するためのページに必ずページを編集できるページのソースが存在します。ソースに書き込まれた英数字や記号はソースコードといって、どのような文字やリンクを表示するかを決定しています。
ソースコードは、「<h1>見出し</h1>」のように<タグ>と</タグ>で括られた要素があり、タグの中の文字に見出しなどの意味付けをしています。HTMLを書くファイルは、拡張子「.html」で作ることができます。ファイルの作り方は、「HTMLファイルの作り方」で詳しく紹介します。
HTMLの要素とは？
では、さらに詳しく要素について説明します。HTMLの要素はすべて小文字で記され、①開始タグ・②中身(コンテンツ)・③終了タグの３つで構成されています。
まず、HTMLでhtmlファイルの一番最初に記述する基本構造を紹介します。
| HTMLコード | 意味 |
|---|---|
| <!DOCTYPE html> | 「htmlのバージョン5で書きます。」という宣言(※終了タグはいりません） |
| <html></html> | ページの冒頭と最後を大きく括るタグ「htmlのページです。」という意味 |
| <head></head> | このタグの中に、ページタイトルや連携して使う外部のファイル(CSSやjavascriptのこと)など、属性情報を設定する |
| <body></body> | このタグの中に、見出しや文章、画像などコンテンツを記述する |
例外もありますが、基本的に①開始タグの後に②中身となる閲覧ページに表示したい情報を記述し、③終了タグは、①開始タグの前にスラッシュをつけて</○○>タグの意味付けが終わることを示します。
②中身の情報(コンテンツ)の中でさらにタグを設定することもできます。
要素の入れ子とは？
先ほど説明した、中身の情報(コンテンツ)の中にさらにタグを付けることを要素の入れ子、または要素のネストと呼びます。
ページ全体を括る<html>の要素の中に、<head>と<body>の２つの大きな要素の括りがあり、その大きな要素の中に入れることができる要素は決まっています。
<head>には、<meta charset=“utf-8”>（日本語で表示するという設定）や<title>（ページの名前）、<description>（ページの簡単な紹介文）などの要素を入れることができます。
<body>要素の中に入れることができる要素には、<h1>（大きな見出しの設定）、<p>（段落の設定）などがあります。さらに<p>要素の中には、段落の中の文章の一部を設定する<span>（グループ化する）、<strong>（強調する）といった意味を持つタグを入れることも可能です。
要素は、開始タグと終了タグで挟むことが決まりなので、「<head><title>○○</title></head>」というように、小さな括りの要素を挟む形になります。
空要素とは？
要素は、基本的に①開始タグ・②中身(コンテンツ)・③終了タグで構成されていますが、1つのタグのみで意味を持たせることができる空要素というものもあります。
要素の入れ子で説明した、<head>要素の中に入れる「<meta charset=“utf-8”>」は、この記述のみで「日本語で表示する」という意味を設定できますし、リンクを設定する<link>要素も空要素です。
また、段落を意味する<p>要素の中に、<img>（画像を設定する）、<br>（文章の途中で改行させる）などの空要素を入れることもできます。
空要素も要素と同じように、どの要素の中に入れることができるかが決まっています。タグは、種類がたくさんあるのですべて覚える必要はありません。よく使うタグから、その要素がもつ意味や、どの要素内で使えるかを覚えていきましょう。
Webページから別のページへ移動する方法
例えば、Webページの記事の目次から気になる見出しへ移動したり、別のWebページやファイル、メールアドレスなどへ移動できるようにするには、移動先の「ハイパーリンク」を示すことが必要です。
ハイパーリンクを設定するのは、アンカーという意味を持つ<a></a>要素です。<a>要素には、「参照するリンク先を指定する」という意味の「href(エイチレフ)属性」が必須です。
リンクの出発点を示す場合は、<a href=”ここにリンク先のURLを書く”>○○</a>と記述します。○○には、閲覧者がわかるようにリンク先やタイトルなどを書きます。
リンクがブラウザで表示される際は、文字が青色に変わって下線が引かれるようになります。
HTMLのファイルの作り方
HTMLを記述するためのファイルの作り方を順を追って説明します。
- まず最初にテキストエディタを起動します。テキストエディタとは、文字情報のみのファイルのことで、Windowsならメモ帳、Macならテキストエディットのことです。
- そのファイルにHTMLのソースを入力していき、入力が完了したら文書を保存します。名前を付けて保存の画面で、ファイル名をWebサイトのトップページに付けられる一般的なファイル名のindex.htmlとして、文字コードを「UTF-8」に変更してから保存します。ファイルの拡張子は「.html」になっていることを確認しましょう。
- 保存したファイルをダブルクリックして、「Internet Explorer」や「Chrome」などのブラウザで表示してみましょう。思い通りの表示がされていたら成功です。
ページとページを繋ぐリンクを作るときは、この手順でリンクさせるHTMLのファイルを作ります。2回目以降のファイル作成は、拡張子を「.html」のままファイル名は好きなものに変更して保存しましょう。
HTMLエディタには「Atom」や「Sublime text」など無料で利用できるソフトウェアがあり、プロも利用する優秀なものも多いです。
<a>要素で次のページを指定する方法
同じサイト内で「次のページへ」と書かれたハイパーリンクを指定するのは、別のページにリンクを設定する方法とほぼ同じです。
<a>要素で、「<a href=”○○.html”>次のページへ</a>」と書きます。同じ場所に保管されているページをリンク先に指定する場合には、ページのURLは必要なくファイル名のみ書き込めば設定が完了します。
その他に「title属性」を加えれば、ユーザーがリンク部分にカーソルを合わせたときに補助情報を表示することが可能です。
title属性を加えるには、「<a href=”リンク先のファイル名.html” title=”ここに補助情報を書く”>次のページへ</a>」といったように書き込みます。
リンク先から前のページへ戻るを指定する方法
リンク先の指定は一方通行ですが、「リンク先から元のファイルに戻る」と指定するリンクを設定すれば、ユーザーが2つのページを行ったり来たりすることができるようになります。
「前のページへ戻る」というリンクを設定する方法は、元のページでリンクを設置した時と同じです。リンク先に指定したファイル内で「<a href=”リンク元のファイル名.html” >前のページへ戻る</a>」と記述すれば指定できます。
ブラウザで2つのファイルを確認して、「次のページへ」と「前のページへ戻る」のテキストリンクが指定されていれば成功です。
例えば、リンクにしたい部分を<a>要素でタグ付けしたけれど、まだリンク先のページが未完成の時には「<a href=”#”>○○</a>」と書いておけば閲覧者がクリックしても、どのページにも飛ばないようにしておくことができます。
知っておくと便利な<a>要素の属性
<a>要素は、<a 属性=”属性値”>○○</a>という構成でできています。<a>要素にhref属性が必須であることは説明しましたが、それ以外にも加えることができる属性がいくつかあります。知っておくと便利な属性を紹介します。
| 属性 | 意味 |
|---|---|
| title属性 | リンク先の補助情報を設定できます。 |
| target属性 | リンク先のページをどの場所で開くか指定することができ、属性値「_self」で同一のウィンドウ、「_blank」で新しいウィンドウを開きます。 |
| name属性 | リンク先の場所に名前を付けることができます。 |
| rel属性 | リンク先の位置づけを指定することができます。 |
| download属性 | HTML5から適用された属性です。リンクがダウンロード用のリンクだということを示します。 |
buttonタグの使い方
buttonタグはボタンを設置できるタグです。コードは以下のように記述します。
<!– HTMLコード –>
<button onclick=”location.href=’test.html'”>クリックでtest.htmlに移動</button>
上記のようなページの移動の他にも、フォームの送信やリセットにも使えます。
inputタグの使い方
inputタグは入力欄を作れるタグです。上記のbuttonタグと一緒に使えば簡単にお問い合わせフォームも作れます。以下の例を見てみましょう。
<!– HTMLコード –>
<input type=”button” onclick=”location.href=’test.html'” value=”クリックでtest.htmlに移動”>
「type」属性を「button」としているため、上記のコードを入力するとボタンが現れます。このようにinputタグは「type」属性を指定するといろいろな役割を持たせることができます。
以下がinputタグの属性一覧です。
| type属性 | 効果 |
|---|---|
| button | ボタンを設置できます。 |
| checkbox | チェックボックスを設置できます。 |
| color | カラーパレットを起動し、色選択ができます。 |
| date | 日付の入力ができます。（年/月/日） |
| datetime-local | 日付と時刻の入力ができます。 （年/月/日 時:分） |
| メールアドレスの入力ができます。 | |
| file | ファイルのアップロードができます。 |
| hidden | 隠しフィールドを設置します。 |
| image | 画像を表示します。 |
| month | 年と月を入力できます。（年/月） |
| number | 数字を入力できます。対応していればスピンボタンの表示もできます。 |
| password | パスワードを入力できます。 |
| radio | ラジオボタンを設置できます。（○マークで表示される一つだけ選択できるボタン） |
| range | 数値を入力するスライダーを設置できます。 |
| reset | フォーム内をリセットするボタンを設置できます。 |
| search | 検索窓を設置できます。 |
| submit | フォームの送信ボタンを設置できます。 |
| tel | 電話番号を入力できます。 |
| text | テキストを入力できます。「type」を指定しなければtext扱いになります。 |
| time | 時間の入力ができます。（時：分） |
| url | URLを入力できます。 |
| week | 年と週を入力できます。（年/週） |
同じページ内で移動する方法は？
次は、hrefについての詳しい解説と、同じページ内でジャンプする方法と実際のHTMLの書き方を説明します。
ページとページを移動するリンクには<a>というアンカー要素を用いること、<a>要素には必ず「ハイパーテキストを参照する」という属性を持ったhrefが必須であることは説明してきましたが、ここで一度、hrefについて整理します。
次に、同じページ内で移動する方法を説明します。
hrefが指定できるリンク先5種類
hrefで指定できるリンク先は、①絶対パス②相対パス③同じページの特定の箇所（スクロール）④メール送信などの他のプロトコルを呼び出す⑤スクリプト（JavaScript）の実行の5種類です。
①絶対パスは内部リンク・外部リンクに使えます。②相対パスは、同じサーバーに保管しているファイルに利用でき、③同じページの特定の箇所へのリンクは、目次から見出しへジャンプするなどページ内を移動することができます。
④メール送信など他のプロトコルへは、値に『mailto:○○』（○○はメールアドレス）と書けば移動できます。
また、⑤ジャバスクリプトをリンク先に指定する方法は『javascript:○○』(○○にはスクリプトを指定する)です。
hrefの基本的な書き方3つとタグの示す意味について覚えておくと良いでしょう。
| HTMLコード | 意味 |
|---|---|
| <a href="">○○</a> | ページのリロードを示すタグです。 |
| <a href="#">○○</a> | ページのトップに戻ります。 |
| <a href="#!">○○</a> | どこにも移動しないリンクです。 |
同じページ内でリンクを指定する方法
例えば、Webページの内容が多いときに目次から見出しへジャンプすることができたり、文章内の単語について詳細がわかる段落までジャンプすることができたら、知りたい情報をより効率よく収集することができます。
このようなリンク先を指定するのは、前述したhrefのリンク先③同じページの特定の箇所にジャンプする方法を使います。これには、リンク先とリンク元の2カ所に<a>要素を書く必要があります。
記述形式はまず、移動したい箇所に名前を指定する目的で「<a id=”△△”>○○</a>」と書きます。次に、リンク元に「<a href=”#△△”>○○へジャンプします</a>」と設定すれば、リンク元から指定した箇所にジャンプすることができます。
△△の名前を書く部分は、自由に決めることができますが、リンク先とリンク元が同一の名前でないとリンクできないので注意しましょう。○○にはタイトルや見出しなどが入ります。
ページ内リンクのコーディング例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>ここにタイトルを書きます</title>
</head>
<body>
<h1>ここに見出しを書きます</h1>
<p>
<a href="#ここにidを書きます">ここをクリックするとリンク先へ移動します</a>
</p>
<p style="padding-top:500px">
<a name="ここにidを書きます">ここがリンク先です</a>
</p>
</body>
</html>
次のページ、前のページを連続してリンクする方法
これまでは、Webページから他のページにリンクを指定したりページ内の箇所に移動するリンクを指定する方法を解説してきましたが、この方法だけでリンクの対応をするとなると、連続した小説や日記などのページを作るときには、毎回新規作成したページと前のページのリンクを付けなければなりません。
その手間を解決できる、次のページと前のページを連続的にリンクさせる方法があります。
リンクにパラメーターをつける
<a>要素で作ったリンクのURLにパラメーターという変数の値をつけてリンク先に渡すことで、リンクを使ってページを辿ることができます。
URLパラメーターとは、サーバーに情報を伝えるためにURLに付け加える変数のことです。パラメーターの値にはクエスチョンマーク(?)を付けることで、URLと区別します。複数の値を指定する場合はアンパサンド(&)を使います。
記述の仕方は、「<a href=”リンク先のURL?変数名1=値&変数名2=値&…”>○○</a」となります。
変数が2種類並んでいるので混乱しますが、実際は詳細記事ページとその他のページの場合で使い分けます。
ページの移動に使う変数
| HTMLコード | 意味 |
|---|---|
| <!--nextentry--> <!--/nextentry--> | 表示中のエントリより一件以後のエントリ情報を表示させるブロックです。<%nextentry_url>でURLを表示し、<%nextentry_title>でタイトルを表示できます。 |
| <!--preventry--> <!--/preventry--> | 表示中のエントリより一件以前のエントリ情報を表示させるブロックです。<%preventry_url>でURLを表示し、<%preventry_title>でタイトルを表示できます。 |
| <!--nextpage--> <!--/nextpage--> | 表示中のページより、一件以後のページを表示させるブロックです。<%nextpage_url>でURLを表示します。 |
<!--prevpage--> | 表示中のページより、一件以前のページを表示させるブロックです。<%prevpage_url>でURLを表示します。 |
その他にも、実際にコーディングする際に必要になる変数もあるので、確認しましょう。
| HTMLコード | 意味 |
|---|---|
| <!--permanent_area--> <!--/permanent_area--> | 固定リンク画面（blog-entry-x.html）で表示されるブロックです。 |
| <!--not_permanent_area--> <!--/not_permanent_area--> | 固定リンク画面（blog-entry-x.html）以外で表示されるブロックです。また、変数で表示するページのエリアを設定することができます。 |
| <!--permanent_area--> <!--/permanent_area--> | 固定されたリンクページを表示させるタグです。 |
| <!--not_permanent_area--> <!--/not_permanent_area--> | 固定されたリンクページを表示させないタグです。 |
変数を使ったリンクのコーディング例
ブログ下部に「前のページ・HOME・次のページ」といったリンクを配置する場合は、リンクごとにセットにして記述する必要があります。その場合のコーディングは下記の通りです。
<!--permanent_area-->
<!--preventry-->
<a href="<%preventry_url>"><%preventry_title>前のページ</a>
<!--/preventry-->
<a href="<%url>">HOME</a>
<!--nextentry-->
<a href="<%nextentry_url>"><%nextentry_title>次のページ</a>
<!--/nextentry-->
<!--/permanent_area-->
<!--not_permanent_area-->
<!--prevpage-->
<a href="<%preventry_urll>">前のページ</a>
<!--/prevpage-->
<a href="<%url>">HOME </a>
<!--nextpage-->
<a href="<%nextentry_url>">次のページ</a>
<!--/nextpage-->
<!--/not_permanent_area-->
リンクタグを作るための手順
<a>要素でリンクタグを記述する際の具体的な手順を確認しましょう。
- リンク先のページをブラウザで表示します。そのページのURLをコピーして、タグ内に貼り付けます。<a href=”ここにURLをペースト”>
- リンク先のページタイトルをコピーして、開始タグと終了タグの間にペーストします。
ページタイトルは、リンク先ページのタイトルや「こちらのサイト」などとされていることが多く、リンク先のURLをそのまま表示していることもあります。
リンク元のページを開いたままリンク先ページを表示する
リンク先のページを閲覧するとき、表示されるページが切り替わってしまい、リンク元のページへ戻れなくなって不便に感じたことはありませんか？そんなときは、target=”_blank”でリンク先のページを別のウインドウで表示できる設定をしておくと便利です。
タグの書き方は、「<a href=”リンク先URL” target=”_blank” rel=”noopener noreferrer”>リンク先タイトルなど</a>」です。
別のタブでリンク先を表示する方法は、外部のサイトへジャンプする際に設定されていることが多いです。自分のサイト内でリンクをクリックするたびに別のウインドウが開く設定をしていると、閲覧している間にたくさんのページを立ち上げてしまうことになり、不具合が発生する可能性がある為です。
Webサイト内でリンクする場合は通常のリンク表示がおすすめです。通常のリンクでは、ブラウザの「戻る」や「←」で前のページへ戻ることができます。
外部リンクと内部リンクとは？
外部リンクは、他のWebサイトのページと自分のWebサイトのページをリンクすることです。自サイトから他サイトのページへ移動するリンクは発リンクと呼ばれ、逆に他サイトが自サイトのページをリンクすることは被リンクといいます。
外部リンクのタグの書き方は、「<a href=”外部サイトのURL”>ここに外部サイトのタイトルなど</a>」です。
内部リンクは、自サイト内のページとページを移動するリンクのことです。内部リンクの場合は相対リンクでURLを省略することもできます。name属性を使ってページを移動することができるページ内リンクも内部リンクに含まれます。
内部リンクの書き方は、「<a href=”自サイト内ページのURL”>ここにページタイトルなど記入</a>」です。
ページ内リンクの書き方は、「<a href=”ページ内で指定した箇所のid”>ここにリンク先idなど記入</a>」です。
URLを記述する絶対パスと相対パスの違いは？
Webサイト内外に関わらず、リンクタグでURLなどリンク先を指定する記述は「パス」と呼ばれます。
絶対パスは、リンク先のURLを完全に記述する方法で、ページとページを直接繋ぐことができます。初心者でもわかりやすく、確実にリンクタグを作ることが可能です。
相対パスは、リンク元のファイルの位置から見てリンク先のページがどの階層にあるかという記述方法で指定します。ファイルの位置を「/」で表して、そのファイルを起点に階層が上か下か、とリンク先の道筋を記述します。リンク先が同じ階層にある場合はURLの部分にファイル名を書くだけで記述が完了します。
絶対パスに比べて記述が少ないことで、コーディング時間の短縮ができたりファイル容量が軽くなることが相対パスの利点ですが、リンク先のファイルを保存している位置が変わればリンク切れを起こすことや、独自ドメインでない無料ホームページではリンクできないことがあるので注意しましょう。
外部リンクを無効にする方法
外部リンクは「rel=”nofollow”」でSEO的に無効にすることができます。その書き方は、「<a href=”リンク先URL” rel=”nofollow”>リンク先タイトルなど</a>」です。
Googleの検索アルゴリズムでは、リンクを辿ってロボットがサイト内の情報を収集し評価します。
自然な被リンクがたくさんあるサイトは、ユーザーによって有益だとしてGoogleからの評価が上がり、検索エンジンでWebサイトが上位表示される可能性は高まりますが、意図的に検索順位を上げようとするための被リンクは逆にGoogleの評価を下げ、SEO対策で不利な状況になります。
例えば、広告掲載などの有料リンクや信頼できない外部サイトからの被リンク、Googleロボットが検索する必要のないページは、SEOの評価を無効にしておく方が自サイトの評価を上げることになります。
ページの中に外部ファイルを読み込む方法
この項目では、HTMLのファイルの中にフレームを作って外部のHTMLを読み込む方法を紹介します。GoogleMapを表示するときや、動画を埋め込む際によく用いられるので、覚えておくと非常に便利です。
外部のファイルを読み込むiframe要素
iframe(インラインフレーム)要素は、ウインドウを水平や垂直に分割するだけでなく、src属性で指定した外部ファイルを表示して独立した形式のインラインをつくることができます。
ソースの語源を持つsrcは、出所という属性を持っていて、フレーム内に表示する文書のURLを設定するという意味を持っています。
iframe要素をURL指定で読み込む
iframe要素のsrc属性でURLを指定するための記述は「<iframe src=”ここに外部ページのURL”width=”幅の値”height=”高さの値”></iframe>」です。
次に、「width属性」と「height属性」を使って、外部ファイルの幅と高さを指定しましょう。値はpx（ピクセル）か％（パーセンテージ）で指定します。
読み込んだページが長い時は、自動的にスクロールバーが表示されてインラインの枠内をスライドさせることができます。
iframe要素を相対パスで指定する
iframe要素は、外部のURLだけでなくサーバー内のファイルを指定して読み込むことができます。その際にはファイル名で指定することができる相対パスを使うと便利です。iframe要素はURL以外にも、同じサーバー内にあるファイルを相対パスで指定して読み込むことができます。
iframeを相対パスで読み込む形式は、「<iframe src=”./ここにファイル名” width=”幅の値” height=”高さの値”></iframe>」となります。
読み込むHTMLファイルと起点となるHTMLファイルが同じ階層にある場合は「ファイル名」のみ記述し、読み込むファイルが同じ階層内で別のフォルダ内にある場合は「フォルダ名/ファイル名」を書き込みます。読み込むファイルの階層が１つ上にあれば「../ファイル名」、２つ上にあれば「../../ファイル名」となります。
iframeをsrodoc属性で読み込む
iframe要素はsrc属性の他に、「srcdoc属性」でフレーム内に表示するHTMLコードを指定することができます。
形式は、「<iframe src=”./ファイル名” srcdoc=”HTMLコード”></iframe>」と記述します。srcdoc属性とsrc属性が同時に指定された場合は、srcdoc属性が優先されます。
srcdoc属性は、セキュリティを制限した領域を示す「sandbox属性」とセットで使われる場面が多いのでsandbox属性の値を紹介します。
| HTMLコード | 意味 |
|---|---|
| allow-forms | リソースがフォームを送信することを許可する |
| allow-modals | モーダルウィンドウを開くことができるようにする |
| allow-orientation-lock | スクリーンの方向をロックできるようにする |
| allow-popups | ポップアップ（target=”_blank”など)を許可する |
| allow-scripts | スクリプトを実行できるようにする |
セット使いの形式は、「<iframe src=”./ファイル名” srcdoc=”HTMLコード” sandbox=”値”></iframe>」です。
【コピペでOK】ページの移動に使えるエフェクトとコードを紹介！
ページの移動にエフェクトを付けると、単調さがなくなり他のサイトと差別化を図れます。
ここでは2つのエフェクトを紹介します。
- フェード
- 円形のローディング
「htmlについてさっぱりわからない！」という方もコピペをすれば使えるので活用してください。
フェード
派手さはありませんが、どんな状況でも使える汎用的なエフェクトです。コードも難しくないのでhtml学習の入門にもいいでしょう。
<!– HTMLコード –>
<!– index.htmlページ内 –>
<div class=”top_wrap”>
<a href=”test.html”>testページに移動する</a>
</div>
<!– HTMLコード –>
<!– test.htmlページ内 –>
<div class=”wrap”>
<div class=”bg”>testページをフェードで表示</div>
</div>
/* CSSコード */
.wrap {
animation: fadein 5s forwards;
}
@keyframes fadein {
0% {opacity: 0}
100% {opacity: 1}
}
test.htmlをフェードしたいページのURLに書き換えるだけで使えます。
円形のローディング
こちらも汎用的なエフェクトです。少々コードが複雑なので全てを理解するのは難しいですが、その分カスタマイズできる項目も多いので挑戦してみてください。
<!– HTMLコード –>
<body>
<i class=”loading-icon”></i>
</body>
/* CSSコード */
body {
display: flex;
height: 100vh;
justify-content: center;
align-items: center;
margin: 0;
}
.loading-icon {
box-sizing: border-box;
width: 20px;
height: 20px;
border-radius: 50%;
box-shadow:
0 -30px 0 #e0eef0, /* 上 */
21px -21px 0 #d0eff3, /* 右上 */
30px 0 0 #bfecf1, /* 右 */
21px 21px 0 #AEEBF2, /* 右下 */
0 30px 0 #79C7D9, /* 下 */
-21px 21px 0 #5EA4BF, /* 左下 */
-30px 0 0 #5697BF, /* 左 */
-21px -21px 0 #265C8C; /* 左上 */
animation: rotate 1s steps(8) 0s infinite;
}
@keyframes rotate {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
数値を変えれば色や大きさを変えられます。色々試して自分なりにアレンジしてみましょう。
まとめ
良質なWebサイトを作るには、良質なコンテンツを関連性のあるページとページをリンクして繋ぐことが重要です。リンクを使ってサイト内を巡回しやすくすることは、ユーザーが閲覧しやすいWebサイトを構築することとなり、検索アルゴリズムによってサイトの価値も評価されやすくなります。
今回の記事では、Webページをリンクさせる方法だけでなく、「次のページ」「前のページ」の設定方法を紹介しました。HTMLのリンクは何度も書くことで理解が深まるので、とにかく記述してみることで習得できます。
