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

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

関連記事

Javaでカンマやクォーテーションをエスケープする方法

<目次> (1) Javaでカンマやクォーテーションをエスケープする方法  (1-1) 実現方法・構文  (1-2) サンプルプログラム  (1-3) 参考:カンマとダブルクォーテーション両方のエスケ …

Javaで正規表現の使い方をご紹介+サンプルプログラム付き

<目次> (1) Javaで正規表現の使い方をご紹介  (1-1) 正規表現とは?  (1-2) Javaでの正規表現の使い方  (1-3) サンプルプログラム (1) Javaで正規表現の使い方をご …

オープンアドレス法のアルゴリズムについて図を使ってご紹介

<目次> (1) オープンアドレス法のアルゴリズムについて図を使ってご紹介  (1-1) オープンアドレス法とは?  (1-2) オープンアドレス法のアルゴリズム  (1-3) オープンアドレス法の利 …

Javaのアノテーションを自作する方法をご紹介(サンプルプログラム付き)

(1) 自作アノテーションの作成~使用の手順  (1-1) アノテーションの宣言  (1-2) メタアノテーションの追加(任意)  (1-3) アノテーションを実際に使う(注釈の付与)  (1-4) …

Javaで複数の配列を結合する方法について

<目次> (1) Javaで複数の配列を結合する方法について  (1-1) 構文  (1-2) サンプルプログラム (1) Javaで複数の配列を結合する方法について Javaで複数の配列を結合する方 …

  • English (United States)
  • 日本語
Top