Rainbow Engine

IT技術を分かりやすく簡潔にまとめることによる学習の効率化、また日常の気付きを記録に残すことを目指します。

HTML/css Java JSP/Servlet

HTMLで<a>要素のリンクを中央寄せする方法

投稿日:2021年5月10日 更新日:

<目次>

(1) HTMLで<a>要素のリンクを中央寄せする方法
 (1-1) 構文
 (1-2) サンプルプログラム
 (1-3) サンプルプログラム実行結果

(1) HTMLで<a>要素のリンクを中央寄せする方法

(1-1) 構文

●css

「div」セレクタに「center」というクラス(HTML側のclass=”XXX”で指定する名前)を定義し、プロパティ「text-align」の値を「center」に指定する事で、div要素を使った中央寄せを実現します。

div.center {text-align: center;}
 
(参考)
今回は「div.center」としていますが、理由は「div」のみだと中央寄せが全ての<div>要素に適用されてしまうためです。divセレクタのcenterクラスを用意する事で、明示的に「class=”center”」を指定した<div>要素にのみ、中央寄せが適用されるようにしています。
 

●HTML

中央寄せしたいリンク「<a href></a>」を<div>要素で囲み、そのdiv要素内でcssのクラス「center」を指定します。

<div class=”center”><a href=”[リンク先パス]”>[リンクに表示するテキスト]</a></div>

目次にもどる

(1-2) サンプルプログラム

上記の構文を使って、動作する簡単なプログラムの例をご紹介します。

●css

(サンプル)

@CHARSET “UTF-8”;
div.center {text-align: center;}
(図121)
 

目次にもどる

●HTML

HTML側ではcssをインポートするために<link>要素でスタイルシートの読み込みを行います。

<link rel="stylesheet" type="text/css" href="css/Sample.css">

 

(サンプル)

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html class="font_1">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="stylesheet" type="text/css" href="css/Sample.css">
<title>Form認証(MemoryRealm) ログアウト</title>
</head>
<body>
<div class="center">ログアウトしました。</div>
<div class="center"><a href="./form_auth/AfterLogin1.jsp">→ログインページへ戻る</a></div>
</body>
</html>
(図122)
 

目次にもどる

(1-3) サンプルプログラム実行結果

●Before

「text-align: center;」が効いていないため、文字が左に寄っています。

(図123)
 

目次にもどる

●After

(図124)

目次にもどる

●操作動画

上記でイメージが掴みにくい場合、ご参考に修正⇒反映確認の動画を掲載します(※div要素にclass=”center”を追記して保存して、中央寄せに変化する様子を確認しているだけです)。

目次にもどる

Adsense審査用広告コード


Adsense審査用広告コード


-HTML/css, Java, JSP/Servlet

執筆者:


comment

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

関連記事

Spring Bootでpom.xmlに「Unknown error」が出た時の対処方法について

  <目次> (1) Spring Bootでpom.xmlに「Unknown error」が出た時の対処方法について  (1-1) 発生状況  (1-2) 原因  (1-3) 対処法①(非 …

JavaScriptのAddEventListenerの用途や使用例について

<目次> (1) JavaScriptのAddEventListenerの用途や使用例について  (1-1) 概要  (1-2) 構文  (1-3) サンプルプログラム (1) JavaScriptの …

Javaのabstractとは?抽象クラスの概要やサンプルPGをご紹介

<目次> (1) Javaのabstractとは?抽象クラスの概要やサンプルPGをご紹介  (1-1) 抽象クラス(abstract)とは  (1-2) 抽象クラスの目的や用途  (1-3) 抽象クラ …

Javaでcsvファイルに書き込みを行う方法(サンプルプログラム付き)

<目次> (1) Javaでcsvファイルに書き込みを行う方法  (1-1) 構文  (1-2) サンプルプログラム (1) Javaでcsvファイルに書き込みを行う方法 Javaでcsvファイルを生 …

オープンアドレス法をJavaで実装したプログラムのサンプルをご紹介

<目次> (1) オープンアドレス法をJavaで実装したプログラムのサンプルをご紹介  (1-1) オープンアドレス法とは  (1-2) Javaのサンプルプログラムの全体像  (1-3) Javaの …

  • English (United States)
  • 日本語
Top