Skip to main content

4. aタグについて

目次

  • 研修課題
  • このチャプターでのゴール
  • aタグとは?
    • aタグの属性設定について
  • 研修課題4
    • 研修課題4(応用編)

研修概要

このチャプターではaタグの使い方や種類、属性設定について理解します。

このチャプターでのゴール

aタグを使い、エイトビット株式会社のホームページリンクを自己紹介ページに埋め込み表示させるリンクを作ること。

aタグとは?

「A」とは、「Anchor」の略で、リンクの出発点や到達点を指定するタグです。
リンクの出発点を示す場合は、href属性でリンク先を指定し、到達点を示す場合はname属性やid属性を使用し、その場合の名前(識別子)を指定します。
以下に属性の種類を提示するので、覚えておきましょう!!

aタグの属性設定について

属性名属性概要内容
href概要領域をクリックした際のリンク先を指定します。
属性の値URL
name概要リンクの到達点ににするための名前を指定します。
属性の値文字列
charset概要リンク先の文字コードセットを指定します。
属性の値文字コード
hreflang概要リンク先の基本言語基本言語を指定します。
属性の値言語コード
type概要リンク先のMIMEタイプを指定します。
属性の値MIMEタイプ
rel概要この文書から見たリンク先文書との関係を記述します。
属性の値リンクタイプ
rev概要リンク先文書から見たこの文書の関係を記述します。
属性の値リンクタイプ
shape概要リンク領域の形状(イメージマップ用)を指定します。
属性の値rect, circle, poly, default
coords概要リンク領域の各座標(イメージマップ用)を指定します。
属性の値座標(X, Y)
target概要リンク先の文書を表示させる方法を指定します。
属性の値_blank、_self、_parent、_top、フレーム名、ウィンドウ名
download(HTML5)概要リンクがファイルのダウンロード用であることを示します
属性の値ダウンロード時のファイル名

研修課題4

エイトビット株式会社の会社ホームページのリンクをaタグを使い自身の自己紹介ページに埋め込んでみましょう。
エイトビット株式会社のホームページリンクは、
https://eightbit.co.jp/
なので、このリンクを埋め込んでください。

研修課題4(応用編)

aタグも画面中央寄せに統一してください。

tip

💡ヒント:divタグを使いaタグを中央寄せにしてみましょう。(Chapter5でdivタグは扱っています。)

Web