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でJSON形式のデータから値を抽出する方法+代表的なエラー対処も紹介

(0)目次&概説 (1) 記事の目的  (1-1) 目的 (2) JSON形式の概要  (2-1) JSON形式とは?  (2-2) JSON形式のフォーマット (3) JSON形式の抽出方法・事前準 …

Android StudioでHello Worldする手順(新規プロジェクト作成~疎通)

  <目次> (1) Android StudioでHello Worldする手順(新規プロジェクト作成~疎通)  (1-1) STEP1:Android Studioで新規プロジェクトを作 …

Javaのスレッドとは?概念やサンプルプログラムのご紹介

  <目次> (1) Javaのスレッドとは?概念やサンプルプログラムのご紹介  (1-1) Javaのスレッドとは?  (1-2) 方法①:Threadクラス継承の構文  (1-3) 方法 …

jQueryの$(document).ready()とは?意味や使い方をご紹介

<目次> (1) jQueryの$(document).ready()とは?意味や使い方をご紹介  (1-1) 「$(document).ready()」とは?  (1-2) サンプルプログラム  ( …

JSPでcssが適用されない(Resouce interpreted as Stylesheet but transferred with MIME type)事象のトラブルシューティング記録

<目次> (1) JSPでcssが適用されない(Resouce interpreted as Stylesheet but transferred with MIME type)事象のトラブルシューテ …

  • English (United States)
  • 日本語
Top