コーディング練習(5) positionを使用してトップへ戻るボタンを実装しよう

こんにちは、かなきち(@kanakichi0801)です。

この記事で、トップへ戻るボタンをpositionプロパティを使用して実装していきます。

今回コーディングする箇所はフッターです。フッターにはよくコピーライトがあります。コピーライトの記述する際に使用するタグについても最下部でしっかり説明しているので、確実にマスターしたいという方は最下部までご覧ください。

さっそく作成するという方はこちらをクリック！

また、前回の記事をまだ見ていないよという方は、以下記事から一緒にホームページを作成してみましょう！

0. 基本となるHTMLを作成し、リセットCSSを読み込ませる記事↓
blog.mimipen.net

1. ヘッダーとメインビジュアルをコーディングした記事↓
blog.mimipen.net

2. 3カラムを隣接セレクタ(li + li)を使ってコーディングした記事↓
blog.mimipen.net

3. 特殊文字を使いメニュー表をコーディングした記事↓
blog.mimipen.net

4. Google mapの埋め込み方&拡大方法を解説した記事↓
blog.mimipen.net

コーディング練習 第五回目！
この記事で実践的なpositionプロパティの使い方を理解しよう！

こんな人に読んで欲しい

・HTMLとCSSの使い方を覚えたい方

・ホームページを作ってみたい方

・ホームページを作りたいけど、何から始めればいいかわからない方

・positionプロパティの具体的な使用方法が知りたい

完成コード

※以下のページの最下部のフッターを実装していきます。
サンプルページ

[html]

<div class="footer">
  <div class="totop"><a href="#"><span class="arrow"></span></a></div>
  <div class="copy">Copyright &copy; 2019 MIMIPEN inc. All Rights Reserved.</p>
</div>

[css]

/*--------------------------------------------------------------
   FOOTER
--------------------------------------------------------------*/
.footer{
  position: relative;
  background-color: #74859f;
}
.totop{
  display: inline-block;
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
}
.totop a{
  display: block;
  background-color: #bacae1;
  width: 70px;
  height: 70px;
  position: relative;
  border-radius: 40px;
}
.totop .arrow{
  content: '';
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  width: 20px;
  height: 20px;
  margin: -6px 0 0 -10px;
  border-top: solid 3px #fff;
  border-right: solid 3px #fff;
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
  box-sizing: border-box;
}
.copy{
  width: 1040px;
  margin: 0 auto;
  color: #fff;
  font-size: 10px;
  padding: 20px 0;
}

もっとレベルを上げてコードを書きたい方は、ページの下部にHTMLタグをしっかり使ったコードも載せてあるので参考してみてね！

以下より、このブログでのコーディングルールを解説し、その後コードの解説へと入ります。

コーディングルール

初心者向けのコーディング記事となります。その為、以下のルールを元にコーディングを行います。

1. 使用するHTMLタグは「div」「img」「a」「h」しか基本的に使わない。
2. 全体で共通するスタイル(body、aなど、よく使うタグへの指定)は、一番最後に反映させる。その為、コーディング途中はデザインと見た目が違う場合があります。

デザインデータを元に計画をたてる

まずは、デザインを確認しましょう！デザインデータはこちらをクリック。

フッターエリアのデザインデータを元に以下のように考える。

かなきちメモ(クラス名や使用するプロパティを考える)
青い帯の部分は、コピーライトの周りにpaddingを持たせて作る。トップへ戻るボタンのクラス名は「totop」とし、positionプロパティを使って中央に配置しつつ帯と重なるようにする。トップへ戻るボタンの中央にある矢印もpositionプロパティを使って縦横中央に配置する。矢印の実装方法は、正方形にborder-top・border-rightをつけて、回転(transform: rotate([数値]deg))させる。

フッターのHTML

[html]

<div class="footer">
  <div class="totop"><a href="#"><span class="arrow"></span></a></div>
  <div class="copy">Copyright &copy; 2019 MIMIPEN inc. All Rights Reserved.</p>
</div>

以下のコードのアンカーリンク(aタグ)に注目しましょう。

<div class="totop"><a href="#"><span class="arrow"></span></a></div>

アンカーリンク(aタグ)のhrefには移動したいページのリンクまたは、移動したい箇所のid名を#付きで記入する。今回飛ばしたいのはページ上部で、ページ上部にリンクを飛ばした時はhrefに「#」と入力する。

アンカーリンクの種類一覧

よく使うアンカーリンクが以下の4つのパターンがあります。
(1)href="#"
＝　今いるページ上部に移動する。
(2)href="http://blog.mimipen.net/"
＝　リンクのページに移動する。
(3)href="#about"
＝　今いるページ内、id名が「about」のエリア上部に移動する。これをページ内リンクという。
(4)href="http://blog.mimipen.net/#about"
＝　リンクのページに移動し、リンク内のid名が「about」のエリア上部に移動する。

ちなみに、アンカーリンクが空の時(href="")は、当然ですがリンクがないので移動しません。

(3)(4)について補足です。id名は重複してはいけません。id名を重複して書いてしまった場合は、2つ目にページ内リンクにはページ移動できません。また、jsによるアクションが動かない原因にもなるのでidはページ内リンクなどここぞという時にのみ使用しましょう。

フッターのCSS

フッターの大枠を実装する

フッターの大枠というのは、青い帯状の部分のことです。

.footer{
  position: relative;
  background-color: #74859f;
}

大枠に青色(#74859f)を設定し、ボタンを自由に移動させるエリアを(position: relative)で決める。

positionプロパティの使い方については、以下のリンクを参考にしてください。 blog.mimipen.net

次に、トップへ戻るボタン(totop)を設定していく。

.totop{
  display: inline-block;
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  -webkit-transform: translateX(-50%);
}

div(class="totop")要素はブロック要素です。ブロック要素は親要素の大きさを継承します。そのためここではdisplay: inline-blockを使用して、ボタンのみの大きさにします。そして親要素のエリア内で自由に動かしたいのでposition: absoluteを設定しています。

bottom: 20pxで下から20pxの位置に移動するという意味。

left: 50%;
transform: translateX(-50%);
-webkit-transform: translateX(-50%);

左から50%の位置に移動し、要素の半分の値分、X軸に-50%するという意味。

transformはブラウザ対応範囲が限られているので、ベンダープレフィックス(-webkit-)も記述しておきます。

.totop a{
  display: block;
  background-color: #bacae1;
  width: 70px;
  height: 70px;
  position: relative;
  border-radius: 40px;
}

aタグは、インライン要素です。インライン要素のままにしておくとクリックエリアが子要素の大きさになってしまいます。そのため、ブロック要素にして親の大きさを継承させます。

矢印(子要素)を自由に移動したいので親要素のaタグに(position: relative)を持たせます。他はこれまでの解説でよく出てきたプロパティばかりなので飛ばしますね。

.totop .arrow{
  content: '';
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  width: 20px;
  height: 20px;
  margin: -6px 0 0 -10px;
  border-top: solid 3px #fff;
  border-right: solid 3px #fff;
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
  box-sizing: border-box;
}

矢印の実装を上記では行っております。20pxの正方形を作成し、topとrightにそれぞれボーダープロパティを追加します。イメージは以下の通りです。


矢印を作り、transformプロパティで[-45度]回転させています。軸や大きさの調整は、marginとbox-sizingで行いました。また、自由に動かすためposition: absoluteを指定しています。

.copy{
  width: 1040px;
  margin: 0 auto;
  color: #fff;
  font-size: 10px;
  padding: 20px 0;
}

最後にコピーライトですねの調整をします。こちらもこれまでに使用したことがあるプロパティばかりなので説明は省きます。

まとめ

いかがだったでしょうか。こんな小さな箇所なのにコード量が多く感じたのではないでしょうか。見た目で簡単そうに見えても、難解なプロパティを使うほどコード量が多くなっていきます。

私の感覚ですが、positionはこれまで覚えてきたプロパティから少し難易度が上がります。ただ、これを覚えると複雑なコーディングも実装できるようになるので、頑張って挑戦していくようにしましょう！

HTMLタグをしっかり使ったコード

[html]

<footer>
  <div class="totop"><a href="#"></a></div>
  <p class="copy w__base"><small>Copyright &copy; 2019 MIMIPEN inc. All Rights Reserved.</small></p>
</footer>

[css]

/*--------------------------------------------------------------
   FOOTER
--------------------------------------------------------------*/
footer{
  position: relative;
  background-color: #74859f;
}
.totop{
  display: inline-block;
  position: absolute;
  bottom: 20px;
  left: 50%;
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
}
.totop a{
  display: block;
  background-color: #bacae1;
  width: 70px;
  height: 70px;
  position: relative;
  border-radius: 40px;
}
.totop a::before{
  content: '';
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  width: 20px;
  height: 20px;
  margin: -6px 0 0 -10px;
  border-top: solid 3px #fff;
  border-right: solid 3px #fff;
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
  box-sizing: border-box;
}
.copy{
  color: #fff;
  font-size: 10px;
  padding: 20px 0;
}

大きく変わった箇所といえば、コピーライトを<small>タグで囲った箇所でしょうか。

smallタグとは？

<small>タグは、「免責」・「警告」・「法的規制」・「著作権」・「ライセンス要件」などの注釈や細目を表す際に使用するそうです。難しく考えず、コピーライト(著作権)を表す際に使用されます。

以前はコピーライトは<address>タグで書かれていたのですが、HTML5からは<small>タグを使用するようになりました。

決して文字サイズを小さくするためだけにに使わないでください。<small>タグはコピーライトに使うと覚えておきましょう。

この記事がいいなっと思ったら読者登録をお願いいたします！

【ツイッターでは主に、仕事や技術系の内容をつぶやいています】 技術者の方ともっと繋がりたいっす！お気軽にフォローもお願いします！
かなきち(@kanakichi0801)
かずん(@kazoonLab)