タグ: text-align

[CSS]左寄せ・右寄せで横に並べます

　カミュプリィのホームページの上部にある『カミュプリィ』は左寄せ、『個人情報保護方針』は右寄せになっています。

HTML

<div class="top">

    <div class="commuply"><a href="./index.html">カミュプリィ</a></div>

    <div class="privacypolicy"><a href="./aboutus/privacypolicy.html">個人情報保護方針</a></div>

</div>

CSS

.top {

	display: flex;

	justify-content: space-between;

}



.top div {

	margin: 0 1rem; /* 外側の余白: 上下左右*/

	list-style: none;

	height: 2rem;

	line-height: 2rem;

	text-align: center; /* 文字の位置: 中央寄せ */

}



.top .commuply {

	text-align: left;

}



.top .privacypolicy {

	text-align: right;

}

2022/02/01

[CSS]タブのように等間隔で横並び

　カミュプリィのホームページの上部にある『ホーム』『ウェブ』『維持』『ついて』の４つのタブを等間隔で並べています。

HTML

	<div class="menu">

		<div class="current"><a href="./index.html">ホーム</a></div>

		<div><a href="./site-create/index.html">ウェブ</a></div>

		<div><a href="./system-keep/index.html">維持</a></div>

		<div><a href="./aboutus/index.html">ついて</a></div>

	</div>

CSS

.menu {

	display: flex;

	justify-content: space-between;

}



.menu div {

	list-style: none;

	width: 25%;

	height: 2rem;

	line-height: 2rem;

	text-align: center; /* 文字の位置: 中央寄せ */

	border: 1px solid white; /* 枠線 */

	background-color: #f7b977cc; /* 背景色 */

}



.menu div:hover {

	background-color: #f7b97777; /* 背景色 */

}



.menu a {

	display: block;

	color: black; /* 文字色 */

	text-decoration: none;

}



.current a {

	border: 2px solid; /* 枠線 */

	border-color: black white white black;

	background-color: #f7b977ff; /* 背景色 */

}

2022/02/01