このレッスンでは、ページ内リンクについて学びます。
<h2 id="%E3%83%9A%E3%83%BC%E3%82%B8%E5%86%85%E3%83%AA%E3%83%B3%E3%82%AF%E3%81%A8%E3%81%AF%EF%BC%9F"><a class="header-anchor-link" href="#%E3%83%9A%E3%83%BC%E3%82%B8%E5%86%85%E3%83%AA%E3%83%B3%E3%82%AF%E3%81%A8%E3%81%AF%EF%BC%9F" aria-hidden="true"></a> ページ内リンクとは？</h2>
ページ内リンクとは、クリックした時に、同じページの中で指定した別の場所に簡単に移動するためのリンクです。
<h2 id="%E3%83%9A%E3%83%BC%E3%82%B8%E5%86%85%E3%83%AA%E3%83%B3%E3%82%AF%E3%81%AE%E4%BD%9C%E3%82%8A%E6%96%B9"><a class="header-anchor-link" href="#%E3%83%9A%E3%83%BC%E3%82%B8%E5%86%85%E3%83%AA%E3%83%B3%E3%82%AF%E3%81%AE%E4%BD%9C%E3%82%8A%E6%96%B9" aria-hidden="true"></a> ページ内リンクの作り方</h2>
移動したい場所に、<code>#</code>から始まるIDを設定し、aタグのhref属性にそのIDを指定することで作れます。リンクをクリックすると、スムーズに移動したい場所までスクロールします。
<img src="https://static.mosya.dev/anchor/./anchor-link2.png" alt="" width="1200" height="675" loading="lazy">
<div class="code-block-container">
 <code-copy-btn code='<a href=&quot;#id-1&quot;>見出し1へ</a>



<h1 id=&quot;id-1&quot;>見出し1</h1>
'></code-copy-btn>
 <pre class="shiki shiki-themes my-theme my-theme" style="background-color:#1A2638;--shiki-dark-bg:#1A2638;color:#1A2638;--shiki-dark:#1A2638" tabindex="0"><code class="language-html">&#x3C;a href="#id-1">見出し1へ&#x3C;/a>

&#x3C;!-- 👇 ここまでジャンプ -->
&#x3C;h1 id="id-1">見出し1&#x3C;/h1></code></pre></div>

anchor

ページ内リンクを作ろう

setup

Web制作についての基本を知ろう

hello-world

HTMLのタグについて学ぼう

hello-world-p

本文を表示しよう

image

サイトに画像を表示しよう

table

テーブルをマスターしよう

link

リンクタグをマスターしよう

list

リストの使い分けをマスターしよう

html-template

HTMLを始める前に定型文を覚えよう

HTMLに触れたことない方がまず、HTMLに触れるためのレッスンを用意しています。

初心者のためのHTML入門

CSSに触れたことがない方がまず、CSSに触れるためのレッスンを用意しています。

about-css

CSSの基本を学ぼう

font

CSSで文字色やサイズを変更してみよう

id-class

CSSで重要なidやclassについて

selector

CSSのセレクターを理解しよう

width-height

要素の高さと幅を設定しよう

text-align

テキストの配置を学ぼう

margin-padding

要素と要素の間に余白をつけよう

box-design

要素に角丸や影をつけてみよう

button

【腕試し】リンクつきボタンを作ろう

初心者のためのCSS入門１

CSSを活用した基本的なスタイリングテクニックを身につけましょう！

border-outline

要素に枠をつけるborderとoutlineをおさえよう

line-height

行間や文字同士の間隔を調整する

background

背景画像を設定しよう

gradation

背景にグラデーションを適用してみよう

position

ポジションを使った要素の配置をマスターする

pseudo-classes

擬似クラスを使ってスタイリングをしよう

pseudo-element

擬似要素を利用してスタイリングをしよう

nth-child

n番目の要素に対してCSSを適用する

element-css

要素特有のCSSを抑えよう

z-index

z-indexを使って要素の重なり順を指定しよう

card-with-gradation

【腕試し】おしゃれなカードを作ろう

CSSを使ったスタイリングの基礎

レイアウトの調整やアイテムの配置に使われるFlexboxの基礎知識と使い方をしっかり把握し、柔軟なデザインを実現しましょう！

flex

flexの概念を抑えよう

flex-direction

flex-directionを利用して要素の並び順を変更する

flex-shrink-grow

flexのshrinkやgrowの概念を理解しよう

flex-align

flexの縦方向に対する整列の方法により詳しくなろう！

flex-align-self

flexで個別に配置を上書きしよう

CSS Flex入門

Gridの基礎を学び、複雑なレイアウトを簡単に作成できるスキルを身につけていきましょう！

grid-cols-rows

CSS Grid Layoutの概念を抑えよう

grid-span

グリッドアイテムにspanを指定する

grid-position

グリッドの好きな位置にアイテムを並べよう

grid-functions

グリッドの便利な関数を学ぼう

grid-template-areas

Grid Template Areasを使ってサイトのレイアウトを作ろう

grid-center

Gridで中央配置を簡単に実現する

CSS Grid入門

異なるデバイスサイズに適応するデザインの作り方を学んでいきましょう！

viewport

ビューポートの概念を理解しよう

max-width

要素の最大幅、最小幅を指定する

media-query

メディアクエリーを利用して画面幅に応じてCSSを適用する

mobile-first

モバイルファーストな実装を身につけよう

CSSを利用したレスポンシブウェブデザイン

動きのある魅力的なウェブページを作成するためのアニメーションの基礎を学んでいきましょう！

transition

トランシジョンをマスターしよう

transform

トランシジョンとトランスフォーム

css-animation

CSSアニメーションを学ぼう

animation-delay

アニメーションのタイミングをずらす

CSSアニメーション入門

CSS変数の基礎を学び、効率的にコードを書く方法を身につけていきましょう！

css-vars

CSS変数を利用して共通の値を管理しよう

vars-responsive

CSS変数でレスポンシブ対応をより簡単に

darkmode

CSS変数を使ってダークモード対応してみよう

CSS変数入門

コードに「意味」を持たせるセマンティックHTMLの使い方を学んでいきましょう！

semantic

セマンティックなタグでマークアップしよう

セマンティックなHTML入門

ユーザー入力をスムーズに受け取るためのフォーム関連のHTMLタグや属性の基本を学んでいきましょう！