@kazunarigit (村田一成)posted at 2023-07-11

ホームページのレイアウト

Q&A

Closed

解決したいこと

自分で作っているホームページですが、文字のレイアウトが全体的に左寄せになっている。（pタグは除く）
これを中央揃えにしたい。

該当するソースコード

<!DOCTYPE html>
<html lang="ja">


<head>
	<link href="css.css" rel="stylesheet">
	<meta http-equiv="content-type" content="text/html; charset=UTF-8">
	<meta name="google-site-verification" content="JVr4YFloFmsOxDUskuE0369XbUBvxcDSgAb3jC5XgxQ" />
	<!-- Font Awesome -->
	<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css" rel="stylesheet" />
	<!-- Google Fonts -->
	<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap" rel="stylesheet" />
	<!-- MDB -->
	<link href="https://cdnjs.cloudflare.com/ajax/libs/mdb-ui-kit/3.10.2/mdb.min.css" rel="stylesheet" />

	<meta name="description" content="はじめまして。訪問ありがとうございます。プロフィールでは、経歴を紹介しています。プログラミング学習進捗も掲載しています。" />
	<meta http-equiv="keyword" content="Python,ホームページ,プログラミング,paizaラーニング,ドットインストール,Progate" />
	<meta name="copyright" content="プログラミングを愛するムラタのＨＰ" />
	<meta name="robots" content="all" />
	<meta http-equiv="content-language" content="ja" />
	<meta http-equiv="Content-Style-Type" content="text/css" />
	<meta name=viewport content="width=device-width,initial-scale=1" />
	<meta http-equiv="cache-control" content="no-cache" />
	<meta name="msvalidate.01" content="4EF1BA9F281FA84F709453360566E702" />
	<style type="text/css">
		body {
			font-family: "Arial", "メイリオ", "Meiryo", "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic Pro", "HiraKakuProN-W3", "Robot", sans-serif;
			font-size: 19px;
		}
	</style>
	<title>プログラミングを愛するムラタのHP</title>
	<!-- Global site tag (gtag.js) - Google Analytics -->
	<script async src="https://www.googletagmanager.com/gtag/js?id=UA-23505773-1"></script>
	<script>
		window.dataLayer = window.dataLayer || [];
		function gtag() { dataLayer.push(arguments); }
		gtag('js', new Date());

		gtag('config', 'UA-23505773-1');
	</script>
	<!-- MDB -->
	<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/mdb-ui-kit/3.10.2/mdb.min.js"></script>
	<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
	<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
	<style type="text/css">
		h2 {
			color: blue;
		}

		.study {
			color: firebrick;
			background-color: aqua;
			box-shadow: 2px 2px black;
			text-align:center;
		}

		.prof p {
			color: red;
		}

		.prog {
			color: gold;
			font-size: 20px;
			background-color: blue;
			line-height: 24px;
			padding-top: 4px;
			padding-bottom: 3px;
		}

		.date {
			/*color:white;*/
			font-weight: bold;
		}

		.sitemap a {
			color: red;
		}

		time {
			color: white;
			font-weight: bold;
			background-color: gray;
		}

		.update {
			font-weight: bold;
			background-color: white;
			width: 85px;
		}

		.pr {
			display: inline-block;
			background-color: ghostwhite;
			color: black;
			text-decoration: none;
			margin-bottom: 3px;
			box-shadow: 0 1px gray;
			margin-bottom: 5px;
		}

		.pl {
			display: inline-block;
			background-color: aqua;
			color: black;
			text-decoration: none;
			box-shadow: 0 1px pink;
		}

		.pr:hover {
			opacity: 0.7;
		}

		.pl:hover {
			opacity: 0.7;
		}

		.main {
			margin-bottom: 5px;
		}

		#profs {
			background-color: skyblue;
			display: inline;
		}

		h3 {
			background-color: gold;
			display: inline-block;
			padding: 1px 1px;
		}

		.back {
			display: inline-block;
			background-color: red;
			text-decoration: none;
			box-shadow: 3px 3px aqua;
		}

		@media(max-width:670px) {
			.back {
				width: 100px;

				.prog ul {
					text-align: left;
				}
			}

			.prog ul {
				text-align: center;
			}

			script {
				color: black;
			}

			p {
				font-family: Arial;
				font-weight: bold;
			}
	</style>
</head>

<body>
	<nav class="navbar navbar-expand-lg navbar-light bg-light">
		<div class="container-fluid">
			<ul class="navbar-nav">
				<!-- Dropdown -->
				<li class="nav-item dropdown">
					<a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" role="button"
						data-mdb-toggle="dropdown" aria-expanded="false">
						リンク集
					</a>
					<ul class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
						<li>
							<a class="dropdown-item" href="http://muratasvr2.net/kazunariwp/">もう一つのホームページ（another page）</a>
						</li>
						<li>
							<a class="dropdown-item"
								href="https://moneylands-baystars.jp/study-detail.html">プログラミング学習詳細（detail programming studying）</a>
						</li>
						<li>
							<a class="dropdown-item"
								href="https://moneylands-baystars.jp/programsource.html">ポートフォリオ（作成中）（portfolio）</a>
						</li>
					</ul>
				</li>
			</ul>
		</div>
	</nav>
	↑ポートフォリオなどのリンクはこちら
	<p></p>
	<!-- [FC2 Analyzer] http://analyzer.fc2.com/  -->
	<script language="javascript" src="http://analyzer54.fc2.com/ana/processor.php?uid=2645507"></script>
	<noscript>
		<div align="right"><img src="http://analyzer54.fc2.com/ana/icon.php?uid=2645507&ref=&href=&wid=0&hei=0&col=0" />
		</div>
	</noscript><!-- [FC2 Analyzer]  -->
	<div><br />
		<div style="text-align: center;"><img src="http://moneylands.web.fc2.com/redume.JPG" alt="" width="200"
				height="200" /></div>
		<p>&nbsp;</p>
		<div class="sitemap">
			<div align="center"><span size="3" style="font-size: medium;"><a
						href="http://moneylands-baystars.jp/sitemap.html">サイトマップ</a></span></div>
		</div>
		<div align="center">
			<script>// <![CDATA[
				in_uid = '259071';
				in_templateid = '15012';
				in_charset = 'Shift_JIS';
				in_group = 'mysite';
				in_matchurl = '';
				in_HBgColor = 'ECF8FF';
				in_HBorderColor = 'B4D0DC';
				in_HTitleColor = '0000CC';
				in_HTextColor = '6F6F6F';
				in_HUrlColor = '008000';
				frame_width = '240';
				frame_height = '240';
// ]]></script>
			<br />
			<div class="date">
				<div align="left">最終アクセス
					<script type="text/JavaScript">// <![CDATA[
now = new Date();
str = now.getFullYear()+"年";
str+= now.getMonth()+1+"月";
str+= now.getDate()+"日";
document.write(str);
// ]]></script>
				</div>
			</div>
			<br /> &nbsp;
			<div class="update" style="color: gold;">更新日</div>
			<time datetime="2023-07-11" itemprop="dateModified">2023-07-11</time> <br />
			<main>
				<h2>翻訳・プログラミングを愛する<span color="red" style="color: red;">ムラタのHP</span></h2>
				<h3>To love translation and programming for<span color="red" style="color: red;"> HP of Murata</span></h3>
				<br /><img class="main" src="computer_programming_man.png" alt="プログラミング" width="100"
					height="100" /><br><a class="btn pr" href="#profs">プロフィール</a><br> <a class="btn pl"
					href="#programming">プログラミング進捗</a><br /><br>
				<p>はじめまして。<br>訪問ありがとうございます。</p>
				<p>Nice to meet you.<br>Thnak you for visiting.</p>
				<p>このホームページでは、<br />私が翻訳やプログラミングを勉強している内容などを紹介します。</p>
				<p>In this homepage,<br />introduce about my study about translation and programming.</p>
				<p>私と同じように、翻訳やプログラミングを勉強している人やエンジニア・翻訳家を目指している人のための情報も載せています。</p>
				<p>And writing about information for same as me, studying translation and programming.</p>
				<br>
				<section>
					<div align="center">
						<h2 id="profs">プロフィール</h2>
					</div>
					&nbsp; <br />
					<div class="prof">
						<p>私は横浜市在住の村田と言います。精神障害があります。</p>
						<p>I live in Yokohama, I am Murata. I have mental disorder.</p>
						<p>年齢は30代です。</p>
						<p>I'm 30s.</p>
						<p>障害者手帳を取り、現在は特例子会社で仕事をしています。</p>
						<p>I took handicapped people's pocket book, and working for special subsidiary now.</p>
						<p>趣味は読書・英会話・プログラミング（下記）・翻訳、教会や合気道にも行っています。ボランティアでホームページの更新をしたことがあります。</p>
						<p>My hoby is reading books, english conversations, programming(write below) and translation. I go to church and "aikidou". I have joined volunteer to update company website. </div></p>
						<p>よろしくお願いします。</p>
						<p>Thank you.</p>
						<p>合気道については、<a href="https://moneylands-baystars.jp/aikido.html">合気道について（英語併記）</a>をご覧ください。</p>
						<p>賢者の贈り物、翻訳終了しました。→<a href="https://moneylands-baystars.jp/The_gift_of_the_magi.html">賢者の贈り物（英文＋訳）</a></p>
					</div>
					<br />
					<section>
						<h3 id="programming">プログラミング進捗など（About programming progress and others）</h3>
						<br />
						<div class="prog">簡単に自己紹介します。<br /> 現在やっていること（doing things）
							<ul>
								<li>英語・翻訳の学習、翻訳（グレート・ギャツビー、賢者の贈り物（終了）、ニュース）（translating）、ChatGPTの使い方習得（Udemy）</li>
								<li>プログラミング（動画学習サイト）（programming）</li>
							</ul>
						</div>
						<br /> 使っているサイト・言語（using languages, sites）<br /> <span style="background-color: orange;"><a
								href="http://moneylands.web.fc2.com/study-detail.html"
								title="プログラミング学習詳細">プログラミング学習詳細</a></span>をご覧ください。 詳細は下に！
					</section>
					<br />
					<h3>プログラミング学習進捗更新履歴（progress of programming history）</h3>
					<div class="study">
						<p>更新内容（）は更新日<br>
							ドットインストール 詳解JavaScriptオブジェクト編 #09 map()を使ってみよう 終了（4/23）、Techpit 「【はじめてのPHP】PHPでブログを作りながら、Webアプリケーション開発の基礎を学んでみよう」7-2 カテゴリーの追加 終了（5/4）、<u>Paiza Webアプリ開発入門 Laravel編 Laravel入門編４ 実用的なLaravelアプリを作ろう #04. お店とカテゴリのテーブルを関連付けよう 終了（7/11）</u>、Techpit Laravelで基本的なWebアプリを開発してみよう 5-4 データベースを操作する（2） 終了（6/23）<br>
						</p>
					</div>
					
					
					<p>「私はオリジナルアプリが作れて、翻訳が出来て嬉しいです！」</p>
					<br /><br>
			</main>
			<footer><a href="#top" class="back">一番上へ</a></footer><br />
			<address>Copyright(c)プログラミングを愛するムラタのＨＰ<br /> All rights reserved.</address>
		</div>
	</div>
</body>

</html>

自分で試したこと

divタグで指定しているが、その通りにならない。CSSの問題かもしれない。

2Answer

@nak435 posted at 2023-07-11

自分で作っているホームページですが、文字のレイアウトが全体的に左寄せになっている

見た目が分かりませんので、スクショを貼って欲しいです・・・

0Like

Comments

@kazunarigit
Questioner
2ヵ所です。一番下の戻るボタンと青背景の上の文章です。

@nak435

2箇所とも text-align: center;を追加しただけです。ご希望のレイアウトになっているでしょうか？

青背景の文字

	.prog {
		color: gold;
		font-size: 20px;
		background-color: blue;
		line-height: 24px;
		padding-top: 4px;
		padding-bottom: 3px;
+       text-align: center;
	}

一番下の戻るボタン（「一番上へ」ですか？）

-	<footer><a href="#top" class="back">一番上へ</a></footer><br />
+	<footer><div style="text-align: center;"><a href="#top" class="back">一番上へ</a></div></footer><br />

@nak435
（divタグの）align属性はHTML5で廃止されたので機能しない可能性があります。<div align="center">を<div style="text-align: center;">に書き換えることをお勧めします。
@kazunarigit
Questioner
ありがとうございました。修正したら、中央揃えになりました。divタグ無かったんですね。
align属性もtext-alignに変更しました。

一応、URLを。
http://moneylands-baystars.jp です。
@nak435

align属性もtext-alignに変更しました。
一応、URLを。
http://moneylands-baystars.jp です。

まだ数箇所<div align="center">残っています。

解決したなら、当Q&Aをクローズしてください。
@kazunarigit
Questioner
ありがとうございました。残っているものも修正しました。クローズさせていただきます。

@ORCHESTRA_TAPE posted at 2023-07-11

ホームページのコンテンツを中央揃えにするには、次の CSS ルールを <style> セクションに追加します。

body {
  text-align: center;
}

これにより、ページ全体のコンテンツが中央揃えになります。ただし、<p> タグなどの特定の要素を中央揃えから除外したい場合は、次のように CSS ルールを変更できます。

body {
  text-align: center;
}

body p {
  text-align: left;
}

この CSS コードを、HTML ドキュメントの <head> セクションの <style> タグ内に必ず追加してください。